Model-View-Controller (MVC)
Model-View-Controller (MVC) is a software architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.
1. The Three Components
Model
The central component of the pattern. It is the application's dynamic data structure, independent of the user interface.
- Responsibility: Manages data, logic, and rules of the application.
- Example: A
Userclass that retrieves user data from a database.
View
Any representation of information such as a chart, diagram, or table. Multiple views of the same information are possible.
- Responsibility: Visualizing the data provided by the Model.
- Example: An HTML page displaying a user's profile.
Controller
Accepts input and converts it to commands for the Model or View.
- Responsibility: Handles user input (clicks, typing) and updates the Model.
- Example: A function that handles a "Save" button click, validates the input, and tells the Model to update the database.
2. How it Works (The Flow)
- User interacts with the View (e.g., clicks a button).
- Controller handles the input event.
- Controller notifies the Model to update state (e.g., "Change name to Alice").
- Model updates its state (and potentially the database).
- View gets updated (either by observing the Model or being instructed by the Controller) to show the new state.
3. Variations
Server-Side MVC (Traditional)
Common in frameworks like Ruby on Rails, Django, Laravel, Spring MVC.
- The browser sends a request to the Server (Controller).
- Controller talks to Database (Model).
- Controller renders an HTML template (View) and sends it back.
Client-Side MVC (MV*)
Common in early SPAs (Backbone.js, Ember.js). Modern frameworks like React/Vue/Angular often use variations like MVVM (Model-View-ViewModel) or Component-based architectures, but the separation of concerns principle remains.
4. Pros and Cons
| Pros | Cons |
|---|---|
| Separation of Concerns: Logic is separated from UI. | Complexity: Can be overkill for simple applications. |
| Parallel Development: One developer works on the View, another on the Controller logic. | Boilerplate: Requires more files and code structure. |
| Testability: Business logic (Model) is easy to test without the UI. |
5. MVVM (Model-View-ViewModel)
MVVM is a variation of MVC tailored for modern UI development, particularly where data binding is available (e.g., WPF, Angular, Vue).
- Model: Same as MVC (Data & Logic).
- View: The UI structure (HTML/XAML). It binds to the ViewModel.
- ViewModel: An abstraction of the View. It holds the state of the View and exposes commands. It does not know about the specific View implementation.
Key Difference: In MVC, the Controller updates the View. In MVVM, the View updates itself by "binding" to properties on the ViewModel.
programming/client-server-architecture programming/clean-architecture programming/software-development-life-cycle