Wat is het MVVM-architectuurpatroon?

MVVM (Model-View-ViewModel) is een architectuurpatroon dat de code structureert om de logica van de applicatie op te splitsen in drie onderling verbonden componenten:

• Model: Vertegenwoordigt gegevens en bedrijfslogica. Afhankelijk van de UI.
• View: Toont gegevens uit de ViewModel en stuurt gebruikersacties (bijvoorbeeld klikken) naar de ViewModel. De View is passief en bevat geen verwerkingslogica.
• ViewModel: Dient als tussenpersoon tussen Model en View. Biedt gegevens uit het Model in een formaat dat geschikt is voor weergave en verwerkt gebruikersacties door het Model bij te werken. Het ViewModel gebruikt vaak mechanismen voor gegevensbinding (data binding) om de View automatisch bij te werken bij dataveranderingen.

Belangrijke principes:

• Bidirectionele gegevensbinding: Wijzigingen in het ViewModel worden automatisch weergegeven in de View, en vice versa (met behulp van de juiste tools).
• Testbaarheid: Het ViewModel is gemakkelijk te testen in isolatie, omdat het niet gekoppeld is aan de UI.
• Verantwoordelijkheden scheiding: Duidelijke scheiding van presentatie-logica, gegevens en bedrijfslogica vereenvoudigt ontwikkeling en onderhoud.

Wordt vaak gebruikt in applicaties met declaratieve UI, zoals Vue.js, React (met enkele variaties), Angular.

Voorbeeld van een eenvoudige structuur:

// 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})`; // Update displayName voor de View
  }
}

// View (bij benadering, zoals het eruit zou kunnen zien in een declaratief framework)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Verhoog leeftijd</button>
  </div>
</template>

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

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