console.warn && console.warn("[GTM4WP] Google Tag Manager container code placement set to OFF !!!"); console.warn && console.warn("[GTM4WP] Data layer codes are active but GTM container must be loaded using custom coding !!!");

info@fastwhitecat.com

Blog Fast White Cat

Zalety wzorca MVVM w Magento 2

admin paź 31. 2019

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.


wizualizacja wzorca MVVM


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.



Autor: Piotr Wojtoń


    Sprawdź, jak możemy usprawnić Twój biznes