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

Free MVVM frameworks

Commercial MVVM frameworks

See also

References

  1. ^ The Presentation Model Design Pattern
  2. ^ Google groups. "Thought: MVVM eliminates 99% of the need for ValueConverters". http://groups.google.com/group/wpf-disciples/browse_thread/thread/3fe270cd107f184f?pli=1. 
  3. ^ Google groups. "Thought: MVVM eliminates 99% of the need for ValueConverters". http://groups.google.com/group/wpf-disciples/browse_thread/thread/3fe270cd107f184f/3ede55778f5a45dd. 
  4. ^ a b c Josh Smith. "WPF Apps With The Model-View-ViewModel Design". http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. 
  5. ^ 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. 
  6. ^ Karl Shifflett. "Learning WPF M-V-VM.". http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/. 
  7. ^ Pete Weissbrod. "Model-View-ViewModel Pattern for WPF: Yet another approach.". http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html. 
  8. ^ 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


Wikimedia Foundation. 2010.

Look at other dictionaries:

  • Model-View-ViewModel — Шаблон проектирования Model View ViewModel Шаблон Model View ViewModel  применяется при проектировании архитектуры приложения. Первоначально был представлен сообществу Джоном Госсманом (John Gossman) в 2005 году как модификация шаблона… …   Википедия

  • Model-view-controller — (MVC) is an architectural pattern used in software engineering. Successful use of the pattern isolates business logic from user interface considerations, resulting in an application where it is easier to modify either the visual appearance of the …   Wikipedia

  • Model–view–presenter — (MVP) is a derivative of the model–view–controller (MVC) software pattern, also used mostly for building user interfaces. In MVP the presenter assumes the functionality of the middle man (played by the controller in MVC). Additionally, the view… …   Wikipedia

  • Model–view–controller — A general representation of the MVC design pattern. Model view controller concept. The solid line represents a direct as …   Wikipedia

  • Model-View-Controller — Шаблон проектирования Model View Controller Кон …   Википедия

  • Multiuse Model View — The Multiuse Model View (MMV) is an architectural pattern used in software engineering that came about as an enhancement to the MVVM design pattern [1]. The pattern is specific for Windows Presentation Foundation (WPF) and Windows Communication… …   Wikipedia

  • Presentation–abstraction–control — (PAC) is a software architectural pattern. It is an interaction oriented software architecture, and is somewhat similar to model–view–controller (MVC) in that it separates an interactive system into three types of components responsible for… …   Wikipedia

  • Modèle-Vue-VueModèle — Pour les articles homonymes, voir MVVM. Le Modèle Vue VueModèle (en abrégé MVVM, de l anglais Model View ViewModel) est une architecture et une méthode de conception utilisée dans le génie logiciel. MVVM est originaire de Microsoft et adapté pour …   Wikipédia en Français

  • Microsoft Expression Blend — 3 Screenshot …   Wikipedia


Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”

We are using cookies for the best presentation of our site. Continuing to use this site, you agree with this.