Model View ViewModel
Encyclopedia
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
. Largely based on the Model-view-controller
pattern (MVC), MVVM is targeted at modern UI development platforms (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 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 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. 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.
Josh Smith reported that
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.
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.
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.
(Test Driven Development) on WPF
How to implement MVVM (Model-View-ViewModel) in TDD, on Code MSDN.
An implementation of the ViewModel in C#.
Martin Fowler
-Online presentations:* at RailsConf 2006* at JAOO 2006* at QCon London 2007 * at QCon London 2008 * at ThoughtWorks Quarterly Technology Briefing, October 2008...
. Largely based on the Model-view-controller
Model-view-controller
Model–view–controller is a software architecture, currently considered an architectural pattern used in software engineering. The pattern isolates "domain logic" from the user interface , permitting independent development, testing and maintenance of each .Model View Controller...
pattern (MVC), MVVM is targeted at modern UI development platforms (Windows Presentation Foundation
Windows Presentation Foundation
Developed by Microsoft, the Windows Presentation Foundation is a computer-software graphical subsystem for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0. Rather than relying on the older GDI...
, or WPF, and Silverlight) in which there is a user experience (i.e., user interface) (UXi)
User experience design
User experience design is a subset of the field of experience design that pertains to the creation of the architecture and interaction models that affect user experience of a device or system...
developer who has requirements different from those of a more “traditional” developer (e.g. oriented toward business logic
Business logic
Business logic, or domain logic, is a non-technical term generally used to describe the functional algorithms that handle information exchange between a database and a user interface.- Scope of business logic :Business logic:...
and back end development). The View-Model of MVVM is a value converter 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 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. Instead of requiring Interactive Designers to write View code, they can use the native WPF markup language XAML
XAML
Extensible Application Markup Language is a declarative XML-based language created by Microsoft used for initializing structured values and objects. It is available under Microsoft's Open Specification Promise...
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.
History
Microsoft MVPMicrosoft Most Valuable Professional
The Microsoft Most Valuable Professional is the highest award given by Microsoft to those it considers "the best and brightest from technology communities around the world" who "actively share their ... technical expertise with the community and with Microsoft"...
Josh Smith reported 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
Model View Presenter
Model–view–presenter is a derivative of the model–view–controller software pattern, also used mostly for building user interfaces....
(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.
Pattern 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 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.
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.
An implementation of the ViewModel
Snippet: here a simple implementation of the pattern realized using TDDTest-driven development
Test-driven development is a software development process that relies on the repetition of a very short development cycle: first the developer writes a failing automated test case that defines a desired improvement or new function, then produces code to pass that test and finally refactors the new...
(Test Driven Development) on WPF
Windows Presentation Foundation
Developed by Microsoft, the Windows Presentation Foundation is a computer-software graphical subsystem for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0. Rather than relying on the older GDI...
How to implement MVVM (Model-View-ViewModel) in TDD, on Code MSDN.
An implementation of the ViewModel in C#.