- Budowa - nowa struktura katalogów
- Blank i LUMA: nowe motywy Magento 2
- Dziedziczenie motywów w Magento 2 Frontend
- Układ w Magento 2
- Modułowość i możliwość ponownego użycia
- Frontend Magento 2 poprawia wydajność
- Korzyści: Magento 2 promuje i wymaga profesjonalizmu
W zeszłym tygodniu mój kolega Matthias podzielił się swoimi wrażeniami Magento 2 moduły zgłoszone jako deweloper zaplecza. Nowy system sklepu wprowadza również pewne zmiany dla programistów front-end. Praca z motywami Magento 2 stawia nowe wymagania. Ponieważ można przewidzieć, że w wersji 2.1 nadal będą wprowadzane drobne poprawki w celu wygładzenia kilku procesów, zmiany te nie muszą być ostateczne. Aktualny status:
Budowa - nowa struktura katalogów
Co natychmiast przyciąga wzrok, jeśli jesteś Magento 2 zaczynają się różnice w strukturze katalogów. Jeśli pliki szablonów i layoutów były wcześniej uruchamiane w app / design i arkuszach stylów pod skórą , wszystkie pliki leżą teraz razem w folderze Magento 2 Themes i są dzielone według modułów . Trzeba przyzwyczaić się do tego, ale z ulgą możemy mieć wszystko w jednym miejscu - szczególnie w złożonych frontach sklepowych, które zawierają dużą liczbę różnych elementów układu. Co więcej, jest to korzystne i bardziej przejrzyste dla specjalnie opracowanych modułów.
Blank i LUMA: nowe motywy Magento 2
Magento 2 zawiera dwa motywy. Pusty motyw, który jest już responsywny i zdecydowanie nadaje się jako podstawa do dalszego dostosowywania. I motyw LUMA , świetny przykład niestandardowego motywu opartego na pustym miejscu. Podstawową ideą jest wydajne wykorzystanie właściwości pustego motywu jako rodzica. Podczas tworzenia własnych motywów Magento 2 warto zajrzeć do struktury LUMA. Magento dostarcza także kilka danych demo wraz z LUMA. Na przykład zwiastuny dla strony początkowej lub instancji widgetu i innych elementów treści, które dają dobre wyobrażenie o możliwościach niestandardowego motywu.
Dziedziczenie motywów w Magento 2 Frontend
Zasada awaryjna jest implementowana nieco inaczej niż w Magento 1, ale przypomina to w podstawowej idei. Podstawą są szablony standardowych modułów Magento. Magento 2 Blank Theme stanowi podstawę standardowego sklepu ze wszystkimi podstawowymi stylami. Na tej podstawie możesz utworzyć dowolną liczbę responsywnych motywów Magento 2. Zależności między motywami nadrzędnymi i podrzędnymi można łatwo zdefiniować za pomocą pliku konfiguracyjnego.
Układ w Magento 2
Magento 2 również zmienia strukturę. Od teraz istnieją dwa typy elementów układu, znane bloki i nowe pojemniki. Kontenery są symbolami zastępczymi dla treści. Służą tylko do układania bloków i nie zawierają żadnej logiki. W praktyce oznacza to na przykład, że nie definiujesz już nawigacji jako takiej w określonym obszarze strony, ale zamiast tego przypisujesz nawigację do kontenera, który zawiera pozycjonowanie i style.
Źródło: Magento
Układ można nadal dostosowywać za pomocą bezpośrednich interwencji w szablonach. Jednak bardziej sensowne jest konfigurowanie za pomocą plików XML układu. Magento 2 oferuje jeszcze więcej opcji niż jego poprzednik, co rzadko pozostawia powód do nadpisywania szablonów. Z jednej strony zmniejsza to ryzyko konfliktów i stabilności, z drugiej strony platforma e-commerce Magento pozostaje rozbudowywana pomimo znacznych zmian.
Modułowość i możliwość ponownego użycia
Magento wyraźnie zyskuje modularność dzięki wprowadzeniu biblioteki UI Magento . W bibliotece UI Magento szeroka gama elementów i funkcji frontonu (np. Czcionek, tabel, przycisków, ocen, nawigacji itp.) Jest wstępnie zdefiniowana i stylizowana. Stylistyka elementów nie występuje wtedy w motywie niestandardowym, ale większość projektu można łatwo skonfigurować za pomocą zmiennych w bibliotece interfejsu użytkownika Magento. Pomaga to również uczynić nadpisywanie Magento Core Code przestarzałymi i zapewnić możliwość uaktualnienia systemu. Ponadto, możliwość ponownego użycia stylów poprawia się, jeśli korzystasz z biblioteki zgodnie z przeznaczeniem i dalej rozwijany za pomocą własnych elementów treści.
Przykład różnych opcji konfiguracji przycisku za pośrednictwem biblioteki interfejsu użytkownika Magento; Źródło: Nexcess
Dodatkowo Magento 2 Frontend używa teraz JavaScript w połączeniu z RequireJS . RequireJS obsługuje ładowanie poszczególnych modułów aplikacji javascript. Specjalna funkcja: RequireJS ładuje się podczas otwierania strony tylko „wymagane” skrypty - zamiast tylko wszystkiego - co znacznie skraca układ strony.
Zamiast instalować wymagany skrypt indywidualnie i przydzielać wymagane biblioteki lub integrować wszystko wszędzie, wymagane moduły są przywoływane w kodzie przez RequireJS, co upraszcza pracę i usprawnia kod.
Frontend Magento 2 poprawia wydajność
Ze względu na modułową strukturę Magento 2 zawiera znacznie mniej nadpisań rdzenia i deklaracji CSS, a teraz możesz łatwiej niż wcześniej, tylko określone bloki potrzebne w rekordzie pliku CSS. Dzięki temu jest smukły i ładuje się szybciej.
Konsekwentne wdrażanie zasady Mobile First w Magento zwiększa wydajność na urządzeniach mobilnych:
Struktura zapewnia, że style-m.css, tj. Arkusz stylów dla układu mobilnego, jest ładowany jako pierwszy. Tylko jeśli nie jest to urządzenie mobilne, dodatkowe style są ładowane z styles-l.css (l = duży).
Aby wykorzystać te potencjały wydajności, musi tak być Deweloper współpracuje wcześniej, ale intensywnie z bardziej złożoną architekturą frontendu czynienia.
Mobile First i responsive są również zadowoleni z Google.
Korzyści: Magento 2 promuje i wymaga profesjonalizmu
Nieuchronnie plewy oddzielają się tutaj od pszenicy: Front Magento 2 jest bardziej złożony w swojej strukturze i możliwościach niż w Magento 1. Jeśli trzeba odejść od standardowych tematów, nie można osiągnąć doskonałych wyników przy odrobinie majsterkowania i dobrej woli ,
- Magento 2 wymaga od programistów w pierwszej kolejności dostosowania bardzo uporządkowanego sposobu pracy i obszernego know-how, aby utrzymać wysiłek na rzecz spójnego projektowania zorientowanego na użytkownika w atrakcyjnym otoczeniu. Może to się udać tylko z wyraźnym oddzieleniem rozwoju zaplecza i frontendu. Dzięki narzędziom takim jak Task Runner Grunt praca ta jest również łatwiejsza.
- W tym celu otrzymujesz system, w którym dostosowania frontendu mogą być implementowane bardzo precyzyjnie, bez konfliktów, a tym samym szybko, co obiecuje krótkie czasy ładowania i może być łatwo uaktualnione.
