Model View ViewModel

Grundidee und Aufbau

Model View ViewModel (MVVM) ist ein Entwurfsmuster und eine Variante des Model-View-Controller-Musters (MVC). Es trennt die Darstellung und UI-Logik von der Geschäftslogik und dem Software-Backend. Kern ist die Datenbindung (Data Binding), durch die View und Model lose miteinander gekoppelt werden.

Das Muster besteht aus drei Komponenten:

• Das Model ist die Datenzugriffsschicht. Es stellt Inhalte bereit, verarbeitet Änderungen, validiert Benutzerdaten und enthält die gesamte Geschäftslogik. Es kann unabhängig durch Unit-Tests geprüft werden.
• Die View umfasst alle grafisch dargestellten Elemente. Sie bindet sich an Eigenschaften und Befehle des ViewModels, zeigt Inhalte an, nimmt Benutzereingaben auf und leitet UI-Ereignisse weiter. Dadurch bleibt ihr Code-Behind gering und sie ist leicht austauschbar.
• Das ViewModel enthält die UI-Logik und vermittelt zwischen View und Model. Es ruft Methoden oder Dienste des Models auf und stellt der View öffentliche Eigenschaften und Befehle bereit. Das ViewModel darf keine Kenntnis der konkreten View besitzen.

Das ViewModel bildet den Zustand der Benutzeroberfläche ab. Ein Binder verbindet View und ViewModel mithilfe des Beobachter-Entwurfsmusters. Ändert sich der Zustand durch Eingaben oder andere Ereignisse, reagiert die UI unmittelbar; umgekehrt werden UI-Änderungen an das ViewModel weitergegeben. Diese bidirektionale Verbindung ermöglicht Echtzeit-Datenbindung. Die Aufteilung einer Oberfläche in aufeinander aufbauende Komponenten, die schließlich die gesamte View bilden, heißt Compositing und ist typisch für MVVM-Anwendungen.

Entwicklung und technische Umsetzung

MVVM wurde 2005 von Microsoft MVP John Gossman veröffentlicht. Das Muster ist eine Spezialisierung des Presentation Model von Martin Fowler. Beide verschieben Zustand und Verhalten der View in ein separates UI-Model, das Presentation Model beziehungsweise ViewModel. Das Presentation Model kann eine View unabhängig von der UI-Plattform erzeugen; MVVM zielte ursprünglich auf Benutzeroberflächen mit WPF.

In WPF und Silverlight besteht die View aus deklarativem XAML-Markup. UI-Designer können sie beispielsweise mit Expression Blend entwerfen und dabei Datenbindungen zum ViewModel festlegen, ohne Code-Behind zu schreiben. Die Logik wird etwa in C# oder VB.NET implementiert.

Auch JavaFX unterstützt MVVM. Die View kann mit FXML und beispielsweise SceneBuilder entwickelt werden. Im ViewModel wird sie per Property Binding uni- oder bidirektional mit der Geschäftslogik verbunden.

Web-, Mobil- und Framework-Einsatz

Der für MVVM erforderliche Datenbindungsmechanismus wurde 2010 von dem Microsoft-Entwickler Steve Sanderson nach JavaScript portiert. Die daraus entstandene Bibliothek heißt Knockout.js. Außerdem wird MVVM in JavaScript-Frameworks wie Angular, Vue.js oder React eingesetzt. Bei client-lastigen Webanwendungen verringert die Datenbindung den Implementierungsaufwand, weil manuelle Zugriffe auf das Document Object Model (DOM) stark reduziert werden. Die Datenbindungen werden wie bei XAML-basierten Microsoft-Produkten deklarativ beschrieben.

Das Muster und die Datenbindung können ebenfalls bei der Entwicklung mobiler Android-Anwendungen verwendet werden. Insgesamt wird MVVM heute in vielen webbasierten Clients eingesetzt. Zu den Frameworks und Plattformen, die MVVM umsetzen, zählen Windows Presentation Foundation, Knockout.js, Vue.js, JavaFX und SwiftUI.

Vorteile

Die Geschäftslogik kann unabhängig von der Darstellung bearbeitet werden. Views bleiben leicht austauschbar, und mehrere unterschiedliche Views können dasselbe ViewModel verwenden, ohne dass dessen Programmierung geändert werden muss.

Die Testbarkeit verbessert sich, weil die UI-Logik im ViewModel liegt und dieses unabhängig von der View instanziiert werden kann. Dadurch genügen codebasierte Modultests des ViewModels; eigene UI-Tests sind nicht nötig.

Gegenüber MVC reduziert MVVM die Menge an Glue Code zwischen Model und View, weil keine Controller-Instanzen erforderlich sind. Außerdem können reine UI-Designer die Views gestalten, während Entwickler Models und ViewModels unabhängig davon implementieren.

Nachteile und Voraussetzungen

Ein möglicher Nachteil ist der höhere Rechenaufwand durch den enthaltenen bidirektionalen Beobachter. Der generische Datenbindungsmechanismus erspart zwar die Implementierung verschiedener Controller, ist für die Umsetzung des MVVM-Musters jedoch zwingend erforderlich. Deshalb ist MVVM technologie-spezifisch: Es benötigt eine Infrastruktur zur Datenbindung, die häufig Binder genannt wird.