Model View ViewModel

from Wikipedia, the free encyclopedia
MVVM concept: The data binding enables the separation of view (e.g. XAML markup or HTML) and model for the display.

Model View ViewModel ( MVVM ) is a design pattern and a variant of the Model-View-Controller pattern (MVC). It serves to separate the representation and logic of the user interface (UI). It targets modern UI platforms such as Cocoa , Windows Presentation Foundation (WPF), JavaFX , and HTML5 because a data binding mechanism is required. Compared to the MVC pattern, testability can be improved and the implementation effort reduced, since no separate controller instances are required. MVVM allows the roles of UI designers and developers to be separated, which means that application layers can be developed by different working groups. Designers can focus on user experience and developers can write the UI and business logic .

history

The MVVM was published in 2005 by Microsoft MVP John Gossman. It is a specialization of the Presentation Model by Martin Fowler and is identical to it in that both patterns move the state and behavior of the view into a separate UI model (presentation or view model). The Presentation Model , however, enables a view to be generated independently of the UI platform, whereas the MVVM originally aims at UIs using WPF. However, it is now also used in other areas, similar to MVC.

description

The MVVM uses the functional separation of the MVC pattern of model and view. A data binding mechanism is used to achieve a loose coupling between these components. The MVVM pattern has the following three components:

  • Model: Data access layer for the content that is displayed to the user and manipulated by him. To do this, it notifies you of data changes and validates the data transferred by the user. It contains the entire business logic and can be checked by unit tests on its own .
  • View: All elements displayed by the graphical user interface ( GUI ). It binds to properties of the ViewModel in order to display and manipulate content as well as to forward user input. Due to the data binding, the view is easy to exchange and its code-behind is minimal.
  • ViewModel: Contains the UI logic (model of the view) and serves as a link between the view and the above model. On the one hand, it exchanges information with the model, i.e. it calls up methods or services . On the other hand, it provides the view with public properties and commands . These are bound to controls by the view in order to output content or forward UI events. The ViewModel must not have any knowledge of the view.

The MVVM pattern can be described as technology-specific, since a data binding mechanism is required to link the View and ViewModel. This infrastructure is often referred to as a binder . In detail, this is a bidirectional use of the observer pattern . Binder , which can establish data binding on the basis of declarative information, are available for various technologies.

.NET and JavaFX

In terms of WPF and Silverlight , MVVM means that the view consists of purely declarative XAML markup. It can be designed by UI designers using Expression Blend , for example, whereby only data bindings to the ViewModel have to be created, but no code-behind. The logic is implemented in a programming language such as C # or VB.NET . The dependencies between markup and code are minimized. The same applies to JavaFX. Here, the view can be developed using FXML and, for example, SceneBuilder and then connected to the business logic in the ViewModel via property binding in one or two directions.

JavaScript / HTML

The MVVM pattern and the data binding mechanism required for this were ported to JavaScript in 2010 by Microsoft developer Steve Sanderson . The resulting JavaScript library is called Knockout.js . The MVVM pattern is now also used in other JavaScript frameworks, such as B. AngularJS . By using the MVVM pattern for client-heavy web applications , the implementation effort is reduced, since otherwise usual manual DOM accesses can be greatly reduced by the data binding. The description of the data binding is also declarative, as with XAML- based Microsoft products.

Android

The MVVM pattern and data binding can also be used when implementing Android mobile applications.

Advantages and disadvantages

advantages

  • The business logic can be edited independently of the representation. MVVM "inherits" the easier interchangeability of the view from the MVC pattern.
  • Testability is improved because the ViewModel contain the UI logics and can be instantiated independently of the view. This means that no (usually manual) UI tests are necessary. Instead, code-based module tests of the ViewModel are sufficient .
  • The amount of glue code between model and view is reduced by eliminating controller instances compared to the MVC pattern.
  • Views can be designed by pure UI designers, while developers implement the models and view models independently.
  • Different views can be created, all of which are linked to the same ViewModel without having to make changes to the programming.

disadvantage

  • The higher computational effort due to the included bi-directional observer can be rated as a disadvantage .
  • The generic data binding mechanism saves the implementation of various controllers. However, this mechanism is absolutely necessary to implement the MVVM model.

MVVM frameworks

There are various frameworks that MVVM implement.

There are also auxiliary libraries that are intended to facilitate the use of WPF. These are also known as MVVM frameworks. This includes

  • Prism
  • Crosslight (commercial framework from Intersoft Solutions)
  • MVVM Light
  • Caliburn.Micro

and many others.

See also

literature

  • Raffaele Garofalo: Building Enterprise Applications with Windows Presentation Foundation and the Model View ViewModel Pattern , Microsoft Press 2011, ISBN 978-0735650923

Web links

Individual evidence

  1. ↑ Presentation Model
  2. ↑ Binder definition from the ZK framework
  3. ↑ Android Data Binding Guide (English)
  4. ^ John Gossman: Tales from the Smart Client: Advantages and disadvantages of MV-VM. . Retrieved May 28, 2012.
Design pattern


Gang of Four
Generation pattern

Abstract factory  | Builder  | Factory method  | Prototype  | Singleton

Structural pattern

Adapter  | Bridge  | Decorator  | Facade  | Flyweight  | Compound  word | Deputy

Behavior patterns

Observer  | Visitors  | Interpreter  | Iterator  | Command  | Memento  | Stencil method  | Strategy  | Intermediary  | Condition  | Chain of responsibility

Other
standard patterns
Generation pattern

Multitone  | Object pool

Behavior patterns

Interceptor  | Zero object  | Protocol stack

Other

Business Delegate  | Repository  | Data Access Object  | Transfer  object | Dependency Injection  | Extension Interface  | Fluent Interface  | Inversion of Control (IoC) | Model View Controller (MVC) | Model View Presenter (MVP) | Model View ViewModel (MVVM) | Model View Update (MVU) | Thread pool  | Service Locator  | Registry