The MVC Pattern
Imagine an application where the data, the screen, and the logic that connects them are tangled into one file. Change a label and you risk breaking a database call. MVC, model-view-controller, is the pattern that untangles them by splitting an application into three responsibilities, and it has shaped frontend design for decades. This page defines the pattern and how it relates to the variants you will meet; for how it compares to the modern component model, see the full treatment in MVC versus components.
The goal here is a clear mental model of the term, not an implementation tutorial.
What you'll learn
What MVC is
At its core, MVC is a rule about where different kinds of code belong.
A definition
MVC is an architectural pattern that divides an application into three connected parts: the model, which holds data and rules; the view, which presents that data; and the controller, which handles input and coordinates the two. The point is that each part has one responsibility, so a change to how something looks does not disturb how data is stored.
The three parts
Each part has a distinct job, and the boundaries between them are what give the pattern its value.
Model, view, and controller
The model is the data and the logic that governs it, independent of how it is shown, much like a Backbone model. The view renders the model for the user, as a Backbone view does. The controller receives user actions, updates the model, and selects views. Data flows from model to view, and actions flow back through the controller.
Why separate them
The separation is not bureaucracy; it solves concrete problems.
Separation of concerns
Keeping data, presentation, and logic apart means each can change independently. You can redesign the interface without touching data rules, test the model without a screen, and reason about one part without holding the whole application in your head. This principle, separation of concerns, is why the pattern has lasted, and it underpins the architecture discussed in frontend architecture.
MVC in frontend practice
The pattern appears in both server and browser frameworks, with frontend variations.
From servers to the browser
Classic server frameworks implement MVC closely. In the browser, libraries adapted it: Backbone offers models, views, and routers but no strict controller, which is why it is often called an MV-star library. Understanding the canonical pattern makes these variations easy to place, and the Backbone guide shows one such adaptation in detail.
Related patterns
MVC has close relatives that rearrange the same three concerns.
MVP, MVVM, and components
MVP replaces the controller with a presenter that does more of the view logic. MVVM introduces a view-model that binds data to the view automatically, the idea behind reactive frameworks. The modern component model merges view and logic into self-contained units, a shift covered in MVC versus components and component-based architecture.
A common misconception
One belief causes endless confusion, so it is worth correcting directly.
Not every framework is strict MVC
Many tools called MVC do not implement it precisely, and that is fine. Backbone has no formal controller, and React is not MVC at all but a component model. The pattern is a guide to separating concerns, not a specification to follow literally, and forcing a framework into textbook MVC often does more harm than good. The practical comparison lives in MVC versus components.
Frequently Asked Questions
What does MVC stand for?
MVC stands for model-view-controller. The model holds data and rules, the view presents that data to the user, and the controller handles input and coordinates the two. Each part has a single responsibility.
Is Backbone.js an MVC framework?
Not strictly. Backbone provides models, views, and routers but no formal controller, so it is often described as an MV-star library. It adapts the MVC idea rather than implementing it literally.
What is the difference between MVC and MVVM?
MVC uses a controller to handle input and coordinate the model and view. MVVM introduces a view-model that binds data to the view automatically, which is the foundation of reactive frameworks that update the UI when data changes.
Is React an MVC framework?
No. React is a component model, where view and logic live together in self-contained components, rather than being split into model, view, and controller. It solves the same separation problem differently.
Read next: event-driven architecture, or the Concepts hub.
Want the deep comparison?
See how MVC stacks up against the modern component model.
Read: MVC vs Components →