by

MVVM — the beauty of cross-platform development

I’m going to give a short overview of MVVM pattern and how it can be used for creating cross-platform applications using Xamarin framework.

Model-View-ViewModel

MVVM is a design pattern created by Microsoft to benefit from WPF features. It was announced back in 2005 by John Gossman. As it stands from the title, there are three components involved: Model, View and ViewModel.

Model is intent to solve domain problems, it contains a data and / or a business logic. Model knows nothing about a User Interface.

View represents a User Interface. Each platform has it’s own approaches and tools to build user interfaces, but it’s always about controls and layouts. It is a good practice to have no code-behind in views while using MVVM pattern.

ViewModel is often referenced as an abstraction of the View. It is a bridge between the Model and the View. Each View has it’s own ViewModel with properties that are closely related to controls.

So far there is no big differences from MVC and MVP patterns, but here is the key element of MVVM pattern — binding. Being a part of XAML in the Microsoft world, it automatically synchronizes views and viewmodels. For example when the users enter something into a textbox, the entered value is put into relevant property of the view model, when the property changes the value in the view model, the view is updated as well.

mvvm

Xamarin

MVVM is a powerful tool for architecting mobile (not only) applications, but a true magic comes with the ability to compile the same code for different platforms. And the obvious winner here is Xamarin.

Xamarin is a platform that allows to target iOS and Android with a single C# codebase. And don’t forget that C# is native for WP. The same code that is compilable for WP, iOS and Android, sounds great doesn’t it?

With that in mind, MVVM pattern comes in handy for designing cross platform applications. It helps to separate a part of the application that cannot be shared — UI (Xamarin.Forms is another topic), allowing to reuse the rest.

Let’s take another look at the MVVM diagram

mvvm2

With the help of shared projects or portable libraries, the same code is referenced from different platforms.

Did you notice that Bindings stayed outside the shared code? They are platform specific and available out of the box only for Windows Phone (XAML). Luckily for us, there is another helper library for iOS and Anroid — MvvmCross.

MvvmCross

MvvmCross — a cross-platform framework created by Stuart Lodge (@slodge) gives us exactly what we want — bindings for iOS and Android. And much-much more.

By putting together all these elements we get everything needed for designing and creating clean and maintainable mobile applications. In a perfect world…

Conclusion

In the real world the picture is not so ideal. Almost every application tries to benefit from platform specific features that cannot be shared and complicate the architecture, often making the development process challenging and very interesting.

The use of MVVM pattern and Xamarin saves a lot of resources on testing and maintaining the applications, but don’t expect miracles, it’s just the tools.

Everyone who is interesting to get skilled in these technologies should start with the N+1 tutorial.

Write a Comment

Comment