MVC vs MVVM

MVC

Flow

Example (React)

// Model/Data
const data = {
  counter: 0,
};

export default data;

// View
import React from 'react';

const View = ({ counter, incrementCounter }) => (
  <div>
    <h1>Counter: {counter}</h1>
    <button onClick={incrementCounter}>Increment</button>
  </div>
);

export default View;

// Controller
import React, { useState } from 'react';
import View from './View';
import data from './data';

const Controller = () => {
  const [counter, setCounter] = useState(data.counter);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return <View counter={counter} incrementCounter={incrementCounter} />;
};

export default Controller;

Example (Angular)

// Model/Data
export class DataModel {
  counter: number;
}

<!-- View/Template -->
<div>
  <h1>Counter: {{ counter }}</h1>
  <button (click)="incrementCounter()">Increment</button>
</div>

// Controller
import { Component } from '@angular/core';
import { DataModel } from './data.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  counter: number;

  constructor(private dataModel: DataModel) {
    this.counter = dataModel.counter;
  }

  incrementCounter(): void {
    this.counter++;
  }
}

MVVM

Flow

Example (React)

// Model/Data
const data = {
  counter: 0,
};

export default data;

// ViewModel/Logic
import { useState } from 'react';
import data from './data';

const ViewModel = () => {
  const [counter, setCounter] = useState(data.counter);

  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return {
    counter,
    incrementCounter,
  };
};

export default ViewModel;

// View/Presentation
import React from 'react';
import ViewModel from './ViewModel';

const View = () => {
  const viewModel = ViewModel();

  return (
    <div>
      <h1>Counter: {viewModel.counter}</h1>
      <button onClick={viewModel.incrementCounter}>Increment</button>
    </div>
  );
};

export default View;

Example (Angular)

// Model/Data
export class DataModel {
  counter: number;
}

// ViewModel/Logic
import { Injectable } from '@angular/core';
import { DataModel } from './data.model';

@Injectable()
export class DataViewModel {
  private dataModel: DataModel;

  constructor() {
    this.dataModel = new DataModel();
    this.dataModel.counter = 0;
  }

  get counter(): number {
    return this.dataModel.counter;
  }

  incrementCounter(): void {
    this.dataModel.counter++;
  }
}

<!-- View/Template -->
<div>
  <h1>Counter: {{ viewModel.counter }}</h1>
  <button (click)="viewModel.incrementCounter()">Increment</button>
</div>

Similarity

• Both acts as a bridge between model and view

• Controller and view model both have one-to-many relationship to the view

Comparison

• ViewModel supports data binding, which allows for automatic synchronization of data between the ViewModel and the View. The ViewModel exposes properties that the View binds to, and any changes in the ViewModel automatically update the corresponding elements in the View.

• Controller typically does not directly support data binding. It is responsible for explicitly updating the View when there are changes in the Model. The Controller retrieves data from the Model and explicitly render the View to reflect those changes.

• ViewModel does not have direct knowledge of the specific View instances that bind to it. The ViewModel is designed to be independent of the View implementation and easier for testing

• Controller has direct knowledge of the View and interacts with it to update its state. The Controller may have references to specific View instances and can manipulate the View directly to reflect changes in the Model.

• The entry point of MVC is controller while MVVM is view