MVVM in SwiftUI

In this blog, we will create a project with SwiftUI and MVVM design. If you want to know about the basic part of SwiftUI you can refer here.

It is a declarative framework for building applications for iOS devices. This means that instead of using Storyboards or programmatically generating your interface, we can use the simplicity of the SwiftUI framework.

It is a cross-platform that works across iOS, macOS, tvOS, and watchOS and lets you replace Interface Builder (IB) and storyboards.

IB and Xcode were separate apps before Xcode 4, and the seams still show every time you edit the name of an IBAction or IBOutlet or delete it from your code, and your app crashes because IB doesn’t see code changes. SwiftUI also works with UIKit — like Swift and Objective-C.

It does not follow the MVC pattern means when you create a new application in Xcode,  it does not create any controllers.

But this does not mean that you can’t use the MVC with it,  but MVVM suits more with it.

Building an App with MVVM

Let’s explore the MVVM with iOS app architecture by building a simple Country Detail App.

Network Manager & Models

Create the network manager which will help to retrieve the response from the API. The Network Manager is implemented  as given below:

The callingHttpRequest function call all response from API. We have also used NSCache to store the image in the cache.

Now we will work with the model and let’s create the CountryData and CountryModel as:

The CountryModels will get the data from the Network Manager. Then hand over it to the View Models which is responsible for creating the logic and tricks.

View Models

It is responsible to create the transformation of data from the model to view and vice versa and reflecting the contents of the entire screen.

Open ViewModelData.swift and add:

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

We have conforms to the ObservableObject protocol. This means that it can publish events to the subscribers and can be bound to views on the screen.

The Combine’s way of making a model observable is by conforming to the ObservableObject protocol. To bind image updates to a view, we add the @Published property wrapper as:

The purpose of the view is to display an image provided with its URL. It depends on ImageViewer which fetches an image from the network and emits image updates via a Combine publisher.

View (SwiftUI)

We bind AsyncNewImage to image updates by the @StateObject property wrapper. It will automatically rebuild the view every time the image is changed or updated as:

Lastly, to test our component, add the following code to ContentView:

The model is marked with @ObservedObject which means when the model is eventually set, after the asynchronous call, it will render the screen again by executing the body property.

Build and run the project. Everything should work as expected! Congratulations on creating your SwiftUI app with MVVM! :]

. . . . . . . . . . . . . . . .

Thanks for reading, I hope this blog will help you.