Combine and SwiftUI

Why Combine framework is highly compatible with SwiftUI framework?

--

SwiftUI is an alternative to classic UIKit that allows developers to build their UI cross-platform using a declarative approach.

If you have already seen Combine code, you may notice that both Combine and SwiftUI share a declarative programming approach… but that’s not what makes them so… combinable!

The key feature of SwiftUI is the concept of Source of truth.

What does it mean? Basically, in SwiftUI your view is a function of your data and in your application you maintain a single copy of this data, the so-called “source of thruth”, to make your view update every time this data changes.

With this approach, you don’t have problems with having duplicate datas, problem that you will have using a UIViewController storing data in both ViewController and child View (as example), and you won’t even need a ViewController anymore, because your view is a direct function of your data!

Ok… and Combine? Why the source of truth is linked with Combine?

Let’s see an example:

Basic SwiftUI example

This is an example of a simple “Hello world!” View, the one you see when you create an empty project in SwiftUI, but there is something new: a State variable

State variable declaration

The @State annotation marks the variable as owned by the view and automatically creates a Publisher that can be accessed with $variable_name (in this case $number) that you can use to bind the view to the variable (source of truth) or use it in Combine style.

Example:

Simple timer usage

In this example, the view is reloaded every time the State var “seconds” changes, and it changes every time the timer publishes (so every second).

There are also other annotation connected with Combine like @Published and @ObservedObject that marks an ObservableObject. We could say that ObservableObject is a protocol that a class can conform to to make all its fields… observable. In other words, objects of that class are publishers itself. @Published annotation is used to make that class fields observable too. In this way observable objects will have observable properties.

But be careful: @ObservableObject, in contraposition to @State, marks a variable as NOT owned by the view, but is bonded to the original model, so it’s not duplicate!

To better understand this example, let’s look at an example application that uses Combine. This application simulates the process of adding persons to your contacts. You can find the example app project to this link: Combined

Open the Playground “Combine+SwiftUI” and take a look to the “ContentView” struct.

ContentView

As you can see, we have very simple UI elements, 2 state variables (name and surname) and one @ObservedObject variable, of type “PeopleViewModel”. Take a look to PeopleViewModel class now.

PeopleViewModel

…and to the Person class…

Person

Here you have PeopleViewModel a class that implements ObservableObject protocol and holds a @Published array of Person. In the init function of PeopleViewModel you can see that we created a subscription that prints us the last value that we add in people using the variable as a Publisher.

To see all the code used in this article, visit the following page:

Combine+SwiftUI.playground

If you want to explore other Combine’s topics, visit our repository on GitHub:

--

--