An Introduction to MVVM design pattern in Swift

MVVM Design Pattern

Design patterns are incredibly useful, no matter which language or platform you develop for. Every developer should know how to implement them, and most importantly when to apply them.

History:

• MVVM (Model View ViewModel) was invented by Microsoft architects Ken Cooper and Ted Peters in 2005, specifically to simplify event-driven programming of user interfaces.
• The pattern was incorporated into Windows Presentation Foundation (WPF) (Microsoft’s .NET graphics system) and Silverlight (WPF’s Internet application derivative)

What is MVVM?

• MVVM is a structural design pattern that will be guiding you in how to organize and structure your code to write maintainable, testable and extensible applications.
• MVVM will enhance the separation of user interface logic from its business logic or back-end logic (the data model). Hence, it slims down massive view controllers

MVVM divides an application into three essential components: Model, View, and ViewModel

Components of MVVM

1. Models
   It simply holds the data and has nothing to do with any of the business logic. They’re usually structs or simple classes.
2. Views
   Display UI elements and controls on the screen. They’re typically subclasses of UIView.
3. ViewModels
   It acts as the bridge between the Model & View. The ViewModel will handle most if not all of the view’s display logic. ViewModels are usually classes, so they can be passed around as references.

The following diagram shows MVVM components and basic interactions.

MVVM Design Pattern

Implementation of MVVM design Pattern:

Let's understand the MVVM design pattern by example. Here we are assuming you know how to create the Project in Xcode and make the API call to the server.

In this project, We use randomuser.me/api/ to fetch random users from the server and display it into UITableView.

Step 1: Create User.swift file for user model and paste the following data

MVVM Design Pattern — User.swift

Here’s what we did above:

Here, we define a model named User. Every user has a name, email, cell, phoneand, picture properties. We need to show these properties into UITableViewCell which is our View in MVVM design pattern. So to display name and picture we need to transform them first. For that, we need to create ViewModel class for the user.

Step 2: Create UserViewModel.swift file to transform user model

Here’s what we did above:

• Here, we define a view model named UserViewModel
• Declared User property as private and assign that using the initializer init(user: User)
• Transform title, first and last properties of name, into fullName. Same for the contactNumber & thumbnailImageUrl

Step 3: Design view in the storyboard file.

Open the Main.storyboard file and design your view as per your need. I’ve created the design as per the below image.

MVVM Design Pattern — User Listing

You can download the entire source code from the below link. To display the image I’ve used Kingfisher library using Swift Package Manager.

milanpanchal/MVVM-Design-Pattern

Advantages of MVVM

• Maintainability — A clean separation of different kinds of code should make it easier to go into one or several of those more granular and focused parts and make changes without worrying. That means you can remain agile and keep moving out to new releases quickly.
• Testability — The ViewModel is easier to unit test than code-behind or event-driven code. Because with MVVM each piece of code is more granular.
• Extensibility — You have a better chance of making any of those parts more reusable. It has also the ability to replace or add new pieces of code that do similar things to the right places in the architecture.
• It makes changes in the UI and model easier.
• The presentation layer and the logic are loosely coupled.

Disadvantages of MVVM

• Some people think that for simple UI, MVVM can be an overkill.
• Similarly, for larger applications, it can be hard to design the ViewModel.
• Debugging would be a bit difficult when we have complex data bindings.
• Could create memory issue

If you like this article, feel free to share it with your friend and leave me a comment. You can follow me on Twitter for more articles related to iOS development.

Thanks for reading! 👨🏼‍💻