MVVM in IOS with Swift 3
When we were laying the groundwork for our latest iOS application, wanted to learn from our previous iOS applications. we set out two goals:
- Avoid the Massive View Controller syndrome
- Have as little repetitive code as possible
MVVM in iOS
In recent times the MVC (model-view-controller) design pattern has lost its place as a de facto pattern ever since better architectural patterns have come to light. MVC is now infamously called a Massive(or Messy)-View-Controller pattern, the reason for that is it’s very easy to pile up 1000+ lines of code inside a View controller. Even Apple is famous for shying away from following the MVC pattern in their sample code. MVVM (model-view-viewModel) is an architecture pattern that is an alternative to MVC which makes it easier to further isolate the UI specific responsibility of a ViewController to a View Model.
In the MVVM design pattern, Model is the same as in MVC pattern it represents simple data.
View is represented by the UIView or UIViewController objects, accompanied with their .xib and .storyboard files, which should only display prepared data.
ViewModel hides all asynchronous networking code, data preparation code for visual presentation, and code listening for Model changes. All of these are hidden behind a well-defined API modeled to fit this particular View.
One of the benefits of using MVVM is testing, you can test it more easily in your unit tests without affecting the UI code.
Now, the View (UIViewController/UIView) has become much simpler while ViewModel acts as the glue between the Model and View.
Applying MVVM In iOS Swift3
If you are new to MVVM and want to know in-deep about how to implement and using MVVM design pattern in your app, then read this article with sample example in-depth.
We shall demonstrate the usage of iOS MVVM pattern on this example. briefly, the application displays a list of users each containing a image of user, its name and email.
Libraries used on the sample project:
- Alamofire : is an HTTP networking library written in Swift (Version 4.4).
- SDWebImage : This library provides an async image downloader with cache support.
- Mapper : is a simple Swift library to convert JSON to strongly typed objects.
Step 1: Set up the APIClient
The API used from RANDOM USER GENERATOR and does not need a key and Authorization token The endpoint is: http://api.randomuser.me/?results=10&nat=e
I write a downloadUser function that has a completion handler. The JSON data will come back as an array of dictionaries for the key “results” below.
Step 2: Set up the ViewModel.
#1: I create UserViewModel file that inherits from NSObject. This will be property in my View Controller and injected by the storyboard.
#2 create an apiClient property marked as an @IBOutlet that will be instantiated by the storyboard. Since I know the storyboard will be injecting it, I can use the (!) bang operator because I know it will not be nil.
Step 3: Set up the View Controller.
Declare an UserViewModel property with an @IBOutlet and the storyboard will instantiate this ViewModel object.
ViewDidAppear: called after the view appears- great place to start loading Users from an API using userViewModel property.
After download data from API reload the tableView to display our retrieved app objects.
Step 4: How to define Object property with storyboard.
From the object library, dray an object item onto your view controller and insert it at the top of VC.
Select the Object at the top of the view Controller.
Set this Object class to the UserViewModel.swift file you created.
Control+drag from the UserViewModel Object at the top of View Controller to the userViewModel @IBOutlet you created in the ViewController.swift file.
Conclusion
To conclude, using the MVVM design pattern in the iOS is definitely the right way to go. I really appreciate about a good structure MVVM is when you have a defect in your app and you know exactly where to go to fix it and have as little repetitive code as possible, code it will be much easier to test
Source Code
Here you can download the example application project
