MVVM: Model, View, ViewModel & Data Binding

MVVM (Model-View-ViewModel) separates an app into three layers: Model (data/business logic, UI-agnostic), View (the UI itself), and ViewModel (mediates between the two, exposing view-ready state and commands without holding UI framework references).

A Minimal Example (SwiftUI)

class ProfileViewModel: ObservableObject {
  @Published var displayName: String = ""
  @Published var isLoading = false

  func load(user: User) {
    isLoading = true
    displayName = "\(user.firstName) \(user.lastName)"
    isLoading = false
  }
}

struct ProfileView: View {
  @StateObject var viewModel = ProfileViewModel()
  var body: some View {
    Text(viewModel.displayName)  // updates automatically when displayName changes
  }
}

Data Binding

The View observes ViewModel properties and updates automatically when they change -- a defining feature of MVVM in frameworks like WPF, SwiftUI, or Jetpack Compose, reducing manual UI-sync code compared to imperatively pushing data into UI elements.

Why It's Testable

Because the ViewModel exposes plain data/commands rather than manipulating UI objects directly, tests can instantiate a ViewModel and verify its behavior (state changes, command execution) without needing a real rendered UI.

Commands

In frameworks like WPF, a command object encapsulates an action the ViewModel exposes, which the View binds a button to invoke -- rather than the View directly calling a method by name.