Hyvä Magento: Dit is alles wat je moet weten

Achtergrond

Rond 2018 kwam de Progressive Web app, of PWA, (met Magento als Headless backend) veelvuldig boven borrelen als dé nieuwe technologische benchmark voor webshops: “het app-gevoel”. De afgelopen jaren - soms na schade en schande - zien we dat voor verschillende agencies ook de keerzijde van de medaille zichtbaar is geworden: vaak onvolwassen PWA-frameworks met een gevoelige en complexe architectuur en veelal tegenvallende Core Web Vitals (Pagespeed) scores.

Het nut van Hyvä Themes

Ook Bold sprong in 2018 op de PWA-trein en ontwikkelde - in samenwerking met De Voorhoede - een Vue/Nuxt-gebaseerde PWA webshop met een Magento Open Source headless backend voor dames fashion icoon LOAVIES. Het frontend werd volledig from scratch opgebouwd, dus zonder gebruik van een bestaand PWA-framework. Tijdens de bouw werden we geconfronteerd met de beperkte API coverage van niet alleen Magento zelf, maar ook van derden: voor heel veel extensies moesten custom endpoints worden gebouwd om de functionaliteit aan de PWA te exposen. Dat in combinatie met de hoeveelheid werk in de frontend, zorgde ervoor dat budgetten en planningen lastig haalbaar waren.

Uitdagingen voor developers

Met het oplossen van het probleem van een trage Magento frontend, kreeg je er met PWA meerdere problemen voor terug:

• Onvoorspelbaarheid
• Onvolwassenheid
• Wielen die opnieuw uitgevonden moesten worden
• Keuzestress (Vuestorefront, PWA Studio, ScandiPWA, etc)
• Ontevreden developers
• Complexiteit

Magento mag dan op bepaalde vlakken, onterecht, een slechte reputatie hebben, het is wel stabiel en voorspelbaar. Je weet wat je er aan hebt. Zeker met de dynamiek van een e-commerce platform, waarin talloze bewegende onderdelen moeten samenwerken, is een server-side rendered frontend, eigenlijk veel beter geschikt.

Hyvä Magento: Een nieuwe aanpak voor webontwikkeling met Hyvä themes

Hyvä pakt het anders aan: het behoudt de goede dingen van Magento (layout xml, blocks/templates, view models) en loost de stroperige, over-engineerde libraries zoals Knockout, RequireJS en de semi-monolithische LESS styling en vervangt deze met lichtgewicht equivalenten zoals AlpineJS en TailwindCSS.

Naar eigen zeggen is de missie van Hyvä een gereduceerde complexiteit, betere performance, betere developer experience, kortere doorlooptijden, minder dependencies en een minder steile learning curve.

Bold heeft meerdere projecten gebouwd en opgeleverd met Hyvä Magento: datona.be en AkzoNobels’s sikkenscenteronline.nl en sikkenscenter.nl. We kunnen alleen maar onderstrepen wat Hyvä zich ten doel heeft gesteld: het is een regelrechte verademing ten opzichte van Luma of Theme Blank SASS templating, maar ook Vue Storefront 2, een framework dat - althans out-of-the-box - wat ons betreft helaas (nog) niet de volwassenheid kent om serieuze bouwprojecten mee te doen.

Wat heb ik aan Hyvä?

Vanuit klantperspectief krijg je met Magento 2 en een Hyvä Magento theme het beste van 2 werelden: de voorspelbaarheid en volwassenheid van Magento 2 én een moderne snelle frontend waar zowel bezoekers als developers blij van worden.

Verbeterde gebruikerservaring met Hyvä themes

Er zijn al duizenden artikelen geschreven over het belang van een snelle webshop. Met iedere 100ms snelheidswinst gaat de conversieratio omhoog. Omdat Hyvä niet headless is, kan heel goed gebruikgemaakt worden van Magento’s ingebouwde Full Page Cache, waardoor pagina’s razendsnel geserveerd kunnen worden. En zonder dat er na die initiële pageload nog allerlei content ingeladen wordt. Dus de pagina is 1x in zijn geheel beschikbaar.
Door het gebruik van TailwindCSS en AlpineJS is de omvang van de CSS en Javascript die gedownload en geparsed moet worden door de browser zo klein mogelijk. Dit scheelt enkele megabytes per pagina, wat de gebruikerservaring zeker ten goede komt, zeker op minder goede 4G verbindingen.

Zoekmachines

Verkeer via zoekmachines is vaak 1 van de belangrijkste bronnen voor webshops. Daarom wordt er veel aandacht en geld besteed aan SEO. Hier komen een aantal factoren bij kijken:

Optimaal crawlen met Hyvä

Kan de bot goed door de site heen crawlen? Zijn links naar andere pagina’s goed vindbaar, is alle content in de HTML te lezen door de bot? Bij een PWA kan dit een probleem zijn, omdat pagina’s helemaal client-side (in de browser) worden opgebouwd. De HTML wordt als het ware pas op het laatste moment in elkaar gezet. Bij een pagina met Magento en Hyvä, wordt de HTML helemaal op de server gerenderd en aan de browser gegeven. Hier kan Google heel goed mee overweg.

Core Web Vitals met Hyvä themes

Zoekmachines gebruiken duizenden ranking factoren, waarvan performance er 1 van is. Google heeft zelf een set van richtlijnen bedacht, die gebundeld zijn in de zogenaamde Core Web Vitals. Performance is namelijk niet alleen de laadtijd, maar ook hoe snel de bezoeker met de pagina kan interacteren. Hoe snel is de belangrijkste content zichtbaar? Hoe snel zijn knoppen werkzaam? Verschuift de layout nog na het laden? Door middel van scores proberen ze de kwaliteit van de gebruikerservaring te beoordelen. Hoe hoger de score, hoe beter. Het Hyvä Magento 2 theme scoort out-of-the-box bijna maximaal op alle metrics. Dus ideaal als vertrekpunt voor je custom theme.

Hyvä themes voordelen voor developers

Ook voor developers is Hyvä Magento een verademing. Onderdelen op een pagina, bijvoorbeeld de mini-cart zijn logisch bij elkaar te vinden in de codebase, in plaats van verspreid over meerdere bestanden op verschillende plekken. De Javascript om een element interactief te maken, staat vaak in hetzelfde bestand als de HTML/PHP. Ook is AlpineJS een framework dat ‘simpeler’ en beter leesbaar is.

TailwindCSS heeft Bootstrap van de troon gestoten als het gaat om CSS frameworks. En terecht: het maakt het eenvoudiger om met meerdere developers aan een project te werken, de uiteindelijke CSS is klein, enkele tientallen kilobytes, en door de vele handige utility-classes kan een developer in korte tijd een design implementeren.

Bijkomend voordeel is dat nieuwkomers, junior developers of developers afkomstig uit een andere discipline, makkelijker in kunnen stappen. Voorheen moest je echt “Magento developer” zijn om een fatsoenlijke Magento 2 frontend te kunnen bouwen, met Hyvä kan je makkelijker de overstap maken als je uit bijvoorbeeld de Laravel of Wordpress wereld komt.

Wat kost Hyvä?

Een Hyvä licentie kost eenmalig €1000. Eenmalig, dus geen jaarlijkse kosten voor updates. Een licentie is geldig voor 1 Hyvä Magento 2 installatie, ongeacht hoeveel storeviews daarop draaien. Out-of-the-box ziet het theme er uit zoals op de demo van Hyvä: https://demo.hyva.io/. De kans is groot dat je dat wilt customizen naar jouw eigen look&feel. Met dat in het achterhoofd is Hyvä natuurlijk ook gebouwd. Developers en Hyvä partners krijgen toegang tot de documentatie en (Slack)community van Hyvä. Hier helpen developers elkaar om het meeste uit Hyvä theme Magento 2 development te kunnen halen.

Het is helemaal afhankelijk van je wensen hoeveel tijd het kost om een op Hyvä gebaseerd theme te bouwen. Die range zit tussen de 8 uur (ander logo, kleurstelling, font) en 2000 uur (volledig tot op detail uitgewerkt UX design in Figma, voor mobiel, tablet en desktop voor alle pagina’s).

De vraag is natuurlijk hoeveel het verschil is qua uren met ‘traditioneel’ frontend development op het Luma theme van Magento. Dit is moeilijk te zeggen, maar onze educated guess gaat uit van ongeveer 30-50% minder uren in het voordeel van Hyvä Magento 2. Dat is bij de initiële bouw, maar dit werkt door in alle doorontwikkeling die volgt na livegang. Dat, plus, de eerder genoemde voordelen (snelheid!) maken dat het eigenlijk een no-brainer is om voor Hyvä themes te kiezen.

Wat is Hyvä Checkout?

Hyvä Checkout is een separaat product van Hyvä. “Hyvä Theme” is voor alle pagina’s in Magento, behalve de checkout en “Hyvä Checkout” is alleen voor de checkout. Lees onze blogpost over Hyva Checkout in combinatie met Pay. voor meer info. Hyvä Checkout heeft dus ook een eigen licentie.

Hoe werkt dat met Hyvä themes extensies?

Zijn de extensies die ik wil gebruiken compatible met Hyvä themes? Dat hangt er van af. Extensies zijn in 2 smaakjes te verdelen:

• De extensie doet alleen iets in de backend of in de achtergrond
• De extensie toont of verandert iets op de frontend

In het eerste geval is er sowieso geen probleem, want Hyvä is puur een frontend theme. In het tweede geval kan het wel impact hebben. Een extensie die ook eigen templates heeft, omdat het een feature toevoegt of verandert op de frontend, zal compatible gemaakt moeten worden met Hyvä. De template moet namelijk gebruik maken van TailwindCSS en AlpineJS. Vaak kost dit niet veel tijd voor een developer.

Maar gelukkig is Hyvä vrij populair inmiddels en zien extensie-ontwikkelaars ook wel in dat als ze hun plugins niet compatible maken met Hyvä Magento, dat ze dan minder verkopen. Dus gelukkig zijn veel extensies inmiddels zowel voor Luma (het standaard Magento theme) als Hyvä geschikt. Mocht een extensie-bouwer een extensie nog niet Hyvä-compatible hebben gemaakt, dan is de kans groot dat een developer in de Magento/Hyvä community al een zogenaamde ‘compatibility-module’ heeft gebouwd. Dit is een dun laagje tussen de extensie en Hyvä in, waardoor de extensie toch gebruikt kan worden. Een voorbeeld van zo’n plugin is onze eigen Hyvä Pay. module.

Bold Commerce, specialist in Hyvä en Magento 2

Wij zijn Bold, jouw technisch-strategisch e-commerce partner. Met een team van Magento specialisten werken we aan shops voor o.a. Datona, Vlisco en Sikkens Center. Ben je op zoek naar een Magento agency? Wij hebben veel ervaring met het Hyvä thema. Deel je project of vraag, we denken graag met je mee.