1️⃣Introduction to SwiftUI

Fall 2023 | Vin Bui

What is SwiftUI?

SwiftUI is a declarative framework that allows us to create the user interface in our apps. It was introduced back in 2019 as a replacement for UIKit. The best way to understand declarative UI is to compare it to imperative UI.

Imperative vs Declarative

If you are familiar with languages such as Java or C++, these are imperative languages. Imperative programming defines how tasks should be accomplished. For example, say we plan on cooking steak for dinner. The imperative approach would be:

1. Walk to the meat section in the grocery store.

2. Search for any piece of fine steak starting from the top shelf to the bottom.

3. Once found, check the price and weight.

4. Place it in our shopping cart if we are satisfied.

As we can see, these steps tell us how we should shop for a piece of steak once we enter the grocery store. Now, compare this to the declarative approach:

1. Search for any satisfactory piece of steak in the grocery store.

There is one single step and that step tells us what to do. In other words, declarative programming defines what tasks should be accomplished compared to **how. When we think about computation, the imperative paradigm defines the control flow and state changes whereas the declarative paradigm defines only the logic.

The Issue with Imperative UI

If you are familiar with creating an app using the UIKit framework, you can see why UIKit is an imperative approach to creating UI. If we have a UILabel, then to change the state of that label, we could modify the properties of that object (such as .text). State is just another way of saying “the values that we store in our code.” The problem with imperative UI is that we need to constantly keep track of the state of our code and ensure that our UI correctly reflects that state.

For example, we could have a UIButton that, when tapped, triggers a change in the state of a UILabel. If we were to introduce another UIButton or an additional UILabel, we would need to write code to ensure that all of these UI components properly reflect the current state. As we add more components to our app, we can see that things can get pretty complicated.

Declarative UI to the Rescue

With SwiftUI and its declarative approach, we can create a Text view that is associated with some state variable. When the value of this variable changes (in other words, there is a state change), all views that rely on that state is updated accordingly. Everything stays in sync and is handled automatically. We no longer have to update our views manually when data changes.

That is the beauty of SwiftUI. We told it what to show based on the current state and SwiftUI moves between user interface layouts for us. That is the declarative approach. We define rules that our views should follow and SwiftUI enforces those rules.

The Future of SwiftUI

SwiftUI is relatively new and is only available for iOS 13 and above. It is also a growing framework and there are still a lot of improvements that need to be made. If you are new to iOS development and are deciding to choose between SwiftUI and UIKit, then I recommend learning SwiftUI. However, although SwiftUI is the future, many apps are currently built in UIKit. UIKit will still be needed for a few more years, so it is important to know both.