Model-View-Controller (MVC)

Separates the application into three interconnected components.

“The user interacts with the controller, which manipulates the model, which updates the view.”

The classic separation of concerns.

graph LR
    User -->|Uses| C[Controller]
    C -->|Updates| M[Model]
    M -->|Notifies| V[View]
    V -->|Displays| User
    C -->|Selects| V

When to use

  • Web Applications: Server-side rendering (Rails, Django, Spring).
  • Complex UI: When you need to de-couple data from presentation.

Explanation

Problem

Mixing data access code, business logic, and UI code in a single file makes the application hard to maintain and test.

Solution

Divide the app into:

  • Model: Data and Business Logic.
  • View: UI/Presentation.
  • Controller: Application Logic/Orchestration.

Real world analogy

Restaurant:

  • You (User) give order to Waiter (Controller).
  • Waiter tells Cook (Model) to prepare food.
  • Cook prepares food.
  • Waiter brings food to table/Plating (View).

Pros and Cons

Pros Cons
  • Separation of Concerns
    		•
  • Complexity for small apps
    		•
  • Testability (Model is isolated)
    		•
  • View and Controller often tightly coupled
    		•

    Code example

    Typescript

    PHP