Voor vele is het geen geheim: Baldwin is één van de weinige bureaus die gespecialiseerd zijn in Alpine JS en Tailwind CSS en de geavanceerde Hyvä storefront-technologie.
Onze collega Sorin was zo attent om te beschrijven hoe we overstapten van Luma naar Hyvä. Daarnaast gaf hij ook om een paar inzichten in de werking van het frontend thema voor Magento waar we allemaal zo gek op zijn.
Onze reis met Hyvä heeft een begin
Na een vierjarige relatie met Luma (met ups en downs, zoals elke relatie), bereikten we een gespannen moment. We hebben op alle manieren geprobeerd om de snelheid van onze webshop te verbeteren:
- door HTML te minen,
- door CSS en JS samen te voegen en te minen,
- door afbeeldingen te optimaliseren en ze traag te laden
Na het volgen van alle handleidingen en posts over prestatieverbetering van Google, hadden we geen ideeën of technische oplossingen meer voor verdere verbetering.
Onze webshops waren te traag in vergelijking met de front-end van andere platformen. De veranderingen in het algoritme van Google Pagespeed scores maakten het nog erger. De degelijke scores van 90+ op CMS-pagina’s en 80+ op categoriepagina’s veranderden in 50+ en 40+, en dat was slecht… Je kunt je voorstellen dat onze marketeers in tranen uitbarstten. Er moest iets veranderen en snel.
Willem Wigman presenteert “Het grootste geheim ooit”
In het najaar van 2020, tijdens de Reacticon online conferentie, presenteerde Willem Wigman “Het grootste geheim ooit” – zijn lightweight frontend oplossing voor Magento genaamd Hyvä. Op basis van Willem’s presentatie ontstond er een levendige discussie op het Baldwin kantoor. We begonnen dingen uit elkaar te halen en voor- en nadelen te bespreken, maar tegen alle bezwaren in wilden we het graag proberen.
Onze reis met Hyvä heeft een (rommelig) traject
We willen er geen doekjes om winden. We geven toe dat het traject een beetje pijnlijk was.
Begin 2021 kwam er een groot project binnen, met het nodige budget om onderzoek te kunnen doen en prototypes te bouwen. Het was Lochting, een SaaS, out-of-the-box webshop voor Europese apothekers.
Dit is ons product en we moesten zorgen voor stabiliteit en schaalbaarheid. Dus bouwden we het op Magento 2. Een team van Roemeense en Belgische ontwikkelaars begonnen te experimenteren met de broncode, lazen de Hyvä documentatie, leerden hands-on tailwindCSS en AlpineJS, en kregen waardevolle ondersteuning van de groeiende Hyvä community.
Aangezien de Hyvä-compatibiliteit voor de meeste modules van derde partijen die we eerder gebruikten nog niet op punt stonden, hebben we gekozen voor wat out-of-the-box kwam bij Hyvä (Smile elastic suite ( Search + Layered navigation)). + onze Baldwin modules waarvoor we de frontend moesten herschrijven om ze Hyvä-compatibel te maken. Dit was een groot leerproces.
De broncode van onze Baldwin modules werd korter en AlpineJS hielp enorm bij het verminderen van de complexiteit van de code. Na Hyvä’s aanpak gingen Magento UI-componenten, waar iedereen een hekel aan had, het raam uit. RequireJS en jQuery volgden.
We startten met de ontwikkeling van de front-end voor de Lochting shops, door verschillende elementen van het Hyvä-thema aan te passen en uit te breiden. De implementatietijd was nog steeds hoog door het leerproces en het aanpassen van onze ontwikkelflow. Gelukkig was het plezier in het werken met Magento in ieder geval terug.
Het tweede project kwam binnen, een project dat we ook vanaf nul startte met Hyvä aan de front-end. Dit was iets veeleisender dan het vorige, aangezien er elementen van derden nodig waren en deze waren nog niet allemaal compatibel met Hyvä.
Maanden gingen voorbij, missende functies werden geïntroduceerd in nieuwe Hyvä releases en er kwamen steeds meer compatibiliteitsmodules beschikbaar in Hyvä GitLab. We moesten onze Hyvä gebaseerde thema’s bijwerken. Het upgraden van lay-outs en sjablonen is vergelijkbaar met Luma. Het was niet makkelijk aangezien we dit voor het eerst op Hyvä deden en onze code zwaar aangepast was. Een goede gedocumenteerde how-to-upgrade procedure en de release notes maakten een groot verschil.
Als we terugkijken naar de upgrades die we gedaan hebben, gezien Hyvä met elke uitgebrachte versie stabieler werd, werd de complexiteit van de upgrade verminderd.
Wat ik het fijnst vond, was de constante zorg van Hyvä om de upgrades zo soepel en eenvoudig mogelijk te maken, om de upgradetijd en -inspanning te verminderen.
Na de go-live van dit tweede project hebben we besloten om te stoppen met het ontwikkelen van nieuwe shops op ons Luma gebaseerde thema en te kiezen voor een nieuw op maat gemaakt thema op basis van Hyvä.
Gedurende de volgende twee jaar (2022-2023) hielden onze dagelijkse taken meestal verband met het werken met Hyvä, of het nu ging om het migreren van een vorig op Luma gebaseerd project of het starten van een nieuw project.
Hyvä vs Luma: workflows en structuur
Laten we kort kijken naar enkele verschillen en overeenkomsten tussen de workflows en structuur van Luma en Hyvä.
Bij Luma kun je een aangepast thema op 2 manieren maken:
- Je kunt een child-theme maken, dat het Hyvä-default-theme overerft.
- Je kunt een duplicaat van het Hyvä-default-thema maken en dat aanpassen.
De bestands- en mappenstructuur
Zoals je kunt zien, is de bestands- en mapstructuur en zelfs de bestandsnaamgeving vrijwel hetzelfde. Hyvä maakt nog steeds gebruik van Magento’s lay-out- en templingsystemen, waar we allemaal fan van zijn.
Eén van de veranderingen die je op deze screenshots kunt zien, is dat de web/CSS-mappen ontbreken in de themamodules van Hyvä. Dit omdat de stijlen rechtstreeks in de sjablonen worden geplaatst of in de CSS-bestanden in de web/tailwind-map van het thema.
Hyvä heeft de afhankelijkheid van bibliotheken van derden zoals Knockout, RequireJS en jQuery verminderd en een lichtgewicht bibliotheek geïntroduceerd, genaamd AlpineJS (minder dan 20kb). Indien nodig, zoals voor een complexere slider, kunnen zeer lichte bibliotheken van derden worden gebruikt. Hyvä gebruikt bijvoorbeeld Glider voor geavanceerde sliderfuncties.
Hyvä
Luma

De code in de sjablonen is ook korter geworden. Laten we bijvoorbeeld een eenvoudig component nemen, het collapsible.phtml-sjabloon:
- Op Luma heb je het sjabloon en de js-logic in een apart bestand.
- Op Hyvä is de volledige logic van het component AlpineJS. De logic is eenvoudig en inline in de html, waardoor er geen externe bestanden nodig zijn.
Hyvä Template
Luma Template

Js Logic
Hyvä – geïntegreerde JS-logica en communicatie tussen componenten
In het geval van complexere functionaliteit wordt de logic meestal verplaatst naar een aparte functie, in een scripttag bovenaan het sjabloonbestand. Communicatie tussen componenten gebeurt via events. Je kunt een event in je component uitsturen en opvangen in een andere.
Complexe JS-logica in externe functie

Communicatie tussen componenten
uitsturen van een event

Luister naar dat event in een andere component

Hyvä – vereenvoudigde CSS-complexiteit
Hyvä heeft ook de CSS-complexiteit gereduceerd: de styling kan direct in phml-bestanden worden toegevoegd (via TailwindCSS utility classes). Styling kan ook in aparte CSS-bestanden (in de map web/tailwind van het thema, met behulp van de @apply-richtlijn van Tailwind).
Het sterke punt van Tailwind waar Hyvä gebruik van maakt, is het opschoonmechanisme. Tailwind scant de bestanden die zijn aangegeven in tailwind.config.js en zuivert het gegenereerde CSS-bestand, zodat alleen de stijlen die in het project worden gebruikt overblijven, wat resulteert in een kleinere stylesheet.
Styling in phml-bestanden (TailwindCSS hulpprogramma klassen)

Styling in afzonderlijke CSS-bestanden (in de map web/tailwind van het thema, @apply-richtlijn van Tailwind)

Je kan hier de openbare documentatie van Hyvä bekijken: https://docs.Hyvä.io
Voor- en nadelen van Hyvä (vergeleken met Luma)
Voordelen:
- Uitstekende out-of-the-box prestaties
- Moderne tech stack
- Kortere time-to-market
- Kleine leercurve
- Aangepaste functies zijn minder complex en gemakkelijker te bouwen (vanwege AlpineJS)
Enkele nadelen (pseudo-nadelen):
- Hyvä is een commercieel product (hoewel het een kleine prijs is voor wat het biedt)
- Beperkte compatibiliteit met modules van derden (hoewel de populairste modules op de markt al compatibel zijn met Hyvä)
Onze reis met Hyvä op dit moment
3 jaar later en 5 webwinkels die we op Hyvä hebben gelanceerd + de 200 apotheek webshops die op onze lochting draaien. Zowel in Roemenië als in België, hebben we nog steeds geen spijt van onze keuze voor Hyvä als frontend-oplossing. Op Lochting is onze volgende uitdaging het opschalen naar Frankrijk, Duitsland, Spanje, Oostenrijk en Australië.
Het bouwen van shops met het Hyvä-thema en het vinden van compatibele modules is aanmerkelijk minder uitdagend geworden omdat de veelgebruikte modules van derden nu compatibel zijn met Hyvä. Dit jaar zijn we ook begonnen met het experimenteren met Hyvä UI en Hyvä Checkout, we recentelijk hebben we onze eerste Hyvä-winkel gelanceerd die zowel het Hyvä-thema als Hyvä Checkout gebruikt.
We kunnen niet wachten om te zien wat de toekomst brengt. Als je overweegt om over te stappen op Hyvä, aarzel dan niet om contact met ons op te nemen. We maken graag een babbeltje!