Should I Learn SwiftUI Or Storyboards

You’re looking to start developing iOS apps, but when you go to create a project, you’re faced with a choice.

Should you learn SwiftUI or Storyboards?

The quick answer is SwiftUI - however, the answer varies depending on your situation.

Let’s go over some of the different pros and cons of each of the user interface methods.

History

Storyboards are a part of the interface builder which was integrated into Xcode 4, released in March of 2011.

The idea behind the interface builder was to make it easier for developers to make user interfaces with drag and drop functionality.

The interface builder has faced criticism over the years for being difficult to manage changes. Storyboards are saved in a format that is not human-readable which makes it difficult to track changes over time. This is a huge con, especially for developers that work in teams.

The debate has gone on for years, building the user interface in code vs using storyboards. Tons of articles have been written on this topic.

As user interface patterns have developed and matured quickly in the web development world, iOS developers have been stuck with the same patterns. Declarative, component-based user interface frameworks are seen in web development frameworks such as React and Vue.

At Apple’s 2019 Worldwide Developers Conference (WWDC), SwiftUI was announced. This brought a declarative UI framework to Xcode.

Why SwiftUI

SwiftUI syntax is easy to read and natural to write.

SwiftUI is a declarative UI framework, but what does that mean?

Developers simply need to state what they want their user interface to do, similar to web development frameworks.

Imperative vs. Declarative

So what’s the difference between an imperative vs. declarative UI framework?

Let’s use an example from Apple’s WDDC - Avocado toast.

The imperative way of doing things goes something like this:

1. Prepare ingredients: avocado, bread, almond butter, sea salt, red pepper flakes
2. Gather equipment: toaster, plate, butter knife.
3. Lightly toast a slice of bread.
4. Place toast on a plate.
5. Spread a thin layer of almond butter over toast
6. Cut avocado in half on its longer axis.
7. Remove avocado core.
8. Slice single avocado half into half centimeter slices.
9. Place avocado slices with 50% overlap over toast
10. Apply three dashes of sea salt.
11. Apply five dashes of red pepper flakes.
12. Clean the toaster and butter knife.
13. Eat avocado toast.

The declarative (SwiftUI) of doing things is something like this:

1. “I’d like an avocado toast on charred sourdough with almond butter, sea salt, and red pepper flakes.”
2. “Oh, and cut it diagonally.”

See the difference?

Instead of building the view piece by piece, SwiftUI allows you to describe the view and the framework figures out the instructions.

This allows the code to be easier to read and write. It also comes with the bonus of better performance! SwiftUI will create your view in the most performant way possible.

SwiftUI is the shortest path to a great UI

Hot Reloading

Hot reloading is one of the best benefits of SwiftUI. It’s something I’ve wanted for a while in Xcode and was super excited to see it live.

Normally when you build user interfaces in Xcode using Storyboards (or code without SwiftUI) you have to compile and run your app to see changes.

This process can take a couple of seconds or a couple of minutes depending on the complexity of your iOS app.

Since you’re changing the UI many times throughout the life of the project, this can result in hours of time wasted staring at Xcode building.

It also makes it harder to collaborate in real-time with your designer, as changes just take longer to appear on-screen.

State Management And Binding

Another benefit of SwiftUI is the state management that is built-in.

Previously developers used frameworks such as RxSwift or ReSwift to achieve similar results.

SwiftUI comes with different tools to make data flow easier. These include:

• Property
• @Environment
• BindableObject
• @State
• @Binding

SwiftUI aims to make it easier for your app to have only one single source of truth.

Built-In Features

SwiftUI comes with many built-in features that used to be cumbersome to develop manually.

This includes dynamic type, dark mode and supporting right to left languages. These features come built-in with SwiftUI and are automatically created.

SwiftUI was designed so developers spend less time building basic features and more time building exciting, custom features.

Learn Once, Apply anywhere

SwiftUI was designed to work on multiple Apple platforms. This means you can apply the SwiftUI not only to iOS but tvOS, macOS and watchOS.

There’s even a project to bring SwiftUI to the web. It’s called SwiftWebUI.

Excited to see where SwiftUI will end up in a couple of years.

Cons Of SwiftUI

Of course, SwiftUI isn’t perfect.

There are still some bugs here and there that will frustrate developers.

The main con of SwiftUI is that it is very new. There are limited tutorials and references if you get stuck.

However, fundamentally, I don’t think this is a big issue. It will just take time for the SwiftUI community to develop.

And in the long run, I believe SwiftUI will overtake Storyboard and the old way of coding user interfaces.

There may be skeptics, but I think this is similar to Objective-C vs Swift.

For companies and apps that need to support iOS version 12 or older, SwiftUI is not a good choice.

SwiftUI only runs on iOS 13 or higher.

In a couple of years all iOS devices will likely be on iOS 13 or higher.

Why Storyboards

So if SwiftUI is the future, why learn Storyboards?

There are a couple of reasons I can think of.

The main reason is finding a job or working in an existing code base.

Certain companies have invested a lot of their code into Storyboards or .XIB files. If you’d like to work there, you’ll have to learn how to use Storyboards.

Another reason is that you’re a beginner just getting started. Storyboards are an easy way to dip your toe into iOS development.

They require less code and are visually satisfying.

However, if your user interface becomes too complicated, storyboards quickly become a pain to use.

Cons Of Storyboards

There are many cons to using storyboards. This is why I don’t recommend any new project use Storyboards.

Storyboards and the interface builder are hard to learn. There are so many tabs and buttons in the Interface Builder, it’s like learning Photoshop.

This makes it hard to train and hire developers.

Another problem is the code to storyboard interface. There are many instances where you’ll use a string match to connect your code to the storyboard.

If you misspell this string or use the wrong one, your app will crash at runtime!

This is a pretty bad developer experience.

Lastly, Storyboards changes cannot be easily tracked. Since Storyboards aren’t in human-readable code, it makes it very difficult to resolve merge conflicts.

This is especially painful if you have a large team of developers working on the same storyboard. Merge conflicts here are very difficult to resolve (I speak from experience!).

Should I Use SwiftUI Or Storyboards

For most new developers coding on iOS 13 or higher, you should learn SwiftUI.

If you need to maintain an older code base with Storyboards, you should learn Storyboards.