W poprzednim wpisie opisywałem architektoniczny wzorzec MVC, tym razem przedstawiam jego dużo młodszego brata, czyli wzorzec MVVM. MVC dobrze funkcjonuje w pewnych określonych obszarach, np. na stronach webowych, ale nie do końca sprawdza się w aplikacjach klienckich z interfejsem graficznym. Niezależnie, czy problem dotyczy programu na PC, smartfon, czy tablet.
Oczywiście przy odpowiedniej implementacji prawdopodobnie dałoby się zastosować taki wzorzec również tu, ale zamiast tego powstał MVVM, który jest lepiej dopasowany do realiów tego typu wdrożeń.
Historia i idea
MVVM został ogłoszony w 2005 roku na blogu Johna Gossmana, jednego z architektów pracujących w Microsofcie, który w owym czasie zajmował się WPF i Silverlight. Z założenia MVVM miał rozwiązać kilka standardowych problemów, które można spotkać w technologiach Microsoftu:
- podziału strony/widoku/okna na XAML i code-behind,
- separacji warstw, a raczej jej braku,
- uproszczenia implementacji złożonych interfejsów użytkownika.
W domyślnych wdrożeniach widoki są połączone z logiką i nie były w ogóle reużywalne.
MVVM rozwiązał powyższe problemy poprzez wprowadzenie architektury składającej się z trzech elementów:
- modelu (model),
- widoku (view),
- viewmodelu (viewmodel).
Pierwsze dwa wyglądają znajomo, choć widok pełni odrobinę inne funkcje niż w przypadku MVC. Tu nowością jest viewmodel, a także mechanizm data binding. Właśnie od tego elementu rozpocznę charakterystykę wzorca.
Data binding
Pewną bardzo fajną cechą wzorca MVVM jest to, że dane przechowywane przez model są automatycznie odświeżane w widoku, w sytuacji gdy dojdzie do modyfikacji danych po stronie viewmodelu. Wystarczy tylko zaimplementować odpowiedni interfejs po stronie viewmodelu/modelu, a następnie trzymać się pewnych konwencji. Ten mechanizm nazywany jest data binding, a powyższy opis to bardzo duże spłaszczenie obszernego tematu, któremu normalnie można by poświęcić osobny wpis.
Viewmodel
Centralnym elementem wzorca MVVM jest viewmodel. Można by powiedzieć, że to swego rodzaju odpowiednik controllera z MVC, ale byłoby to stwierdzenie bardzo na wyrost. Poniżej krótka charakterystyka tego elementu:
- Trzyma referencję do modelu.
- Wykształca mechanizm komend, które później są wykorzystywane w widoku do obsługi interakcji wywołanych przez użytkownika.
- Jest „bindowany” jako kontekst danych dla strony/widoku/okna.
- Powinien poprawnie implementować interfejs INotifyPropertyChanged.
Nie da się ukryć, że jest to swoiste spoiwo w architekturze MVVM.
W przypadku prostszych wdrożeń bardzo łatwo jest ulec pokusie pominięcia modelu opartego na typach prostych i wtłoczenia go bezpośrednio do viewmodelu.
Model
Model przechowuje pobrane/przetworzone przez viewmodel dane, które później zostaną „zbindowane” w widoku. Model powinien poprawnie implementować INotifyPropertyChanged i z założenia nie powinien posiadać żadnych elementów logiki biznesowej ani nawiązań do warstwy wizualnej projektu.
View
Ostatnim elementem całej układanki jest widok. W różnych technologiach Microsoftu nazywa się on inaczej. Czasem jest to po prostu widok, innym razem okno lub strona. Niezależnie od nazwy ten element jest odpowiedzialny za:
- utworzenie layoutu warstwy wizualnej,
- obsługę interakcji użytkownika za pomocą dedykowanych kontrolek, do których zostały „zbindowane” komendy utworzone po stronie kontrolera,
- ustanowienie kontekstu danych, do którego w poprawnej implementacji powinna zostać przypisana instancja viewmodelu,
- ustawienie za pomocą data binding pól zdefiniowanych w modelu jako właściwości poszczególnych kontrolek.
Tak utworzona aplikacja zawiera jawną separację warstw. Logika zostaje oddzielona od warstwy prezentacji oraz klas typu DTO. Każdego z tych elementów dużo łatwiej jest reużyć w innym miejscu programu. Ponadto mechanizm data binding rozwiązuje problem odświeżania danych, który przez długi czas był charakterystyczny dla aplikacji okienkowych.
Dziś przed problemami, które rozwiązuje MVVM, stoi branża internetowa, w której to aplikacje również muszą utrzymywać i aktualizować swój stan. Czy MVVM sprawdzi się i w tym przypadku?
Szukasz informacji o MVVC? Kliknij poniżej:
