Magento 2 – praca z CSS i JS na Froncie

Front-end - Grupa Unity

Praca na Froncie w Magento 2 w odniesieniu do poprzedniej wersji tego sklepu uległa znacznej zmianie. Wprowadzone zostało w pełni modularne podejście, w związku z czym kod przechowywany jest w nieco innej, bardziej ustrukturyzowanej formie. Forma ta pozwala na dużo łatwiejsze poruszanie się po projekcie i łatwiejszą lokalizację miejsc, w których konieczna jest jakaś zmiana.


Oprócz samej zmiany struktury plików, wprowadzono także wiele nowych narzędzi, które obecnie powinny być standardem w każdym z projektów. Biorąc pod uwagę dynamizm zmian w świecie frontendu, zastosowane rozwiązania mimo wszystko mogą być nie uważane za coś co jest obecnie na topie – trzeba jednak wziąć pod uwagę fakt, że od momentu rozpoczęcia prac nad nową wersją sklepu do momentu jej wydania upływa dosyć znaczny okres czasu co wymusza na twórcach wybranie technologii być może nie uważanych za najnowocześniejsze, jednak takie, które mają ugruntowaną pozycję na rynku i nie znikną z dnia na dzień.

CSS

Twórcy Magento 2 postawili na wykorzystanie dynamicznego arkusza stylów LESS. Oczywiście można tutaj się rozwodzić nad wyższością SASS nad LESS, jednak najczęściej wykorzystywane przez programistów funkcje dostępne są w obu wymienionych preprocesorach. Mimo, że Magento 2 narzuca wykorzystywanie LESS, nie zabrania tym samym używania SASS – jego podpięcie nie powinno stanowić większego problemu. Problemem jednak może być to, że we wszystkich domyślnie dostępnych modułach (warto zaznaczyć, że w Magento 2 praktycznie wszystko jest modułem) zastosowany jest LESS i rozszerzanie istniejących plików za pomocą SASS będzie ciężkie do wykonania. Przy tworzeniu nowego modułu, od początku można wykorzystywać SASS i wtedy nie będzie to stanowiło większego problemu.

Jako, że w Magento 2 zastosowano preprocesor, to pliki CSS muszą być otrzymywane w wyniku przetworzenia plików źródłowych. Tutaj mamy do wyboru 3 możliwości kompilacji plików LESS / SASS:

  • Kompilacja za pomocą jednego z dostępnych narzędzi automatyzujących – w domyśle mamy dostępną konfigurację dla Grunt’a, którą wystarczy przekopiować do odpowiedniego katalogu, zainstalować grunt-cli i już możemy kompilować pliki do CSS. Jest to metoda szczególnie przydatna do sprawnego developmentu. Więcej szczegółów w oficjalnej dokumentacji,
  • Kompilacja po stronie serwera – jest to opcja, którą możemy zmienić z poziomu panelu admina w sekcji Stores / Configuration / ADVANCED / Developer / Frontend Development Workflow. Kompilacja w tym przypadku odbywa się po stronie PHP i działa bardzo sprawnie, więc śmiało może być wykorzystywana do developmentu,

Magento 2 - na froncie - Grupa Unity

  • Kompilacja po stronie klienta – opcja możliwa do ustawienia w tym samym miejscu co kompilacja po stronie serwera. Przy tej opcji mamy do czynienia z kompilacją po stronie przeglądarki za pomocą skryptów JavaScript. W moim mniemaniu jest to jednak funkcja udostępniona bardziej jako ciekawostka, ponieważ kompilacja w ten sposób jest w przypadku Magento 2 i mnogości plików bardzo mało optymalna czasowo.

Magento 2 zadbało również o zapewnienie domyślnego narzędzia do łączenia w jeden i minifikacji wszystkich plików CSS. Ustawienia te znajdziemy w panelu admina w sekcji  Stores / Configuration / ADVANCED / Developer / CSS Settings. Warunkiem działania minifikacji plików jest brak uruchomionego trybu deweloperskiego – co jest całkiem zrozumiałe.

Magento 2 na froncie - Grupa Unity

JavaScript

Podobnie jak to było w przypadku CSS, po stronie JavaScript praca jest równie przyjemna, ponieważ zastosowany został mechanizm do asynchronicznego ładowania modułów RequireJS. W standardowej konfiguracji mamy dostęp do bilbiotek jQuery, UnderscoreJS, jQuery UI, Knockout.js i wielu innych. Sam zastosowany standard nazwewnictwa modułów JS jest czytelny, pozwalający na łatwą lokalizację plików źródłowych. Przy projektach o większej skali, do jakich zostało stworzone Magento 2, zastosowanie wzorca AMD przynosi znakomite efekty, ponieważ w dowolnym module możemy mieć dostęp do danych udostępnianych przez dowolny inny moduł – co zapobiega powielaniu kodu i optymalizuje działanie skryptów.

W produkcyjnej wersji aplikacji zarówno jak to jest w przypadku CSS, tak i w przypadku JS wymagane jest łączenie i minifikacja plików. Tutaj również mamy możliwość uruchomienia domyślnego mechanizmu w sekcji  Stores / Configuration / ADVANCED / Developer / JavaScript Settings.

Magento 2 na froncie - Grupa Unity

Podsumowanie

Mimo, że Magento 2 narzuca stosowanie wielu rozwiązań, nie stanowi ono wielkiego ograniczenia w rozszerzaniu i tworzeniu nowych funkcjonalności. W standardzie otrzymujemy pakiet gotowych, skonfigurowanych narzędzi pozwalających na stosunkowo szybkie rozpoczęcie efektywnej pracy. Ze względu na podejście modułowe, ogrom całego systemu przestaje być problemem. Wszystkim, którzy zastanawiaja się nad rozpoczęciem przygody w developingu na Magento 2 mogę z czystym sumieniem polecić to rozwiązanie – być może próg wejścia w kod może zająć kilka tygodni, jednak z czasem dojdzie się do wniosku, że wszystko jest tam dobrze przemyślane i nic nie istnieje bez powodu.

Front-End Developer w Grupie Unity. W firmie odpowiada za kwestię wizualna tworzonych projektów. Posiada kilkuletnie doświadczenie w tworzeniu aplikacji webowych z wykorzystaniem aktualnie obowiązujących trendów. W projektach wykorzystuje tylko sprawdzone rozwiązania, unika eksperymentów. Pracował m.in. przy projektach Royal Canin, Rovese, Toyota Nowakowski, Tubes International, Homla.

Napisz do nas

Potrzebujesz więcej informacji lub jesteś zainteresowany współpracą z nami? Chętnie odpowiemy na każde pytanie. Zapraszamy do kontaktu!
Pola oznaczone * są wymagane.