MVVM (Model-View-ViewModel) Architecture

🏗️ 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

🚨 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

#ReactJS #Frontend #MVVM #Architecture #JavaScript #SoftwareEngineering #InterviewPrep #EngineeringMindset