Czym jest wzorzec architektoniczny MVVM?

MVVM (Model-View-ViewModel) to wzorzec architektoniczny, który strukturyzuje kod w celu podziału logiki aplikacji na trzy powiązane ze sobą komponenty:

• Model: Reprezentuje dane i logikę biznesową. Nie zależy od interfejsu użytkownika.
• Widok: Wyświetla dane z ViewModel i wysyła akcje użytkownika (np. kliknięcia) do ViewModel. Widok jest pasywny i nie zawiera logiki przetwarzania danych.
• ViewModel: Działa jako pośrednik między Modelem a Widokiem. Udostępnia dane z Modelu w formacie odpowiednim do wyświetlenia i obsługuje akcje użytkownika, aktualizując Model. ViewModel często korzysta z mechanizmów wiązania danych (data binding), aby automatycznie aktualizować Widok przy zmianie danych.

Kluczowe zasady:

• Dwukierunkowe wiązanie danych: Zmiany w ViewModel są automatycznie odzwierciedlane w Widoku i odwrotnie (za pomocą odpowiednich narzędzi).
• Testowalność: ViewModel jest łatwy do testowania w izolacji, ponieważ nie jest powiązany z UI.
• Podział odpowiedzialności: Jasny podział logiki prezentacji, danych i logiki biznesowej upraszcza rozwój i utrzymanie.

Często używany w aplikacjach z deklaratywnym UI, takich jak Vue.js, React (z pewnymi wariantami), Angular.

Przykład najprostszej struktury:

// 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})`; // Aktualizacja displayName dla Widoku
  }
}

// Widok (w przybliżeniu, jak mógłby wyglądać w deklaratywnym frameworku)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Zwiększ wiek</button>
  </div>
</template>

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

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