Hyvä: een nieuw alternatief voor PWA

Bij Hypernode vinden we het belangrijk om op de hoogte te blijven van de laatste trends en ontwikkelingen in e-commerce land. Laatst kwam er via onze partner Elgentos een nieuwe techniek op ons pad: Hyvä. Natuurlijk wilde we hier meteen meer over weten en vroegen Peter Jaap Blaakmeer, CTO van Elgentos, het hemd van het lijf!

1. Wat is Hyvä?

Hyvä is een alternatief voor Progressive Web Apps (PWA). PWA vereist een hoog niveau van expertise, tijd en geld om een ​​uitstekende shop te bouwen. Hyvä daarentegen is minder complex, makkelijker om mee te werken en biedt een betere performance.

Peter Jaap: “Hyvä bestaat in feite uit twee themes; de Hyvä reset theme en de Hyvä default theme. De reset theme is de laagste theme in de hiërarchie – die valt nergens op terug. In het reset theme zijn alle layout XML files van Magento’s blank theme overgenomen, waarna alle blocks zijn uitgeschakeld. Wat overblijft is een theme met alleen de structuur van een Magento shop in de vorm van layout containers”

Peter Jaap: “De Hyvä default theme voegt vervolgens alle relevante blokken opnieuw toe en laat niet-relevante of weinig gebruikte blokken achterwege. Ook wordt Magento’s eigen Javascript implementatie met RequireJS, KnockoutJS & jQuery niet toegevoegd – in plaats daarvan gebruikt Hyvä de Javascript library Alpine.js, wat veel minder code oplevert. Ook wordt de CSS van Magento zelf niet toegevoegd maar wordt Tailwind gebruikt – deze CSS wordt via PostCSS opgebouwd en opgeschoond op basis van daadwerkelijk gebruik waardoor er veel minder CSS overblijft op de frontend.”

2. Wat is het verschil tussen PWA en Hyvä?

Peter Jaap: “Het grote verschil met de PWA’s zoals we die nu in Magento-land kennen is dat deze frontend geïntegreerd zit in Magento, en niet een losstaande applicatie is. Hierdoor kunnen we uitsluitend gebruik maken van de mooie features die Magento biedt, zoals de layout XML en de GraphQL endpoints.”

3. Waarom kozen jullie Hyvä voor Limburgiavlaai?

Peter Jaap: “Limburgiavlaai draaide voorheen op het Porto thema, wat de vorige bouwer geïmplementeerd heeft. Wij zijn nooit fan geweest van third-party thema’s en hebben altijd onze eigen custom themes gebouwd. Dergelijke third-party themes lijken in eerste instantie flexibel en compleet maar al snel gaat al die boilerplate code in de weg zitten. Het wordt een brei van if-else constructies om de verschillende functionaliteiten op de frontend wel of niet te tonen. Met zulke themes kom je snel uit de startblokken maar kom je de beperkingen snel tegen.”

Peter Jaap: “We wilden een snelle en clean theme hebben waarmee we snel konden werken. Daarom viel een PWA af (veel complexiteit vanwege verschillende stacks). Toen we Hyvä tegenkwamen waren we meteen overtuigd van het idee er achter. We hebben eerst een kleiner project overgezet van een PWA naar Hyvä. Dat beviel zo ontzettend goed dat we besloten dit complexere project ook in Hyvä te doen. Dit project is complex omdat het veel verschillende typen producten bevat, meerdere storeviews bevat (consumer, B2B en whitelabeled) en veel externe koppelingen heeft.”

4. Wat zijn de voordelen en nadelen van Hyvä?

Peter Jaap: “Het grote voordeel van Hyvä voor de merchant is de snelheid die het out-of-the-box geeft. Out-of-the-box kom je al snel onder de 1 seconde. Na optimalisatie komen wij voor de meeste pagina’s onder de 500 milliseconden. Wat voor ons intern een groot voordeel is van Hyvä is dat je met de frontend werkt, in plaats van er tegen, zoals veel Magento frontenders gewend zijn. De plezier in het frontend is weer terug! De ontwikkelsnelheid ligt daarom ook hoger (of is de causaliteit andersom? ;)).”

Peter Jaap: “Wij hebben nu twee projecten met Hyvä afgerond en zijn met een derde project bezig, de grootste tot nu toe. Het ziet er naar uit dat we tot twee keer zo snel de shops kunnen bouwen als met de standaard Magento frontend en tot drie keer zo snel als met een PWA. Daarnaast biedt Hyvä een React checkout aan (gratis beschikbaar!) die de standaard checkout vervangt en die veel simpeler gebouwd is. Hierdoor is het uitbreiden van de checkout ook geen verschrikkelijke klus meer.”

Peter Jaap: “Het enige nadeel van Hyvä ten opzichte van een “normaal” Magento 2 theme is dat third-party extensies out-of-the-box geen ondersteuning voor Hyvä bieden. Dit nadeel geldt natuurlijk ook voor een PWA. Hyvä ondervangt voor veel gebruikte extensies dit probleem door compatibliteitsmodules aan te bieden. Deze zijn er bijvoorbeeld al voor de Elasticsuite extensie, een Sentry extensie en een Google Tag Manager extensie.”

5. Welke toekomst zien jullie voor Hyvä?

Peter Jaap: “Wij zijn ervan overtuigd dat Hyvä voor veel partijen een van de betere oplossingen is op dit moment, en dit ook wel zal blijven. Vanuit Elgentos zien wij weinig heil in PWA’s zoals die op dit moment beschikbaar zijn – de developer curve is te steil waardoor kosten alleen maar toenemen in plaats van afnemen. De kosten voor Hyvä zijn per licentie eenmalig 1000 euro. En een licentie geldt voor één Magento installatie. Dat is een absoluut koopje. Natuurlijk zijn er altijd partijen die er over zullen klagen, maar als je geen budget hebt om 1000 euro te investeren in Hyvä, dan is Magento 2 wellicht überhaupt geen goede keuze.”

Over Elgentos

Peter Jaap: “Elgentos werkt met 12 ervaren e-commerce developers aan Magento 2 webshops voor het midden- tot topsegment. Wij zijn geen sales-driven, maar een tech-driven organisatie; code-kwaliteit, stabiliteit en performance staan bij ons hoog in het vaandel. Complexe vraagstukken aangaande externe integraties vinden wij leuke puzzels en snelle webshops realiseren heeft bij ons prioriteit.”