# 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 `User` class 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)

1.  **User** interacts with the **View** (e.g., clicks a button).
2.  **Controller** handles the input event.
3.  **Controller** notifies the **Model** to update state (e.g., "Change name to Alice").
4.  **Model** updates its state (and potentially the database).
5.  **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]]