Wat is het MVVM-architectuurpatroon?

MVVM (Model-View-ViewModel) is een architectuurpatroon dat de gebruikersinterface (View) en de bedrijfslogica (Model) scheidt door middel van een tussenlaag — ViewModel.

Component	Beschrijving	Doel
Model	Vertegenwoordigt gegevens en bedrijfsregels.	Levert gegevens, onafhankelijk van View en ViewModel.
View	Toont de gebruikersinterface.	Verantwoordelijk voor visualisatie en interactie met de gebruiker.
ViewModel	Bevat de presentatie-logica, geeft gegevens door van Model naar View.	Verbindt View en Model, bevat commando's en eigenschappen voor de View.

In MVVM wordt de verbinding tussen View en ViewModel gemaakt via data binding-mechanismen. De View "abonneert" zich op veranderingen in de eigenschappen van de ViewModel, en de ViewModel informeert de View over deze veranderingen. Gebruikersinteractie met de View (bijvoorbeeld op een knop klikken) initieert een commando in de ViewModel.

Voordelen:

• Verantwoordelijkheden scheiden: duidelijke scheiding tussen UI, bedrijfslogica en presentatie-logica.
• Testbaarheid: de ViewModel is gemakkelijk te testen onafhankelijk van de View.
• Betere onderhoudbaarheid: veranderingen in één deel van het systeem hebben minder invloed op andere delen.
• Ontwikkeling: frontend- en backend-ontwikkelaars kunnen parallel werken.

Voorbeeld van data binding concept (pseudo-code):

// ViewModel
class CounterViewModel {
  count = 0; // observeerbare eigenschap

  increment() {
    this.count++; // activeert wijzigingsmelding
  }
}

// View (vereenvoudigde representatie)
<button onclick="viewModel.increment()">+</button>
<span data-bind="textContent: viewModel.count"></span> // bindt span-inhoud aan viewModel.count