MVVM (Model View ViewModel)

MVVM (Model View ViewModel)

1 min read

Definition

MVVM separates application into Model, View, and ViewModel. The ViewModel exposes data streams/state that the View binds to via data binding.

flowchart LR
    subgraph View
        V[View]
    end
    subgraph ViewModel
        VM[ViewModel]
    end
    subgraph Model
        M[Model]
    end
    
    V <-.->|data binding| VM
    VM <-->|data| M

Flow

  1. View binds to ViewModel properties via data binding
  2. ViewModel exposes observables/state for View consumption
  3. User interactions in View trigger commands in ViewModel
  4. ViewModel updates Model and notifies View through bindings

ViewModel Responsibilities

The ViewModel acts as an abstraction of the View:

  • Exposes data as observable streams or state
  • Contains presentation logic and state management
  • Handles user interaction commands
  • Transforms Model data for View display
  • Does not reference View directly

Key Characteristics

  • Data Binding: View automatically updates when ViewModel state changes
  • Declarative UI: View declares bindings rather than imperatively updating
  • Testability: ViewModel can be tested without UI
  • Separation of Concerns: View handles UI, ViewModel handles logic

Common Implementations

  • Android: Jetpack Compose, LiveData, StateFlow
  • iOS: SwiftUI with @State, @Published
  • Web: React with state hooks, Vue with reactive data
  • Desktop: WPF, Avalonia

Components

Variants

Recent Notes

Graph View

Related notes