Swift UI or StoryBoard??

Smriti Arora
Technology at Nineleaps
5 min readNov 9, 2021

--

Hi Readers… Today I’m here with a new genre of technical writing, ‘Comparison blogs. Presenting the: ‘This or that series’. This is going to be a series of articles in which we shall compare and contrast between parallel topics (like this one), mainly from iOS. First, we will try to understand both the topics one by one and at the end try to draw a conclusion out of the information.

Image source: https://www.google.com/url?sa=i&url=https%3A%2F%2Fgiphy.com%2Fexplore%2Flooking-left-and-right&psig=AOvVaw0FTYwxVzZbgdswCuJCXi41&ust=1636452358654000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCIDE8J7CiPQCFQAAAAAdAAAAABAD

Couldn’t think of a topic better than this one to kickstart this series. So let’s quickly dive-in onto Article 1 of the ‘This or That’ series: Swift UI vs Storyboard.

Storyboard

The storyboard is a part of interface builder which has been the most common way to create UI for iOS applications after its release with iOS 5. Any new iOS project has a Main.storyboard file by default.

Image source: https://developer.apple.com/library/archive/documentation/General/Conceptual/Devpedia-CocoaApp/Art/storyboard.jpg

“The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas to create a functioning user interface.”

This is what the apple documentation says about interface builder. A Storyboard in Xcode is a file which contains an empty canvas type screen. On it we can drag and drop all types of objects available in the object library of Xcode. We can create almost everything from controllers to text fields to images to table views to buttons, all this without writing even a single line of code. You can add controller screens like a table view controller, navigation controller, etc. by just a drag and drop from the object library. You can add segues and move through different screens. Even the smallest components like labels, image, textfields all of it can be dragged and dropped from the object library. Isn’t this just amazing?

Let’s go through some of its advantages first:

  1. It is easy to learn for even a beginner.
  2. With storyboard you can create a prototype of an app barely in an hour or two, which makes it easy to visualize the app without writing hundreds thousands line of code.
  3. The storyboard object library has a vast collection of objects.
  4. It also has a large community support network.

With great advantages, there are also some drawbacks with the storyboard:

  1. Source control is difficult, since the storyboard code is in an xml type format it is very difficult to resolve merge conflicts as you cannot completely understand the code.
  2. While creating the application UI you have to keep in mind the Autolayout issues that they should work with all the supporting device sizes, you need to separately check on all devices using the preview option or running the app on each device.
  3. As the number of screens keeps increasing the management of storyboards can become very chaotic and as it forms a complex web-like structure.

Swift UI

Swift UI was released with the release of iOS 13.

Image source: https://docs-assets.developer.apple.com/published/a151730046f7ac186031a760fe890b92/11800/overview-hero@2x.png

“SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs.”

This is what the apple documentation says about swift UI. Swift UI is basically a toolkit released by apple to create UI’s in a declarative way.

Advantages

  1. A single framework for multiple iOS platform apps (macOS, iOS, iPad apps).
  2. It offers an automatic live preview option which is like a hot reload that shows the changes made in the code immediately on view.
  3. There are no Autolayout issues as in the storyboard.
  4. It offers both drag and drop through the object library as well as writing code in file facility.
  5. The code is simple and clean.
  6. Swift UI view elements can be easily reused, by creating smaller module files.
  7. It gives way to reactive programming by providing bindable objects.
  8. You can also mix UIKit and SwiftUI by using UIHostingController.

Disadvantages

  1. It supports only iOS 13+ and Xcode 11+, so you cannot build lower version apps using this.
  2. It is still very new, there are not as many component options in the swift UI like in the storyboard object library. So you have to create custom views to fulfill requirements, eg: Search bar.
  3. It could be difficult for someone to switch from storyboard to swift UI as it is difficult to visualize the view hierarchy in the form of code.
  4. There is no direct way of migrating from storyboard to swift UI. This compels a developer to continue the use of the storyboard for existing apps and in lower versions.
  5. Since, it is very new so there is less community support which is not the case for storyboard.

Conclusion

After looking at the pros and cons of both Storyboard and SwiftUI, according to my opinion building app UI using storyboard is comparatively easier for a beginner, and has been there was a very long time, but there are some flaws with it and that flaws have been taken care of in Swift UI.

Swift UI also has its set of flaws, but it can be seen that those flaws can be overlooked in front of the advantages that it holds and also that Swift UI holds a lot of potential for the future. So in my opinion, you should definitely give Swift UI a shot, and learn and understand it. Because once you start with Swift UI there is no turning back, with the amount of features it is offering, I think it is definitely a promising UI development toolkit candidate for the future. ✨✨

You can also take a look at this Single view iOS application using swift UI, if you want a taste of swift UI application: iOS application using swiftUI github link.

That’s it for this article. I have tried to mention everything I knew about both the sides. I hope this article turns out to be helpful. Also do share any topics that you would want me to take up next in this series…

Please share your valuable feedback in the comments section, let’s grow together as a community 👭👫👫👭 and also give the article a Clap if it’s worth it!

Also, please stay tuned for other articles in this series!! ✨✨🎊🎊

--

--

Smriti Arora
Technology at Nineleaps

iOS developer, content creator, music enthusiast ✨✨💫💫