Architectural Patterns - MVC | MVP | MVVM

These patterns define how your app separates data, UI, and logic, improving maintainability, scalability, and testability.

---

🎯 1️⃣ Model–View–Controller (MVC)

📘 Definition:

MVC divides your app into Model (data), View (UI), and Controller (input logic).
The Controller updates the Model, and the View observes the Model for changes.

 ┌─────────────┐        user input         ┌─────────────┐
 │    View     │  ───────────────────────▶ │  Controller │
 └──────┬──────┘                           └──────┬──────┘
        │    updates / notifies                    │
        │                                           │ updates model
        ▼                                           ▼
 ┌────────────────────────────────────────────────────────┐
 │                       Model                            │
 │   (business logic, data management, domain state)      │
 └────────────────────────────────────────────────────────┘
        ▲
        │  notifies changes
        │
 ┌──────┴──────┐
 │    View     │
 └─────────────┘

Flow Summary:
User → Controller → Model → View → User

✅ Pros

• Good separation of concerns
• Multiple views can share the same model
• Controller logic is easy to test

⚠️ Cons

• Controller and View can become tightly coupled
• Not ideal for very large UIs

---

🎯 2️⃣ Model–View–Presenter (MVP)

📘 Definition:

MVP replaces the Controller with a Presenter, which handles all presentation logic.
The View is passive — it only displays data sent by the Presenter.

         ┌─────────────┐
         │    View     │ ◀──────────────┐
         │ (UI layer)  │                │
         └──────┬──────┘                │
                │ calls                 │ updates
                ▼                       │
         ┌─────────────┐                │
         │  Presenter  │ ───────────────┘
         │ (presentation logic)         │
         └──────┬──────┘
                │ interacts with
                ▼
         ┌─────────────┐
         │   Model     │
         └─────────────┘

Flow Summary:
User → View → Presenter → Model → Presenter → View

✅ Pros

• Great testability (Presenter independent of UI)
• Loose coupling between View and Model
• Well-suited for event-driven UIs

⚠️ Cons

• Presenter can grow large ("god object")
• More boilerplate

---

🎯 3️⃣ Model–View–ViewModel (MVVM)

📘 Definition:

MVVM introduces a ViewModel, an abstraction of the View that handles all UI state and supports two-way data binding with the View.

                    ┌───────────────┐
                    │     Model     │
                    │ (Data logic)  │
                    └───────┬───────┘
                            │
                            │ updates / observes
                            ▼
                    ┌───────────────┐
                    │  ViewModel    │
                    │ (State + logic│
                    │  for View)    │
                    └───────┬───────┘
                            ▲  ▲
            two-way binding │  │ events / user actions
                            │  │
                    ┌───────────────┐
                    │     View      │
                    │ (UI markup)   │
                    └───────────────┘

Flow Summary:
Model ↔ ViewModel ⇆ View

✅ Pros

• Automatic two-way data binding
• Very high testability (ViewModel is logic-only)
• Ideal for reactive UIs (Vue, Angular, Knockout, React+MobX)

⚠️ Cons

• Harder to debug (implicit bindings)
• ViewModel can grow large if not modularized
• Slight binding performance overhead

---

⚖️ Comparison Table

Aspect / Pattern	MVC	MVP	MVVM
Main Components	Model, View, Controller	Model, View, Presenter	Model, View, ViewModel
Flow Direction	Controller → Model → View	Presenter ↔ Model ↔ View	ViewModel ⇆ View, ViewModel ↔ Model
View Role	Active (observes Model)	Passive (updated by Presenter)	Passive (bound to ViewModel)
Data Binding	Manual / One-way	Manual / One-way	Automatic / Two-way
Testability	Medium	High (Presenter easily tested)	High (ViewModel logic testable)
Coupling	Tight View–Controller link	Looser View–Presenter link	Loosest (View ↔ ViewModel via binding)
Best Use Case	Simpler apps, server-side MVC	Desktop / mobile UI apps	Reactive front-end apps
Examples (JS)	Backbone.js, Express.js	Android, GWT, early JS UIs	Knockout, Vue, React + MobX

---

💬 In One Sentence

MVC splits data, UI, and control logic; MVP delegates UI handling to a testable Presenter; and MVVM binds data reactively between the View and Model via a ViewModel — ideal for modern, reactive frameworks.