Everipedia Logo
Everipedia is now IQ.wiki - Join the IQ Brainlist and our Discord for early access to editing on the new platform and to participate in the beta testing.
Model–view–viewmodel

Model–view–viewmodel

Model–view–viewmodel (MVVM) is a software architectural pattern.

MVVM facilitates a separation of development of the graphical user interface – be it via a markup language or GUI code – from development of the business logic or back-end logic (the data model). The view model of MVVM is a value converter,[1] meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented. In this respect, the view model is more model than view, and handles most if not all of the view's display logic.[1] The view model may implement a mediator pattern, organizing access to the back-end logic around the set of use cases supported by the view.

MVVM is a variation of Martin Fowler's Presentation Model design pattern.[2][3] MVVM abstracts a view's state and behavior in the same way,[3] but a Presentation Model abstracts a view (creates a view model) in a manner not dependent on a specific user-interface platform.

MVVM was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify event-driven programming of user interfaces. The pattern was incorporated into Windows Presentation Foundation (WPF) (Microsoft's .NET graphics system) and Silverlight (WPF's Internet application derivative).[3] John Gossman, one of Microsoft's WPF and Silverlight architects, announced MVVM on his blog [29] in 2005.[3]

Model–view–viewmodel is also referred to as model–view–binder, especially in implementations not involving the.NET platform. ZK (a web application framework written in Java) and KnockoutJS (a JavaScript library) use model–view–binder.[3][4][5]

Components of MVVM pattern

Modelrefers either to a, which represents real state content (an object-oriented approach), or to the, which represents content (a data-centric approach).As in the (MVC) and (MVP) patterns, theviewis the structure, layout, and appearance of what a user sees on the screen.[6]It displays a representation of the model and receives the user's interaction with the view (clicks, keyboard, gestures, etc.), and it forwards the handling of these to the view model via the (properties, event callbacks, etc.) that is defined to link the view and view model.View modelTheview modelis an abstraction of the view exposing public properties and commands.Instead of the controller of the MVC pattern, or the presenter of the MVP pattern, MVVM has abinder, which automates communication between the view and its bound properties in the view model.The view model has been described as a state of the data in the model.[7]The main difference between the view model and the Presenter in the MVP pattern, is that the presenter has a reference to a view whereas the view model does not.Instead, a view directly binds to properties on the view model to send and receive updates.To function efficiently, this requires a binding technology or generating to do the binding.[6]BinderDeclarative data and command-binding are implicit in the MVVM pattern.In the Microsoft, the binder is a called.[8]] The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view.When implemented outside of the Microsoft stack, the presence of a declarative data binding technology is what makes this pattern possible,[4][9]and without a binder, one would typically use MVP or MVC instead and have to write more boilerplate (or generate it with some other tool).

Rationale

MVVM was designed to make use of data binding functions in WPF (Windows Presentation Foundation) to better facilitate the separation of view layer development from the rest of the pattern, by removing virtually all GUI code ("code-behind") from the view layer.[3] Instead of requiring user experience (UX) developers to write GUI code, they can use the framework markup language (e.g., XAML) and create data bindings to the view model, which is written and maintained by application developers. The separation of roles allows interactive designers to focus on UX needs rather than programming of business logic. The layers of an application can thus be developed in multiple work streams for higher productivity. Even when a single developer works on the entire code base, a proper separation of the view from the model is more productive, as user interface typically changes frequently and late in the development cycle based on end-user feedback.

The MVVM pattern attempts to gain both advantages of separation of functional development provided by MVC, while leveraging the advantages of data bindings and the framework by binding data as close to the pure application model as possible.[3][10][11] It uses the binder, view model, and any business layers' data-checking features to validate incoming data. The result is that the model and framework drive as much of the operations as possible, eliminating or minimizing application logic which directly manipulates the view (e.g., code-behind).

Criticism

A criticism of the pattern comes from MVVM creator John Gossman himself,[12] who points out that the overhead in implementing MVVM is "overkill" for simple UI operations.

He says that for larger applications, generalizing the ViewModel becomes more difficult.

Moreover, he illustrates that data binding in very large applications can result in considerable memory consumption.

Implementations

.NET frameworks

JavaScript frameworks

  • Angular

  • Aurelia [24]

  • Durandal [25]

  • Ember.js

  • Knockout.js

  • ReactJS

  • Omi.js [26]

  • Oracle JET [27]

  • Vue.js

  • Ext_JS

See also

  • Common layers in an information system logical architecture

References

[1]
Citation Linkgroups.google.comGoogle groups. "Thought: MVVM eliminates 99% of the need for ValueConverters".
Sep 28, 2019, 5:31 PM
[2]
Citation Linkmartinfowler.comMartin Fowler (19 July 2004). "The Presentation Model Design Pattern". Martin Fowler.com.
Sep 28, 2019, 5:31 PM
[3]
Citation Linkmsdn.microsoft.comSmith, Josh (February 2009). "WPF Apps with the Model-View-ViewModel Design Pattern". MSDN Magazine.
Sep 28, 2019, 5:31 PM
[4]
Citation Linkwww.slideshare.netMassey, Simon. "Presentation Patterns in ZK". Retrieved 24 March 2012.
Sep 28, 2019, 5:31 PM
[5]
Citation Linkknockoutjs.comSteve Sanderson. "KnockoutJS".
Sep 28, 2019, 5:31 PM
[6]
Citation Linkmsdn.microsoft.com"The MVVM Pattern". msdn.microsoft.com. Retrieved 29 August 2016.
Sep 28, 2019, 5:31 PM
[7]
Citation Linkwww.acceptedeclectic.comPete Weissbrod. "Model-View-ViewModel Pattern for WPF: Yet another approach". Archived from the original on 1 February 2008.
Sep 28, 2019, 5:31 PM
[8]
Citation Linkmsdn.microsoft.comWildermuth, Shawn. "Windows Presentation Foundation Data Binding: Part 1". Microsoft. Retrieved 24 March 2012.
Sep 28, 2019, 5:31 PM
[9]
Citation Linkbooks.zkoss.org"ZK MVVM". Potix. Retrieved 24 March 2012.
Sep 28, 2019, 5:31 PM
[10]
Citation Linkblogs.msdn.comJohn Gossman. "Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps". Cite journal requires |journal= (help)
Sep 28, 2019, 5:31 PM
[11]
Citation Linkkarlshifflett.wordpress.comKarl Shifflett. "Learning WPF M-V-VM".
Sep 28, 2019, 5:31 PM
[12]
Citation Linkblogs.msdn.comJohn Gossman. "Tales from the Smart Client: Advantages and disadvantages of M-V-VM". Cite journal requires |journal= (help)
Sep 28, 2019, 5:31 PM
[13]
Citation Linkgithub.comPrism Library
Sep 28, 2019, 5:31 PM
[14]
Citation Linkgithub.comCaliburn
Sep 28, 2019, 5:31 PM
[15]
Citation Linkcaliburnmicro.comCaliburn.Micro
Sep 28, 2019, 5:31 PM
[16]
Citation Linkgithub.comDevExpress MVVM
Sep 28, 2019, 5:31 PM
[17]
Citation Linkwww.dotvvm.comDotVVM
Sep 28, 2019, 5:31 PM
[18]
Citation Linkwww.mvvmlight.netMVVMLight Toolkit
Sep 28, 2019, 5:31 PM
[19]
Citation Linkreactiveui.netReactiveUI
Sep 28, 2019, 5:31 PM
[20]
Citation Linkgithub.comMugen MVVM Toolkit
Sep 28, 2019, 5:31 PM