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
It is not possible to talk about SwiftUI and skim through the discussion of declarative vs imperative; so what’s the deal? Let’s first understand what the paradigms are and then compare some code to see some notable differences.
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
Imperative programming is a programming paradigm that uses statements that change a program’s state…. “Imperative programming focuses on describing how a program operates”.
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
As the tradition goes, one can not learn any new framework or programming language without creating Hello World app. In this section we will use this tradition to learn about the basic building blocks of SwiftUI. This will set the stage for advanced topics covered in next few posts as well.
For this application and throughout this series we are using Xcode 12.4.
Step 1. Create the project
For any Xcode user this is a familiar step where we choose the type of application and set the basic project parameters.
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
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
HelloSwifUIMain project and group — Typical Xcode project and file group for any projectHelloSwiftUIApp— Application entry pointContentView— 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.
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.
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
At this time if we hit run button and launch the app in iOS simulator we will see something similar to what’s shown in Fig 1.3. Notice how “Hello, world!” is beautifully centered and we rotate the simulator we can immediately start appreciating the power of SwiftUI as supports all interface orientation and flawlessly.
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
In this post we learned about SwiftUI and how its pure Swift declarative programming paradigm makes it so powerful and easy to use.
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?
In the next post, we will revisit the core components we briefly explored here and will also start exploring other building blocks and advanced Swift concepts like property wrappers and opaque types. This will establish and reinforce the foundational knowledge neccessary to fully understand how SwiftUI leverages these building blocks to enable declarative programming for interface building.
