An article by Riccardo Testa and Maarten de Goede

MVVM is an architectural pattern used in software development. An architectural pattern can be seen as a set of unwritten rules that defines responsibilities of components inside software’s code and which information a certain component is aware of.

Why use MVVM?

Using an architectural pattern improves various aspects of software, in details, using MVVM as pattern:

  • Improves readability of the code;
  • Improves maintainability of the code and of the application;
  • Guarantee User Interface (UI) and business logic separation, which means that great changes in UI do not imply that the business logic has to change;
  • Simplifies the creation of Automated testing;
  • Improves performance of the application, directly related to an improved quality of the code.

What are the components?

In detail MVVM has three main components:

  1. The Model is the part of the code that describes the data itself. Think of a user with all the data of the user like the name, profile picture and number of comments.
  2. The View is the part of the app that is visible to the user, and that the user can interact with.
  3. The ViewModel is the part of the code that describes the data exactly as it is shown on the screen and how you can interact with it. It describes for example what buttons are visible and what happens when you click said button.

In MVVM the View is defined a “stupid” component because it does not contains any logic whatsoever. The View just notifies it’s ViewModel about an interaction with the UI, making a so-called action, and then updates the UI based on the ViewModel’s reactions.

The ViewModel defines actions it’s able to make, is responsible to update the data described by the model and is notified by the model by any data change; the ViewModel is also responsible for data presentation, in other words it formats the Model data to be readable for the user and usable for the View. The ViewModel doesn’t have any knowledge about how the View looks, so changing the UI doesn’t affect the ViewModel (not much at least).

How does Swabit do it?

At Swabit, we go further. We don’t just use MVVM, but we also use a very new technology called Kotlin Multiplatform. Kotlin Multiplatform is an experimental technology that became usable for apps just over half a year ago and it is used to share code between multiple platforms like iOS and Android.

This makes development easier in multiple aspects:

  • It decreases the amount of code you have to write, because the ViewModels and Models are written for both platforms at the same time, instead of having to write them for both iOS and Android separately. 
  • Because there is less code, it will be less likely that you’ll make mistakes, and it makes the mistakes you do make easier to solve because you only have to solve them once.
  • It makes collaborating much easier. For example, an Android developer can make a feature on Android, creating the View for Android, and the ViewModel and Model in Multiplatform, and when they’re done, an iOS developer can pick it up to create the View on iOS.

Because we use Kotlin Multiplatform, we will have to change how we use the ViewModel.

What we before called a ViewModel, is now the MainViewModel. The MainViewModel is shared between iOS and Android, but we also have a platform-specific ViewModel to better make use of the available tools of each platform.

This platform ViewModel is just an extra layer that is used only for hooking up the View with the MainViewModel, and does not contain any logic by itself. 

Maarten De Goede

Maarten De Goede

App Developer @ Swabit

Leave a Reply