web 2.0

MVVM – Model View ViewModel Pattern

MVVM pattern

MVVM pattern

MVVM which stands for Model-View-ViewModel is a relatively new pattern supporting development of WPF and Silverlight Applications.
It is  based on well-known MVC and MVP patterns, but it is actually adapted to take the advantage of data binding in WPF.

I started to look for appropriate architectural pattern for Large Silverlight LOB Applications and I was wondering if I can rely on MVC.
Then I found out, that there is already a design pattern targeted at modern UI development platforms called Model-View-ViewModel, introduced by John Gossman in 2005.

It is actually a Martin Fowler’s PresentationModel design pattern adjusted for WPF & Silverlight.

Description

Broadly speaking, the Model-View-ViewModel pattern attempts to gain both the advantages of separation of functional development provided by MVC as well as leveraging the advantages of XAML and the Windows Presentation Foundation by binding data as far back (meaning as close to the Model) as possible while using the XAML, ViewModel, and any Business Layer’s inherent data checking features to validate any incoming data. The result is that the Model and Foundation drive as much of the operations as possible, minimizing the need for “code behind,” especially in the View.

Elements of the MVVM pattern

Scheme of MVVM interaction

Scheme of MVVM interaction

Model: as in the classic MVC pattern, the model refers to the data access layer representing the real state content.

In Silverlight RIA you could write your own model classes, but more common approach in LoB apps is to create an entity framework model, which you could use in WCF RIA Services to generate the base service class and metadata class and share it with Silverlight clients, that will use it. So with RIA Services you will have your model accessible also in the client, where would have you otherwise write the model class on your own.

View: as in the classic MVC pattern, the view refers to all elements displayed by the GUI such as buttons, windows, graphics, and other controls.

So view is a piece of GUI with which the user interact, where the data are shown, etc. I personally follow the idea to minimize the code-behind of View, with no methods manipulating data or similar tasks.

ViewModel: the ViewModel is a “Model of the View” meaning it is an abstraction of the View that also serves in data binding between the View and the Model. It could be seen as a specialized aspect of what would be a Controller (in the MVC pattern) that acts as a data binder/converter that changes Model information into View information and passes commands from the View into the Model. The ViewModel exposes public properties, commands and actions.

So I look on a ViewModel as a an abstraction of the view, where the main importance is on what we want to show to our users in terms of Data and Actions (for example Collection of Employees, manipulation with “somehow” selected employee). We expose these as properties, some commands, etc in our ViewModel and we are no longer interested, wheter the UI designer will bind the collection to the ComboBox, ListBox or DataGrid, whether the data of selected employee will be bind in a DataForm or just a bunch of TextBoxes. So in my conception the View is actually a conretization of the ViewModel.

Presentation Model

Another thing I want to express is that MVVM is built on the Martin Fowler’s Presentation Model. One strong difference from MVC is the fact, that in MVC our state could be fully derived from the model, but with the Presentation Model our state depends also on interaction with the Model (e.g. Edit button could be disabled/hidden until an item is selected in Listbox; Save button is disabled until the values filled in form are valid).

Resources

Nikhil Kothari described the MVVM with RIA Services in an example.

There are two really good articles on MSDN magazine about MVVM from Microsoft MVP’s.
WPF Apps With The Model-View-ViewModel Design Pattern (John Smith, February 2009)
Model-View-ViewModel In Silverlight 2 Apps (Shawn Wildermuth, March 2009)

References

John Gossman. Introduction to Model/View/ViewModel pattern for building WPF app
Pete Weissbrod.“Model-View-ViewModel Pattern for WPF: Yet another approach.”
Karl Shifflett. “Learning WPF M-V-VM.”

One Response to “MVVM – Model View ViewModel Pattern”

  1. [...] This post was mentioned on Twitter by Jason Hawgood, Solidsoft. Solidsoft said: Silverlight & WCF RIA Services » Blog Archive » MVVM Architectural …: Silverlight & WCF RIA Services. Bachel… http://bit.ly/872FZd #WCF [...]