1. What is SwiftUI?

It’s been a while since Apple announced SwiftUI during WWDC 2019 which by the way came as a pleasant surprise to a lot in the community. According to Apple’s description

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs.

There is a lot going on in this statement, let’s unpack and try to understand why SwiftUI is such an important milestone for development community.

Innovative and exceptionally simple; SwiftUI is a paradigm shift, a shift that is innovative because it finally brought declarative style of user interface development to native Apple platforms (more on this later). Exceptionally simple because it is declarative and makes it easier even for people who don’t have very sound knowledge of Swift programming language to understand SwiftUI code and contribute in app development projects.

Across all Apple platforms with the power of Swift; this is important to understand specially for developers who have been creating applications for all Apple platforms. We finally have a way to create user interfaces using pure Swift without the need of tools like Storyboard and Interface Builder yet stay compatible to all Apple platforms. This is powerful and will help developers enormously to bring new apps and capabilities across all Apple platforms.

Declarative vs Imperative

Declarative Programming is a style of building the structure and elements of computer programs that expresses the logic of a computation without describing its control flow

Listing 1.1 — SwiftUI Hello World (Declarative Style)

Imperative programming is a programming paradigm that uses statements that change a program’s state…. “Imperative programming focuses on describing how a program operates”.

Listing 1.2 — UIKit Hello World (Imperative Style)

For now, if we just ignore the syntax and API nuances (we will discuss all of this in great detail as we progress) we immediately notice the stark differences between the two paradigms; UIKit(imperative) and SwiftUI(declarative). Listing 1.1 is not only simple but it also has the desired state of user interface fully declared in pure swift all in oneplace without coding the way it was achieved. The Text (line 5) will always reflect the right value of the state variable name (line 2) without writing any lines of code unlike Listing 1.2 where at every step we manage the UI with statements scattered all across the View Controller.

Hold on on to this idea of getting to the final state without explicitly specifying how. This the key, this is the advantage and this is what makes SwiftUI so profoundly different from UIKit. Understanding this concept and differences between paradigms will help you take full advantage of SwiftUI specially if you are a developer coming from years of programming experience in imperative style of coding.

Hello SwiftUI — Let’s not break this tradition

For this application and throughout this series we are using Xcode 12.4.

Step 1. Create the project

Fig 1.1 — Select the app Life Cycle

The most important decision here is to select the app startup life cycle. As of writing these lines we can still chose between UIKit and SwiftUI as app startup life cycle. This selection here determines the type of startup artifacts Xcode will create for us. We will use SwiftUI Life Cycle throughout this series.

Step 2. Inspect The Content of the project

Fig 1.2 — Project Structure

If you are familiar with Xcode then there are no surprises here and if you are new to Xcode and need need some help in using Xcode then please refer to Appendix A

Let’s start from project navigator, Fig 1.2, and inspect the contents

  • HelloSwifUI Main project and group — Typical Xcode project and file group for any project
  • HelloSwiftUIApp — Application entry point
  • ContentView — Main View of the app

You might have already noticed that typical AppDelegate and SceneDelegate no longer exist in this startup flow. The three main components taht we need to understand are App, Scene and View.

Let’s start with App and see how the entry point works.

Listing 1.3 — App Entry Point

First thing we notice that HelloSwiftUIApp is declared as a struct that conforms to protocol App. Starting Swift 5.3 @main indicates the entry point of the app. Conforming to App protocol provides the necessary functionality to start the app. We will come back to this topic when we discuss app life cycle later in this series.

Next let’s focus on Scene protocol, Scene is the main components that contains the view hierarchy of our app. From the main app, we can either use standard Scene like WindowGroup or we can create our custom Scene by implementing the protocol.

Listing 1.4 — View

The next component is View, it represents any form of user interface in our SwiftUI Application. We can use the vast library of existing views or can create custom views by implementing this protocol.

Once these three elements (App, Scene and View) are in alignment our app is ready to launch.

Step 3. Run the App in Simulator

Fig 1.3 — HelloSwiftUI App in iOS Simulator

Readers of this series are encouraged to run this application on different devices/simulators like iPad and iPhone SE to fully observe and understand how very powerful SwiftUI is when it comes to laying out contents without explicitly writing code.

https://github.com/rkamran/SwiftUI

Summary

The important concept we learned is the way declarative style of programming in SwiftUI focusses on desired state of the UI instead of creating the complex flow to get to that desired state. We reinforced this concept by comparing a SwiftUI and UIKit versions of a simple application .

We also created a Hello SwiftUI App and started our journey to understanding the basic building blocks of SwiftUI namely App, Scene and View and how these components work together to create an app.

What’s Next?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store