- Model View ViewModel
-
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 (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[2] 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[3] 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.[4] 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
History
Microsoft MVP Josh Smith reported[4] 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.
Pattern description
Broadly speaking,[4][5][6] 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.[7]
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 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"); } } }
Timeline
- November 2010 - The Microsoft patterns & practices team published guidance on using MVVM, under the name Prism v4.
Criticism
A criticism of the pattern comes from MVVM creator John Gossman himself,[8] 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.
Open source MVVM frameworks
- Josh Smith. "MVVM Foundation". http://mvvmfoundation.codeplex.com.
- Sacha Barber. "Cinch.". http://cinch.codeplex.com.
- Daniel Vaughan. "Calcium SDK". http://www.calciumsdk.net.
- Karl Shifflett. "Ocean". http://karlshifflett.wordpress.com.
- Tony Sneed. "Simple MVVM Toolkit". http://simplemvvmtoolkit.codeplex.com.
- Laurent Bugnion. "MVVM Light Toolkit". http://www.galasoft.ch/mvvm/getstarted/.
- Eye.Soft. "Hyperion SDK". http://hyperionsdk.codeplex.com.
- Lester Lobo. "CoreMVVM". http://coremvvm.codeplex.com/.
- Paul Betts. "ReactiveUI". http://www.reactiveui.net.
- Rob Eisenberg. "Caliburn". http://www.caliburnproject.org/.
- Rob Eisenberg. "Caliburn Micro". http://caliburnmicro.codeplex.com/.
- William e Kempf. "Onyx". http://wpfonyx.codeplex.com/.
- Peter O’Hanlon. "GoldLight". http://goldlight.codeplex.com/.
- jbe. "WPF Application Framework (WAF)". http://waf.codeplex.com.
- WPF Team. "WPF Model-View-ViewModel Toolkit". http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit&referringTitle=Home.
- Brett Hickenbottom. "Structured MVVM". http://structuredmvvm.codeplex.com/.
- Michael L Perry. "Update Controls". http://updatecontrols.codeplex.com/.
- Steve Sanderson. "KnockoutJS". http://knockoutjs.com/documentation/observables.html.
- Geert van Horrik. "Catel". http://catel.codeplex.com.
- Jeremy Likness. "Jounce". http://jounce.codeplex.com.
Free MVVM frameworks
- Rhea NV (Visual Studio Partner). "Vidyano". http://www.vidyano.com.
Commercial MVVM frameworks
- Intersoft Solutions (Visual Studio Partner). "ClientUI". http://www.clientui.com.
See also
- Model–view–controller
- Model-view-presenter
References
- ^ The Presentation Model Design Pattern
- ^ Google groups. "Thought: MVVM eliminates 99% of the need for ValueConverters". http://groups.google.com/group/wpf-disciples/browse_thread/thread/3fe270cd107f184f?pli=1.
- ^ Google groups. "Thought: MVVM eliminates 99% of the need for ValueConverters". http://groups.google.com/group/wpf-disciples/browse_thread/thread/3fe270cd107f184f/3ede55778f5a45dd.
- ^ a b c Josh Smith. "WPF Apps With The Model-View-ViewModel Design". http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.
- ^ John Gossman. Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps. http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.aspx.
- ^ Karl Shifflett. "Learning WPF M-V-VM.". http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/.
- ^ Pete Weissbrod. "Model-View-ViewModel Pattern for WPF: Yet another approach.". http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html.
- ^ John Gossman. "Tales from the Smart Client: Advantages and disadvantages of M-V-VM.". http://blogs.msdn.com/johngossman/archive/2006/03/04/543695.aspx.
External links
- Martin Fowler. "Presentation Model". http://martinfowler.com/eaaDev/PresentationModel.html.
- Josh Smith. "WPF Apps With The Model-View-ViewModel Design Pattern". http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.
- Josh Smith. "Advanced MVVM". http://advancedmvvm.com.
- Jason Dolinger. "A tutorial refactoring a traditional event-handling application to use MVVM and Commands.". http://blog.lab49.com/archives/2650.
- Kishor Aher. "Attaching Routed Event to Command (Zero code behind M-V-VM)". http://kishordaher.wordpress.com/2009/07/18/routedevent-to-command-action-behavior-blend-3/.
- John Gossman. "Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps". http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.aspx.
- Karl Shifflett. "Learning WPF M-V-VM.". http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/.
- Pete Weissbrod. "Model-View-ViewModel Pattern for WPF: Yet another approach.". http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html.
- John Gossman. "Tales from the Smart Client: Advantages and disadvantages of M-V-VM.". http://blogs.msdn.com/johngossman/archive/2006/03/04/543695.aspx.
- Jason Rainwater. "MVVM, providing the Association of View to ViewModel". http://torinth.spaces.live.com/blog/cns!DD5A60A80E18EE33!185.entry.
- Julian Dominguez. "Presentation Model pattern and the Composite Application Guidance (aka Prism)". http://blogs.southworks.net/jdominguez/category/presentation-model/.
- Nikhil Kotari. "ViewModel Pattern in Silverlight using Behaviors". http://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx.
- Glenn Block. "The spirit of MVVM (ViewModel), it's not a code counting exercise.". http://blogs.msdn.com/gblock/archive/2009/08/03/the-spirit-of-mvvm-viewmodel-it-s-not-a-code-counting-exercise.aspx.
- Rob Eisenberg. "Study in MVVM". http://www.caliburnproject.org/.
- Geert van Horrik. "Catel - Part 0 of n: Why choose Catel?". http://www.codeproject.com/KB/WPF/CatelPart0WhyChoose.aspx.
- Geert van Horrik. "Catel - Part 1 of n: Data Handling the Way it Should". http://www.codeproject.com/KB/WPF/Catel.aspx.
- Geert van Horrik. "Catel - Part 2 of n: Using WPF Controls and Themes". http://www.codeproject.com/KB/WPF/Catel_Part2.aspx.
- Geert van Horrik. "Catel - Part 3 of n: The MVVM Framework". http://www.codeproject.com/KB/WPF/CatelPart3.aspx.
- Geert van Horrik. "Catel - Part 4 of n: Unit Testing with Catel". http://www.codeproject.com/KB/WPF/Catel_Part4.aspx.
- Geert van Horrik. "Catel - Part 5 of n: Building a WPF example application with Catel in 1 hour". http://www.codeproject.com/KB/WPF/Catel_Part5.aspx.
- Raffaele Garofalo. "UI Patterns tutorials including MVVM". http://blog.raffaeu.com/archive/2010/01/31/ui-patterns-tutorials.-mvp-mvvm-and-composite-app-with-wpf.aspx.
- David Buksbaum. "Caliburn.Micro – Hello World". http://buksbaum.us/2010/08/01/caliburn-micro-hello-world/.
- David Buksbaum. "Caliburn.Micro the MEFtacluar". http://buksbaum.us/2010/08/04/caliburn-micro-the-meftacluar/.
- David Buksbaum. "How To Do Logging with Caliburn.Micro". http://buksbaum.us/2010/08/08/how-to-do-logging-with-caliburn-micro/.
- David Buksbaum. "Bootstrapping Caliburn.Micro with Autofac". http://buksbaum.us/2010/08/20/bootstrapping-caliburn-micro-with-autofac/.
- David Buksbaum. "Caliburn.Micro ViewModel File Template for ReSharper". http://buksbaum.us/2010/08/27/caliburn-micro-viewmodel-file-template-for-resharper/.
Categories:- Software design patterns
- Software architecture
Wikimedia Foundation. 2010.