Implement MVVM in SwiftUI

Software architectures are powerful weapons for developers.

In iOS development, before SwiftUI came along, Cocoa MVC was the most suitable software architecture in most cases. (If you want to know about Cocoa MVC, refer my another article)

But now, EnvironmentObject’s data binding feature in SwiftUI allows to implement MVVM architecture easily. So I think MVVM has become the standard software architecture in iOS app(in Swift UI) development.

In this article, I will describe what is MVVM and how to implement MVVM in Swift UI by creating a simple counter app.

It’s difficult to use Software architecture in real applications just by reading.

So, let’s implement by yourself to understand MVVM by your heart ❤️

What is MVVM?

MVVM is a software architecture invented by John Gossman in 2005.

MVVM has three components Model-View-ViewModel

Note that View and ViewModel are connected with data binding to share ViewModel status.

Model

Model has domain logic and its data not related to UI. Model is the same as it is in other software architectures like MVC, MVP.

For example, accessing database, control device, calculate price, etc — every logics not related to UI are included in Model

It’s important that Model is completely independent of View and ViewModel, it must be able to be built alone.

View

View is a component for accepting user inputs and render User Interface to display. View has a status connecting with ViewModel status using data binding and updates its view when ViewModel status changes by user input.

ViewModel

ViewModel served as a bridge between Model and View.

ViewModel has three responsibilities

• Store data for the view.
• Accept events from view and call model function.
• Accept events from view and update status. Then View status automatically updates via data bindings.

Using these components, basic data flow diagram in MVVM is below.

Basic flow of MVVM

1. View accepts user input.
2. View passes user input to ViewModel.
3. ViewModel calls Model function to process data.
4. Model executes some business logic.
5. Model return the result of function to ViewModel.
6. ViewModel updates its status with the result.
7. ViewModel status propagates to view via data binding.
8. View reflects updated ViewModel status to its view.

Yay! We’ve taken quick look at MVVM.

It’s OK, if you have not understand well yet.
We’ll review this flow again after implement MVVM by ourselves.

Let’s create simple application using MVVM in next chapter.

Implement simple counter app in MVVM

We will create very simple counter app like below.

Users can up and down count by tapping plus/minus buttons.

I’ve prepared Repository includes start and completed app.
You can start from Starter directory or create new project by yourself.

https://github.com/kazuooooo/SwiftUIMVVMFromScratch

CounterModel

At first, we implement M of MVVM, CounterModel.

It has very simple business logic increment and decrement value from the argument.

CounterViewModel

Next, implement VM of MVVM, CounterViewModel.

CounterViewModel has three responsibilities

• Store count (Store data for view.)
• Has countUp and countDown method for View(Accept events from view)
• Call CounterModel methods to increment and decrement count and update its count with returned value(Call model methods and update its status)

CounterView

At last, implement V of MVVM, CounterView.

View code is also very simple.
Note that View has CounterViewModel Object using EnvironmentObject. Environment Object allow struct to use data binding with Observable Object.

(️NOTE: Only thinking about this simple app, you had better to use @ObservedObject. But this code is designed to explain in simple code how to implement MVVM in a deeper nested views, more complex app. So, I use @EnvironmentObject here. Thank you @Vineeth M)

That’s all! Please check the counter works correctly✓

Review MVVM flow with source code

At last, let’s review MVVM data flow with source code we just wrote!
By reviewing flow again after implementation, we can understand MVVM more deeply than just write code.

1. View accept user input

CounterView accept user input via + and - buttons

2. View passes user input to ViewModel

View call viewModels count up method.

3. ViewModel calls Model function to process data.

CounterViewModel call CounterModel increment method with current count as an argument.

4. Model executes some business logic

CounterModel increment count to argument count from ViewModel.

5. Model return the result of function to ViewModel.

Then Model return the result to ViewModel.

6. ViewModel updates its status with the result.

Counter ViewModel receive result and update its count

7. ViewModel status propagates to view via data binding

On ViewModel value changed, updated count value propagates to CounterView immediately via Environment Object data bindings.

(No code here)

8. View reflects updated ViewModel status to its view.

At last, view renders updated count to label.

Summary

MVVM architecture must be powerful tool for SwiftUI iOS app development.
It’s worth to take the time to learn!
Thank you for reading!