How to Dramatically Improve Testability for Mobile App Development – Part 2

Realizing the Benefits of MVVM

In Part 1 of this series, I discussed the limitations of the MVC design pattern as related to testing.  Having used the MVVM design pattern for desktop applications for many years, Syncro Medical is now using MVVM for its mobile app projects with great success.  In this blog, I’ll further explain MVVM, and why it’s a much better solution for testing mobile applications.

What is the MVVM Pattern?

MVVM stands for Model-View-ViewModel.  It is a design pattern that was created by Microsoft architects to be used with the WPF framework.  WPF is well suited for this design pattern and in fact, seems to have been created for it.  As the MVVM pattern gained popularity in the desktop world, it has also started to gain support in other platforms such as Android and iOS.  And for good reason.

The main difference between the MVVM and MVC pattern is that while the MVC’s Controller is tightly couple to the View layer, MVVM’s ViewModel is not aware of the View layer at all.  The MVC Controller knows about both the View and Model layers and is responsible for shuttling data and commands between those layers.  By contrast, MVVM’s ViewModel is only responsible for interacting with the Model layer to provide the data and workflow logic needed by the UI.  The MVVM’s View layer is a little more active than the MVC’s View because it contains a data-binding mechanism that is responsible for mapping the data from the ViewModel’s properties to the View’s widgets.

So How Does MVVM Help with Testing?

The benefit of MVVM is all about reducing the dependencies of the code we want to test.  In the MVC pattern, the View is passive and the Controller is responsible for moving data to and from the View’s widgets.  Therefore, the Controller knows about the View and has a dependency on all of the widgets and platform APIs that make up the view.  These are the dependencies that we want to get away from because they are very difficult to simulate when testing.

In the MVVM pattern, it’s the View’s responsibility to move the data from the ViewModel’s properties to the View’s widgets.  The ViewModel is a passive participant in this relationship and in fact is not even aware of the View’s presence.  The result is that ViewModel only has dependencies on the Model layer and is therefore very easy to isolate in a unit test.

The MVVM’s View is reduced to little more than the layout definitions for the widgets and the data-binding mappings.  The active code of the view is contained in the third-party widget and data-binding frameworks that have been tested independently.  There is little actual application code within the View layer and therefore the View layer doesn’t have to be covered by unit tests.  The widget layouts and data-bindings can be verified by observing the behavior of the live application.

How to Leverage MVVM for Mobile Platforms

The MVVM design pattern has been supported by WPF for desktop platforms for more than a decade but has only recently started making inroads into mobile platforms.  Xamarin Forms provides the most mature MVVM support for both Android and iOS.  This isn’t surprising since Xamarin is a cross-platform development solution that is essentially a port of Microsoft’s .NET architecture and WPF framework to Android and iOS.

In 2015 Google announced its Data Binding Library to the Android SDK.  This adds data-binding syntax to the UI layout files that is similar in nature to what WPF provides.  Data-binding is the glue that makes the MVVM design patter work and the inclusion of the Data Binding Library is a big step up for MVVM on Android.  Google hasn’t fully embraced the MVVM pattern in their documentation yet, but by providing the most important piece of the solution, they’ve made the MVVM design pattern fairly easy to implement on Android.

While Apple hasn’t yet announced any direct support for the MVVM design pattern, there are indeed ways to take advantage of MVVM for iOS app development.  For example, third-party libraries, such as ReactiveCocoa, have stepped up and filled the gap by providing a data-binding mechanism.  The data-binding of ReactiveCocoa isn’t integrated into the UI layout files as it is with WPF and Android; instead, the bindings are initialized with code.  Implementing the MVVM pattern for iOS may not be quite as straightforward as with the other platforms, but it is still a very viable solution that Syncro Medical has found to be very successful.

Syncro Medical has a rich and varied background developing mobile medical apps for its clients.  As a leader in this field, Syncro Medical applies optimal techniques for effective and efficient development and testing, yielding a product of highest quality.  If you’re considering developing a mobile medical app – we can help!  We’d be happy to discuss your plans and offer suggestions on top quality, cost-effective development.

Rich Champeaux is a Principal Engineer at Syncro Medical with a passion for user interface development. He has 25 years of experience with the development of Windows, Android, and iOS applications. Prior to joining Syncro Medical in 2002, Rich worked in Intel’s Advanced Development Group in Hillsboro, Oregon. Rich earned a BS and MS in Computer Engineering with a Minor in Computer Science from Clemson University.

Comments are closed.