In the last tutorial we covered the Model View Controller (MVC) design pattern in swift. Today we are going to look at the Model View View Model (MVVM), and how it works and why you would use it over MVC.

What is MVVM?

MVVM stands for Model-ViewModel-Model. The following diagram outlines how it works at a high level.

• The View is the actual view shown to the user. It contains UI elements and the like, but it does not have any information as to the values these views. It owns the View Model.
• The View Model contains the values of the elements in your view. It has no idea of the existence of the view. It owns the Model. Think of it as an interface update information to the view, it gets relevant information from the model, might manipulate it then finally the view will be updated.
• The Model is where your data lies. Things such as objects, network code, parsing code and so on reside here. The controller (View) has no connection to the Model.

So now we know what each is right?

Lets imagine you have a Dog class, it will create a Dog for you with 4 legs and will bark. This Dog is in the Model layer. You would then initialize this object with your View Model. Now imagine we have a View – this view needs to show information about different types of animals to the vet.

When you load the animal screen and it displays a animal the View goes to the View Model. The view model will then go to the Dog object in the Model and do any setup necessary. The view model will then return to the View anything it needs to know about the Dog, or any other animal. It could even be a Cat. Let’s take a look at how this would be used in code:

How MVVM is used

We have setup an app to show you this in action. We have a storyboard that shows the user the animal name and how many legs the animal has, it is a part of the View.

Connect the “Pet Name”, “0” and “Name Legs Description” label as outlets to your view controller as follows.

    @IBOutlet var petName: UILabel!
    @IBOutlet var petLegs: UILabel!
    @IBOutlet var petDesc: UILabel!

Now Go File–>New–>File and create two new Swift files names

Dog.swift
DogViewModel.swift

The Dog.swift is the Model,  it’s code is:

// Model
class Dog {
    var name: String
    var legs: Int
    
    init(dogname: String) {
        name = dogname
        legs = 4
    }
}

The DogViewModel.swift is the View Model, it’s code is:

// View Model
class DogViewModel {
    private var myDog: Dog
    
    init(name: String) {
        self.myDog = Dog(dogname: name)
    }
    
    var dogName: String {
        return myDog.name
    }
    
    var dogLegs: String {
        return "\(myDog.legs)"
    }
    
    var dogNameAndLegs: String {
        return "The Dog \(myDog.name) has \(myDog.legs) legs"
    }
    
}

And in the ViewController.swift which is the view, add the following code to viewDidLoad(). This will set the View based of the values in the View Model.

        let model = DogViewModel(name: "Fido")
        
        petName.text = model.dogLegs
        petLegs.text = model.dogLegs
        petDesc.text = model.dogNameAndLegs

Now you know what MVVM is and how to use it, you can begin to implement it in your app. When used properly it will reduce the amount of code that lives in your View Controller’s. As a result of this you can create unit test’s that are easy to run as they can be based on the View Model which has no View/User Interface Logic contained in it.