How to Integrate Combine with SwiftUI And Make A Better Apps

SwiftUI and Combine, Apple’s latest frameworks, were the highlights of this year’s WWDC. The long-expected declarative UI, at last, became a reality, and this is truly an event of historic proportions in the world of iOS development. Its declarative approach stands contrary to an imperative one, that iOS developers, including us, were using before iOS 13. No wonder they are excited! It removes a lot of complications from the UI-building process. By presenting Combine Apple have made their first steps towards Functional Reactive Programming (FRP), that is expected to gain popularity in the upcoming years. Apple is making progress. For the end-users, it means that developers would sooner meet their requirements. But possibly the most useful effect can be produced from making Combine work along with SwiftUI to improve the development process with the help of relevant tutorials and consequently make better apps. SwiftUI Apple SwiftUI as a new way to build UIs for Apple platforms using the advantages of Swift. defines Another possible definition for SwiftUI is that it’s a framework for building UIs in a declarative programming style using Swift in the form of (DSL). Domain-specific language How SwiftUI simplifies UI building Today in the vast majority of cases UI building involves using an Interface Builder where you set UI components and their locations relative to each other. Then these components get using Outlets, Actions, etc. Thus, the user interface and its behavior are essentially created in two separate places, which in itself is not very convenient. attached to the code An alternative to this is making UI in code. Though at the moment this is an even more difficult task. For example, here’s what button building looks like: As you can see from a piece of code above, it takes to be aware of a lot of nuances: You have to set corner radius for a button on its CALayer, instead of a button itself. To set onclick event you need to create a selector, and in order to specify the function there, you set the attribute for a button. hello() @objc One more thing you have to be acquainted with is constraints creation. Along with all the difficulties, you can see the results only after launching an application. To compare, this is how you create a button in SwiftUI: The advantage of the declarative programming of SwiftUI is that you describe the desired result, as opposed to the imperative approach when you need to set the sequence of specific actions to obtain the wanted result. How SwiftUI works As mentioned above, SwiftUI uses . What exactly is Domain-specific language? It’s a so-called domain language that allows describing primitives of a certain particular domain on the basis of a high-level language (in our case it’s Swift). Then, with the help of these primitives, tasks specific to the subject area are solved. In essence, a new language is built on the basis of the old one. DSL In the example above, such primitives are Button and Text. In order for SwiftUI syntax to be as simple and straightforward as possible, some changes were introduced in Swift 5.1. Here are some of those changes: Function builders [SE-XXXX] Thanks to this addition, the syntax like this one became possible: HStack { Text ( "SwiftUI" ) Text ( "rocks" ) } class "hljs-function" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none;" class "hljs-title" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(28, 0, 207);" class "hljs-params" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(92, 38, 153);" class "hljs-string" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(196, 26, 22);" class "hljs-function" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none;" class "hljs-title" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(28, 0, 207);" class "hljs-params" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(92, 38, 153);" class "hljs-string" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(196, 26, 22);" Opaque return types [SE-0244] It allows you to return a protocol with associated type from a function and eliminates the need to explicitly specify generic parameters of the return type: body: some "hljs-keyword" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" var "hljs-type" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(92, 38, 153);" View "hljs-meta" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(28, 0, 207);" {...} Property wrappers [SE-0258] SwiftUI uses this to bind the object’s properties to View. Combine Apple Combine rather simply as a framework to customize the handling of asynchronous events by combining event-processing operators. describes What is behind this description When you begin to dig into Combine’s documentation and deal with such technical terms as Publisher, Subscriber, Operators, Cancellable, Scheduler, it immediately becomes clear that the Combine framework is basically an implementation of Apple’s functional reactive programming paradigm. (FRP) iOS programmers familiar with such libraries as and , immediately get why Combine was created in the first place and what tasks it was supposed to solve. Besides, with Combine, there’s no more need to use any third-party solutions. RxSwift ReactiveCocoa What tasks Combine solves FRP paradigm in general, and Combine in particular increases the level of code abstraction. It allows you to concentrate on events that determine the business logic of the application, instead of spending time on dealing with a large number of implementation details. All this allows reducing the amount of boilerplate code (DispatchQueues, Delegates, KVOs, Target-Actions and etc.). Benefits of using Combine framework: Simple asynchronous code. Multithreading is simplified. Composable components of business logic that can be easily combined into chains. Let’s say it is necessary for our application to execute 3 asynchronous requests at the same time, and get the execution result. We could use and to solve this complex task. It will require some boilerplate code to create a queue, group, add tasks to queue and subscribe to the callback. Things get a little more complicated if asynchronous tasks should return some kind of result. In this case, you’ll need to create instance variables and write and read values from there. DispatchGroup DispatchQueue This is how the solution looks like in Combine: Publishers. .sink { (intValue, stringValue, _) } Zip3( , , ) intAsyncTask stringAsyncTask voidAsyncTask class "hljs-selector-class" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(155, 112, 63);" class "hljs-keyword" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" in class "hljs-comment" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(0, 106, 0);" // tasks executions are finished The alternative is more concise. This is the declarative approach in action. You can focus on what you need to get, rather than burrowing into an abundance of implementation details. SwiftUI + Combine And now let’s see what happens if we use SwiftUI and Combine side by side. Consider a simple example of a username input form. Let’s define the ResetPasswordModel that has only one field taking the user’s input. class ResetPasswordModel : ObservableObject { @Published var email = } span "hljs-class" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none;" span "hljs-keyword" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" span "hljs-title" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(92, 38, 153);" span "hljs-type" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(92, 38, 153);" span "hljs-meta" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(28, 0, 207);" span "hljs-keyword" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" span "hljs-string" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(196, 26, 22);" "" conforms protocol, which means that the ’s fields can be used for SwiftUI’s bindings.The modifier creates a publisher for the email field, so now it is possible to observe the email property. ResetPasswordModel ObservableObject ResetPasswordModel @Published Second, let’s define the UI with SwiftUI. ResetPasswordView: View { @ObservedObject var model = var body : some View { Form { Section { } } } struct private class "hljs-selector-tag" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" ResetPasswordModel() class "hljs-selector-tag" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" class "hljs-selector-tag" "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(170, 13, 145);" TextField( , : $ . ) span class "hljs-string" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(196, 26, 22);" "Email" / span text span class "hljs-variable" style "-webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; box-sizing: border-box; outline: none; color: rgb(102, 102, 0);" model / span email The is a property delegate that creates a connection between the and the . View is notified when the data source is about to change and consequently re-render self. @ObservedObject View Model sign here is used to create a property wrapper that provides a two-way binding to data, so any changes to the value of will update the , and any changes to the will update email. $model.email – $ email TextField TextField Conclusion It seems that Apple has done a great job by providing us with instruments that make the UI building process more efficient. New SwiftUI’s declarative approach delivers a set of advantages including the increased speed of development, better integration between designers and coders, and the code quality enhancement. Use the combining effect of SwiftUI coupled with Combine to produce a well-structured, efficient and maintainable code. Written by Ruslan Krohalev and Kate Shokurova. Previously published at https://shakuro.com/blog/how-to-integrate-combine-with-swiftui-to-make-better-apps