~2025-28186-96: "Korrekte" Nutzung des denglischen Genitivs

2025-10-09T07:47:52Z

"Korrekte" Nutzung des denglischen Genitivs

Neue Seite

[[Datei:MVVMPattern.svg|miniatur|hochkant=2|MVVM-Konzept: Die Datenbindung (Data Binding) ermöglicht die Trennung von View (z. B. XAML-Markup oder HTML) und Model für die Darstellung.]]

'''Model View ViewModel''' ('''MVVM''') ist ein [[Entwurfsmuster]] und eine Variante des [[Model View Controller|Model-View-Controller]]-Musters (MVC). Es dient zur Trennung zwischen Darstellung und Logik der [[Benutzerschnittstelle]] (UI) und des [[Frontend und Backend|Software-Backends]]. Das Entwurfsmuster ist die Standardimplementierung von UI-Plattformen wie [[Cocoa (API)|Cocoa]] ([[Apple]]), [[Windows Presentation Foundation]] (WPF, [[Microsoft]]) und [[JavaFX]] ([[Oracle]]). Im Webbrowser wird das Muster durch bestimmte [[JavaScript]]-[[Framework|Frameworks]] wie [[React]] oder [[Knockout.js]] verfügbar, welche den Zustand einer [[HTML5]]-Benutzeroberfläche verwalten können. Die Unterteilung der Benutzeroberfläche in [[Komponentenbasierte Entwicklung|Komponenten]], die aufeinander aufbauen und schlussendlich als View die gesamte Applikationsoberfläche darstellen, wird ''[[Kompositum (Entwurfsmuster)|Compositing]]'' genannt und ist typisch für MVVM-Anwendungen.

Das MVVM-Entwurfsmuster erfordert neben dem Kompositum-Entwurfsmuster auch das [[Beobachter (Entwurfsmuster)|Beobachter]]-Entwurfsmuster, da das ''ViewModel'' den Zustand der UI abbildet, der sich wiederum durch Eingabe- und andere Ereignisse ändert. Die unmittelbare Reaktion der UI auf Änderungen im ''ViewModel'' und umgekehrt realisiert die [[Echtzeit]]-Datenbindung des Musters.

MVVM erlaubte bei seiner Einführung die heute gebräuchliche Rollentrennung von UI-Designern im Frontend und Entwicklern im Backend, wodurch [[Schichtenarchitektur|Anwendungsschichten]] von verschiedenen Arbeitsgruppen entwickelt werden konnten. Im Desktop-Umfeld eingeführt, findet sich das MVVM-Entwurfsmuster heute in den meisten webbasierten Clients.

== Geschichte ==
Das MVVM wurde 2005 von [[Microsoft MVP]] John Gossman veröffentlicht. Es ist eine Spezialisierung des ''Presentation Model'' von [[Martin Fowler]]<ref>{{Internetquelle |url=https://martinfowler.com/eaaDev/PresentationModel.html |titel=Presentation Model |abruf=2025-03-27}}</ref> und ist mit diesem insofern identisch, als beide Muster Zustand und Verhalten der View in ein separates UI-Model (Presentation bzw. View Model) verschieben. Das ''Presentation Model'' ermöglicht allerdings das Erzeugen einer View unabhängig von der UI-Plattform, wohingegen das MVVM ursprünglich auf UIs mittels WPF abzielt. Es findet allerdings inzwischen auch in anderen Bereichen Anwendung, ähnlich wie bei MVC.

== Beschreibung ==
Das MVVM nutzt die funktionale Trennung des [[Model View Controller|MVC-Musters]] von Model und View. Zum Erreichen einer [[Lose Kopplung|losen Kopplung]] zwischen diesen Komponenten wird ein Datenbindungsmechanismus verwendet. Das MVVM-Muster enthält folgende drei Komponenten:

* ''Model:'' [[Schichtenarchitektur#Datenzugriffsschicht|Datenzugriffsschicht]] für die Inhalte, die dem Benutzer angezeigt und von ihm manipuliert werden. Dazu benachrichtigt es über Datenänderungen und führt eine [[Datenvalidierung|Validierung]] der vom Benutzer übergebenen Daten durch. Es enthält die gesamte [[Geschäftslogik]] und ist für sich alleine durch [[Modultest|Unit Tests]] überprüfbar.

* ''View:'' Alle durch die ''grafische Benutzeroberfläche'' ([[Grafische Benutzeroberfläche|GUI]]) angezeigten Elemente. Es bindet sich an Eigenschaften des ViewModels, um Inhalte darzustellen und zu manipulieren sowie Benutzereingaben weiterzuleiten. Durch die Datenbindung ist die View einfach austauschbar und ihr [[ASP.NET#Code-Behind-Modell|Code-Behind]] gering.

* ''ViewModel:'' Enthält die UI-Logik (Model der View) und dient als Bindeglied zwischen View und obigem Model. Einerseits tauscht es Information mit dem Model aus, ruft also [[Methode (Programmierung)|Methoden]] oder [[Dienst (Informatik)|Dienste]] auf. Andererseits stellt es der View öffentliche [[Sprachelemente von C-Sharp#Eigenschaften (Schlüsselwörter get, set und value)|Eigenschaften]] und [[Kommando (Entwurfsmuster)|Befehle]] zur Verfügung. Diese werden von der View an [[Steuerelement]]e gebunden, um Inhalte auszugeben bzw. UI-Ereignisse weiterzuleiten. Das ViewModel darf dabei keinerlei Kenntnis der View besitzen.

Das MVVM-Muster kann als technologie-spezifisch bezeichnet werden, da für die Verknüpfung von View und ViewModel ein Datenbindungsmechanismus benötigt wird. Diese Infrastruktur wird häufig als ''Binder'' bezeichnet.<ref>{{Internetquelle |url=https://books.zkoss.org/zk-mvvm-book/8.0/data_binding/binder.html |titel=Binder {{!}} |abruf=2025-03-27}}</ref> Im Detail handelt es sich hierbei um einen bidirektionalen Einsatz des [[Beobachter (Entwurfsmuster)|Beobachter-Muster]]s. ''Binder'', welche eine Datenbindung auf Basis von deklarativen Angaben etablieren können, sind für verschiedene Techniken vorhanden.

=== .NET und JavaFX ===
In Bezug auf [[Windows Presentation Foundation|WPF]] und [[Silverlight]] bedeutet MVVM, dass die View aus rein deklarativem [[XAML]]-Markup besteht. Sie kann von UI-Designern etwa mittels [[Microsoft Expression Blend|Expression Blend]] entworfen werden, wobei lediglich Datenbindungen zum ViewModel erzeugt werden müssen, aber kein Code-Behind. Die Logik wird in einer Programmiersprache wie [[C-Sharp|C#]] oder [[Visual Basic .NET|VB.NET]] implementiert. Die Abhängigkeiten zwischen Markup und Code werden minimiert.
Gleiches gilt für JavaFX. Hier kann die View mittels [[FXML]] und beispielsweise SceneBuilder entwickelt und dann im ViewModel per Property Binding uni- oder bidirektional mit der Geschäftslogik verbunden werden.

=== JavaScript/HTML ===
Das MVVM-Muster bzw. der hierzu benötigte Datenbindungsmechanismus wurden im Jahr 2010 von dem Microsoft-Entwickler ''Steve Sanderson'' nach [[JavaScript]] portiert. Die entstandene JavaScript-Bibliothek trägt den Namen [[Knockout.js]]. Mittlerweile findet das MVVM-Muster ebenfalls Einsatz in anderen JavaScript-Frameworks, wie z. B. [[Angular]], [[Vue.js]] oder [[React]]. Durch die Verwendung des MVVM-Muster bei client-lastigen [[Webanwendung]]en wird der Implementierungsaufwand reduziert, da sonst übliche manuelle [[Document Object Model|DOM]]-Zugriffe durch die Datenbindung stark reduziert werden können. Die Beschreibung der Datenbindung erfolgt ebenfalls deklarativ, wie bei [[Extensible Application Markup Language|XAML]]-basierten Microsoft-Produkten.

=== Android ===

Das MVVM-Muster und die Datenbindung kann ebenfalls bei der Implementierung mobiler [[Android (Betriebssystem)|Android]]-Anwendungen verwendet werden.<ref>{{Internetquelle |url=https://developer.android.com/topic/libraries/data-binding?hl=de |titel=Data Binding Library {{!}} App architecture |abruf=2025-03-27}}</ref>

== Vor- und Nachteile ==
=== Vorteile ===
* Die [[Geschäftslogik]] kann unabhängig von der Darstellung bearbeitet werden. MVVM „erbt“ die leichtere Austauschbarkeit der View vom [[Model View Controller|MVC]]-Muster.
* Die Testbarkeit verbessert sich, da die ViewModel die UI-Logiken enthalten und unabhängig von der View instanziiert werden können. Hierdurch sind keine UI-Tests nötig. Stattdessen genügen codebasierte [[Modultest]]s des ViewModel.
* Die Menge von [[Glue Code]] zwischen Model und View wird durch den Verzicht von Controller-Instanzen gegenüber dem MVC-Muster reduziert.<ref>{{cite web| author = John Gossman| title = Tales from the Smart Client: Advantages and disadvantages of M-V-VM.| url = https://blogs.msdn.com/johngossman/archive/2006/03/04/543695.aspx| accessdate=2012-05-28}}</ref>
* Views können von reinen UI-Designern gestaltet werden, während Entwickler unabhängig davon die Models und ViewModels implementieren.
* Es können unterschiedliche Views erstellt werden, die alle an dasselbe ViewModel gebunden werden, ohne dass dort Änderungen an der Programmierung vorgenommen werden müssen.

=== Nachteile ===
* Als Nachteil kann der höhere Rechenaufwand aufgrund des enthaltenen bi-direktionalen [[Beobachter (Entwurfsmuster)|Beobachter]]s gewertet werden.
* Der generische Datenbindungsmechanismus erspart die Implementierung von verschiedenen Controllern. Allerdings ist dieser Mechanismus zur Umsetzung des MVVM-Muster zwingend erforderlich.

== MVVM-Frameworks ==
Es existieren verschiedene Frameworks, welche MVVM umsetzen.

* [[Windows Presentation Foundation]]
* [[Knockout.js]] – MVVM in JavaScript
* [[Vue.js]]
* [[JavaFX]]
* [[SwiftUI]]

== Siehe auch ==
* [[Model View Controller]]
* [[Smart UI]]

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

== Weblinks ==
* [https://www.norberteder.com/model-view-viewmodel-die-serie/ Norbert Eder: Model-View-ViewModel Die Serie] – Codebeispiel

== Einzelnachweise ==
<references />

{{Navigationsleiste Entwurfsmuster}}

[[Kategorie:Entwurfsmuster]]
[[Kategorie:Softwarearchitektur]]

Model View ViewModel - Versionsgeschichte

~2025-28186-96: "Korrekte" Nutzung des denglischen Genitivs