Model–View–Viewmodel (MVVM) Architectural Pattern
A Model–View–Viewmodel (MVVM) Architectural Pattern is a front-end architectural pattern composed of a app model layer (that handles app business logic, a app view layer (that handles app view logic) and a modelview layer (that handles app information binding).
- Context:
- It can be followed by an MVVM Application.
- It can be supported by an MVVM Framework, such as Vue.js.
- …
- Counter-Example(s):
- See: Separation of Concerns, Business Logic, Front End, Back End, Data Object, Mediator Pattern, Ember.js.
References
2022
- (Wikipedia, 2022) ⇒ https://en.wikipedia.org/wiki/Model–view–viewmodel Retrieved:2022-11-20.
- Model–view–viewmodel (MVVM) is an architectural pattern in computer software that facilitates the separation of the development of the graphical user interface (GUI; the view)—be it via a markup language or GUI code—from the development of the business logic or back-end logic (the model) such that the view is not dependent upon any specific model platform.
The viewmodel of MVVM is a value converter,[1] meaning it is responsible for exposing (converting) the data objects from the model in such a way they can be easily managed and presented. In this respect, the viewmodel is more model than view, and handles most (if not all) of the view's display logic.[1] The viewmodel 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. It was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify event-driven programming of user interfaces. The pattern was incorporated into the Windows Presentation Foundation (WPF) (Microsoft's .NET graphics system) and Silverlight, WPF's Internet application derivative.[2] John Gossman, a Microsoft WPF and Silverlight architect, announced MVVM on his blog in 2005.[2][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 the JavaScript library KnockoutJS use model–view–binder.[2]
- Model–view–viewmodel (MVVM) is an architectural pattern in computer software that facilitates the separation of the development of the graphical user interface (GUI; the view)—be it via a markup language or GUI code—from the development of the business logic or back-end logic (the model) such that the view is not dependent upon any specific model platform.
2022
- https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel#Components_of_MVVM_pattern
- Model
- Model refers either to a domain model, which represents real state content (an object-oriented approach), or to the data access layer, which represents content (a data-centric approach).[citation needed]
- View
- As in the model–view–controller (MVC) and model–view–presenter (MVP) patterns, the view is the structure, layout, and appearance of what a user sees on the screen.[4] It displays a representation of the model and receives the user's interaction with the view (mouse clicks, keyboard input, screen tap gestures, etc.), and it forwards the handling of these to the view model via the data binding (properties, event callbacks, etc.) that is defined to link the view and view model.
- View model
- The view model is 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 a binder, 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.[5]
- 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 boilerplate code to do the binding.[4]
- Binder
- Declarative data and command-binding are implicit in the MVVM pattern. In the Microsoft solution stack, the binder is a markup language called XAML.[6] 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,[7][8] 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).
- ↑ 1.0 1.1 Cite error: Invalid
<ref>tag; no text was provided for refs namedMVVM-eliminates-valueconverters - ↑ 2.0 2.1 2.2 Cite error: Invalid
<ref>tag; no text was provided for refs namedJoshSmith - ↑ Cite error: Invalid
<ref>tag; no text was provided for refs namedGossman2005 - ↑ 4.0 4.1 "The MVVM Pattern". https://msdn.microsoft.com/en-us/library/hh848246.aspx. Retrieved 2016-08-29.
- ↑ Pete Weissbrod. "Model–View–ViewModel Pattern for WPF: Yet another approach.". http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html.
- ↑ Wildermuth, Shawn. "Windows Presentation Foundation Data Binding: Part 1". Microsoft. http://msdn.microsoft.com/en-us/library/aa480224.aspx. Retrieved 24 March 2012.
- ↑ Cite error: Invalid
<ref>tag; no text was provided for refs namedSMassey - ↑ "ZK MVVM". Potix. http://books.zkoss.org/wiki/Small_Talks/2012/February/New_Features_of_ZK_6#ZK_MVVM. Retrieved 24 March 2012.
20xx
- https://researchgate.net/figure/The-Model-View-ViewModel-MVVM-architectural-pattern-In-MVVM-the-View-layer-is_fig3_275258051
- QUOTE:
The Model View ViewModel (MVVM) architectural pattern. In MVVM, the View layer is concerned only about the graphical user interface, while the Model layer only about the business logic. All communication between them is realized by the ViewModel layer.
- QUOTE: