Book 09 · Software ArchitecturePage 29 of 48

MVC

Model–View–Controller

Updated September 29, 20262 min read

In short

MVC is an architectural pattern that splits an application into a Model for data and logic, a View for display, and a Controller that handles user input.

What is MVC?

MVC, short for Model–View–Controller, organizes an application into three parts with separate responsibilities. The Model holds the data and business rules, the View presents that data to the user, and the Controller receives user input, updates the Model, and chooses which View to show. Keeping these concerns apart makes the code easier to understand, test, and change.

In a typical web application, a request such as GET /products/42 reaches a controller. The controller asks the model to load product 42 from the database, then passes the result to a view template that renders the HTML page. If the page design changes, only the view needs editing; if the pricing rules change, only the model does.

A restaurant is a handy analogy: the waiter is the controller who takes your order, the kitchen is the model that prepares the food following its recipes, and the plated dish is the view you actually see. Many server-side web frameworks are built around MVC or a close variation of it.

MVC is often confused with related patterns such as MVVM (Model–View–ViewModel) and MVP (Model–View–Presenter). They share the goal of separating data from presentation but differ in how the view and the logic communicate. MVC also organizes code inside a single application, which is different from splitting a system into separate services.

At a glance

Each part has one job: the controller coordinates, the model owns the data and rules, and the view only presents.

Key takeaways

Model: the data and business logic.
View: what the user sees.
Controller: handles input and connects the model and the view.
Separating these concerns makes code easier to test and maintain.
MVVM and MVP are close variations of the same idea.

Example

The three parts of MVC in plain JavaScriptjavascript

// Model: data and business rules
const ProductModel = {
  findById: (id) => ({ id, name: "Keyboard", price: 49 }),
};

// View: turns data into HTML
const productView = (product) => `<h1>${product.name}</h1><p>Price: ${product.price}</p>`;

// Controller: handles the request and connects the model and the view
function showProduct(request) {
  const product = ProductModel.findById(request.params.id);
  return productView(product);
}

Readers ask

What is the difference between MVC and MVVM?

In MVC, a controller handles input and updates the model and the view. In MVVM, a ViewModel exposes data and commands that the view binds to directly, an approach common in UI frameworks with data binding.

Is MVC still used?

Yes. Many server-side web frameworks are built around MVC, and its core idea of separating data, presentation, and input handling influences most modern front-end frameworks.

Is MVC a design pattern or an architecture?

MVC is usually described as an architectural pattern because it shapes the structure of a whole application. Internally, it is often built from smaller design patterns such as Observer and Strategy.

Often compared

MVC vs MVVMMVC splits an app into a model, a view and a controller that handles input, while MVVM puts a ViewModel between model and view and syncs them by data binding.

MVC