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

Enter fullscreen mode Exit fullscreen mode

It separates responsibilities into three layers.

🏛️ Architecture Diagram

           User
             │
             ▼
        ┌─────────┐
        │  View   │
        │ (UI)    │
        └────┬────┘
             │ User actions
             ▼
      ┌─────────────┐
      │ ViewModel   │
      │ Business    │
      │ Logic       │
      └────┬────────┘
           │
           ▼
      ┌─────────────┐
      │   Model     │
      │ Data/API    │
      └─────────────┘

Enter fullscreen mode Exit fullscreen mode

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();
}

Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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
  };
}

Enter fullscreen mode Exit fullscreen mode

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/

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

↓

ViewModel

Fetch employees

Sort employees

Handle loading

Handle errors

Enter fullscreen mode Exit fullscreen mode

↓

View

Employee Table

Search Input

Loading Spinner

Enter fullscreen mode Exit fullscreen mode

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

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