Cos'è il pattern architetturale MVVM?

MVVM (Model-View-ViewModel) è un pattern architetturale che struttura il codice per suddividere la logica dell'applicazione in tre componenti interconnessi:

• Model: Rappresenta i dati e la logica di business. Non dipende dall'interfaccia utente.
• View: Visualizza i dati del ViewModel e invia le azioni dell'utente (ad esempio clic) al ViewModel. La View è passiva e non contiene logica di elaborazione dei dati.
• ViewModel: Funziona da intermediario tra Model e View. Fornisce i dati del Model in un formato adatto alla visualizzazione e gestisce le azioni dell'utente, aggiornando il Model. Il ViewModel spesso utilizza meccanismi di binding dei dati (data binding) per aggiornare automaticamente la View quando i dati cambiano.

Principi chiave:

• Binding bidirezionale dei dati: Le modifiche nel ViewModel si riflettono automaticamente nella View, e viceversa (utilizzando gli strumenti appropriati).
• Testabilità: Il ViewModel è facilmente testabile in isolamento, poiché non è legato all'UI.
• Separazione delle responsabilità: La chiara separazione tra logica di presentazione, dati e logica di business semplifica lo sviluppo e la manutenzione.

Viene spesso usato in applicazioni con UI dichiarativa, come Vue.js, React (con alcune variazioni), Angular.

Esempio di struttura più semplice:

// Modello
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})`; // Aggiorna displayName per la View
  }
}

// View (approssimativamente, come potrebbe apparire in un framework dichiarativo)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Aumenta età</button>
  </div>
</template>

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

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