🏗️ MVVM (Model-View-ViewModel) Architecture — Explained for Frontend Developers
MVVM is a popular architectural pattern used to separate UI from business logic, making applications easier to build, test, and maintain.
It is commonly used in:
- Angular
- Vue.js
- Mobile frameworks like Android, SwiftUI, Flutter
- React projects (conceptually, although React doesn't enforce MVVM)
🧠 What is MVVM?
MVVM stands for:
M → Model
V → View
VM → ViewModel
It separates responsibilities into three layers.
🏛️ Architecture Diagram
User
│
▼
┌─────────┐
│ View │
│ (UI) │
└────┬────┘
│ User actions
▼
┌─────────────┐
│ ViewModel │
│ Business │
│ Logic │
└────┬────────┘
│
▼
┌─────────────┐
│ Model │
│ Data/API │
└─────────────┘
1️⃣ Model
The Model is responsible for data.
It knows:
- API calls
- Database
- Business entities
- Validation
- Local storage
Example:
export async function fetchUsers() {
const res = await fetch("/api/users");
return res.json();
}
The Model doesn't know anything about the UI.
2️⃣ View
The View is what the user sees.
Example:
function UserList() {
return (
<div>
{/* Render users */}
</div>
);
}
The View should:
✔ Display data
✔ Handle user interactions
❌ Not contain business logic
3️⃣ ViewModel
The ViewModel connects the View and Model.
Responsibilities:
- Calls APIs
- Stores UI state
- Formats data
- Handles loading
- Handles errors
- Exposes actions to the View
Example:
function useUsersViewModel() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
async function loadUsers() {
setLoading(true);
const data = await fetchUsers();
setUsers(data);
setLoading(false);
}
return {
users,
loading,
loadUsers
};
}
Notice:
The component doesn't know how users are fetched.
⚛️ MVVM in React
React doesn't officially implement MVVM.
But many teams structure code like this:
src/
│
├── models/
│ userApi.js
│
├── viewmodels/
│ useUsers.js
│
├── views/
│ UserList.jsx
│
└── components/
Here:
- Model → API services
- ViewModel → Custom hooks
- View → React components
Custom hooks often act as the ViewModel because they manage state and business logic.
🌍 Real Example
Imagine an Employee Dashboard.
Model
Employee API
↓
ViewModel
Fetch employees
Sort employees
Handle loading
Handle errors
↓
View
Employee Table
Search Input
Loading Spinner
The View simply renders the data it receives.
✅ Advantages
- Clear separation of concerns
- Easier unit testing
- Better code reuse
- Easier maintenance
- Scales well for large applications
❌ Disadvantages
- More files and abstraction
- Can feel excessive for small apps
- Requires consistent project structure
🔄 MVVM vs MVC
| MVC | MVVM |
|---|---|
| Controller handles user actions | ViewModel handles presentation logic |
| View often communicates with Controller | View binds to ViewModel |
| Common in backend frameworks | Common in modern frontend and mobile apps |
🚨 Interview Traps
❌ "React follows MVVM."
Not by default.
React is a UI library, not an architectural framework.
However, you can organize a React application using MVVM principles.
❌ "ViewModel is the same as the Model."
No.
- Model → Data layer
- ViewModel → Presentation/business logic
- View → UI
❌ "Business logic belongs in the View."
No.
Business logic should live in the ViewModel (or equivalent layer), keeping components focused on rendering.
💡 Senior-Level Insight
In large React applications, many teams naturally evolve toward an MVVM-like architecture:
- Model → API services, repositories
- ViewModel → Custom hooks, state management
- View → Presentational components
This keeps components small, reusable, and easy to test.
🎯 Interview One-Liner
MVVM is an architectural pattern that separates an application into Model (data), View (UI), and ViewModel (presentation logic), improving maintainability, testability, and scalability. In React, custom hooks often serve the role of the ViewModel.
📌 Quick Revision
| Layer | Responsibility | React Example |
|---|---|---|
| Model | Data access, APIs, business entities |
userApi.js, service layer |
| ViewModel | State, business logic, data transformation |
useUsers() custom hook |
| View | Render UI and handle user interactions | UserList.jsx |
Top comments (0)