The World Simplest SwiftUI -MVVM.

You can understand MVVM

“I often hear about MVVM, but I don’t know what it is.”

“I want to play with SwiftUI, but the writing procedure and code layout seem to be complicated.”

If you’re thinking like this, read this article to get a feel for the design of SwiftUI-MVVM.

What is MVVM?

MVVM is a code design pattern, it focusing on that separates Model and View.

Model is the “what” the app does.
View is the “how” to present the app to users.

And, the ViewModel translates and tells both changes so that the Model can keep the actual content of the app clear and consistently, and the View can present the reflection of the Model to the user without delay.

Is MVVM required?

To create an app using SwiftUI, the MVVM pattern is not essential, but by using MVVM, you can use declarative approach that “If you pass whole changes of contents of the app to View, View will draw it nicely.” And you can write the app smoothly.
(By the way, it is called imperative approach that say “do this then do that” to the View every time the content is updated.)

Let’s understand with the simplest example

However, I think it’s human nature to feel that “What should I write in the ViewModel?” and “SwiftUI is scary when new characters such as @ObservedObject and @Published come out”. (Me too.), so I wrote a combination of SwiftUI and MVVM in a simple case study.

We create an MVVM pattern with a minimal Model View ViewModel.

A case study is a switch that switches between dogs and cats when user tapped.

Simple MVVM

Write a Model

The Model in this sample, i.e. the truth of this application, is switching between dogs and cats.

Model does not import SwiftUI. Because it’s the substance of an app that is independent of the UI.

Since the substance of this app is switching between a dog and a cat, the Model consists of a variable called pet, which is dog or cat, and a function called switchPet, which switches between dog and cat.
(To modify the struct, we uses mutating func)

The Model of our app is just this.

Write a View

The View displays pet in the Model on a Text View.
Also, when the Text View is tapped, switch the pet in the Model .

Our View is responsible for displaying Model content to the user and accepting user taps.

If you ignore the MVVM pattern, you can also keep the Model directly in the View.

For that matter, it is of course possible to have a pet variable and a toggle function in View.

If this variable called pet only represents the temporary state of View, this may be fine.

But then, for example, it can be difficult to make the Model state consistent when there are multiple Views.
It’s MVVM that doesn’t do that.

Write a ViewModel

The role of the ViewModel is to interpret the communication between the View and the Model.
Telling Model when there is a user tap from View,
Telling View the state of the Model.

Access ViewModel from View

The View tells the ViewModel the user’s tap, the ViewModel calls the Model toggle function, then the View gets the change in the value of pet in the Model from the ViewModel.

When I try to run it, the UI doesn’t change.

For confirmation, when we put a print on the switch pet of Model….

🐱
🐶
🐱
🐶

The Model pet has been switched, but the UI has not been updated.
In terms of the information transition flow we saw earlier,

The View tells the ViewModel the user’s tap(done)

The ViewModel calls the Model toggle function(done)

Then the View gets the change in the value of pet in the Model from the ViewModel.(This have not been received)

In MVVM, the ViewModel publishes the Model changes to the whole world, and the View gets the Model updates by arbitrarily subscribing to the information it want to know.

This is where the SwiftUI property wrapper comes in.

ViewModel publishes changes and View subscribes

By inheriting @ObservableObject , the ViewModel can be an observation target and can send information to the entire application .

With adding @Published to the Model, the ViewModel (@ObservableObject) can publishes the change in the model to the world as soon as there is a change in it.

Then the View that is interested in this change subscribe this published change.

By attaching an @ObservedObject to the viewModel variable, the View can immediately change the associated UI with the body var when there is some published changes in the ViewModel that is an @ObservableObject.

Now the part that “The View gets the change in the value of pet in the Model from the ViewModel” have been implemented, and the user tap updates the UI.

This is the world simplest MVVM.
There may be more, but I think it contains the basic elements of the pattern of SwiftUI-MVVM for the time being.

🐣

****

Request for work:

rockyshikoku@gmail.com

I send information related to machine learning.

Twitter

Freelance iOS developer. You can ask me for a job from any country. rockyshikoku@gmail.com