Wybór odpowiedniego frontendu do Magento to nie lada wyzwanie. Zwłaszcza jeśli chcemy porównać te technologie od strony biznesowej.
W tym wpisie przedstawię, który frontend wybrać do projektu Magento. Będzie to porównanie PWA, Hyvy, Lumy, oraz gotowych szablonów, które są zbudowane na Lumie.
Jaki frontend wybrać do projektu na Magento?
Jakie czynniki wziąć pod uwagę podczas wyboru frontendu?
Ranking i porównanie PWA vs Hyva vs Luma
Jaki jest najlepszy frontend do Magento?
Jaki frontend wybrać do Magento? – podsumowanie
Jaki frontend wybrać do projektu na Magento?
Jak zwykle na samym początku, prosta odpowiedź na to trudne biznesowe pytanie.
W większości przypadków (powiedzmy w 98% przypadków) najlepszym rozwiązaniem będzie wybór Hyvy.
Istnieją jednak sytuacje, gdzie ze względu na model biznesowy albo skalę przedsięwzięcia, lepszym wyborem może okazać się PWA Studio albo Vue Storefront.
Natomiast zdecydowanie nie powinniśmy wybierać do nowego projektu na Magento, Lumy albo jakiegoś gotowego tematu zbudowanego właśnie na Lumie.
To na tyle, jeśli chodzi o prostą odpowiedź. Jeżeli jednak chcielibyście dowiedzieć się więcej na temat tego, skąd wynika ta rekomendacja, jak podszedłem do oceny poszczególnych frontendów i jakie kryteria wziąłem pod uwagę, zapraszam do dalszego czytania tego artykułu.
Jakie czynniki wziąć pod uwagę podczas wyboru frontendu?
Załóżmy więc, że jesteście na etapie, w którym wiecie, że chcecie mieć Magento. Teraz zastanawiacie się, który frontend najlepiej się u Was sprawdzi.
Gdybym był dyrektorem ecommerce albo właścicielem biznesu, interesowałoby mnie 4 kwestie.
- Pierwsza kwestia
Pierwsza to pewność, że dokonałem bezpiecznego wyboru. Nie chciałbym zainwestować w technologię, która rok po uruchomieniu mojego sklepu lub platformy B2B nagle przestanie być wspierana i rozwijana, a pieniądze, które firma zainwestowała w technologię frontendową, okażą się wyrzucone w błoto.
- Druga kwestia
Drugim aspektem, który warto ocenić, będąc dyrektorem ecommerce lub właścicielem biznesu, jest ROI (return on investment, zwrot z inwestycji) osiągane z danej technologii.
Jest to przecież biznes, więc wiadomo, że inwestując w daną technologię, interesuje mnie to “ile na tym zarobię”.
Chciałbym wyjaśnić, jak obliczyłem ROI i jak o nim myślę.
Uproszczając, jest to przychód z ecommerce pomniejszony o całkowity koszt posiadania danej technologii (Total Cost of Ownership, TCO), podzielone na TCO.
Jeśli wybieram technologię, chcę, aby jej ROI było jak najwyższe.
- Trzecia kwestia
Kolejnym czynnikiem jest to, co wpływa na generowanie przychodów. Oczywiście, spore znaczenie ma technologia, którą wybieram.
Czy jest ona trudna do optymalizacji pod kątem SEO? Czy będzie mi trudno, czy łatwo przyciągać użytkowników do mojego sklepu internetowego? Czy za pomocą tej technologii da się wygenerować wysoki współczynnik konwersji? Czyli, czy uda mi się efektywnie przekształcać użytkowników odwiedzających sklep internetowy w tych, którzy będą dokonywać zakupów.
- Czwarta kwestia
Ostatni czynnik to inwestycja, którą tutaj nazywam Total Cost of Ownership. Nie interesują mnie tylko koszty wdrożenia, ale także utrzymania i rozwijania technologii.
Ranking i porównanie PWA vs Hyva vs Luma
Jako dyrektor ecommerce, te kwestie byłyby dla mnie istotne. Wszystkie kryteria, które opracowałem w rankingu, wpasowują się w te kategorie związane z tym, czy dana technologia ułatwia generowanie przychodów, ile kosztuje i czy jest to bezpieczny wybór.
Przeanalizujmy teraz, kto pretenduje do lidera w naszym rankingu. Wśród nich znajdują się PWA, do których zaliczam Vue Storefront oraz PWA Studio. Nie biorę pod uwagę ScandiPWA czy innych lokalnych PWA – o nich pisałem w poprzednim artykule (także zachęcam do przeczytania).
Kolejnym pretendentem jest Hyva – stosunkowo nowa technologia frontendowa.
Nie można zapomnieć o Lumie, standardowym temacie rozwijanym przez Adobe oraz gotowych tematach, takich jak na przykład Porto. Są to gotowe tematy, które są budowane na podstawie Lumy.
W kontekście PWA, Hyvy i Lumy, mówimy o indywidualnych projektach graficznych. Dążymy do stworzenia unikalnego look&feel. W przypadku gotowych szablonów, trudno jest osiągnąć ten indywidualny projekt, ponieważ szablon narzuca określony wygląd. Oczywiście można go dodatkowo modyfikować, ale zazwyczaj nie kupuje się gotowego szablonu, aby później tworzyć z niego indywidualny projekt (ponieważ jest to kosztowne).
Przechodzimy do ocen. Każdy aspekt oceniłem w skali od 0 do 3. Na koniec przedstawię, jak prezentuje się suma.
Zanim jednak przejdziemy do rankingu, chciałbym zaznaczyć jedną istotną kwestię. Nie przydzieliłem żadnych wag do poszczególnych kryteriów. Jeżeli uważasz, że w Twoim biznesie któreś kryterium ma szczególnie dużą wagę, skorzystaj z tego porównania, dodaj wagę i stwórz własną tabelę w Excelu. Może wówczas ranking będzie dla Ciebie wyglądał nieco inaczej. Staramy się jednak, aby to porównanie było jak najbardziej użyteczne dla jak największej liczby dyrektorów ecommerce i właścicieli firm, dlatego w moim przypadku nie uwzględniam wag.
Koszt wdrożenia
Zakładamy indywidualny projekt. W przypadku Hyvy zakładamy, że ten indywidualny projekt kosztuje 600 godzin. Jeśli chcesz dowiedzieć się więc na temat kosztów wdrożenia Hyvy – przeczytaj ten artykuł.
W przypadku platformy Luma będzie to około 650 godzin, natomiast na PWA realnie około 1600 godzin (stosuję tutaj założenie, że wdrażam bardzo podobny projekt graficzny na różnych technologiach).
Oczywiście, nie są to precyzyjne estymacje, jednak generalnie, jeśli przyjmiemy mniej więcej taki rząd wielkości, będzie to całkowicie poprawne. Gotowy szablon to minimalny koszt wdrożenia – kupujemy gotowy szablon, delikatnie go modyfikujemy.
Dlatego gotowy szablon otrzymuje tutaj 3 punkty, Hyva i Luma po 2 punkty, a PWA ze względu na wysokie koszty wdrożenia, 1 punkt.
Koszt utrzymania
Składa się on z wielu różnych czynników, takich jak: skomplikowanie technologii, łatwość znalezienia programistów, liczba programistów, którzy znają daną technologię oraz częstotliwość aktualizacji.
W tym kontekście, Hyva jest najprostsza. Jest to nowa technologia, napisana w nowych, prostych frameworkach. Jest niesamowicie odchudzona i napisana od zera. Porównując ją do Lumy, jest lekka, szybka i przyjemna.
PWA jest zdecydowanie najdroższa, ponieważ każdy element rozwojowy trzeba pisać od początku, indywidualnie dla danego projektu.
Zatem tutaj Hyva otrzymuje 3 punkty, Luma 2, a gotowy szablon 1 jeden, ponieważ gotowe szablony mają to do siebie, że aby coś dodać, trzeba rozplątać dosyć skomplikowane zależności. PWA otrzymuje 0 punktów.
Więcej o kosztach utrzymania i rozwoju Magento dowiesz się z tego artykułu.
Współczynnik konwersji ecommerce
Jest to kluczowe czy na danej technologii da się osiągnąć wysoki współczynnik konwersji, zarówno na wersji mobilnej, jak i desktopowej, oraz czy jest to łatwe, czy też trudne do zrobienia.
Domyślnie, gotowe szablony są słabo zoptymalizowane pod kątem współczynnika konwersji, dlatego otrzymują tutaj jedynie 1 punkt. Luma może wydawać się nieco słaba, ale oferuje względnie tanie możliwości optymalizacji, zwłaszcza w porównaniu do PWA, więc otrzymuje 2 punkty.
PWA pozwala na budowę naprawdę efektywnych rozwiązań, które generują wysoki współczynnik konwersji, ale z drugiej strony, jest to dość kosztowne, dlatego daję tutaj 2 punkty.
Jednakże, istnieje pewne zastrzeżenie dotyczące PWA. Wielu ludzi twierdzi, że PWA generuje znacznie wyższy współczynnik konwersji na wersji mobilnej niż Luma czy Hyva. Biorąc pod uwagę moje wieloletnie doświadczenie w analityce internetowej i optymalizacji współczynnika konwersji, nie natknąłem się na żadne case study, które pokazywałoby przewagę PWA nad Lumą czy Hyvą w kontekście generowanego współczynnika konwersji.. Nie ma dowodów na to, że po wdrożeniu PWA, współczynnik konwersji na wersji mobilnej nagle wzrośnie dwukrotnie.
W przypadku Hyvy, można osiągnąć wysoki współczynnik konwersji za relatywnie niską cenę, ze względu na lżejszą technologię. Dzięki temu Hyva otrzymuje 3 punkty.
Google PageSpeed
Tutaj również chodzi o możliwości i koszty, czyli czy możliwe jest osiągnięcie bardzo wysokich wyników i czy będzie to kosztowne.
PWA posiada niewątpliwie duży potencjał, zwłaszcza jeżeli chodzi o szybkość działania interfejsu użytkownika. Jednakże, takie wdrożenie tej technologii może okazać się dość kosztowne. Na samym początku musimy zainwestować sporo środków na wdrożenie, które powinno być przeprowadzane przez specjalistów z dużym doświadczeniem. To nie jest proces, który można zrealizować w ciągu 900 godzin. Jeżeli zatem chcemy, aby nasze PWA działało szybko, musimy być przygotowani na większe wydatki (widziałem bardzo dużo wielkich wdrożeń PWA, gdzie szybkość na wersji mobile wynosiła 20 i na desktopie 45), zwłaszcza że do kosztów wdrożenia dochodzą dodatkowe wydatki związane z renderowaniem treści. Dlatego przyznaje 2 punkty.
W przypadku Hyvy, jest ona bardzo szybka i stosunkowo łatwo i tanio można ją zoptymalizować, aby wersja produkcyjna również działała sprawnie. Otrzymuje ona 3 punkty.
Natomiast Luma i gotowe tematy, takie jak Porto, które bazują na Lumie, nie oferują takiej możliwości. Jeżeli osiągniemy wynik około 40 na wersji mobilnej i około 80 na wersji desktopowej, to jest to absolutny maksimum, jakie możemy wyciągnąć z tej technologii. Obie technologie dostają po 0 punktów—on szybkie w warunkach produkcyjnych po prostu nie są.
Adopcja technologii
W tym przypadku korzystałem z danych HTTP Archive, aby ocenić, jak wygląda adopcja PWA i Hyvy.
Hyva wypada lepiej niż PWA, jednak porównując to do Lumy i gotowych tematów, adopcja tych technologii jest zdecydowanie mniejsza. Mimo wszystko, gotowe tematy, takie jak Porto, mają mniejszą adopcję niż cała Luma.
Optymalizacja SEO
Jeżeli chcemy optymalizować PWA pod kątem SEO, musimy być przygotowani na to, że będzie to kosztowne (temat renderowania treści).
Hyva jest szybka i oferują dużą elastyczność w budowaniu linków i struktury linków, dlatego przyznaję jej 3 punkty. Luma jest wolniejsza, ale oprócz tego łatwo ją optymalizować pod SEO.
Gotowe tematy, takie jak Porto, są zbudowane jako pewna całość. Modyfikacja i optymalizacja pod SEO są droższe, ale nie na takim poziomie jak w przypadku PWA.
Liczba programistów w Polsce
PWA Studio to React.js, Vue Storefront to Vue.js, wię programistów jest jest naprawdę dużo.
Luma to całe środowisko typowo Magentowe. Programiści, którzy specjalizują się w Lumie, ogarniają również gotowe tematy takie jak Porto, więc tutaj również przyznaję 3 punkty.
Zdecydowanie w tym wypadku Hyva wypada najgorzej, głównie ze względu na stosunkowo krótki czas obecności na rynku.
Koszt wdrożenia nowego programisty
Oprócz samego wdrożenia musimy uwzględnić też chęć rozwijania się w danej technologii. Jeżeli technologia jest nowa, mamy więcej chętnych, co zazwyczaj oznacza, że koszt wdrożenia jest mniejszy.
Jeśli technologia jest już na etapie schyłku, ludzie nie są skłonni rozwijać się w niej. Obecnie, koszty wdrożenia się w React oraz Vue.js nie są zbyt wysokie. Podobnie jest z technologiami takimi jak Tailwind CSS oraz Alpine.js, które sprawiają, że ogólny koszt wdrożenia nowego programisty jest niewielki.
Luma jest niezwykle skomplikowana – wydaje się, że twórcy Magento celowo skomplikowali cały silnik Magento 2, aby wymusić certyfikację deweloperów. Tak czy inaczej, Luma otrzymuje tutaj 1 punkt, a gotowe tematy to już w ogóle 0, ponieważ naprawdę trudno jest znaleźć kogoś, kto chciałby w nich pracować.
Realizacja nietypowej strategii ecommerce
To jest kryterium, które może wydawać się skomplikowane, ale pozwolę sobie je krótko opisać.
Załóżmy, że jesteśmy linią lotniczą, na przykład Airlines Magento i chcemy stworzyć sklep internetowy, z którego klienci będą mogli korzystać podczas lotu (czyli bez dostępu do internetu)
W takim przypadku, rozwiązania takie jak Hyva, Luma, czy gotowe tematy jak Porto, nie będą dla nas odpowiednie. Jednak PWA w tym miejscu wykazuje swoją ogromną przewagę.
W przypadku takich nietypowych modeli biznesowych, czy nietypowych strategii ecommerce, PWA może okazać się jedyną technologią, która umożliwi realizację naszego modelu biznesowego.
Skalowalność zasobów
Pozwolę sobie to krótko opisać czym właściwie jest skalowalność, o której tutaj mówię. Prosty przykład: jeśli mamy PWA, gdzie backend jest rzeczywiście oddzielony od frontendu, to w sytuacji, gdy mamy ogromną ilość użytkowników w szczytowych momentach sprzedaży, potrzebujemy maszyn, które obsługują tylko frontend, a nie backend. W rezultacie, koszty będą znacznie niższe. Są niższe, ponieważ otrzymujemy 1 aplikację, a nie 2 (co miałoby miejsce w przypadku rozwiązania monolitycznego). Oszczędzamy więc na infrastrukturze.
W przypadku bardzo dużych serwisów, które generują niesamowitą liczbę transakcji i unikalnych użytkowników, PWA właśnie zademonstruje swoją skalowalność i przewagę nad innymi rozwiązaniami, które są monolitycznymi rozwiązaniami, dlatego przyznajemy tutaj 3 punkty, a pozostałym po 1.
Dostępność gotowych modułów wysokiej jakości
Ilość modułów bezpośrednio wpływa na koszty utrzymania i rozwijania silnika frontendowego – im więcej modułów dobrej jakości, tym te koszty utrzymania i rozwoju są niższe.
Do Lumy mamy wiele gotowych modułów, dobrej jakości. Hyva również posiada wiele rozwiązań, natomiast PWA ma ich zdecydowanie mniej. Gotowe tematy są tutaj nieco kontrowersyjne. Zazwyczaj są tak skonstruowane, że dodanie kolejnego modułu może spowodować wiele konfliktów z tymi już wdrożonymi przy okazji wdrażania frontendu… Te konflikty trzeba usuwać, co generuje koszty dla osoby, która chce stworzyć czy rozwijać sklep internetowy.
Długość rozwoju danej technologii
Oceniam etapu rozwoju, na którym się ona znajduje. PWA i Hyva są stosunkowo nową technologią.
Luma jest już dość stara, ponieważ pojawiła się razem z Magento 2, czyli około 2015 roku. Więc ma już 8 lat, co jest dość długim okresem dla technologii. Ciekawe będzie obserwować, co będzie się z nią działo w przyszłości.
Niemniej PWA Studio, Vue Storefront i Hyva mają przed sobą więcej “życia” niż Luma.
Time to market
W przypadku PWA widziałem wiele “szybkich” wdrożeń, które zajmowały od 2 do 3 lat, albo takie, które trwają już 2 lata i nadal nie są zakończone. Dlatego nie mogę przyznać tutaj żadnych punktów – nie widziałem jeszcze wdrożenia PWA, które byłoby naprawdę sprawne.
W przypadku Hyvy i Lumy, ich wdrożenie zajmuje zazwyczaj około 7-9 miesięcy. Możliwe jest wdrożenie w tym czasie całego sklepu (wraz z analizą biznesową, integracjami i frontendem).
Natomiast, korzystając z gotowego tematu, możemy zaoszczędzić około 1,5-2 miesiące w stosunku do indywidualnego projektu na Lumie czy Hyvie. Dlatego przyznajemy tutaj 3 punkty za najszybszy czas wdrożenia.
Jaki jest najlepszy frontend do Magento?
Przyjrzyjmy się teraz, co nam wynika z tych kryteriów.
Okazuje się, że najlepiej wypada Hyva, która otrzymuje 28 punktów. PWA, w którym mamy Vue Storefront oraz PWA Studio, otrzymują 23 punkty. Tyle samo punktów zdobywa Luma. Gotowy temat, taki jak Porto, zdobywa 18 punktów.
Podsumowując, najlepszym wyborem, patrząc po tych ocenach, jest Hyva. Będzie to prawdą dla 98% biznesów na rynku Europejskim. Jeżeli w Waszym biznesie macie inne potrzeby to dodajcie wagi (największą wagę oczywiście do tych najważniejszych krytieriów). W takim wypadku werdykt do Waszego biznesu może być trochę inny.. Jeżeli jednak nie macie takiego unikalnego modelu biznesowego, to w większości przypadków nowych projektów Magento, najlepszym wyborem będzie Hyva.
Czasami, ze względu na specyfikę modelu biznesowego lub skalę biznesu, lepszym wyborem będzie PWA (tutaj warto przeliczyć czy dodatkowe przychody wynikające z tego modelu rzeczywiście spłacą większą inwestycję — PWA Studio czy Vue Storefront to wyższe koszty wdrożenia i droższe utrzymanie).
Natomiast Luma i gotowe tematy, takie jak Porto, na tym etapie rozwoju tych dwóch technologii, powinny zostać odrzucone. Nie ma sensu inwestować w technologię, która jest skomplikowana od strony programistycznej i która nie oferuje już potrzebnych parametrów szybkościowych.
Najlepsze PWA do Magento – podsumowanie
Na koniec kilka wniosków, które nasuwają się z tego rankingu.
Po pierwsze – w większości przypadków Hyva będzie najlepszym rozwiązaniem.
Po drugie – czasami PWA może okazać się jedyną technologią, która umożliwi realizację naszego modelu biznesowego.
Musimy pamiętać, że w przypadku PWA, koszty wdrożenia i utrzymania są wyższe. PWA zawsze będzie droższe od Hyvy. W skrócie PWA Studio i Vue Storefront oznaczają najwyższe TCO (Total cost of ownership).
Z tego powodu, musimy mieć zdecydowanie wyższe przychody z ecommerce, które rekompensowałyby te wyższe koszty. Warto więc zadać sobie bardzo ważne pytanie—czy mój model biznesowy / sprzedażowy dostarczy wystarczająco dużo dodatkowego przychodu.
Po trzecie – im większy jest biznes, tym mniejsza jest różnica między PWA a Hyvą, ponieważ PWA zaczyna pokazywać swoje możliwości w zakresie skalowalności. Dla największych firm ecommerce w Polsce, a dokładniej mówiąc dla tych z top 10-20, inwestycja w PWA może być opłacalna. W takich przypadkach mogą pojawić się oszczędności wynikające z redukcji kosztów maszyn.
Jeśli uważasz, że wiedza zawarta w tym artykule jest wartościowa, to koniecznie rzuć okiem na post dotyczący tego jak przeprowadzić skuteczną analizę biznesową przed wdrożeniem Magento!
Jeżeli zależy Ci na kolejnych porcjach wartościowej wiedzy – już teraz zapraszam Cię do śledzenia mojego profilu LinkedIn, na którym regularnie publikuje informacje ze świata Magento i ecommerce developmentu!
