MVVM in SwiftUI

Apple announced SwiftUI at WWDC 2019. SwiftUI is a declarative framework for building applications for Apple devices. This means that instead of using Storyboards or programmatically generating your interface, you can use the simplicity of the SwiftUI framework.

SwiftUI does not follow MVC architecture. This means when you create a brand new application in Xcode 11 and enable SwiftUI, it does not create any controllers. This does not mean that you can’t use MVC design pattern with SwiftUI, it simply means maybe a different pattern (MVVM) can better suit your needs.

In this article, I will create a complete News App using SwiftUI and MVVM design pattern. This article is part of my new Udemy course on SwiftUI. You can check out the course below:

Implementation

We will be consuming the latest headlines from NewsAPI.org website. It is recommended that you register with NewsAPI.org website to obtain an API Key, which will be mandatory for making any requests to the service.

Webservice and Models

Before jumping into SwiftUI, let’s go ahead and create our Webservice which will be responsible for retrieving the latest news from the NewsAPI. The Webservice is implemented below:

The loadTopHeadlines function retrieves all the articles and populate the Article model. The Article and NewsResponse model are implemented below:

View Models

The models will get the data from the webservice and then hand it over the View Models which will be responsible for displaying it on the screen. The ArticleViewModel represents a single article which will be displayed in a cell contained in the List control. The implementation of ArticleViewModel is shown below:

The ArticleViewModel conforms to the Identifiable protocol since it has to supply data to the List. The List uses the id property to make sure that the contents of the list are unique.

Next, we will implement ArticleListViewModel. This view model is responsible for reflecting the contents of the entire screen. ArticleListViewModel will also utilize the Webservice and retrieve all recent articles.

There are couple of interesting things going on in ArticleListViewModel. First, you will notice that it conforms to the BindableObject protocol. This means that it can publish events to the subscribers and can be binded to views on the screen. The only requirement of BindableObject is to implement the didChange event. The didChange event will notify the subscribers of the new data that is available.

In the fetchTopHeadlines function we make a Webservice request to retrieve all the news articles. Once, we receive all the articles we assign to the articles property which has a didSet. This fires the didChange passing in the self which in this case is ArticleListViewModel.

Now, the only thing left to do is to make sure that the articles are displayed on the screen. Let’s see how SwiftUI can make this super easy!

SwiftUI

The declarative style provided by SwiftUI makes building the interface very easy. This is the complete code for SwiftUI (ContentView.swift).

The first thing to note over here is that the model is marked with @ObjectBinding. This means when the model is eventually set, after the asynchronous call, it will render the screen again by executing the body property. If you replace the @ObjectBinding with @State then will still work as expected. But the purpose of @State is different from @ObjectBinding, which will be explain the future. The screenshot below shows the app in action.

I really hope you liked the article. If you want to support my work then check out my latest course on SwiftUI below.

--

--

--

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Global Route Management in SwiftUI

An empty road

simple way for Localization in SwiftUI

Editing items in CoreData

Create a Swift Package and import it into an Xcode project locally

Material Design Button in SwiftUI

Using SwiftUI in production (Part 1)

UIKeyCommand — Part 3: macOS Catalyst Menu Items

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mohammad Azam

Mohammad Azam

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

More from Medium

Guide to manage secrets in SwiftUI app

New configuration file

Build your first WatchOS App with Swift — Counter App

Understanding @State and @Binding in SwiftUI

Swift + Combine: Getting Started