Model-View-ViewModel (MVVM)

Leverages data binding to decouple View from ViewModel.

“The ViewModel is an abstraction of the View. It exposes public properties and commands.”

The standard for modern reactive UIs (Vue, React-ish, modern Android).

graph LR
    User -->|Interacts| V[View]
    V <-->|Data Binding| VM[ViewModel]
    VM -->|Updates| M[Model]

When to use

  • Modern FE Frameworks: Vue, Angular, Knockout, Svelte.
  • Declarative UIs: SwiftUI, Jetpack Compose.

Explanation

Problem

MVP requires a lot of boilerplate “glue” code view.setX(model.x).

Solution

  • View: Layout + Binding declarations.
  • ViewModel: State of the View.
  • Binder: (Framework provided) Automagically syncs View and ViewModel.

Real world analogy

Remote Control Car:

  • You (User) move the stick on the Remote (ViewModel).
  • The Car (View) moves automatically because of the radio signal (Data Binding).
  • You don’t push the car yourself.

Pros and Cons

Pros Cons
  • No glue code (Data Binding)
    		•
  • Debugging data binding is hard
    		•
  • Development speed
    		•
  • Performance overhead of binders
    		•

    Code example

    Typescript (Vue Style)

    PHP (Not common, conceptually)