Model-View-View Model

Owned by Computer Science Department
Last updated: Jan 21, 2024
2 min read

Model-View-ViewModel (MVVM) is an architectural pattern that originated from Microsoft as a specialization of the more general Presentation Model. MVVM is used mostly for building user interfaces in part because it helps to cleanly separate the visual representation and interactive logic of an application from the underlying business logic and data access.

 

Here's what each component does in the MVVM pattern:

  1. Model: The Model in MVVM is essentially the same as in MVC or MVP. It represents the data and business logic of the application.

  2. View: The View, as in MVC and MVP, represents the visual elements of your application, such as the user interface controls, graphics, and so on. In MVVM, the View observes the ViewModel and updates itself when the ViewModel's data changes.

  3. ViewModel: The ViewModel in MVVM is an abstraction of the View. It is not a model of the View, rather, it provides a set of data that the View can use. It's responsible for coordinating the View's interactions with any Model classes that are necessary. It retrieves the necessary data from the Model, manipulates it into a form that is easy for the View to handle, and then exposes that data to the View.

The key part of MVVM is the binding between View and ViewModel. In some frameworks, this binding is automatic: when data in the ViewModel changes, the View automatically updates, and when data in the View changes (perhaps due to user input), the ViewModel is automatically updated. This allows changes (like user inputs) to be automatically propagated back to the Model, and allows the Model to propagate changes to the View, all without the ViewModel needing to have any knowledge of the specific View that's using it. This makes testing easier, because the ViewModel can be tested in isolation from the View.

MVVM is often used with Windows Presentation Foundation (WPF), Xamarin Forms or any other platform that supports data-binding, but it's also become popular in web development, with JavaScript frameworks like Angular and React supporting the pattern.