Swift – Model View Controller (MVC) for beginners
MVC – sometimes also known as “Massive View Controller” is an architectural pattern used to implement user interfaces in apps. This tutorial will cover what MVC is, how it is used and how you can implement this design pattern in your own apps.
What is MVC?
Put simple MVC stands for Model-View-Controller. The following diagram outlines how this works at a high level.
- The Model is where your data lies. Things such as objects, network code, parsing code and so on reside here.
- The View is the actual view that is shown to your user! Thing of when your using the storyboard to design your layout that is connected to the code, this is it! Items such as UILabels, UIViews and UIImage reside in this layer.
- The Controller is the glue that joins your Model & View. If implemented correctly the Controller doesn’t care what view is using it, it simply enables you to interact with one or more models through it.
So now we know what each is right?
Still confused, lets look at a quick example:
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 Controller. 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 Controller. The controller will then go to the Dog object in the Model and do any setup necessary. The controller 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 MVC is used
We have setup an app to show you this in action. The storyboard shows the user the animal name and how many legs the animal has, it is a part of the View.
And our code in the View controller is made up of the View Model and Controller, you should actually have the class: Dog { … } in a separate Swift file, but we have it in the same one just for this example.
// Model class Dog { var name: String? var legs: Int? } // Controller class ViewController: UIViewController { // View from the storyboard - both labels @IBOutlet var petName: UILabel! @IBOutlet var petLegs: UILabel! // Controller continued override func viewDidLoad() { super.viewDidLoad() let fido = Dog() fido.name = "Fido" fido.legs = 4 petName.text = fido.name! petLegs.text = "\(fido.legs!)" } }
This will set the information about our dog in our view.
Still a bit confused how our code is split up between the Model, View and Controller. Well the following handy dandy guide will show this:
Now you know what MVC is and how to use it, you can begin to implement it in your app. You may have already used this pattern, UITableView is implements this pattern. You would implement the MVC pattern because it lets you test your app easy, you can test your code without needing the view.
Most people get too tempted and put all their code in the view controller, hence “Massive View Controller”. Avoid putting code in the View Controller for object management, networking such as image downloading and the like. Keep it seperate. It might be tempting to do this, but it generally will cost you time and frustration int he long run.