Dziś przybliżę temat jednego z frontedów wykorzystwanych na Magento. A dokładniej mówiąc, naszpiszę dlaczego Hyva to moim zdaniem najlepszy wybór dla większości projektów Magento.
Czym jest Hyva?
Jakie są dostępne front-endy Magento?
Problemy z wydajnością front-endów Magento
Hyva – najszybszy front-end Magento
Ile kosztuje Hyva?
Jak wyglądają sklepy postawione na Hyvie?
Jak wygląda Hyva w porównaniu do innych technologii?
Co to jest Hyva? – podsumowanie
Czym jest Hyva?
Jak zawsze na samym początku prosta odopowiedź na to biznesowe pytanie. Hyva to rodzaj frontendu Magento, który charakteryzuje się tym, że jest niezwykle szybki. W ocenach na Google PageSpeed można łatwo uzyskać oceny rzędu 90 na mobile i powyżej 95 na desktop.
Z drugiej strony, ten front-end jest bardzo prosty, co sprawia, że koszty kodowania oraz koszty utrzymania Magento są niskie.
Jakie są dostępne front-endy Magento?
Rozszerzając tę odpowiedź, zacznijmy od tego, jakie frontendy były dostępne w Magento na samym początku istnienia tego systemu.
Jak powstało Magento 2.0, dostępny był tzw. standardowy temat Magento 2, który nazywał się Luma. To było w 2015 roku i już wtedy Luma była (nie ma co ukrywać) przestarzała. Tak przestarzała, że obecnie, biorąc pod uwagę oceny Google PageSpeed, okazuje się, że trudno jest uzyskać (nawet po dużej optymalizacji), lepsze oceny na Google PageSpeed niż przykładowo około 80-kilka punktów na desktopie i około 40-45 na urządzeniach mobilnych.
Coraz więcej dyrektorów ecommerce oraz posiadaczy Magento 2 zastanawiało się, jak ugryźć temat starej Lumy. Magento jest świetnym silnikiem, bardzo skalowalnym, ale front-end nie spełniał obecnych wymagań użytkowników i wymagań Google’a. W związku z tym pojawił się temat PWA headless.
Rozwiązania takie jak Vue Storefront, PWA Studio czy Scandi PWA zaczęły zastępować standardowy frontend Magento – Lumę. Wprowadzały one separację frontendu od backendu, stając się tzw. rozwiązaniami headless. W skrócie, „head” w postaci PWA komunikował się z backendem Magento i był oddzielną aplikacją.
Cechą, na którą wszyscy zwracali uwagę, była olbrzymia szybkość tych aplikacji oraz “doświadczenie użytkownika”, które miało przypominać korzystanie z aplikacji. Chociaż drugi z tych celów został osiągnięty, tak niestety ciężko jest znaleźć rzeczywiście świetne wdrożenie e-commerce’u, które miałoby back-end Magentowy, front-end zbudowany na którymś z tych rozwiązań headlessowych i byłoby niesamowicie szybkie. Co ciekawe dane choćby z The HTTP Archive pokazują, że bardzo ciężko jest zbudować rozwiązanie PWA, które byłoby dobrze oceniane przez Google’a.
Problemy z wydajnością front-endów Magento
Kiedyś zadałem nawet pytanie na ten temat na LinkedIn, ale nie otrzymałem odpowiedzi. Nikt nie chciał podzielić się swoimi doświadczeniami z e-commerce zbudowanymi na PWA Studio, View Store Front czy Scandi PWA, które byłyby niesamowicie szybkie. To najlepiej pokazuje jak trudno jest znaleźć takie wdrożenia.
Dodatkowo z czasem wyszła największa wada rozwiązań PWA. Koszty zarówno pierwotnego zakodowania PWA, jak i późniejszego utrzymania, są kilkukrotnie wyższe niż koszty utrzymania frontendu Magentowego na Lumie.
To stanowi znaczny problem, ponieważ jeżeli myślimy o biznesie, który być może jest dopiero na etapie skalowania się, albo nawet na samym początku swojej drogi do bycia wielkim e-commerce, to najlepsze byłoby unikanie dużych kosztów utrzymania technologii ecommerce..
Tym samym, mieliśmy do wyboru dwie ścieżki, trochę jak wybór między dżumą a cholerą. Mieliśmy do wyboru Lumę albo PWA.
Oczywiście pojawiły się szablony budowane na Lumie, które są jeszcze wolniejsze niż sama Luma. Dramat totalny.
Z drugiej strony zaczęły powstawać PWA, które były swoistym gotowym szablonem PWA. Problem z nimi jest taki, że taki projekt jest ciężko przenaszalny pomiędzy agencjami. Stajesz się więc skazany na współpracę z tym konkretnym software housem (czyli doświadczasz tak zwanego vendor lock in’u).
Hyva – najszybszy front-end Magento
W odpowiedzi na zaistniałą sytuację, w 2020 roku powstała Hyva.
Hyva to nowy frontend, niebędący pochodną Lumy, ale zupełnie nowym rozwiązaniem. Wykorzystuje przede wszystkim technologie Tailwind CSS oraz Alpine JS. Dzięki znacznemu odchudzeniu w porównaniu do Lumy, Hyva charakteryzuje się niesamowitą szybkością.
Oferuje ona imponujące wyniki na Google PageSpeed i przy tym jego zaletą jest to, że nawet niedoświadczeni programiści są w stanie programować frontendy oparte na Hyvie i robią to bezbłędnie.
Dodatkowo, koszt i czas zakodowania pojedynczej funkcjonalności Hyvy w porównaniu do Lumy czy PWA jest zdecydowanie niższy.
Jak wiadomo, Magento korzysta z knockout’a, który jest wykorzystywany w procesie składania zamówienia. Obecny system jest niefortunny, trudny do przebudowy, skomplikowany i koszty modyfikacji procesu składania zamówienia w Magento są bardzo wysokie. Hyva ma w planach stworzenie własnej wersji procesu składania zamówienia (w zasadzie to już w październiku 2023 jest on dostępny, ale jeszcze bez integracji z polskimi systemami płatności i kurierami).
Ile kosztuje Hyva?
Hyva jest rozwiązaniem płatnym. Koszt to 1000 EUR. Za te 1000 EUR otrzymujemy bezterminową licencję. Dostępne będą wszystkie aktualizacje Hyvy, które pojawią się w przyszłości.
Poza kosztami licencji występują również koszty kodowania. Tutaj pojawia się zaskoczenie, Hyva jest znacznie tańsza w pierwotnym kodowaniu niż PWA, a co więcej, jest również tańsza niż Luma. Obecnie szacujemy, na podstawie już zrealizowanych projektów na Hyvie oraz rozmów z innymi domami programistycznymi, że koszt wdrożenia indywidualnego projektu graficznego, czyli stworzenia zupełnie indywidualnego sklepu internetowego, wynosi od 500 do 800 godzin pracy programisty.
Co ciekawe w Hyvie, jeśli myślimy o biznesie, który ma działać na różnych rynkach geograficznych, gdzie rynek geograficzny to połączenie waluty i języka i planujemy wejść na przykład na kilkanaście, kilka lub kilkadziesiąt różnych rynków, Hyva jest naprawdę dobrym rozwiązaniem.
Ważne jest jednak, że Hyvy nie można wykorzystać w starszych wersjach Magento niż wersja 2.3. Kompatybilność Hyvy z Magento jest zapewniona od wersji 2.3.3. Co jest ciekawe, Hyva współpracuje zarówno z płatną wersją – Adobe Commerce, jak i z Magento 2 Open Source, zwanym również Community Edition.
Jak wyglądają sklepy internetowe postawione na Hyvie?
Oczywiste pytanie, które pojawia się na tym etapie to, czy ktoś już postawił sklep na Hyvie?
Tak.
Aby potwierdzić moje słowa, przedstawię Wam kilka sklepów internetowych, które działają na tej platformie. W pierwszej kolejności warto odwiedzić stronę Hyvy, gdzie w sekcji „showcases” znajduje się lista przykładowych sklepów, które zostały stworzone na tej platformie. Jak widać, jest ich sporo i nie są to małe sklepy.
Przykładowo, mamy:
- Bauhaus — moim zdaniem oferuje naprawdę atrakcyjny design
- Citizen — znany i duży brand
- Kinderkraft — fajnie to wygląda
- MDD — naprawdę świetny design
Obecnie już ponad 1000 sklepów wykorzystuje Hyvę i każdego miesiąca to liczba jest większa o około 50.
Jak wygląda Hyva w porównaniu do innych technologii?
Na koniec ciekawostka. Wejdźcie na ten wykres i zobaczcie jak wygląda porównanie PWA vs Hyva vs Luma względem zaliczania wymagań Core Web Vitals.
Jak do tego doszło, że drogie we wdrożeniu i utrzymaniu PWA wygląda jak wygląda? Nie wiem.
Co to jest Hyva? – podsumowanie
Uważam, że jeżeli chodzi o wprowadzenie do tematu, jesteście już teraz wyposażeni w solidną wiedzę i wiecie, czym jest Hyva.
Hyva to rodzaj frontendu, który możemy wykorzystać w Magento 2, charakteryzujący się niesamowitą szybkością. Możemy liczyć na wyniki rzędu powyżej 95 punktów na desktopie i zdecydowanie powyżej 90 punktów na urządzeniach mobilnych.
Z drugiej strony, Hyva jest bardzo prosta i łatwa w kodowaniu, dzięki czemu koszty utrzymania frontendu opartego na Hyvie są zdecydowanie niższe w porównaniu do PWA lub już nieco przestarzałej Lumy.
Jeżeli zastanawiasz się jaki frontend wybrać dla sklepu B2C lub platformy B2B na Magento 2 albo masz już Magento 2 i twoim problemem są słabe wyniki w Google PageSpeed, ciepło pomyśl o Hyvie.
Przygotowałem też dla osób biznesowych solidne i rzeczowe porównanie Hyvy, Lumy i PWA..
Przy okazji – jeżeli jeszcze nie śledzisz mojego profilu LinkedIn, to nie wiesz co tracisz 😉 Piszę o nowościach ze świata Magento i ecommerce developmentu, których po prostu nie można przegapić!
