Podręcznik
4. Wzorce projektowe
4.3. MVVM - Model View ViewModel
Model View ViewModel to popularny wzorzec projektowy wykorzystywany przy tworzeniu aplikacji internetowych, szczególnie w kontekście aplikacji ze złożonym interfejsem użytkownika. Jest to rozszerzenie wzorca MVC - Model View Controller, stąd duże podobieństwa pomiędzy nimi. Aby uwypuklić najważniejsze cechy charakterystyczne wzorca MVVM, przedstawiono je w formie porównania z cechami wzorca MVC.
Struktura wzorca
Warstwy modelu (M) oraz widoku (V) są zasadniczo takie same w obydwu wzorcach. Różnica jest w ostatnim członie:- Kontroler (C) w MVC działa jako mediator pomiędzy widokiem a modelem. Przyjmuje żądania od użytkownika, manipuluje modelem i wywołuje wygenerowanie aktualnego widoku.
- Model widoku (VM) w MVVM reprezentuje warstwę pośrednią, która przetwarza dane z modelu i udostępnia je dla widoku. Można powiedzieć, że model widoku jest abstrakcją widoku eksponującą publiczne właściwości i metody. Co więcej, umożliwia on dwustronne wiązanie danych z widokiem, co pozwala na automatyczną synchronizację danych między widokiem a modelem.
Komunikacja między komponentami
Główną cechą MVVM jest dwukierunkowe wiązanie danych (ang. two-way data binding) między widokiem a modelem widoku. Oznacza to, że zmiany w danych w modelu widoku automatycznie aktualizują widok, i na odwrót: zmiany w widoku (np. zmiany wartości w polu tekstowym) automatycznie aktualizują model widoku. Dzięki użyciu dwustronnego
wiązania danych, MVVM redukuje ilość kodu niezbędnego do synchronizacji modelu i interfejsu użytkownika. Ze względu na to, że model widoku nie zna bezpośrednio struktury widoku, możliwe jest lepsze rozdzielenie logiki od prezentacji.
Dla kontrastu, w przypadku MVC kontroler bezpośrednio wywołuje odpowiednie metody z widoku, co skutkuje silnymi zależnościami pomiędzy tymi warstwami.
Ułatwienie testowania
W przypadku MVC, kontroler i model są łatwiejsze do przetestowania, ponieważ są niezależne od widoku. Jednak z powodu silnego połączenia między kontrolerem i widokiem, testowanie logiki związanej z interakcjami użytkownika może być trudniejsze. Z kolei wzorzec MVVM promuje łatwość pisania testów jednostkowych i integracyjnych dla logiki prezentacji. Dzięki temu, że model widoku nie jest związany bezpośrednio z widokiem, jest znacznie łatwiejszy do testowania niż kontroler w MVC.Zastosowanie i kontekst użycia
MVC jest szeroko stosowany w aplikacjach internetowych, np. we frameworkach takich jak Ruby on Rails, ASP.NET MVC, czy Spring MVC. Nadaje się do aplikacji, gdzie interakcje z użytkownikiem są mniej skomplikowane i nie wymagają intensywnego wiązania danych.Z kolei MVVM jest często stosowany w aplikacjach, które wymagają zaawansowanego interfejsu użytkownika, z dużą ilością interakcji, np. aplikacje desktopowe (WPF, UWP) oraz aplikacje mobilne. Często jest stosowany z frameworkami frontendowymi, takimi jak Angular, Vue.js, czy Knockout.js, gdzie mechanizmy wiązania danych są silnie wspierane.
Dwustronne wiązanie danych
Wzorzec MVC nie posiada wbudowanego mechanizmu dwustronnego wiązania danych. Aktualizacje widoku muszą być wywoływane jawnie przez kontroler. W przypadku MVVM dwustronne wiązanie danych jest centralnym elementem MVVM, co zapewnia synchronizację danych pomiędzy modelem a widokiem, a w konsekwencji znacząco upraszcza implementację złożonych interfejsów użytkownika.
Więcej o wzorcu MVVM przeczytasz w dostępnej online książce Michael Stonis, Enterprise Application Patterns using .NET MAUI, Microsoft Developer Division, 2022.