Model–view–viewmodel


Model–view–viewmodel is a layer architecture design in computer software that facilitates the separation of the development of a graphical user interface —be it via a markup language or GUI code—from the development of the business logic or back-end logic such that the view is not dependent upon any specific model platform.
The viewmodel of MVVM is a value converter, meaning it is responsible for exposing 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 of the view's display logic. 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. MVVM is very similar to the Model-view-presenter 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) and Silverlight, WPF's Internet application derivative. John Gossman, a Microsoft WPF and Silverlight architect, announced MVVM on his blog in 2005.
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.

Components of MVVM pattern

;Model
;View
;View model
;Binder

Rationale

MVVM was designed to remove virtually all GUI code from the view layer, by using data binding functions in WPF to better facilitate the separation of view layer development from the rest of the pattern. Instead of requiring user experience developers to write GUI code, they can use the framework markup language 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 codebase, a proper separation of the view from the model is more productive, as the 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. 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.

Criticism

John Gossman has criticized the MVVM pattern and its application in specific uses, stating that MVVM can be "overkill" when creating simple user interfaces. For larger applications, he believes that generalizing the viewmodel upfront can be difficult, and that large-scale data binding can lead to lower performance.

Implementations

.NET frameworks

  • .NET Community Toolkit
  • Avalonia
  • Caliburn, Caliburn.Micro
  • Chinook.DynamicMvvm Open source
  • DevExpress MVVM
  • DotVVM open source project
  • FreshMvvm
  • Jellyfish
  • Mugen MVVM Toolkit
  • MVVMLight Toolkit
  • MvvmCross
  • MvvmZero
  • Prism Library
  • Rascl
  • ReactiveUI
  • Uno Platform - Open source

Web Component libraries

Java frameworks

JavaScript frameworks

Frameworks for C++ and XAML (Windows)

  • Xamlcc

Examples

The following are simple examples of an implementation of the MVVM pattern.

C++

This is an example using C++.

export module org.wikipedia.examples.mvvm.Model;
export namespace org::wikipedia::examples::mvvm


export module org.wikipedia.examples.mvvm.ViewModel;
import org.wikipedia.examples.mvvm.Model;
export namespace org::wikipedia::examples::mvvm


export module org.wikipedia.examples.mvvm.View;
import std;
import org.wikipedia.examples.mvvm.ViewModel;
using std::cin;
using std::string;
export namespace org::wikipedia::examples::mvvm

Then, the application could be run like so:

import org.wikipedia.examples.mvvm.Model;
import org.wikipedia.examples.mvvm.View;
import org.wikipedia.examples.mvvm.ViewModel;
using namespace org::wikipedia::examples::mvvm;
int main

C#

This is an example using C#.

namespace Wikipedia.Examples.Mvvm;
public class Model


namespace Wikipedia.Examples.Mvvm;
public class ViewModel


namespace Wikipedia.Examples.Mvvm;
using System;
public class View

Then, the application could be run like so:

namespace Wikipedia.Examples;
using Wikipedia.Examples.Mvvm;
public class Main

Java

This is an example using Java.

package org.wikipedia.examples.mvvm;
public class Model


package org.wikipedia.examples.mvvm;
public class ViewModel


package org.wikipedia.examples.mvvm;
import java.util.Scanner;
public class View

Then, the application could be run like so:

package org.wikipedia.examples;
import org.wikipedia.examples.mvvm.*;
public class Main

Rust

This is an example using Rust.

pub struct Model
impl Model


use super::model::Model;
pub struct ViewModel<'a>
impl<'a> ViewModel<'a>


use std::io::;
use super::view_model::ViewModel;
pub struct View<'a>
impl<'a> View<'a>

Then, the application could be run like so:

mod mvvm;
use mvvm::;
fn main