Co to jest Hyva?

Magento to popularna platforma e-commerce, która zyskała sobie uznanie wśród przedsiębiorców na całym świecie. Jednym z głównych problemów użytkowników była jednak wolna wydajność front-endu. Dzięki wprowadzeniu nowego rozwiązania jakim jest Hyva, możliwe jest uzyskanie wyjątkowo szybkich wyników w zakresie wydajności!

Dlatego dzisiaj bierzemy na tapetę pytanie, które jest bardzo aktualne. Mianowicie, co to jest Hyva?

Co znajdziesz w tym artykule?

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 zwykle, na samym początku prosta odpowiedź.

Mianowicie, Hyva to rodzaj front-endu Magento, który charakteryzuje się tym, że jest bardzo, bardzo szybki. W ocenach na Google Page Speedzie, spokojnie można uzyskać oceny rzędu 90 na mobile’u i powyżej 95 na desktop’ie. I z drugiej strony jest bardzo prosty, w związku z czym koszty kodowania w Hyvie oraz koszty utrzymania front-endu korzystającego z Hyvy są niskie. To tyle tytułem wstępu. Natomiast bardziej dociekliwych zachęcam ich do dalszego czytania.

Jakie są dostępne front-endy Magento?

Więc, rozbudowując powyższą odpowiedź, zacznijmy od tego, jakie front-endy były dostępne w Magento na samym początku jego istnienia.

Więc tak, pierwszy punkt to jest taki, że na samym początku, gdy Magento powstawało, a więc gdy „dwójka” wyszła na światło dzienne, dostępny był tak zwany front-end standardowy Magento, który nazywał się Luma. To było w 2015 roku, a Luma była już wtedy bardzo stara. Tak stara, że obecnie w ocenach na Google Page Speedzie, okazuje się, że ciężko jest uzyskać lepsze oceny niż około 80 na desktopie i około 45 na urządzeniach mobilnych, nawet po dużej optymalizacji.

No i coraz więcej dyrektorów e-commerce oraz posiadaczy Magento 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. No i pojawiły się takie rozwiązania jak np. Vue Storefront, PWA Studio czy ScandiPWA. Były to rozwiązania, które zastępowały front-end Magento Lumy, odrywając go od back-endu. Były to rozwiązania headlessowe, czyli można skrótowo powiedzieć, że head w postaci PWA komunikował się z back-endem Magento, ale był oddzielną aplikacją.

Jeden z głównych skutków ubocznych, ale jednocześnie właściwością i cechą PWA, na którą wszyscy liczyli, była obiecana olbrzymia szybkość tych aplikacji oraz takie „doświadczenie użytkownika”, jakby korzystali z aplikacji. O ile to drugie jeszcze zostało spełnione, 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 PWA i byłoby niesamowicie szybkie.

Problemy z wydajnością front-endów Magento

Kiedyś wrzuciłem pytanie na LinkedIn, czy są osoby, które chciałyby pochwalić się jakimiś e-commerce’ami, zbudowanymi na PWA Studio, Vue Storefroncie albo ScandiPWA, które są niesamowicie szybkie. Niestety nie dostałem żadnej odpowiedzi, więc wnioskuję, że rzeczywiście ciężko jest w dotrzymaniu tej obietnicy PWA o niesamowitej szybkości.

Dodatkowo, wraz z użytkowaniem tego PWA, pojawiły się coraz większe problemy, przede wszystkim z kosztem utrzymania PWA. Koszty zarówno pierwotnego zakodowania PWA, jak i późniejszego utrzymania są kilkukrotnie wyższe niż koszty utrzymania front-endu Magento opartego na Lumie. To jest niesamowity problem, ponieważ jeśli 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’em, to fajnie byłoby nie mieć dużych kosztów utrzymania tej technologii.

Więc mieliśmy dwie drogi, trochę wybór jak pomiędzy dżumą a cholerą, natomiast takie były fakty po prostu. Mieliśmy do wyboru Lumę lub PWA.

Oczywiście były też pochodne Lumy i PWA, czyli szablony, które bazowały na Lumie i były wolniejsze niż Luma, ale generalnie to technologia Lumy.

Z drugiej strony mieliśmy PWA i też zaczęły powstawać gotowe szablony albo gotowe front-endy bazujące na którymś z PWA, które były proponowane w bardzo niskich kosztach, jeśli chodzi o pierwotne zakodowanie. Natomiast tego typu rozwiązania, można by powiedzieć, że były po prostu dedykowanym produktem, który był na front-endzie.

Natomiast, jak wiemy, nie po to wybraliśmy Magento, który jest open-source’em, żeby mieć rozwiązanie dedykowane na front-endzie.

Większość użytkowników nie chce tego, ponieważ mamy open-source po to, aby mieć określony standard kodowania. Jeśli nam nie podoba się współpraca lub po prostu nie układa się z pewnym Software housem, to bierzemy nasz kod i przechodzimy do kogoś innego. Ten ktoś mówi: „OK, to jest Magento, kodujemy w tym”. Natomiast w przypadku takich dedykowanych rozwiązań headlessowych okazywało się, że projekty były po prostu nieprzenośne między Software house’ami, więc jest to słaby wybór.

Hyva – najszybszy front-end Magento

W odpowiedzi na tę sytuację pojawiło się w 2020 roku coś takiego jak Hyva.

Hyva to po prostu front-end, który nie jest pochodną Lumy, ale zupełnie nowym front-endem, wykorzystującym technologię Tailwind CSS oraz Alpine JS. Dzięki odchudzeniu, w porównaniu do Lumy, Hyva jest niesamowicie szybka.

Oprócz tego, że jest niesamowicie szybka i oferuje niesamowite wyniki w Google Page Speed, ma jeszcze jeden olbrzymi plus. Nawet osoby niedoświadczone w programowaniu są w stanie tworzyć front-endy oparte na Hyvie i robić to bezbłędnie.

Dodatkowo koszt lub czas zakodowania pojedynczej funkcjonalności Hyvy w porównaniu do Lumy lub PWA jest zwyczajnie niższy.

Kilka dodatkowych informacji. Jak wiemy, Magento ma Knockout, który jest wykorzystywany w procesie składania zamówienia w Magento. Jest on nieszczęsny, trudny do przebudowy, skomplikowany i koszty modyfikacji tego check-outu są bardzo wysokie. Hyva planuje zrobić swój własny check-out. Jest to na razie w planach, ale na stronie Hyvy znajdziemy informację, że za jakiś czas będzie także check-out Hyvy, co byłoby olbrzymim ułatwieniem, jeśli chodzi o nowoczesne wyposażenie sklepu internetowego opartego na Magento.

Ile kosztuje Hyva?

Pamiętać należy, że Hyva jest rozwiązaniem płatnym. Jej koszt wynosi 1000 euro. W tym momencie mamy maj 2023 roku. Za te 1000 euro mamy praktycznie bezterminową licencję. Ona będzie działać zawsze i mamy też dostęp do wszystkich aktualizacji Hyvy, które pojawią się w przyszłości.

Kolejną rzeczą, o której trzeba pamiętać, jeśli chodzi o Hyvę, to są to koszty zakodowania. I tutaj zaskoczenie: Hyva jest kilkukrotnie tańsza w pierwotnym zakodowaniu niż PWA, a co więcej, jest też tańsza niż Luma.

Obecnie szacujemy, na podstawie już wielu projektów, które zostały zrealizowane na Hyvie oraz na podstawie rozmów z innymi Software house’ami, koszt wdrożenia indywidualnego projektu graficznego, czyli zupełnie indywidualnego sklepu internetowego, wynosi mniej więcej od 500 do 700 godzin pracy programisty front-end.

Co jest jeszcze fajne, charakterystyczne w Hyvie, to to, że 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 myślimy o wejściu na kilka, kilkanaście albo kilkadziesiąt różnych rynków, to jest to naprawdę dobre rozwiązanie, ponieważ łatwo jest skalować front-end i łatwo jest utrzymywać taki stan technologiczny, który jest zbudowany na Hyvie i jest na kilku krajach, z połączeniem waluty i języka.

To, co ważne, to to, że Hyvy nie wykorzystamy w starszych wersjach Magento niż wersja 2.3. Czyli zapewniona jest kompatybilność Hyvy z Magento od wersji 2.3. Co ciekawe, Hyva działa zarówno z płatną wersją Adobe Commerce, jak i z Magento 2 Open Source, czyli tak zwanym Community Edition.

Jak wyglądają sklepy internetowe postawione na Hyvie?

Pewnie wielu z Was zastanawia się, co to oznacza. Brzmi to całkiem ciekawie. No, w sumie to jest chyba trochę lepsza opcja niż PWA, bo jest o wiele tańsza. Z drugiej strony performance jest o wiele lepszy. Czy jednak ktokolwiek sensowny postawił już sklep na tej Hyvie?

Aby nie być gołosłownym, pokażę wam w tym momencie kilka takich sklepów internetowych. Na samym początku warto wejść na stronę Hyvy. No i tutaj w zakładce Showcases, mamy dostęp do listy przykładowych sklepów, które zostały stworzone na Hyvie. Jak widzimy, jest ich trochę i to nie są małe sklepy.

Przykładowo mamy Bauhausa, który zapewnia, w mojej ocenie, naprawdę fajny look and feel.

Mamy Citzena, nie wiem czy kojarzycie? Ale jak widzicie Citizen to nie jest mała marka.

Ale mamy też sklep Bedrenaetter, który pokazuje, że look and feel, który można uzyskać na Hyvie, jest niesamowity. To wygląda naprawdę dobrze i możemy odzwierciedlić ten look and feel tak, jakbyśmy sobie tego życzyli.

Z drugiej strony mamy też sklepy na rynku polskim, które są zakodowane i wykorzystują technologię Hyvy. Na pierwszym miejscu jest Kinderkraft. Jak widzicie, wykorzystuje on Hyvę, a z drugiej strony mamy MDD, które również wykorzystuje Hyvę. Oczywiście, na backendzie cały czas mamy Magento 2 w jednym i drugim sklepie internetowym, natomiast na froncie mamy już Hyvę.

Jak wygląda Hyva w porównaniu do innych technologii?

Na koniec jest wisienka na torcie. Mianowicie, czy kojarzycie coś takiego jak Core Web Vitals? Ci, którzy siedzą już trochę w e-commerce, powinni kojarzyć, co to jest. Wygenerowałem dla was bardzo ciekawy raport, który pokazuje to, o czym mówiłem wcześniej, czyli tą niesamowitą szybkość Hyvy.

Na pomarańczowo i żółto zaznaczono Hyvę. Magento to właściwie Luma. PWA Studio i Vue Storefront – wiadomo, co to jest, są to rozwiązania headlessowe. No i jak widzicie, porównanie Hyvy do zarówno Lumy, jak i PWA jest po prostu miażdżące.

Co to jest Hyva? – podsumowanie

Zamierzam w przyszłości dokładniej porównać różne rodzaje frontendów, które można wykorzystać w Magento. Porównam zarówno Hyvę, jak i Lumę, szablony bazujące na Lumie oraz rozwiązania headlessowe, takie jak PWA Studio, ScandiPWA i Vue Storefront.

Myślę, że jeśli chodzi o wprowadzenie do tematu, to w tym momencie macie już dosyć solidną wiedzę i wiecie, co to jest Hyva.

Podsumowując, Hyva to rodzaj frontendu, który można wykorzystać w Magento 2. Charakteryzuje się on niesamowitą szybkością. Na Google Page Speedzie możemy liczyć na wyniki 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 bazującego na Hyvie są zdecydowanie niższe niż w przypadku PWA albo starej już Lumy.

Jeśli jesteś na etapie planowania nowego sklepu na Magento 2, to naprawdę powinieneś zastanowić się nad bardzo dobrymi argumentami, dlaczego chciałbyś postawić sklep nie na Hyvie, tylko na PWA albo może wykorzystać do frontendu dosyć starą już Lumę. Jeżeli natomiast jesteś na etapie, że masz już sklep postawiony na Magento 2 i korzysta on z Lumy, to trzeba naprawdę zastanowić się nad dobrym argumentem przy zmianie technologii, dlaczego powinno być to PWA, a nie Hyva. Jeżeli natomiast jesteś w sklepie, który wykorzystuje Magento 2 i korzysta z PWA, ale PWA generuje dla ciebie zbyt wysokie koszty związane z utrzymaniem i rozwijaniem tego frontendu, to Hyva jest naprawdę świetną alternatywą.

Mam nadzieję, że już jesteście napełnieni nową wiedzą związaną z tym, czym jest Hyva!

Dla wszystkich, którzy wolą słuchać niż czytać, mamy dobrą wiadomość! Nasze posty blogowe są teraz dostępne również w formie wideo na naszym kanale YouTube! Jeśli chcesz zobaczyć film, w którym opowiadam o tym ile kosztuje wdrożenie Hyvy, zapraszam serdecznie!