Model-View-ViewModel (MVVM) is the design pattern that separates objects into three groups:
- Models: Models hold the application data. They’re usually structs or simple classes.
- Views: Views display the visual elements and controls on the screen. They’re actually the subclasses of UIView.
- View models: ViewModels are basically transformed model information into values that can be displayed on a view. They’re usually classes, so they can be passed around as references.
Introduction:
Some developers used an architectural pattern in iOS called MVC. Small projects work well with MVC, but when your project size starts increasing, it starts making your source code messy.
When Can We Use It?
Use this pattern when you need to transform models into another representation for a view. For example, you can use a view model to transform a Date into a date-formatted String, a Decimal into a currency-formatted String, or many other useful transformations.
This pattern compliments MVC especially well. Without view models, you’d likely put model-to-view transformation code in your view controller. However, view controllers are already doing quite a bit: handling viewDidLoad and other view lifecycle events, handling view callbacks via IBActions and several other tasks as well.
Let’s get started
In this project, we will build a simple application using the MVVM design pattern.
This is our expected output at the end of this article.
Here will be the dummy network service, publicly available over the internet.
https://jsonplaceholder.typicode.com/posts
This web service gives us the response of a list of users.
Components Overview
Model: This is the model, It’s the same model as in MVC. It is used by the VM and updates whenever VM sends new updates
View Controller: It actually performs things related to the UI — Show/get information. Part of the view layer
View Model: It receives the information from VC, handles all this information, and sends it back to VC.
Model:
The Model represents the data. It holds the data and has nothing with the business logic. You can simply say it’s a plain structure of data that we are expecting from our Network Service.
Application flow:
- View controller will be called and the view will have a reference to the ViewModel
- The View will get some user action and the view will call ViewModel
- ViewModel will request NetworkService and NetworkService sends a response back to the ViewModel
- Once we receive a response, ViewModel reload the view through binding
- The View will reload and update the UI with data
ViewModel:
ViewModel is actually the important component of this architecture pattern. ViewModel never knows what the view does.This makes this architecture more testable and removes complexity from the view.
In View Model, we will call our Network/APIService class to fetch data from the server
Network/Api Service:
Network Service class is a class where we are fetching user data. you can use any networking model here to fetch data from your server.
Binding Concept:
Binding actually plays a vital role in our project. This is for communicating between the view model and view controller.
End Conclusion:
Here, I tried my best to create this sample application of MVVM architecture in an easy and best way. I Hope this will be helpful. Thank you.
