Why MVVM in iOS

Pictorial representations of MVC and MVVM:

The Shortcoming of MVC:

The information in the model (model-data) needs to be presented to the user in the form of View. However, before the information is displayed, it needs to be transformed. In the MVC pattern, the model-data transformation usually occurs in the view controller. This makes the controller cluttered with too much information. Remember, the main purpose of the view controller is just to display selective model-data to the user. It does not necessarily need to be involved in the process of data transformation.

Let’s take an example here:

public struct Model {
    public let name: String
    public let description: String
    public let pricePerUnit: Float
    public let qty: Int
}

The Task:

Using the above model, we just need to display the name and price of the Product model in the View. Also, display the total price instead of the price per unit.

Approach 1:

The MVC way of achieving the above requirement is to implement the following code in the controller.

public class ViewController {
    public var model: Model
    @IBOutlet var productName: UILabel
    @IBOutlet var productPrice: UILabel
    public func viewDidLoad() {
        // Exposing the model object to controller is unnecessary
        // Instead reveal the relevant properties that needs to be    
        // displayed
        productName.text = model.name
        // Logical operation (not intended to be used in controller)
        productPrice.text = model.pricePerUnit * model.qty
    }
}

The MVVM way:

Approach 2:

The View Model in the MVVM pattern takes control of the data transformation part. It generally takes selective data from the model that needs to be transformed. Once it transforms the data, it then transfers data to the view controller, which in turn displays the data to the user in the form of View.

Let’s rewrite the above example:

The above ViewController can become less cluttered if we have another class called ViewModel to handle the data transformation step.

public class ViewModel {
    public let model: Model
    public let name: String
    public let totalPrice: Float
    public init(model: Model) {
        self.model = model
        name = model.name
        // Logical operation (intended to be performed in ViewModel 
        // class)
        totalPrice = model.pricePerUnit * model.qty
    }
}

Then our View Controller would look something like below (just interacting with view elements):

public class ViewController {
    public var viewModel: ViewModel
    @IBOutlet var productName: UILabel
    @IBOutlet var productPrice: UILabel
    public func viewDidLoad() {
        productName.text = viewModel.name
        productPrice.text = viewModel.totalPrice
    }
}

Conclusion:

There are two merits to the above solution:

1. We keep the data in the model abstract by hiding as much information as possible from the controller.
2. We keep the view controller as clean as possible.