Get Started With SwiftUI: Apple’s New UI Framework

Last June, Apple announced its new declarative framework for building User Interfaces (UIs) on Apple platforms, called SwiftUI. In September 2019, iOS 13 was released to the public, which included this new SwiftUI framework.

What’s so magical about SwiftUI? In this article, we’ll discuss what SwiftUI means for app development and how it affects developers and product managers. How do you get started with SwiftUI? What are some of its benefits and disadvantages? Questions like those, and more, is what we’ll focus on.

What Is SwiftUI?

SwiftUI is a completely new approach to building User Interfaces (UIs) for Apple platforms. You can code your UIs (and their behavior) for iOS, macOS, tvOS and watchOS directly with the Swift programming language. This happens in a declarative fashion — but more on that later.

Before SwiftUI, you’d build UIs for iOS apps with Interface Builder and Storyboards in Xcode. There you’d essentially drag a bunch of UI elements to the screen and connect them with code. Standardized UI elements, such as table views, navigation, map views and buttons could be customized to fit a developer’s preferences. Building UIs with Interface Builder was effective, but not ideal.

Since iOS 13, developers can choose to build their UIs with SwiftUI. The framework uses a different approach: you can build a UI completely with Swift code.

Here’s an example:

struct ContentView : View {
      var body: some View {
           VStack(alignment: .leading) {
               Text("Jane Appleseed")
                        .font(.title)
        HStack {
            Text("Product developer at Acme Inc.")
                .font(.subheadline)
            Spacer()
            Text("+1-123-4567-890")
                .font(.subheadline)
           }
      }
       .padding()
    }

}

In the above code, we’ve defined a so-called “struct.” This struct contains information about the User Interface, called a view. For example, this UI consists of a title text with two subtitles below it.

The approach SwiftUI uses is called declarative programming. An app’s code is usually imperative: do this, do that. With SwiftUI, you merely declare what the desired end result is (called state). The framework can then figure out how to get to that result.

In SwiftUI, a view is a function of its state — it’s not just a sequence of events. App platforms like React Native and Flutter already use declarative UI. Web developers have been using declarative code for ages, with HTML and CSS.

How to get started with SwiftUI

You can get started with SwiftUI today. The framework has been shipped with iOS 13 and Xcode 11, and we’re already seeing apps (partially) built with SwiftUI pop up in the App Store.

If you’re new to iOS or Apple platforms, a smart way to get started is to learn Swift. Swift is the powerful programming language that powers Apple’s app platforms, and it’s also the language we use for SwiftUI. If you’ve already got experience with HTML, CSS, JavaScript, React Native or Flutter – even better!

You’ll need a few things before you get started:

•	A Mac or computer with macOS, ideally macOS Mojave (10.14) or Catalina (10.15)

•	Xcode 11, which you can download from the Mac App Store or directly here

•	An Apple ID, and an hour or two of spare time

A great resource to use as a springboard are Apple’s official tutorials for SwiftUI. They’ll guide you through core principles and concepts, as well as helping you write your first few SwiftUI views. It’s a good place to start, especially if you’re already familiar with app development. The tutorials touch upon many foundational topics such as lists, navigation and user interaction.

Quick Tip: With Xcode 11 on macOS Catalina you can use Live Previews of your SwiftUI views. This greatly increases productivity, because you can see the changes you’ve made to a view without needing to recompile your app.

Benefits and disadvantages of SwiftUI

SwiftUI is new technology, and that means it’s exciting and refreshing, but it also comes with a few warning labels. What are the pros and cons of working with SwiftUI?

First and foremost, SwiftUI can only be used from iOS 13 and up. Given that most apps these days need to be backward compatible one or two versions (i.e. iOS 12 and 11), you won’t see many apps completely built with SwiftUI yet.

SwiftUI alleviates this issue by integrating seamlessly with apps that are built with Interface Builder (UIKit, Storyboards, etc.). You can use SwiftUI views in Storyboard-based UIs, and vice versa. This is a great help in slowly transitioning an app to SwiftUI.

Another benefit of SwiftUI focuses entirely on the workflow of developers. Up until now, UIs for apps were built with Interface Builder. Internally, Interface Builder uses an XML-based file format. Two developers working on the same UI is likely to lead to so-called merge conflicts, because of the structure of this Interface Builder XML file. Because SwiftUI is entirely comprised of Swift code, merge conflicts are less likely to occur, and easier to solve. This leads to better developer productivity.

If we look at the adoption and evolution of the Swift programming language itself, we see that the language has matured in the past 5 years. In fact, Swift itself was introduced in 2014, so the language isn’t that old, relatively. It’s likely that we’ll see the same adoption trajectory with SwiftUI.

In the next year or so, SwiftUI will be put to the test by developers, and that leads to insights about how to make the framework better. Given the praise SwiftUI has received so far, it’s not unlikely that, in a year or two, developers will move over to SwiftUI completely.

Does this mean that, if you’re starting with iOS development today, you should only learn to work with SwiftUI? Probably not. Storyboard-based UIs will remain relevant in the near future, and just as Objective-C is still relevant for many apps, Interface Builder and UIKit will remain relevant next to SwiftUI.

What’s next?

Now that you know about SwiftUI, what’s next for you? Let’s discuss a few alternatives.

If you’re a developer working in the Apple ecosystem (iOS, macOS, tvOS, watchOS) then getting started with mastering SwiftUI is a smart idea. SwiftUI is exciting to work with, but it’s also slated to become the default approach for building UIs. Adopting SwiftUI in your work is a smart career choice.

If you’re a product manager or coordinator of a development team, it’s smart to find out whether SwiftUI is suitable for your product or team. Considering that SwiftUI has a few benefits over Storyboard-based UIs, it’s worth testing how SwiftUI works for you.

Testing, experimenting, finding out what works — that’s always a great idea, especially with new technology. Good luck!

About the author

Reinder de Vries is a professional iOS developer. He teaches app developers how to build their own apps at LearnAppMaking.com, and he’s the sole developer of Crest. Since 2009 he has developed a few dozen apps for iOS, worked for global brands and lead development at several startups. When he’s not coding, he enjoys strong espresso and traveling.