MVVM Design pattern implementation

Updated 2 March 2021

Save

MVVM Design pattern in iOS

First of all, the MVVM design pattern stands for Model View and View Model. Suppose that you have taken two different views with a different User interface that need to be populated with data from the same model class. By using MVVM, you can use data from a single model class and represent it in a different way to populate a view.

Components overview with their roles:-

  1. Models – Model is simply a structure or class or entity of domain that represents your data. Suppose, if you are building a movie website, then your model might represent a Movie.
  2. Views – That is something you see on your screen means the UI elements you see on your screen.
  3. View Models – It obtains information from View Controller, manipulates all this information, and redirects back to VC.

So here how we structure our code and creates the required files in their respective groups. So we have created 4 new files one in each group (ViewController, Models, ViewModels, API Service).

1. Model:-

The model represents the simple data. You can simply say it’s a plain structure of data that we are expecting from our API.
You can search on the internet for dummy APIs for experiments.
We have taken this API –  http://dummy.restapiexample.com/api/v1/employees.
We can check the response of the above URL and create the model for the same.

2. ViewController:-

First of all the View controller will get called and from the view controller, we will call our ViewModel class.

3. ViewModel:-

ViewModel is the main component of this architecture pattern and never knows what the view is or what the view does. This makes this architecture more testable and removes complexity from the view. In the View Model, we will call our APIService class to fetch data from the server.

4. API Service:-

API Service class is a simple class where we are fetching employee data using URLSession or third party library class. You can use any networking model here to fetch data from your server. From our view model class, we will call the API Service class.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Here is the complete flow working:-

1. View controller will get called and the view will have a reference to the ViewModel.
2. The View will get some user action and the view will call ViewModel.
3. ViewModel will request APIService and APIService sends a response back to the ViewModel.
4. Once we receive a response, the View Model notifies the view.
5. The View will update the UI with data.

This is our expected output-

we have a view controller (UI) that needs to fetch data from the server(API) and need to display it in the UI.

 

Prons and cons:-

Prons:

1. Code reuse: In View-Model class we implement init, set up, and view presentation method, so we use this functionality in each new view controller.
2. Improved Testability: In MVVM we can make all classes separate so we can easily find an error.
3. Reduce code size.

Cons:

1. The MVVM Design pattern is basically used when we work on multiple views but not for a single view application.

Conclusion:

MVVM design patterns are useful for iOS app development. MVVM is a new abstract idea for a design pattern. The View Model is really nice and simple way of separating presentation logic into another entity which helps us to avoid Massive-View-Controller and keep things easier to control and covered with Unit Tests. That is where we go, simple and testable architecture.

 

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home