The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler.[1] Largely based on the model–view–controller pattern (MVC), MVVM is targeted at modern UI development platforms (HTML5 [2][3], Windows Presentation Foundation, or WPF, and Silverlight) in which there is a user experience (i.e., user interface) (UXi) developer who has requirements different from those of a more “traditional” developer (e.g. oriented toward business logic and back end development). The View-Model of MVVM is a value converter[4] meaning that the View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily managed and consumed. In this respect, the View-Model is more Model than View, and handles most if not all of the View’s display logic (though the demarcation between what functions are handled by which layer is a subject of ongoing discussion[5] and exploration).
MVVM was designed to make use of specific functions in WPF to better facilitate the separation of View layer development from the rest of the pattern by removing virtually all “code-behind” from the View layer.[6] Instead of requiring Interactive Designers to write View code, they can use the native WPF markup language XAML and create bindings to the ViewModel, which is written and maintained by application developers. This separation of roles allows Interactive Designers to focus on UX needs rather than programming or business logic, allowing for the layers of an application to be developed in multiple work streams.
Contents |
Microsoft MVP Josh Smith reported[6] that
"In 2005, John Gossman, currently one of the WPF and Silverlight Architects at Microsoft, unveiled the Model-View-ViewModel (MVVM) pattern on his blog. MVVM is identical to Fowler's Presentation Model, in that both patterns feature an abstraction of a View, which contains a View's state and behavior. Fowler introduced Presentation Model as a means of creating a UI platform-independent abstraction of a View, whereas Gossman introduced MVVM as a standardized way to leverage core features of WPF to simplify the creation of user interfaces. In that sense, I consider MVVM to be a specialization of the more general PM pattern, tailor-made for the WPF and Silverlight platforms."
The MVVM pattern was conceived to support WPF and Silverlight, both pieces that debuted with the .NET Framework 3.0 which was released on 21 November 2006. This pattern is now being more broadly applied in other technology domains, much as happened with the earlier MVC or Model View Presenter (MVP) patterns.
Several Microsoft Architects working on WPF and Avalon have written extensively about MVVM in online media, including creator John Gossman, Microsoft MVP Josh Smith, and Microsoft Program Manager Karl Shifflett.
As the understanding of the pattern disseminates through the industry, discussion continues regarding what tools can be developed to support the pattern, selection of where to place different kinds of supporting code in the pattern, the best methods for data binding, and how to expose data within the ViewModel, how appropriate the pattern is for use within Javascript, and other topics.
Broadly speaking,[6][7][8] 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 include:
Model: as in the classic MVC pattern, the model refers to either (a) an object model that represents the real state content (an object-oriented approach), or (b) the data access layer that represents that content (a data-centric approach).
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.
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 abstractions. The ViewModel has been likened to a conceptual state of the data as opposed to the real state of the data in the Model.[9]
Controller: some references for MVVM also include a Controller layer or illustrate that the ViewModel is a specialized functional set in parallel with a Controller, while others do not. This difference is an ongoing area of discussion regarding the standardization of the MVVM pattern.
Snippet: here a simple implementation of the pattern realized using TDD (Test Driven Development) on WPF How to implement MVVM (Model-View-ViewModel) in TDD, on Code MSDN.
An implementation of the ViewModel in C#.
public class CustomerViewModel : ViewModelBase<CustomerViewModel> { private readonly IDialogService dialogService; private Customer currentCustomer; private int i; public CustomerViewModel() { CustomerList = new ObservableCollection<Customer>(); AddNewCustomer = new RelayCommand(PerformAddNewCustomer); } public CustomerViewModel(IDialogService dialogService) : this() { this.dialogService = dialogService; } public Customer CurrentCustomer { get { return currentCustomer; } set { SetProperty(ref currentCustomer, value, x => x.CurrentCustomer); } } public ObservableCollection<Customer> CustomerList { get; private set; } public ICommand AddNewCustomer { get; private set; } private void PerformAddNewCustomer() { CustomerList.Add(new Customer { Name = "Name" + i }); i++; if (dialogService != null) { dialogService.Show("Customer added"); } } }
- November 2010 - The Microsoft patterns & practices team published guidance on using MVVM, under the name Prism v4.
A criticism of the pattern comes from MVVM creator John Gossman himself,[10] who points out that the overhead in implementing MVVM is “overkill” for simple UI operations. He also states that for larger applications, generalizing the View layer becomes more difficult. Moreover, he illustrates that data binding, if not managed well, can result in considerable memory consumption in an application.
