Catalog
concept#Architecture#Software Engineering#Platform

Model-View-ViewModel (MVVM)

An architectural pattern separating UI, presentation logic, and state management. Promotes testability and component reuse in client applications.

MVVM is a structural architectural pattern that separates Model, View and ViewModel to decouple state management, presentation logic and UI rendering.
Established
Medium

Classification

  • Medium
  • Technical
  • Architectural
  • Intermediate

Technical context

Dependency injection containerAsync data sources / REST APIsPersistence or repository layer

Principles & goals

Separation of state, presentation and logicViewModels focus on state and presentation logic, not UI elementsUse data binding and Commands instead of direct UI manipulation
Build
Domain, Team

Use cases & scenarios

Compromises

  • Excessive complexity from poorly structured ViewModels
  • Hiding performance issues due to excessive bindings
  • Misuse can weaken testing benefits (e.g. logic retained in Views)
  • Keep ViewModels slim: avoid referencing direct UI contexts
  • Use Commands instead of event handlers in Views
  • Adopt clear naming conventions for bindings and properties

I/O & resources

  • Domain model
  • UI design specification
  • Access to persistent data sources
  • ViewModels with clear presentation logic
  • Bindings and Commands in Views
  • Automated tests for presentation layer

Description

MVVM is a structural architectural pattern that separates Model, View and ViewModel to decouple state management, presentation logic and UI rendering. It simplifies unit testing and modular UI composition. Commonly used in desktop, mobile and cross-platform .NET UI frameworks.

✔

  • Improved testability via isolated ViewModel logic
  • Better modularity and component reuse
  • Facilitates parallel development of UI and logic

✖

  • Increased boilerplate for bindings and property implementations
  • Not every UI interaction can be cleanly abstracted
  • Less suitable for very simple UIs with no state logic

  • ViewModel unit test coverage

    Percentage of logic methods and states covered by unit tests.

  • Number of reused ViewModels

    Count of ViewModels reused across multiple views or platforms.

  • Average binding latency

    Measurement of time bindings take to propagate UI updates.

Reference project: WPF To-Do App

Small desktop app using MVVM for bindings, commands and persistence.

Cross-platform notes app (.NET MAUI)

Example of shared ViewModel and separate Views for iOS/Android.

Complex form module

Module with validation, undo/redo and asynchronous data sync via ViewModel.

1

Identify Views, extract state logic into ViewModels and define bindings.

2

Implement commands and notification mechanisms (INotifyPropertyChanged).

3

Provide dependency injection and write unit tests for ViewModels.

⚠️ Technical debt & bottlenecks

  • Incomplete separation of UI and logic in legacy ViewModel
  • Missing tests for ViewModel edge cases
  • Ad-hoc bindings without naming conventions hinder refactoring
binding-performanceviewmodel-sizelifecycle-synchronization
  • Using MVVM in an app with a single static view introduces unnecessary overhead.
  • Misusing ViewModel as a repository or persistence layer.
  • Hiding business logic in view events instead of encapsulating it in the ViewModel.
  • Careless bindings can cause memory leaks or performance issues
  • Too fine-grained ViewModels cause overhead and complexity
  • Platform lifecycle differences ignored when reusing ViewModels
Knowledge of data binding and UI frameworks (e.g. WPF, MAUI)Experience with unit testing and mockingUnderstanding of asynchrony and state management
Testability of presentation logicReusability across platformsClear responsibility boundaries in the UI stack
  • • Requires UI framework with data binding or equivalent API
  • • Requires discipline in separating UI and logic code
  • • Limited effectiveness for very simple UIs