🏗️ Architectural Patterns: MVC, MVP, and MVVM

🔄 MVC (Model-View-Controller)

MVC is one of the oldest and most popular patterns. The Controller handles user actions, updates the Model, and tells the View to refresh.

How MVC Works:

Components:

• Model: Stores data and business rules. Example: a shopping cart that knows prices and items.
• View: Displays data to the user. Example: the HTML and CSS that shows the cart on screen.
• Controller: Responds to user actions. Example: when a user clicks "Add to Cart", the controller tells the model to add the item.

Real Example: To-Do List

class TodoModel {
  todos: { id: number; text: string; done: boolean }[] = [];
  
  addTodo(text: string): void {
    this.todos.push({ id: Date.now(), text, done: false });
  }
  
  completeTodo(id: number): void {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.done = true;
  }
}

class TodoController {
  constructor(private model: TodoModel, private view: TodoView) {}
  
  onAddTodoClicked(text: string): void {
    this.model.addTodo(text);
    this.view.render(this.model.todos);
  }
  
  onCompleteTodoClicked(id: number): void {
    this.model.completeTodo(id);
    this.view.render(this.model.todos);
  }
}

class TodoView {
  render(todos: any[]): void {
    let html = "<ul>";
    todos.forEach(todo => {
      const checkmark = todo.done ? "✓" : "";
      html += `<li>${checkmark} ${todo.text}</li>`;
    });
    html += "</ul>";
    document.getElementById("app").innerHTML = html;
  }
}

Pros and Cons

🎭 MVP (Model-View-Presenter)

MVP is similar to MVC, but with a key difference: the Presenter handles ALL interaction logic, and the View is completely passive. The View never directly updates the Model.

How MVP Works:

Key Difference from MVC:

View is passive: The View never directly touches the Model. All communication goes through the Presenter.

Real Example: To-Do List with MVP

class TodoModel {
  todos: { id: number; text: string; done: boolean }[] = [];
  
  addTodo(text: string): void {
    this.todos.push({ id: Date.now(), text, done: false });
  }
}

class TodoView {
  onAddButtonClicked: (text: string) => void = () => {};
  onCompleteButtonClicked: (id: number) => void = () => {};
  
  addTodoButton = document.getElementById("add-btn");
  
  render(todos: any[]): void {
    // View just displays, never updates model directly
    let html = "<ul>";
    todos.forEach(todo => {
      html += `<li>${todo.text}</li>`;
    });
    document.getElementById("app").innerHTML = html;
  }
}

class TodoPresenter {
  constructor(private model: TodoModel, private view: TodoView) {
    // Presenter wires everything together
    this.view.onAddButtonClicked = (text: string) => this.handleAdd(text);
    this.view.onCompleteButtonClicked = (id: number) => this.handleComplete(id);
  }
  
  private handleAdd(text: string): void {
    this.model.addTodo(text);
    this.updateView();
  }
  
  private updateView(): void {
    this.view.render(this.model.todos);
  }
}

Pros and Cons

⚙️ MVVM (Model-View-ViewModel)

MVVM is modern and used in frameworks like Vue.js, Angular, and WPF. The ViewModel is a transformed version of the Model that's ready for the View. Instead of the code pulling data, the ViewModel notifies the View when data changes (often through observables or reactive systems).

How MVVM Works:

Key Feature: Two-Way Binding

In MVVM, the View and ViewModel are connected through binding. When the user changes something in the View, the ViewModel updates automatically. When the Model changes, the View updates automatically without explicit code.

Real Example: To-Do List with MVVM

class TodoModel {
  todos: { id: number; text: string; done: boolean }[] = [];
  
  addTodo(text: string): void {
    this.todos.push({ id: Date.now(), text, done: false });
  }
}

class TodoViewModel {
  todos$ = new Observable([]); // Observable = reactive stream
  
  constructor(private model: TodoModel) {
    // ViewModel subscribes to model changes and notifies view
    this.updateTodos();
  }
  
  addTodo(text: string): void {
    this.model.addTodo(text);
    this.updateTodos(); // Notify view of changes
  }
  
  private updateTodos(): void {
    this.todos$.next(this.model.todos); // Push to all subscribers
  }
}

// In Vue.js, this would look like:
<template>
  <div>
    <input v-model="newTodoText" placeholder="Add a to-do" />
    <button @click="viewModel.addTodo(newTodoText)">Add</button>
    
    <ul>
      <li v-for="todo in viewModel.todos$">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

Pros and Cons