Home / Definitions / MVVM (Model-View-ViewModel)

MVVM (Model-View-ViewModel)

Webopedia Staff
Last Updated May 24, 2021 7:49 am

Model-View-ViewModel, or MVVM, is a software design pattern intended to separate user interface controls and program logic in Windows and web graphic presentation software. Also known as model-view-binder, it helps break programs into modules for the development and reuse of code in a faster and simpler manner.

Derived from the Model View Controller pattern, MVVM helps address various development issues to make an application easier to test, refine, maintain, and evolve. UI designers find the model easier to collaborate when developing the parts of an app.

The MVVM pattern

The MVVM pattern has three components: model, view, and the view model.

Model

The model holds the application data that are usually structs or simple classes. It can be considered a representation of the app s domain model, containing a data model along with a validation and business logic. Examples of model objects are Plain Old CLR Objects (POCOs), data transfer objects (DTOs), and generated entity and proxy objects.

View

The View defines the layout, structure, and appearance of what the users see on the screen. It is the only thing end users are familiar with and interact with. In MVVM, the view is active, meaning that it is not completely manipulated by a presenter/controller. It has events, behaviors, and data bindings that require knowledge of the underlying model and view model.

View Model

The view model is situated between the model and view layers, which houses the controls for interacting with the view. It introduces Presentation Separation, or the idea of keeping the view s nuances separate from the model. The view model exposes commands and methods, and points to maintain the view s state, trigger events in the view, and manipulate the model.

Benefits of MVVM

Software designers prefer MVVM because of its advantages:

Extensibility

MVVM makes it easy for designers to add or replace new pieces of code. They can redefine the app UI without touching the code for as long as the code is entirely in XAML.

Testability

It is easier for designers to write unit tests against core logic with MVVM. The view model s unit tests exercises the same functionality used by the view.

Transparency in communication

The view model gives the view controller a transparent interface to populate the view layer and interact with the model layer. This results in the transparent communication between an application s layers.