An introduction and architecture overview of SwiftUI

Want to get started with SwiftUI? This blog will provide insights and learnings on almost everything you need to know to start, including:

• Declarative UI Pattern: Motivation behind SwiftUI
• SwiftUI Architecture
• Behind the Scenes of a basic SwiftUI project

The rise of Declarative UI patterns

Declarative programming instructs a program on what action is needed, compared to Imperative programming that instructs a program on exactly how this action should be executed.

In Declarative paradigm: A student goes to school.
In Imperative paradigm: A student will go to school if he can catch the bus or train. If he fails to catch a bus, then he goes by train. He goes to school because it is good for his personal development. He goes there if there is not a holiday.

A Declarative programming approach involves providing a domain-specific language (DSL) for expressing what the user wants. This DSL shields users from messy low-level constructs while still achieving the desired end-state.

Still confused?
Let us look at an example to understand better:

Consider an application with a textfield to accept username and two buttons — Submit & Cancel. The Submit button should only be enabled when the username isn’t empty. When the user clicks the Submit button, it should persist the user info in the database and show a welcome message to the user. In case the user adds a username but chooses to dimiss, an alert should be shown to the user stating your changes will be lost. If no username is added by the user, then it should just close the application.

Imperative approach:

1. Add a textfield and two buttons and set layout constraints for all the elements.
2. Add event handler for the buttons.
   For Submit:
   a. Handle explicit enabling or disabling button depending on the input provided in the textfield.
   b. Add event handler to show a new view with a welcome message to the user. Make sure to pass the username along to be included in the message.
   For Dismiss:
   a. Handle explicit enabling or disabling button depending on the input provided in the textfield.
   b. Add event handler to check if the user has provided a username, then show a new view or dimiss the screen.

Declarative approach:

1. Developer needs to define a textfield and two buttons.
2. A state for the username, which can be passed on as a binding to the dependent child views. If the user changes the value in the textfield, the welcome message will automatically get refreshed with the new username.
3. Define properties for the buttons
   For Submit:
   a. isEnabled: Depending on this property, the decalarative framework will take care of setting the enable/disable state of button.
   b. shouldDisplayWelcomeMessage: The framework will make use of this property, to display the welcome message screen.
   For Dismiss:
   a. isEnabled: Depending on this property the decalarative framework will take care of setting the enable/disable state of button.
   b. shouldDisplayConfirmationAlert: The framework will make use of this property to display the alert message to the user.

To summarize, when the state of your app changes (for example, the user enters the username) the state changes and triggers a redraw of the user interface. There is no imperative changing of the UI itself (like a textFieldView.text = “Jack”).

SwiftUI is Apple’s step into this scene with their own, completely native declarative UI framework.

SwiftUI:

SwiftUI was the biggest thing announced in WWDC 2019 in iOS13. It is a new and simple way to build app UIs declaratively. It offers a very lean and easy to read and write syntax for building user interfaces.

In nutshell,

• SwiftUI is a declarative, state-driven framework.
• SwiftUI defines the views in code with a declarative syntax, replacing Storyboards altogether.
• The interface is declared in the definition of a structure, one view at a time.
• The compiler takes care of generating all the code necessary to display it on the screen and adapt it to every device.
• We declare exactly what we need and compiler takes care of the rest.

SwiftUI Architecture:

Behind a completed SwiftUI application are multiple components which are assembled in a hierarchical manner. Before starting with creating even a basic SwiftUI project, let’s review how SwiftUI applications are structured.

Structure of a SwiftUI App:

App Structure:
App structure is responsible for handling the launch and lifecycle of each instance of the application.
Each SwiftUI application has only one main app structure.
This is the entry point. The app structure is responsible for the start up of the app.

Scene:
App structure can be made up of one or more scenes.
A scene represents a part of the application’s user interface that has a life cycle managed by the system.
App structure presents the scenes it contains, while each scene acts as the root element of a View Heierarchy.

View:
The application’s user interface is built by combining and nesting views.
Views can be individual visual elements such as text views or buttons, or take the form of containers that manage other views.
In addition to the views provided with SwiftUI, you will also create custom views when developing SwiftUI applications.

To Summarize:

SwiftUI is a declarative, state-driven framework. With SwiftUI, the UI is a function of the state. You provide it with the input (state) — it draws the output.
Any SwiftUI application is structured with some building blocks that are app structure, scene and view.
An app structure describes the content and behavior of your app, and each SwiftUI app has one main app structure. A scene contains the view hierarchy of your app. A view is the basic building block of a SwiftUI application. It makes up the visual elements of the user interface.

Where to go from here:
This blog covered the introduction to SwiftUI and it’s architecture. This is an important part of developing a basic understanding of SwiftUI, before diving further into the SwiftUI developement.

With this understanding, we can now think about:

• A small use case that can be converted to an interesting application powered with SwiftUI
• Design the application
• Develop the application with SwiftUI
• Manange the state around the application to react to various internal and external events.

Curious? Planning to cover these in my next blog. Please visit soon !