Hummingbird vs Classic: Który motyw PrestaShop wybrać?

Dwa oficjalne motywy, dwie różne filozofie

PrestaShop jest dostarczany z dwoma oficjalnymi motywami: Classic i Hummingbird. Classic jest domyślnym motywem od czasu wydania PrestaShop 1.7 w 2016 roku. Hummingbird pojawił się wraz z PrestaShop 8.x jako nowoczesna alternatywa zaprojektowana z myślą o wydajności i przyszłościowości. Wybór między nimi to nie tylko kwestia tego, który lepiej wygląda. Oba motywy reprezentują fundamentalnie różne podejścia do architektury front-end, a Twój wybór wpływa na wydajność, kompatybilność modułów, nakład pracy przy dostosowywaniu i długoterminową utrzymywalność.

Ten artykuł zapewnia dokładne porównanie oparte na architekturze, rzeczywistych danych wydajnościowych, praktycznych aspektach i konkretnych sytuacjach, w których każdy motyw ma sens. Niezależnie od tego, czy zaczynasz nowy sklep, czy rozważasz migrację, pomoże Ci to podjąć świadomą decyzję.

Architektura: Co się zmieniło i dlaczego

Classic został zbudowany na Bootstrap 4, jQuery i szablonach Smarty. Stosuje tradycyjne podejście renderowania po stronie serwera, gdzie serwer generuje pełne strony HTML i wysyła je do przeglądarki. JavaScript jest używany głównie do elementów interaktywnych, takich jak koszyk, strona produktu i proces zamawiania. CSS jest kompilowany z plików Sass i dostarczany jako jeden duży arkusz stylów.

Hummingbird został zbudowany jako gruntowne przemodelowanie od podstaw. Używa Bootstrap 5, rezygnuje z jQuery na rzecz natywnego JavaScript i wprowadza architekturę komponentową. CSS jest bardziej modularny, JavaScript lżejszy, a ogólny rozmiar zasobów znacząco mniejszy.

Usunięcie jQuery to najbardziej konsekwencyjna zmiana architektoniczna. jQuery dodawał około 87KB (30KB po kompresji gzip) do każdego załadowania strony i zachęcał do stylu kodowania, w którym moduły swobodnie manipulowały DOM-em bez koordynacji. Hummingbird zastępuje jQuery nowoczesnymi API przeglądarek, takimi jak fetch, querySelector, classList i delegacja zdarzeń. Oznacza to, że sam motyw jest szybszy, ale moduły zależne od jQuery wymagają aktualizacji.

Bootstrap 5 przynosi własne zmiany. Rezygnuje z jQuery jako zależności (zgodnie z podejściem Hummingbird), używa właściwości niestandardowych CSS (zmiennych) dla łatwiejszego tematowania, usprawnia system siatki z lepszymi narzędziami responsywnymi i aktualizuje wzorce znaczników komponentów. Przejście z Bootstrap 4 na 5 wpływa na każdy niestandardowy CSS lub nadpisania szablonów odwołujące się do klas specyficznych dla Bootstrap.

Porównanie wydajności: Konkretne liczby

Wydajność to główny powód, dla którego PrestaShop stworzył Hummingbird, a liczby potwierdzają tę decyzję. Testowanie obu motywów na identycznej instalacji PrestaShop 8.1 z tymi samymi produktami, modułami i konfiguracją serwera ujawnia znaczące różnice.

Na typowej stronie produktu mierzonej za pomocą Lighthouse na symulowanym połączeniu mobilnym, Classic osiąga wynik wydajności w zakresie 45-55, podczas gdy Hummingbird osiąga 65-75. Szczegółowe metryki opowiadają jaśniejszą historię.

First Contentful Paint (FCP) poprawia się o około 0,5 do 1,0 sekundy z Hummingbird. Wynika to głównie z mniejszego ładunku CSS i braku blokującego renderowanie jQuery. Largest Contentful Paint (LCP) poprawia się o podobny margines, ponieważ krytyczna ścieżka renderowania jest krótsza.

Total Blocking Time (TBT) odnotowuje najbardziej dramatyczną poprawę. JavaScript Classic oparty na jQuery tworzy znaczące blokowanie głównego wątku, gdy przeglądarka parsuje i wykonuje bibliotekę plus wszystkie zależne od jQuery skrypty modułów. Podejście Hummingbird oparte na natywnym JavaScript zmniejsza TBT o 40-60% w typowych konfiguracjach.

Cumulative Layout Shift (CLS) jest w przybliżeniu równoważny między oboma motywami przy prawidłowej konfiguracji, ponieważ stabilność layoutu zależy bardziej od wymiarów obrazów i implementacji leniwego ładowania niż od wyboru frameworka.

Łączny rozmiar transferu opowiada kolejną część historii. Domyślna instalacja Classic transferuje około 350-450KB CSS i JavaScript przy pierwszym załadowaniu strony. Hummingbird obniża to do 200-300KB. Różnica kumuluje się w trakcie całej sesji przeglądania, gdy odwiedzający nawigują po Twoim sklepie.

Te liczby zakładają czystą instalację. W praktyce moduły firm trzecich często dodają własne CSS i JavaScript, co może zawęzić lub poszerzyć różnicę w zależności od tego, jak dobrze te moduły są zoptymalizowane dla każdego motywu.

Kompatybilność modułów: Słoń w pokoju

To miejsce, gdzie zalety Hummingbird wiążą się ze znaczącym zastrzeżeniem. Wiele modułów PrestaShop zostało zbudowanych z myślą o architekturze Classic. Są zależne od jQuery, używają wzorców znaczników Bootstrap 4 i zakładają konkretne struktury szablonów dostarczane przez Classic.

Kiedy instalujesz te moduły na Hummingbird, kilka rzeczy może się zepsuć. Funkcjonalność JavaScript opierająca się na jQuery przestanie działać po cichu lub wyrzuci błędy. Dialogi modalne, rozwijane menu i inne komponenty Bootstrap 4 mogą nie renderować się poprawnie ze zmienionymi znacznikami i nazwami klas Bootstrap 5. Nadpisania szablonów zakładające strukturę szablonów Classic nie zadziałają z reorganizowanymi szablonami Hummingbird.

Powaga tego problemu zależy od Twojego zestawu modułów. Rdzeniowe moduły PrestaShop są kompatybilne z oboma motywami. Dobrze utrzymywane moduły firm trzecich od aktywnych deweloperów zazwyczaj obsługują Hummingbird. Jednak starsze moduły, niszowe moduły lub moduły od deweloperów, którzy zaprzestali aktualizacji swoich produktów, mogą działać tylko z Classic.

Przed wyborem Hummingbird powinieneś przetestować każdy moduł, którego planujesz używać. Zainstaluj je w środowisku staging z aktywnym Hummingbird i dokładnie przetestuj każdą funkcję. Zwróć szczególną uwagę na funkcjonalność zależną od JavaScript, taką jak koszyki AJAX, pola personalizacji produktu, szybkie podglądy i kroki zamówienia.

Niektórzy deweloperzy modułów dostarczają osobne pliki szablonów dla Classic i Hummingbird. Kiedy widzisz katalogi takie jak views/templates/hook/classic/ i views/templates/hook/hummingbird/ w module, ten moduł wyraźnie obsługuje oba motywy. To złoty standard kompatybilności.

Smarty vs Twig: Kwestie przyszłościowości

PrestaShop ogłosił zamiar przejścia ze Smarty na Twig jako silnik szablonów dla panelu frontowego. To przejście jest dyskutowane od lat i jest częściowo zaimplementowane w panelu administracyjnym. Hummingbird jest zaprojektowany z myślą o tym przejściu, choć na dzień PrestaShop 8.x i 9.x oba motywy nadal używają Smarty do szablonów front-office.

Znaczenie tego dla Twojego wyboru motywu jest pośrednie, ale ważne. Struktura szablonów Hummingbird jest zorganizowana w sposób, który ułatwi ewentualną migrację ze Smarty na Twig. Jeśli zbudujesz rozbudowane dostosowania na strukturze szablonów Classic, możesz stanąć przed większym nakładem migracyjnym, gdy (nie "jeśli") PrestaShop zakończy przejście na Twig.

Niemniej jednak to przejście jest "wkrótce" od kilku lat. Podejmowanie decyzji dzisiaj wyłącznie na podstawie przyszłej zmiany silnika szablonów jest przedwczesne. Wybierz na podstawie aktualnych, konkretnych potrzeb i zaakceptuj, że pewien nakład migracyjny będzie wymagany niezależnie od wybranego motywu, gdy przejście na Twig nastąpi.

Podejście do dostosowywania

Dostosowywanie Classic jest dobrze udokumentowane i powszechnie rozumiane. Istnieją setki poradników, tysiące postów na forach i lata wiedzy społeczności na temat modyfikowania Classic. Motyw używa prostego Sass do stylowania, tradycyjnego jQuery do interaktywności i szablonów Smarty, które są łatwe do czytania i modyfikowania.

Dostosowywanie Hummingbird wymaga zaktualizowanych umiejętności. Musisz czuć się komfortowo z nowoczesnym CSS (właściwości niestandardowe, nowoczesne selektory, zapytania kontenerowe), natywnym JavaScript (bez podpórki jQuery) i podejściem Bootstrap 5 opartym na narzędziach (utility-first). Krzywa uczenia się jest steilsza, jeśli Twój zespół jest przyzwyczajony do rozwoju opartego na jQuery.

Jednak właściwości niestandardowe CSS w Hummingbird sprawiają, że pewne typy dostosowań są znacznie łatwiejsze niż w Classic. Chcesz zmienić kolor główny w całym motywie? Zmodyfikuj jedną właściwość niestandardową CSS. W Classic musiałeś wyśledzić każdą zmienną Sass, przekompilować i poradzić sobie z konfliktami specyficzności.

Hummingbird używa również bardziej semantycznej struktury HTML, co ułatwia celowanie w elementy za pomocą selektorów CSS i poprawia dostępność. Pliki szablonów są lepiej zorganizowane z wyraźniejszym podziałem odpowiedzialności.

Obsługa motywów potomnych

Oba motywy obsługują motywy potomne (child themes), co jest zalecanym sposobem dostosowywania motywu PrestaShop bez bezpośredniej modyfikacji plików motywu nadrzędnego. Motywy potomne pozwalają nadpisywać konkretne szablony, dodawać niestandardowe CSS i JavaScript oraz utrzymywać dostosowania między aktualizacjami motywu.

Mechanizm motywu potomnego w Classic jest dojrzały i dobrze przetestowany. Tworzysz katalog motywu potomnego, definiujesz theme.yml odwołujący się do Classic jako rodzica i selektywnie nadpisujesz pliki, które chcesz zmienić. Ten workflow jest stabilny od PrestaShop 1.7.

Obsługa motywów potomnych w Hummingbird działa tak samo na poziomie frameworka, ale ma pewne praktyczne różnice. Ponieważ szablony Hummingbird mają inną strukturę, nadpisania motywu potomnego z motywu opartego na Classic nie mogą być ponownie wykorzystane. Musisz stworzyć nowe nadpisania oparte na strukturze szablonów Hummingbird.

PrestaShop 8.x ogólnie ulepszył obsługę motywów potomnych, ułatwiając nadpisywanie zasobów (CSS i JavaScript) i częściowych szablonów. Te ulepszenia dotyczą zarówno motywów potomnych Classic, jak i Hummingbird.

Jeśli zlecasz tworzenie niestandardowego motywu deweloperowi, wybranie Hummingbird jako rodzica jest lepszym wyborem na dłuższą metę. Czystsza architektura oznacza mniejszy dług techniczny, a nowoczesne podejście CSS oznacza mniejszą liczbę potrzebnych nadpisań dla typowych dostosowań.

Ścieżka migracji: Z Classic na Hummingbird

Jeśli aktualnie korzystasz z Classic i rozważasz przejście na Hummingbird, oto co faktycznie obejmuje migracja.

Nadpisania szablonów trzeba przebudować od zera. Nie możesz po prostu skopiować nadpisań szablonów Classic do motywu potomnego Hummingbird. Struktura plików szablonów, nazwy zmiennych i nazwy bloków są inne. Musisz zbadać każde nadpisanie, zrozumieć, co osiąga, i odtworzyć je używając struktury szablonów Hummingbird.

Niestandardowy CSS wymaga przeglądu i prawdopodobnie znaczącej rewizji. Jeśli Twój CSS celuje w klasy Bootstrap 4, te nazwy klas mogły ulec zmianie w Bootstrap 5. Jeśli Twój CSS używa wzorców zależnych od jQuery (takich jak stylowanie elementów na podstawie klas dodanych przez jQuery), te się zepsują. Jeśli Twój CSS używa nazw klas specyficznych dla motywu Classic, te mogą nie istnieć w Hummingbird.

Niestandardowy JavaScript musi zostać przepisany. Każdy kod jQuery musi zostać przekonwertowany na natywny JavaScript. Jest to często najbardziej czasochłonna część migracji, ponieważ kod jQuery bywa głęboko powiązany z wzorcami manipulacji DOM, które wymagają przemyślenia na nowo.

Kompatybilność modułów musi zostać zweryfikowana dla każdego zainstalowanego modułu. Jak omówiono powyżej, moduły zależne od jQuery lub Bootstrap 4 mogą wymagać aktualizacji lub zamienników.

Realistyczny harmonogram migracji umiarkowanie dostosowanego sklepu Classic na Hummingbird to 40-80 godzin pracy dewelopera. To nie jest projekt weekendowy. Zaplanuj to jako pełnoprawne przedsięwzięcie deweloperskie ze środowiskiem staging, dokładnym testowaniem i planem wycofania zmian.

Kiedy wybrać Classic

Wybierz Classic, gdy Twój sklep zależy od starszych modułów firm trzecich, które nie zostały zaktualizowane pod kątem kompatybilności z Hummingbird. Wybierz go, gdy Twój zespół deweloperski jest bardziej biegły w jQuery i Bootstrap 4 i nie masz budżetu na przekwalifikowanie lub zatrudnienie nowych osób. Wybierz go, gdy budujesz w napiętym terminie i potrzebujesz najszerszego możliwego wyboru kompatybilnych motywów i modułów z rynku PrestaShop.

Classic to również bezpieczniejszy wybór dla sklepów działających na PrestaShop 1.7.x lub wczesnych wersjach 8.0.x. Hummingbird został wprowadzony później w cyklu 8.x i może nie być w pełni dostępny lub stabilny na starszych wersjach PrestaShop.

Jeśli Twój sklep już działa na Classic z rozbudowanymi dostosowaniami i osiąga zadowalającą wydajność, może nie być przekonującego powodu do migracji. Zyski wydajnościowe z Hummingbird są realne, ale mogą nie uzasadniać nakładu migracyjnego, jeśli Twój sklep już ładuje się szybko i dobrze konwertuje.

Kiedy wybrać Hummingbird

Wybierz Hummingbird, gdy zaczynasz nowy sklep PrestaShop 8.x lub 9.x od zera. Zalety wydajnościowe są darmowe, gdy nie masz starych dostosowań do migracji. Wybierz go, gdy wydajność jest najwyższym priorytetem dla Twojego biznesu, szczególnie jeśli Twoja publiczność to głównie użytkownicy mobilni na wolniejszych połączeniach, gdzie każdy kilobajt ma znaczenie.

Wybierz Hummingbird, gdy chcesz zabezpieczyć swój sklep na przyszłość. W miarę jak PrestaShop kontynuuje ewolucję w kierunku nowoczesnych praktyk front-end, Hummingbird będzie otrzymywać najwięcej uwagi deweloperskiej i jako pierwszy korzystać z nowych funkcji.

Wybierz go, gdy masz deweloperów biegłych w nowoczesnym JavaScript i CSS. Architektura Hummingbird jest czystsza i łatwiejsza w utrzymaniu dla zespołów z aktualnymi umiejętnościami front-end.

I wybierz go, gdy zależy Ci na dostępności. Semantyczny HTML Hummingbird, atrybuty ARIA i obsługa nawigacji klawiaturą są zauważalnie lepsze niż w Classic. Jeśli Twój sklep musi spełniać standardy dostępności WCAG, Hummingbird daje Ci lepszy punkt wyjścia.

Kwestia motywów firm trzecich

Wielu właścicieli sklepów pomija oba oficjalne motywy i kupuje motyw firmy trzeciej z rynku PrestaShop Addons lub od niezależnych sprzedawców. Te motywy prawie zawsze bazują na architekturze Classic, ponieważ Classic jest dostępny znacznie dłużej i reprezentuje większą bazę zainstalowaną.

Jeśli używasz motywu firmy trzeciej, pytanie Classic vs Hummingbird jest w dużej mierze akademickie dla Twojego obecnego sklepu. Deweloper Twojego motywu podjął za Ciebie decyzje architektoniczne. Jednak oceniając nowe motywy firm trzecich, sprawdź, czy są zbudowane na fundamentach Classic, czy Hummingbird. Motywy zbudowane na Hummingbird będą osiągać lepszą wydajność i dłużej utrzymywać kompatybilność.

Uważaj na motywy firm trzecich, które twierdzą, że są "oparte na Hummingbird", ale w rzeczywistości jedynie zapożyczają jego styl wizualny, zachowując zależną od jQuery architekturę Classic pod spodem. Sprawdź zależności JavaScript motywu i framework CSS, aby to zweryfikować.

Werdykt: Nie ma złej odpowiedzi, ale jest lepsza

Dla nowych sklepów na PrestaShop 8.x lub nowszym, Hummingbird jest jasną rekomendacją. Jest szybszy, bardziej nowoczesny, lepiej utrzymywany i bardziej przyszłościowy. Problem z kompatybilnością modułów zmniejsza się w miarę jak ekosystem nadgania, a start od zera oznacza brak kosztów migracji starych rozwiązań.

Dla istniejących sklepów działających na Classic ze znaczącymi dostosowaniami, decyzja wymaga analizy kosztów i korzyści. Oblicz nakład migracyjny uczciwie, zmierz swoją aktualną wydajność, aby zrozumieć potencjalny zysk, i zdecyduj, czy poprawa uzasadnia inwestycję. Czasami odpowiedź brzmi tak, czasami nie, a czasami właściwą odpowiedzią jest poczekanie do następnego dużego przeprojektowania, aby zmienić motyw.

Niezależnie od wybranego motywu, zasady dobrej wydajności front-end obowiązują jednakowo: minimalizuj rozmiary zasobów, leniwie ładuj treść poniżej złożenia strony, optymalizuj obrazy i regularnie audytuj szybkość strony. Dobrze zoptymalizowany sklep na Classic zawsze pokonaje źle skonfigurowany sklep na Hummingbird. Motyw zapewnia fundament, ale wykonanie decyduje o wyniku.