Peace and harmony in user interface code

How MVVM makes stuff nice and clean

User interface is inevitable part of every application or computer game. Usually it takes a few… or a little bit more iterations to make it intuitive and harmonious. We programmers don’t want to be afraid when designers make adjustments in already coded piece of product. We don’t want to struggle with every single change that has to be made. But… how to achieve that? Let’s look into Model-View-ViewModel pattern to make our work testable and flexible.

Why would I care about MVVM?

As I mentioned before, usually you want to deliver code that is properly working and complying to the current requirements. Since in development nothing is completely certain, you always want to have some kind of assurance that further changes will be possible to implement and that they don’t break anything that they don’t correspond to. Model-View-ViewModel pattern allows you to split responsibility between 3 types of classes that cooperate with each other but also have only one job at the time. Furthermore, this approach is bound to testing and can be easily applied in most object-oriented programming languages or environments. Basic communication flow is visualized in the picture below.

View

Just as name implies, main job of view is presenting data to the user and allowing interactions. Since we follow Single Responsibility Principle, it is important not to keep business logic in this class. Worth mentioning is that View has reference to ViewModel, but ViewModel itself does not know anything about View.

ViewModel

The place were most of MVVM magic happens is the ViewModel. This class works as intermediary between the View and the Model. It exposes properties and methods that are necessary for visualization and interactions. Moreover, this object stores reference to model and thanks to property binding it is able to keep View up to date with Model changes.

Model

Everything that is related to data and business logic is placed in the Model. It has no idea about View and ViewModel existence, but provides necessary elements like list of employees or products to make whole structure work.

What tigers like best — example

Are you familiar with Sticker Customization Popup from my last blog-post? Its logic was actually pretty simple — a tap on selected cell changed “Sticker Man” look and also marked currently active mouth with a tick. Let’s use it as an example to see MVVM in action. To make it work, we can split popup logic into 3 groups of Model-View-ViewModel classes.

When you look at the image you can see that horizontal groups represent one popup element divided into Model, View and ViewModel. The lower we go, the more specific and also smaller elements can be found. I like to see connections between horizontal layers as parent-child relations. Each ViewModel parent takes care about his ViewModel child, creates it and makes sure that communication works in both directions. When it comes to View, its main role is to create child View and set its child ViewModel with ViewModel that is provided by its own ViewModel. At first glance it may seem to be a little bit complicated and exaggerated, but after a few experiments it becomes way more intuitive.

Would you like to learn more?

If you’re eager to dig deeper into Model-View-ViewModel pattern feel free to explore full source code of the example mentioned on my GitHub. In my next blog-posts I’m going to continue the topic of user interface code and explain how to exploit MVVM pros even further with the help of UniRx — Reactive Extension for Unity. I’ll also familiarize you with base principles of writing tests and explain how to prepare Unity for it.

Don’t forget to tap and hold 👏 and to follow DaftMobile Blog (just press “Follow” button below)! You can also find us on Facebook and Twitter.