Ce este pattern-ul arhitectural MVVM?

MVVM (Model-View-ViewModel) este un pattern arhitectural care structurează codul pentru a împărți logica aplicației în trei componente interconectate:

• Model: Reprezintă datele și logica de business. Nu depinde de UI.
• View: Afișează datele din ViewModel și trimite acțiunile utilizatorului (de exemplu, clicuri) către ViewModel. View-ul este pasiv și nu conține logică de procesare a datelor.
• ViewModel: Funcționează ca un intermediar între Model și View. Oferă datele din Model într-un format potrivit pentru afișare și procesează acțiunile utilizatorului, actualizând Model-ul. ViewModel folosește adesea mecanisme de legare a datelor (data binding) pentru a actualiza automat View-ul la schimbarea datelor.

Principii cheie:

• Legare bidirecțională a datelor: Modificările în ViewModel se reflectă automat în View și viceversa (folosind instrumente corespunzătoare).
• Testabilitate: ViewModel este ușor de testat izolat, deoarece nu este legat de UI.
• Separarea responsabilităților: O separare clară a logicii de prezentare, datelor și logicii de business facilitează dezvoltarea și întreținerea.

Este frecvent utilizat în aplicații cu UI declarativ, precum Vue.js, React (cu unele variații), Angular.

Exemplu de structură simplă:

// Model
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// ViewModel
class UserViewModel {
  constructor(user) {
    this.user = user;
    this.displayName = `${user.name} (${user.age})`;
  }

  incrementAge() {
    this.user.age++;
    this.displayName = `${this.user.name} (${this.user.age})`; // Actualizează displayName pentru View
  }
}

// View (aproximativ, cum ar putea arăta într-un framework declarativ)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Crește vârsta</button>
  </div>
</template>

<script>
import { User } from './model';
import { UserViewModel } from './viewModel';

export default {
  data() {
    return {
      userViewModel: new UserViewModel(new User('Ivan', 30))
    };
  }
}
</script>
*/