Tworząc aplikację najistotniejszymi aspektami jej architektury są:
- skalowalność: wraz z rozwojem projektu powinno pisać się go coraz łatwiej, bo mamy coraz więcej komponentów, których można używać, jest coraz więcej rzeczy zdefiniowanych;
- utrzymywalność: piszemy daną aplikację przez jakiś czas, a potem utrzymujemy ją przez następne lata dokonując w niej modyfikacji ze względu na zmianę wymagań biznesowych. Dobra architektura sprawia, że łatwo będzie ją utrzymywać, natomiast zła architektura i bałagan w kodzie spowoduja, że będzie to bardzo kosztowne;
- testowalność: bez dobrej architektury ciężko jest przeprowadzać dobre testy.
W zrealizowaniu powyższych kwestii z pomocą przychodzą nam wzorce projektowe. Dzięki nim kod ma być skalowalny, przejrzysty i uporządkowany, aby łatwo go było rozwijać. Chcemy Wam dziś zaprezentować różnice i przewagi wzorca MVVM nad stosowanym dotychczas MVC.
W Magento 1 wykorzystano wzorzec MVC, który skupia się na podziale aplikacji na trzy aspekty architektoniczne:
- Model – umieszczamy w nim logikę biznesową z dostępem do danych;
- View – jest to warstwa prezentacji danych i interakcji z użytkownikiem;
- Controller – jest odpowiedzialny za przetwarzanie żądań, które aplikacja otrzymuje z frontendu. Pobiera informacje poprzez view, przetwarza dane za pomocą modelu, a następnie prezentuje je w widoku na frontendzie. Zarządza on połączeniem widoku z modelem.
Celem takiego podziału jest oddzielenie warstwy prezentacji aplikacji od danych. Ma to za zadanie łatwiejsze poprawki, utrzymanie i testowanie systemu. Nie jest to jednak wzorzec bliski ideałowi. Nie separuje on wystarczająco kodu, gdyż kod źródłowy (w szczególności w kontrolerze) jest mało czytelny i odpowiada za zbyt wiele rzeczy.
Wydanie Magento 2 znacząco zmieniło podejście, w jaki programiści planują i piszą kod komponentów wprowadzając system MVVM, który okazuje się lepszym rozwiązaniem. Jest to model, który idzie o duży krok do przodu w stosunku do MVC w kwestii dzielenia logiki szablonu od logiki biznesowej.
MVVM wprowadza architekturę składającą się z trzech elementów:
- Model – tak jak w zwykłym MVC model jest logiką zarządzania danymi i opisem podstawowych danych;
- View – warstwa prezentacji danych dostarczana przez pliki phtml powiązane z ViewModel;
- ViewModel – odpowiada za przygotowanie danych które mają być zaprezentowane w widoku. Współdziała z warstwą modelu udostępniając tylko niezbędne informacje do warstwy widoku.
Zródło: https://upload.wikimedia.org/wikipedia/commons/8/87/MVVMPattern.png
Mechanizm działa na dwukierunkowym wiązaniu danych między View a ViewModel.
Upraszcza to automatyzację zmian w ViewModelu, aby wyświetlić je w widoku. MVVM ma model i widok, podobnie jak są one obecne w MVC.
ViewModel wypełnia lukę między modelem a widokiem.
Zalety MVVM w stosunku do MVC:
- lepsza separacja kodu
W kodzie zbudowanym na MVC nierzadko kod, który nie pasuje do warstwy modelu lub widoku idzie do kontrolera, a to prowadzi do ich dużej wielkości, przez co są trudne do testowania i zarządzania. W MVVM kontroler odpowiada już tylko za:- decydowanie, którego układu strony użyć,
- obsługę zapisu danych z żądań POST,
- informowanie systemu o renderowaniu odpowiedzi HTTP lub przekierowanie użytkowników na inną trasę.
Lepsza jest również separacja kodu między warstwą modelu a widokiem.
- lepsza testowalność
Dzięki przeniesieniu manipulowania danymi do ViewModel łatwiej jest pisać testy.
W Magento 2 została słusznie podjęta decyzja o zastosowaniu wzorca MVVM, ponieważ dało nam to lepszą elastyczność i niezależność w warstwach widoku i modelu, kod stał się łatwiejszy do wielokrotnego użytku dzięki temu, że zmiany w warstwie widoku nie wiążą się ze zbytnią ingerencją w logikę aplikacji oraz łatwiej można zaimplementować testy jednostkowe. Są to duże plusy, które pozwalają nam w Fast White Cat tworzyć serwisy lepiej skalowalne, tańsze w utrzymaniu oraz łatwiejsze w testowaniu.