Jednym z najtrudniejszych wyzwań podczas pracy z frontendem Magento 2 jest okiełznanie uiComponentów. Wystarczy najmniejsza zmiana na checkoucie, który w całości zbudowany jest z uiComponentów, aby znienawidzić Magento…

Co jest nie tak z tymi uiComponentami?

1. Pokaż mi swój XML, a powiem CI jak bardzo… Cię nie lubię!

Tak, ktoś mądry wymyślił sobie, ze Frontend development jest nudny, że to jest za proste. JavaScript, HTML, CSS to za mało. Prawdziwy Frontend Developer powinien jeszcze pisać w XML. Oczywiście ta cała konfiguracja poprzez XML ma swoje plusy np. dzięki temu w łatwy sposób można ją rozszerzać, lub nadpisywać w innych modułach. Problem polega na tym, że w dzisiejszych czasach jak jesteś Frontend Developerem i robisz aplikacje np. w React i ktoś Ci przyjdzie i powie… „Chodź porobić Magento, tutaj są takie fajne uiComponenty, które się konfiguruje w XML!” ..to powiedz co zrobisz?

2. Skoro lubisz XML to pewnie lubisz też PHP

Ok, zgodziłeś się i chcesz robić to Magento. XMLe przecież nie są takie straszne. Okazuje się jednak, ze to nie wszystko, ponieważ żeby naprawdę dobrze zrozumieć jak działają te uiComponenty i przykładowo jak działa Checkout, oraz jak go modyfikować to trzeba jeszcze dość głęboko grzebać w backendzie i pisać w PHP. Myślę, że dla przeciętnego Frontend Developera jest to ściana nie do przejścia. Oczywiście jeśli chcesz być Full Stack Developerem to będziesz się czuł tutaj jak ryba w wodzie!

3. KnockoutJS

Dobrze poradziłeś sobie z XML oraz z PHP i nie stanowi to dla Ciebie żadnego problemu. Teraz już z górki, będziesz robił Frontend 😉 Tak się składa, ze będziesz robił ten frontend w KnockoutJS.

Czy Knockout jest zły? Moim zdaniem nie. Mogę nawet powiedzieć, że jest spełnia swoje zadanie w M2 i jest fajny, a szczególnie był fajny 10 lat temu gdy nie miał żadnej konkurencji. Obecnie konkurencja jest bardzo silna i niestety Knockout na tle takich frameworków jak React, czy Vue nie wypada najlepiej.

4. Magento modyfikuje KnockoutJs

Kolejnym problemem jest to, że Magento dodaje swoje rzeczy do Knockouta takie jak chociażby customowe bindingi, oraz swoją własną logikę renderowania komponentów. W skrócie: Knockout w Magento jest trudniejszy do ogarnięcia. To tak jakby ktoś wziął Reacta i go nadpisał dodając jakieś własne funkcjonalności na potrzeby własnego projektu. Czy to jest dobre podejście?

5. uiComponenty same w sobie są złe

Kolejnym problemem i moim zdaniem najbardziej istotnym jest to, że nawet jak już pogodzimy się ze wszystkim o czym napisałem powyżej i zaczniemy pracować z uiComponentami to zobaczymy, że to jest… Zło, istne zło.

NIe będę się tutaj rozpisywał na temat uiComponentów, których używa się w backendzie. W moim kursie Modyfikacja listy produktów w jednej z części będę pokazywał jak robić uiComponenty w adminhtml. W tym artykule skupiam się na frontendzie i w głównej mierze na uiComponentach używanych szczególnie na ścieżce zakupowej.

5.1. Teoria Magento: uiComponenty są reużywalne

Magento uważa, że uiComponenty są super i są reużywalne i za pomocą Layoutu możesz sobie je dodawać gdzie chcesz.

5.2. Praktyka: jeśli chcesz coś zmienić to 7 razy się zastanów, czy na pewno chcesz to zrobić

W praktyce zmiana struktury komponentów jest bardzo problematyczna. Poważnym problemem jest to, ze niektóre uiComponenty pobierają dane z innych uiComponentów. Mam tu na myśli mechanizmy takie jak chociażby imports i exports. Wiele uiComponentów z Core z tego korzysta. W skrócie działa to tak, że stan jednego komponentu może zależeć od drugiego. Może się okazać, że usunięcie, przeniesienie, lub modyfikacja jakiegoś komponentu może wpłynąć na działanie innego, lub na działanie całego Checkoutu. Generalnie jest tyle zależności, że ciężko to ogarnąć.

React i Redux na ratunek!

Co powiesz na to, żeby robić frontend Magento:

  • bez konfiguracji w XML/PHP, Knockouta i uiComponentów
  • z wykorzystaniem nowoczesnego frameworka jakim jest React, oraz ES6 w dowolnej wersji, jakiej tylko chcesz
  • z wykorzystaniem Reduxa do zarządzania stanem aplikacji

Czy to możliwe?

Zachęcam Cię do obejrzenia tej prezentacji, której autorem jest Jisse Reitsma. Jisse pokazuje tam jak udało mu się zrobić mini koszyk przy użyciu Reacta.

Zainspirowałem się tą prezentacją i poszedłem o krok dalej. Zacząłem bawić się Reactem, dołożyłem do tego Reduxa i okazało się, że to bez żadnego problemu działa w ekosystemie Magento.

Czy taka zabawa ma sens?

Możesz powiedzieć, ze to bez sensu jeśli jesteś sceptykiem i że trzeba robić wszystko tak jak każe Magento. Chciałem tylko zwrócić uwagę, że to tylko kwestia czasu, kiedy Magento porzuci Knockouta i te przedziwne uiComponenty. Zobacz na PWA Studio. Jaki tam jest Stack technologiczny? React, Redux, GraphQL. To jest przyszłość i myślę, ze jeśli jesteś Frontend Developerem Magento to oczywiście musisz znać Knockouta i uiComponenty aby wykonywać bieżące zadania, pomimo tego uważam, ze już teraz jest dobry moment, żeby zacząć eksperymentować z nowymi technologiami. Przyjdzie kiedyś taki dzień, że uiComponenty staną się przeszłością, a standardem stanie się PWA Studio, Vue Storefront lub cokolwiek innego. Bądź na to przygotowany!

Co na to Magento?

Wytyczne techniczne Magento dot. JavaScriptu są bardzo restrykcyjne. Są tam dwa zapisy, które mówią:

10.1. The Magento 2 UI Component framework MUST be used to build frontend applications.

10.5.1. ECMAScript 5.1 SHOULD be used as a JS standard.

Czyli Magento chce abyś pisał frontend przy użyciu frameworka UI Component.

Czy to zachęca do tego, aby zostać Frontend Developerem Magento? Na to pytanie odpowiedz sobie sam, możesz też podzielić się swoją opinią w komentarzu.