MVVM in iOS Application

Photo by Safar Safarov on Unsplash

Hello everyone in this article we are going to see how to implement MVVM in an iOS App. There are several design patterns like MVC,VIPER etc. We should not stick to one design pattern usage of design pattern depends upon the project. I the application is small scale then MVC can be used for large scale projects MVVM can be used as it can prevent the code getting messy as the project size increases.

MVVM Overview

What is MVVM

MVVM is an architectural pattern which separates Business logic or backend logic from User Interface. It has three components

• Model : It is similar to the Model in MVC. It stores the abstracts all the domain data which are used by the application.
• View : It represents the UserInterface through which user interact with the application.
• ViewModel : It is a model which is specifically designed for View. It can be used to define the properties to represent state of the view and methods which can implement the logic behind the View.

The data-binding between View and ViewModel can be implemented in various ways.

What we are going to build

We are going to build a simple app which fetches data from unofficial Detective Conan API which I made few years back. The application fetches the data and display them in a table view.

Application Flow goes like this

• The View receives the user action(In our case when user opens the app and viewDidLoad())
• The View will call ViewModel which will call API Service.
• API Service will fetch data from the API parse the JSON by using the Model and send it to ViewModel.
• The ViewModel will update the View by using Binding.

Creating the Model

The API returns an array JSON Objects in which each objects has the five properties.

So we will create a Swift Struct which represents a Single element in the JSON array which implements Decodable protocol is need for GET Request performing JSON Decoding. Which is then followed by another Struct which represents array of objects of former struct. This new Struct has an array represents the entire JSON Array returned by the API.

Creating the API Service

Here we create a Swift Class named API Service which has a function to perform HTTP GET Request retrieves the JSON response from the API’s /character end-point ,decode them by using API Service and send them back to the ViewModel by using a completion handler.

Creating the ViewModel

Next we need to create the ViewModel layer which interacts with model and has dat binding with View to modify the View. Create a Swift class named CharacterViewModel and add the following code.

Ok let’s break it down. First we create an object for API Service class and initialise it inside the constructor of this class. Then we have a method which actually tells the API Service class to perform HTTP GET Request and send the decoded JSON data via the completion handler. After receiving the decoded JSON data(which is actually an array of objects of type Character struct in Model) we assign it to a local variable.Then we create some methods which defines the properties View(UI). In our App we will use a UITableView hence we have methods which defines its properties such as number of rows in the tableview, actual content which is to be displayed in each cell(here it will be the character names returned by the API). Finally we bind our ViewModel with View by using a completion handler named onComplete().

Creating the View

Final step is to create the View(UI for the application). In our app we create UI programatically in ViewController.swift add the following code.

Here we create a table view programatically, add it to the UI and setup their data source and delegate methods for number of rows, actual content to be displayed on each cell. Then we get the data from the view model by using data-binding(in our case a completion handler) and update the View in main-thread.

Run the app in simulator or real device.

Do Follow Techiepedia for more Interesting write-ups!