MVC,MVVM architecture in swift

In this article I am trying to show you some basics about MVC and MVVMarchitecture with example.

First let me start with MVC design pattern.

1. Model (M)M stands for Model and in design architecture Model is used to just represent the data.

2. View (V)
V stands for View. View is used to display the data (received from Model or ViewModel). So basically XIB,Storyboard acts as a View.

3. Controller (C)
C stands for Controller. Controller is mediator between View and Model/ViewModel, it receives structured data form the Model/ViewModel and passes that data to View to display it on screen.

Now let’s see it by very simple example.

In this example,

1. We are getting some data from our web server
2. Then pass that data (received from web server) to our model class
3. Then display that data (User’s list) using tableview

UserViewController.swift — Controller_image1

UserViewController.swift — Controller_image2

We are receiving some data from web server ( see Controller_image2) in Controller class and passes those data to our Model class ( see below Model_image3). And Model sends structured data back to controller.

UserInfo.swift- Model_image3

Then In tableview’s delegate method “cellForRowAt” we are passing particular userInfo object with its indexPath to display it to tableView’s cell. So here Controller is passing data to View to display it on screen.

UserInfoTbaleViewCell.swift — View_image4

UserInfoTableViewCell.swift class acts as a View in our project (see View_image4).

So we can see that in Controller class, we are receiving data from server and then pass that response to Model class and then Model class sends structured data to Controller class back. Then Controller class sends that structured data to View class to display it. So we can say that Controlleracts as mediator between Model and View class.

Another thing you might be noticed in MVC, View class is not just responsible to display data. it also performs some logic over the data and then display it. See below highlighted code implemented in UserInfoTbaleViewCell.swift — View_image4

var userInfo : UserInfo! {    didSet {           self.labelFname.text = userInfo.firstName ?? ""           self.labelLname.text = userInfo.lastName ?? ""           self.contentView.backgroundColor = (userInfo.isAdmin) ?   UIColor.red : UIColor.green          }}

you can see in above code, it first performs some logic (checking wether isAdmin property of userInfo is true or false ) for contentView’s background color and then accordingly it sets the background color.
So this is the main difference between MVC and MVVM, in MVVM “View class” is responsible for just displaying the data, it never performs any operation over data. To perform logic over data VM (View Model) class is there.

Now let’s see same example with MVVM Design pattern.

MVVM

In MVVM architecture, Model and Controller class are as same as in MVC.

While in MVVM one new class ViewModel is there, and there is a little change in View class.

Let’s see sequence of operations in MVVM

1. Controller class passes data (received from server) to Model class.
2. Model class returns structured data to Controller class.
3. Controller class passes structured data to ViewModel class.
4. ViewModel class performs logic over that data if needed and then sends back that final data to Controller class.
5. Controller class passes final data to View class and finally View class displays that data on the screen.

UserVIewModel.swift — ViewModel_image5

UserViewController.swift — Controller_image6

UserViewController.swift — Controller_image7

UserInfoTableViewCell.swift — View_image8

So this is the difference between MVC and MVVM. The example which I have used is so simple, in real you can have complex project. But in this article I have tried to demonstrate the difference between MVC and MVVM in a very simple way.

Each pattern has some pros and cons. So it is up to you which pattern you need to use as per requirement.