Typorithm · medium

MVC & MVVM

mvc-mvvmarchitecturemvcmvvmseparation-of-concerns

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn MVC & MVVM

App Patterns

MVC splits an app into Model, View, and a Controller that mediates: it updates the model then explicitly re-renders the view. MVVM replaces the controller with a ViewModel exposing bindable state, where two-way binding syncs view and model automatically.

MVC separates concerns into three parts: the Model holds state, the View displays it, and the Controller mediates — handling input, updating the model, and telling the view to re-render.

MVVM keeps Model and View but swaps the controller for a ViewModel: it exposes bindable, observable state that the view binds to directly.

The key difference is binding: in MVC you call render explicitly after each change, while MVVM's two-way binding keeps view and model synchronized with no manual render call.

MVC: the controller mediates model and view.

MVVM: a ViewModel exposes bindable state.

MVVM uses two-way binding instead of explicit renders.

// MVC: the controller mediates between model and view
function controller(input) {
  model.title = input; // 1. update the model
  renderView(model);   // 2. explicitly re-render the view
}
// MVVM: a ViewModel exposes bindable state; two-way
// binding syncs view <-> model with no manual render

Read the implementation

Connect each part of the code to the concept before you type.

1. The controller

In MVC the controller is the mediator: it receives input and coordinates model and view.

function controller(input) {

2. Update the model

The controller mutates the model — the source of truth for application state.

model.title = input; // 1. update the model

3. Explicit re-render

MVC requires an explicit render step to push model changes into the view.

renderView(model);   // 2. explicitly re-render the view

4. Two-way binding

MVVM replaces the manual render with data binding that keeps view and model in sync automatically.

// binding syncs view <-> model with no manual render

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.