MVVM is a user interface architecture design pattern intended to separate user interface code from the rest of the code. With MVVM, you can declaratively define the user interface in XAML and use data binding markup to link it to other layers containing data and commands. The data binding infrastructure establishes a weak linkage that ensures that the user interface and the linked data are synchronized and directs user input to the appropriate commands.
Because weak coupling is provided, the use of data binding reduces hard dependencies between different types of code. This makes it easier to change individual code blocks (methods, classes, controls, etc.) without unintended side effects on other blocks. This separation is an example of separation of concerns, an important principle used in many design patterns.
Advantages of MVVM
Code separation has many advantages, including the following.
- The possibility of iterative arbitrary programming style. Isolated changes are less dangerous and more convenient for experimentation;
- Simplification of unit testing. Isolated code blocks can be tested separately and outside of working environments;
- Support team collaboration. Unrelated code for well-designed interfaces can be developed by individual users or teams and integrated later;
- Improved maintainability. Fixing bugs in unrelated code reduces the likelihood of regressions in other code.
Unlike MVVM applications, an application with a more traditional programmatic code structure typically uses data binding only for displayed data and responds to user input by directly handling events provided by controls. Event handlers are implemented in program part code files (e.g., MainPage.xaml.cs) and are often tightly coupled with controls, typically containing code that directly controls the user interface. This makes it difficult or impossible to replace a control without changing the event handling code. In this architecture, program part code files often accumulate code that is not directly related to the user interface, such as database access code. This leads to code duplication and code modification for use with other pages.
Application tiers
When using the MVVM pattern, the application is divided into the following levels.
- At the model level, the types representing business data are defined. This includes everything needed to model the core domain of the application, and the core logic of the application is often defined at this level. This layer is completely independent of the view and presentation model layers and is often partially hosted in the cloud. With a fully realized model layer, several different client applications can be created if needed, such as UWP applications and web applications working with the same underlying data;
- At the presentation layer, the user interface is defined using XAML markup. The markup includes data binding expressions (e.g., x:Bind) that define the relationship between certain UI components and various elements of the view and model model. Program part code files are sometimes used at the view level to include additional code needed to customize or manipulate the user interface, and to extract data from event handler arguments before calling the view model method that does the main work;
- The view model layer provides the data binding targets for the view. In many cases, the view model directly provides the model or elements containing specific model elements. The view model may also define elements to track data that are relevant to the user interface but not to the model. For example, the display order in a list of items can be tracked. The view model is also used as an integration point with other services, such as database access code. Simple projects may not require a separate model layer. In these cases, a view model that encapsulates all the necessary data may suffice.