Combine SwiftUI With Alamofire

Networking with declarative and reactive frameworks

Anupam Chugh
Nov 6 · 3 min read
Image by Sumanley xulx from Pixabay

Alongside SwiftUI, Apple introduced Combine, its own reactive programming framework, during WWDC 2019. It’s come out at a time when the RxSwift framework has already matured. Though one thing that does stand out in Combine is the support for back pressure.

The goal of this article is to connect Alamofire with SwiftUI while taking leverage of the Combine framework.

Before we mix the three elements to build a perfect recipe, let’s take a quick look at the Combine Framework.


What’s Combine?

Combine Framework brings functional, reactive, and declarative paradigms of programming into Apple’s ecosystem. At a high level, it consists of three core components:

ObservableObject and ObservedObject

ObservableObject protocol is a part of the Combine Framework. Classes that have properties that need to be observed by SwiftUI must conform to the ObservableObject protocol.

Properties need to be marked as @Published , basically, a property wrapper used to update views in SwiftUI based on value changes.

ObservedObject is used to bind ObservableObject instances to the View.

To sum up :

Now that we’ve got an idea of what the Combine Framework consists of, let’s bring Alamofire into the mix and build our cool iOS Application.


Final Destination

We’ll be developing a SwiftUI-based application that displays a list of jokes using the famous Chuck Norris API. Here’s an illustration of what we plan to achieve:

End Goal

Adding Alamofire Into Our Project

Launch a new Xcode, SwiftUI based project and add the Alamofire dependency. You can use Cocoapods, Swift Package Manager or Carthage, whichever works the best for you.

Once that’s done, simply import Alamofire into your Swift class.


Privacy Permissions

Ensure that you’ve added the App Transport Security in the info.plist file, as shown below, since we’re dealing with network requests.

Info.plist file

Setting Up Our Model Structure

Our model needs to implement the Identifable protocol for the list to identify each row as a unique one. In the following code, we simply store the string message and the id:

struct JokesData : Identifiable{public var id: Int
public var joke: String
}

Setting Up Our Observer Class

As discussed earlier, we need to conform to the ObservableObject in our class and set the property as Published for notifying updates to SwiftUI Views. The following code does that and adds the API responses to the model structure.


Building Our Content View

Finally, we set the published property from the ObservedObject onto the lists as shown in the below code:

struct ContentView: View {
@ObservedObject var observed = Observer()

var body: some View {
NavigationView{
List(observed.jokes){ i in
HStack{Text(i.joke)}
}.navigationBarItems(
trailing: Button(action: addJoke, label: { Text("Add") }))
.navigationBarTitle("SwiftUI Alamofire")
}
}

func addJoke(){
observed.getJokes(count: 1)
}
}

In the above code, we’ve also added a navigation bar button that updates the SwiftUI list for every new joke that’s received from the API response.

Live Previews of API responses.

Conclusion

Thanks to SwiftUI Previews, we no longer have to depend on simulators for simulating API requests and responses. It all happens in the preview itself. The full source code is available in this Github Repository.

That wraps up this piece. I hope you enjoyed reading and had a few good laughs as well.

Better Programming

Advice for programmers.

Anupam Chugh

Written by

I develop apps and write about them. Blogging weekly at iowncode.com

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade