Kazuya Matsumoto

Posted on Jun 29, 2020

Get hands-on with the Cocoa MVC pattern

#swift #ios #mvc #architecture

Introduction

In this article, I will discuss the Cocoa MVC pattern, which is probably the most commonly used pattern in iOS app implementation.

Although there are various software architectures such as clean architecture, I think Cocoa MVC pattern is the best for building applications in Swift iOS Storyboard based app, unless you want to use it on a large scale.

When you read about software architecture in books, you feel understand, but it's often difficult to implement in real applications.

So, this time, I will try to explain it by implementing a very simple application.
Please take a little time to read it as you move through it with your hands.

Get an idea of the Cococa MVC pattern

It's not very efficient to learn Cocoa MVC without knowing anything about it, so you should get a feel for it first.

We'll review it after implementations, so it's fine if you only have a basic understanding of what it is at this point.

The MVC pattern stands for Model-View-Controller Pattern, and as the name implies, it divides the code in your application into three roles: Model, View, and Controller.

Model

The Model is responsible for maintaining and processing data. For example, connecting with network, calculating something, save data to a local storage...etc.
Everything other than View and Controller is included in Model.

You should be careful about that Model is different from Model, which represents a table in the SQL database in the framework, in web frame work like Ruby on Rails.

Also, if the Model changes the data it holds, it will notify the Controller that subscribes to the Model of the change.

View

The View is responsible for drawing the screen.
In order to increase reusability, it is important to design View so that it receives input and draws it as it is, without logic as much as possible.

Controller

The Controller has references to the Model and View and monitors changes to the Model.
The Controller receives the user's input, requests the Model to process it, and updates the drawing of the View when it detects changes to the Model.

These can be summarized as follows

Name	Role
Model	Processing and holding data
View	Drawing View
Controller	Accept User input and connect View and Model

A very important point here is that the Controller acts as a bridge between the View and the Model, so that the View and the Model are completely independent of anything else.
By doing so, the View and the Model can be reused in a variety of ways.
On the contrary, Controllers are highly dependent on specific Views and Models, and Cocoa MVC is
design takes reusability of the View and Model to the extreme, at the expense of reusability of the Controller.

The entire process, from user input to screen drawing, looks like the following

[Controller] Accept a user's input.
[Controller] Request Model to process data.
[Model] Process data.
[Model] Notify changes to a subscribing Controller.
[Controller] Detect changes in the Model.
[Controller] Request View to draw.
[View] Draw on the screen.

Now that we've gotten the general idea up to this point, let's move on to the next section, where we'll actually start implementing the code!

Write Cocoa MVC by yourself

This app is a simple counter application that allows you to increase or decrease numbers with the + and - buttons.

Let's implement this project using the Cocoa MVC pattern.
You can create a project from scratch, or you can clone it and start with EN/Starter, as I've prepared the initial and final state of the project.
https://github.com/kazuooooo/CocoaMVCFromScratch

Implementing the CounterModel.

First, let's start by implementing the MVC M, the Model, the CounterModel.
As mentioned earlier, the role of the Model is to hold and process data.
So required them

Keeps how much the number is now (data retention)
Increase/decrease the number (data processing)
Notify the controller monitoring the Model of the change

import Foundation
class CounterModel {
    static let notificationName = " CounterModelChanged"

    let notificationCenter = NotificationCenter()
    // Retain how much the number is now (data retention)
    internal var count: Int = 0 {
        didSet {
            // Notify the controller monitoring the Model of the change
            notificationCenter.post(
                name: .init(rawValue: CounterModel. notificationName),
                object: count
            )
        }
    }
    // Retain how much the number is now (data retention)
    func countUp(){ count += 1 }
    func countDown(){ count -= 1 }
}

Implementing CounterView.

The next step is to implement CounterView, the V in MVC.
The role of the View is to render.
CountView is responsible for rendering the countLabel through the method render.

import Foundation
import UIKit

class CounterView: UIView {

    @IBOutlet weak var countLabel: UILabel!
    public func render(count: Int){
        countLabel.text = String(count)
    }
}

Then create the actual screen in StoryBoard. (If you're using a starter, it will be created in advance.)

Don't forget the Count Label is connected with an IBOutlet and the CounterView is set to the Custom View.

Implementing CounterViewController.

Finally, we implement the MVC C, CounterViewController.

In order to bridge the gap between the View and the Model,
Controller needs

Monitor Model changes
Accepts user input and asks the Model to process it
Request the View to draw when the Model is changed.

The source is below

import UIKit

class CounterViewController: UIViewController {
    // Keep the View and Model references.
    @IBOutlet var counterView: CounterView!
    private(set) lazy var counterModel = CounterModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Monitor changes to the Model
        counterModel.notificationCenter.addObserver (
            self,
            selector: #selector(self.handleCountChange (_:))),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName))), object: nil
        )
    }

    // Detects changes.
    @objc func handleCountChange(_ notification: Notification) {
        if let count = notification.object as? Int {
            // requesting the drawing process to the View
            counterView.render(count: count)
        }
    }

    // Accepting input.
    @IBAction func OnPlusButtonTapped(_ sender: Any ) {
        // Ask the Model to do something.
        counterModel.countUp()
    }

    @IBAction func OnMinusButtonTapped(_ sender: Any) {
        counterModel.countDown()
    }
}

Here, too, don't forget to connect button to an IBAction and set up the ViewController class.

Now, the implementation is complete.
Try a Run and see if the +/- buttons work properly!

Review the pattern again

The implementation is complete, but it still doesn't feel like it's just a sutra, and it doesn't feel right somehow, does it?
Finally, let's go over the big picture again, looking at the code.
This will give you a better understanding.

Look at dependencies.

First, let's go over the code again, looking at this diagram we saw earlier about dependencies !

If you look at the code in the Controller, you can see that the CounterViewController has CounterView and CounterModel references and monitor changes of CounterModel.

class CounterViewController: UIViewController {
    // Has CounterView and CounterModel references
    @IBOutlet var counterView: CounterView!
    private(set) lazy var counterModel = CounterModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Monitor model's change
        counterModel.notificationCenter.addObserver(
            self,
            selector: #selector(self.handleCountChange(_:)),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName)), object: nil
        )
    }
...
}

Also, be sure to check the code to see that the View and Model are completely independent of the Controller, which only accepts processing and can be reused.

Check process flow

Finally, we will check the whole process flow by looking at the diagram and code, using the + button as an example.

1. Accept a user’s input.

At first, Counter View Controller accepts input via OnPlusButtonTapped method.

// Accept input
@IBAction func OnPlusButtonTapped(_ sender: Any) {
    ...
}

2. Request Model to process data

Secondly, the Controller requests Counter Model to count up

// Accept input
@IBAction func OnPlusButtonTapped(_ sender: Any) {
    // Request model to process
    counterModel.countUp()
}

3. Process data

Thirdly, CounterModel count up the count.

class CounterModel {
    ...
    // Count up count
    func countUp(){ count += 1 }
    ...
}

4. Notify changes

After process data, Model notify changes to subscribers.

class CounterModel {
    ...
    internal var count: Int = 0 {
        didSet {
            // Notify changes to subscribers
            notificationCenter.post(
                name: .init(rawValue: CounterModel.notificationName),
                object: count
            )
        }
    }
    ...
}

5. Detect model's change

Controller detects model's change via the notification observer.

class CounterViewController: UIViewController {
    override func viewDidLoad() {
        ...
        // Monitor model's change
        counterModel.notificationCenter.addObserver(
            self,
            selector: #selector(self.handleCountChange(_:)),
            name: .init(NSNotification.Name(rawValue: CounterModel.notificationName)), object: nil
        )
    }
    ...

    // Method fires when model is changed
    @objc func handleCountChange(_ notification: Notification) {
        ...
    }
}

6. Request View to render

Controller requests View to render updated count.

@objc func handleCountChange(_ notification: Notification) {
    if let _ = notification.object as? Int {
        // Request View to render
        counterView.render(count: counterModel.count)
    }
}

7. Render View

CounterView reflects counter changes to the view.

class CounterView: UIView {
    // Render view
    public func render(count: Int){
        countLabel.text = String(count)
    }
}

At the end

How was that?
Software architecture patterns are hard to understand at first, but once you understand them, they are a very powerful weapon for engineers.
If you don't fully understand something, I recommend you to try to understand it by writing example by yourself.

DEV Community