4 Ways of UI Development in iOS

https://unsplash.com/photos/PP1yKpfA4HY

If you are already a mobile developer or going to become, you will surely know that one of the key points in mobile development is the user interface since it is the place where interactions between humans and applications occur. Hence, for each mobile developer, it is important to be aware of user interface builders of the specific platform he/she is working with.

In this article, we will discuss which types of user interface builders iOS development has and their main cons and pros.

iOS Development and Xcode provide 4 ways to create UI:

• Storyboard
• Programmatic way
• NIB
• SwiftUI

Here is a brief pros and cons list of iOS UI builders:

Created by me

1. Storyboard

This is a visual tool for laying out multiple application views and the transitions between them (segues).

Pros:

• As it is difficult, especially for newcomers, to visualize code and know how it will look like on real devices, Storyboard visualizes them in Interface Builder. Also, in the Storyboards, all view controllers are connected to each other with the help of segues which also helps visualize screen hierarchy.
• By watching its concept, you can assume that when Storyboard is loaded, all of its view controllers are instantiated immediately. Fortunately, this is just an abstraction, and, in the beginning, only the initial view controller is created. The rest of the view controllers are instantiated dynamically, either when a segue is performed or manually from code.
• Xcode gives us the opportunity to auto-layout Storyboard in an effortless way.

Cons:

• Storyboard is converted to a complex XML file to be saved in git, making it very difficult to reuse in other parts of the project and causing merge conflicts. So if you are working with a team using Storyboard, try to work in different files simultaneously or not use Storyboard as your UI creation tool.
• Storyboard only handles the flow between view controllers but not the flow of data: the latter should be done programmatically.

2. Custom coding (programmatically)

Here, no GUI(Graphical User Interface) tools are used, but rather, all custom positioning, animation, creation, etc. is handled programmatically.

Pros:

• Custom coding is very easy for parallel working, and we won’t have too many problems while resolving merge conflicts as the code is purely in Swift or Objective C.
• Before creating objects, Storyboard and Nib should be loaded and parsed, whereas with code we don’t have such steps because classes are already loaded and they just run and it saves time.
• In contrast to Storyboard and NIB, custom coding lets us do anything that can’t be done with the above-mentioned two tools.

Cons:

• In contrast to Storyboard, visualization is more difficult because we can only see the code and the final result only after compiling it.
• In contrast to Storyboard and NIB, where view is created in interface builder, during custom coding not only the controller but also the view part must be written programmatically, that is not an easy task.

3. NIB

Here, the UI is created with .xib files and each .xib file corresponds to a single view element and can be laid out in the Interface Builder, making it a visual tool as well.

Pros:

• This is very similar to XML in Android (Android Developers use “XML + Activity” and iOS Developers use “XIB + Controller”) so it is the easiest way for Android Developers to develop also in iOS.
• Compared to the other UI builders, NIB(NeXTSTEP Interface Builder) can have separate XIBs(Xcode Interface Builders) for different localizations such as languages and countries.
• NIBs are lazy-loaded so they don’t use memory until they have to.
• NIB’s visual tool helps you see what you are making.

Cons:

• You should avoid using NIBs for Views with dynamic content, where the layout changes significantly depending on content.
• Just like Storyboard, NIB is also very difficult to resolve merge conflicts and work in the same XIB file simultaneously.
• As NIBs are lazy-loaded, it is slower than creating views through code because the XIB needs to be read from the disk.
• Like Storyboard Nib is also converted to a complex XML file to be saved in git, making it very difficult to reuse in other parts of the project and causing merge conflicts.

4.SwiftUI

This is the latest technology for creating UI. It differs from others by letting the user create UI both in programmatic and visual ways simultaneously.

Pros:

• SwiftUI is an upgraded version of Programmatic Type.
• It lets you ignore Interface Builder (IB) and storyboards and uses the power of Swift to build exceptionally simple user interfaces across all Apple platforms.
• Thanks to Previews, it’s now possible in Swift to immediately see the changes without recompiling the whole project after each change.
• We no longer have to argue about programmatic or storyboard-based design because SwiftUI provides us with both.
• We also don’t have to worry about creating source control problems when committing user interface work because the code is much easier to read and manage than the storyboard XML.
• SwiftUI excludes calls of functions that don’t exist because our user interface gets checked by the Swift compiler.

Cons:

• Swift UI apps run only on iOS 13 and above.
• Swift UI doesn’t have all the controls yet.

From all characteristics discussed above, we can conclude that Storyboard is much better to use for small applications with medium amounts of screens.

On the other hand, a programmatic way is better for dynamic layouts where view elements are moved around, and the flow or the layout adjusts significantly based on content.

If you have reusable views in different projects, then I would recommend using NIBs.

SwiftUI has all prerequisites to be the winner among all the other UI builders when it starts supporting all OS versions and adds all controls that are missing.

Thanks for reading, see you soon.