Model View Controller (MVC)

Posted by Dustin Boston .

MVC divides an application into three parts, the model, view, and controller.

  • Models use the Observer pattern to notify views that data has changed.
  • Views use the Composite pattern to create a hierarchy of UI elements.
  • Controllers use the Strategy pattern to handle events from views.

Views are always hierarchies, with one single “top view”, and many child views. A single view can represent both single items, such as a checkbox, or more complex components, such as a list of selectable items.

The top view and other views which can have children, implement the ViewComposite class, which is the Composite in the Composite pattern. Views that do not have children implement the ViewLeaf class, which is the Leaf in the Composite pattern. Both classes inherit from ViewComponent (Component), which in turn inherits from ViewObserver (Observer).

Views and controllers are tightly coupled. They both maintain a reference to the other. We minimize this coupling by forcing views to communicate with their respective controllers through the ControllerContext class, which is the Context part of the Strategy pattern and can be viewed as a sort of Facade. This communication happens transparently.

Lastly, models can be strings, a single object, or a collection of objects as long as they inherit from ModelSubject.

classDiagram

   class Model{
      <<Subject>>
      attach(observer)
      detatch(observer)
      notify()
   }
   class View{      
      <<Observer>>
      update()
   }
   class TodoModel{
      <<ConcreteSubjectA>>
      -string title
      getTitle()
      setTitle(title)
   }
   class TodosModel{
      <<ConcreteSubjectB>>
      -string todos
      getTodos()
      addTodo(todo)
   }

   class Component{
      <<ConcreteObserver>>
      display()
      add(name, component)
      remove(name)
      update(model)
   }

   note for Component "Strategy+Composite"

   class AppController{
      <<ConcreteStrategy>>
      onAdd(data)
      onChoice(choice)
   }

   class TopView {
      <<Composite>> 
   }

   class AddView {
      <<Leaf>>
   }

   class ListView {
      <<Leaf>>
   }

   class ChoiceView {
      <<Leaf>>
   }

   class Controller {
      <<Strategy>>
   }

   class Context

   Controller <|-- AppController
   Controller <--o Context : strategy
   Component <--o AppController : context
   Component <|-- AddView
   Component <|-- ListView
   Component <|-- ChoiceView
   Component <--o TopView
   Component <|-- TopView
   TodosModel <-- Component : subject
   TodoModel <-- Component : subject
   Model <|-- TodoModel
   Model <|-- TodosModel
   View <|-- Component  
   View <--o Model : observers

Resources

Authoritative documentation on the Smalltalk approach to MVC is hard to find. These resources are excellent if you want a straight-from-the-source explanation.

Source Code Listing

code.ts

import * as M from "./model.ts";
import * as V from "./view.ts";
import * as C from "./controller.ts";

const todos = new M.TodosModel();
const appController = new C.AppController();
const topView = new V.TopView(appController, todos);

appController.model = todos;
appController.view = topView;

const listView = new V.ListView(appController, todos);
todos.attach(listView);
topView.add("listView", listView);

topView.add("choiceView", new V.ChoiceView(appController, todos));
topView.add("addView", new V.AddView(appController, todos));
topView.add("successView", new V.SuccessView(appController, todos));
topView.add("errorView", new V.ErrorView(appController, todos));

topView.display("choiceView");

controller.ts

/* eslint-disable unicorn/no-process-exit */
import process from "node:process";
import {type Model, TodoModel, type TodosModel} from "./model.ts";
import type {Component} from "./view.ts";

export type StrategyMethod = (...methodArguments: any[]) => void;

export class Context {
  /** @param controller Strategy */
  constructor(private readonly controller: Controller) {}

  trigger(method: keyof Controller, ...methodArguments: any[]): void {
    const methodFunction = this.controller[method] as StrategyMethod;
    if (typeof methodFunction === "function") {
      methodFunction.apply(this.controller, methodArguments);
    }
  }
}

// Strategy
export class Controller<
  T extends Model = Model,
  U extends Component = Component,
> {
  // Enable controllers to define their own methods and properties:
  [key: string]: any;

  model: T | undefined;
  view: U | undefined;
}

// Concrete Strategy
export class AppController extends Controller {
  onAdd(data: {title: string}) {
    const todo = new TodoModel(data.title);

    if (this.model) {
      (this.model as TodosModel).addTodo?.(todo);
    }

    if (!this.view) return;
    this.view.display("successView");
    this.view.display("choiceView");
  }

  onChoice(choice: string) {
    choice = choice.toUpperCase().charAt(0);
    if (!this.view) return;

    switch (choice) {
      case "A": {
        this.view.display("addView");
        break;
      }

      case "L": {
        this.view.display("listView");
        this.view.display("choiceView");
        break;
      }

      case "Q": {
        return process.exit(0);
      }

      default: {
        this.view.display("errorView");
        this.view.display("choiceView");
      }
    }
  }
}

model.ts

// Observer
export class Observer {
  update(_model: Model): void {
    // Not implemented
  }
}

// Subject
export class Model {
  constructor(public observers: Observer[]) {}

  attach(observer: Observer) {
    this.observers.push(observer);
  }

  detach(observer: Observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notify() {
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
}

// Concrete Subject
export class TodoModel extends Model {
  constructor(public title = "") {
    super([]);
  }

  setTitle(title: string) {
    this.title = title;
    this.notify();
  }

  getTitle() {
    return this.title;
  }
}

// Concrete Subject
export class TodosModel extends Model {
  constructor(public todos: TodoModel[] = []) {
    super([]);
  }

  getTodos() {
    return this.todos.toSorted((a, b) =>
      a.getTitle().localeCompare(b.getTitle()),
    );
  }

  addTodo(todo: TodoModel) {
    this.todos.push(todo);
    this.notify();
  }
}

view.ts

/* eslint-disable @typescript-eslint/no-dynamic-delete */
/* eslint-disable no-alert */
import {Context, type Controller} from "./controller.ts";
import {Observer, TodoModel, type TodosModel} from "./model.ts";

/** Component serves as both the Leaf and Composite */
export class Component extends Observer {
  children: Record<string, Component> = {};
  context: Context;

  constructor(
    controller: Controller,
    public model: TodosModel,
  ) {
    super();
    this.context = new Context(controller);
  }

  add(name: string, child: Component) {
    this.children[name] = child;
  }

  remove(name: string) {
    delete this.children[name];
  }

  update(model: TodosModel) {
    for (const child of Object.values(this.children)) {
      child.update(model);
    }
  }

  display(view?: string) {
    if (view && this.children[view]) {
      this.children[view].display();
    }
  }
}

export class TopView extends Component {}

export class ListView extends Component {
  display() {
    console.log("Todos:");
    for (const todo of this.model?.getTodos() ?? []) {
      console.log(todo.getTitle());
    }
  }
}

export class ChoiceView extends Component {
  display() {
    const choice = prompt("(A)dd, (L)ist, or (Q)uit Todos:");
    if (choice !== null) {
      this.context.trigger("onChoice", choice);
    }
  }
}

export class AddView extends Component {
  display() {
    const todo = prompt("Add todo:");
    if (todo !== null) {
      const model = new TodoModel(todo);
      this.context.trigger("onAdd", model);
    }
  }
}

export class ErrorView extends Component {
  display() {
    console.log("Invalid selection.");
  }
}

export class SuccessView extends Component {
  display() {
    console.log("Todo added.");
  }
}