MVVM Design Pattern

15-01-2013
source code

Introduction

In this article I will be talking about the Model View ViewModel design pattern, MVVM in short. What is it and why do we need it. Also I will explain why this type of patterns is good for Silverlight applications. I will also discuss some methods to implement it in Silverlight. Finally I will discuss the advantages and disadvantages of this pattern.

What is MVVM?

MVVM is a design pattern that separates the application into 3 layers. The first layer is Model. The Model layer contains your data objects and data access services. It can also contain business logic layer. So you can add some business logic that you may need before accessing your data. The View layer will contain your design UI only. That is no code behind will be written in this layer. The glue that connects your View with your Model is the ViewModel layer. ViewModel will receive commands and events from the View layer and push that to the Model layer then gets the response from Model layer and push it into the View layer. Figure 1 explain this design pattern

Figure 1: MVVM layers

Why considering MVVM for Silverlight applications?

Please note that MVVM is not part of Silverlight nor it is a must use for every Silverlight application. Some developers unfortunately force the pattern even for small applications where using the pattern make the development more difficult rather than easier.

The main advantage of using MVVM in Silverlight is the separation of concerns between layers. In other words a designer can go on and design the whole of UI without being concerned about where the data is coming from or where to place the code that will be responsible for UI interactions like clicking a button or selecting an item from a dropdown list.

The MVVM description earlier shows that ModelView layer has more of a Model than View, in other words it deals with Model more than it does with View or it consists from things that the Model consists of, i.e. classes and methods. This means that Unit Test is much easier in this pattern since you can test all methods in a given ViewModel layer. For example in a BookViewModel you will have a method to retrieve a given book by its Id from the Model layer. This method can be easily tested without worrying about UI.

Using this pattern, UI designers and developers can work together yet everyone focus on his own layer which improves productivity since no one needs to wait for the other. Model and ViewModel layers can be developed and tested by the developer but once the UI is completed then all the developer needs to do is to link the ViewModel with the UI (View layer). Figure 2 displays each MVVM layer and who is responsible for it.

Figure 2: separation of concerns between layers

How to use MVVM in Silverlight?

You can implement MVVM patter with Silverlight in many ways:

  • You can use a third party library that helps you to do that. A well known and light library is the MVVM Light Toolkit
  • You can use a whole Framework to implement it but again using a framework may be overkill if you will not utilise most of the framework functionalities. A good example for such framework is Prism
  • Implement it on your own by following the design patterns rules i.e. having a clear separation between View, Model and ViewModel layers. Have a look at this example Silverlight with MVVM which shows you how to use MVVM in Silverlight without using a third party solution that implements the pattern for you.

Conclusion

MVVM is a design pattern that pides the application into Model, View and View Model. Model layer concentrate on data whereas View is concerned with UI. The ViewModel layer links between both layers. Using MVVM with Silverlight can improve productivity and overall Unit testing because of the clear separation between layers so designers can focus on View (UI) whereas developers can focus on Model and ViewModel layers. There are many solution to implement MVVM in Silverlight among them is using a third party library that implements the pattern or use a framework which has this pattern in it like Prism 4 or implement it yourself by following the pattern rules.