How to Use the MVVM Design Pattern in IOS
A design pattern is a way to write clean, organized code. It’s used across all domains within software engineering. A design pattern emphasizes reusability by providing a series of techniques for an engineer to tackle specific problems.
MVVM (Model View ViewModel)
MVVM stands for Model View ViewModel and is an architecture that has a simple logic using those 3 different objects:
· Model
· ViewController
· ViewModel
In the MVVM design pattern, the view and controller are closely coupled together and treated as one component. It can also be represented as UIView or UIViewController objects, accompanied by their .xib and. storyboard files.
Components
· Model: This is just a simple model that usually contains parsed data from a service response. This will be used only from the View Model.
· View Controller: It is responsible for setting up UI views. There is no direct interaction between the ViewController & Model. It should go through ViewModel and request what it requires in a ready-to-display format.
· View Model: The ViewController will send information to the View Model. The View Model will handle them and do all the business logic and provide the output back to the View Controller
Benefits of MVVM
· Enhanced Testability — View and Controllers are notoriously difficult to test thanks to their association with the view layer. By moving data manipulation to the ViewModel, MVVM makes the testing much easier. Unit testing of ViewModel is easy now, as it doesn’t have any reference to the object it’s maintained by. Similarly, testing of ViewController also becomes easy since it no longer depends on the Model.
· Transparent Communication — The ViewModel offers a transparent interface to the ViewController that it uses to interact with the model and view layers. This results in transparent communication between the layers of the applications.
MVVM is an excellent design pattern, which reduces the amount of code on Views and keeps the code clean, reusable, maintainable, and testable, no matter what programming language we are employing. Our mobile application developers love it since it enables us to offer our clients high-quality code.
Setup Project:
Before explaining the architecture, we need to set up our new project. Let’s call it SwiftMVVM.
Let’s see how to organize our folders. In our project it looks like this:
We will focus only on three folders for now. The Models, ViewControllers, and ViewModels. The other folders are only to create our API Manager that we need to call the service.
Model:
The model should be something simple without any business logic inside. In this example, this is the information that we need about a Tourist.
ViewModel:
This is the most important part of our architecture. This file should have access to the model and contain all the business logic, string concatenation, date formatted, etc. Let’s see how the code should look like:
As you can see in this viewmodel, we have created a function to call the TouristList API to get response from server and use a closure to return the response back to the ViewController(i.e., binding of data on view). As you can see, the ViewModel stores the Model (the ViewController should not know about that).
If you notice, we do not have any UI operations here. The ViewController should handle that. In this class you can add also other operations that you are doing with the model.
ViewController:
In the View Controller we need an UITableView with a cell to display an image, a title, and some other information of the Tourist.
As you can see, we only need to access ViewModel file and perform UI operations. The ViewController has no idea about how to call Api manager and services, that’s why it just “listens” to the ViewModel’s getTouristList method.
The View Controller does not have access to the model, so if you look at the UITableViewDelegate functions it will ask what it needs from the ViewModel. In this project we asked for the number of cell count and the information for a single Tourist to display in each row.
One of the biggest enhancements of MVVM is to move fetching as well as caching logic from the ViewController to the ViewModel. ViewController’s responsibility is only to show up and get details from the UI. We have implemented these points in the above code.
Result:
Finally, let’s see how our app will look like:
