Hyvä Themes als oplossing
Emico is al jaren de officiële partner van Tweakwise, en is daarnaast ontwikkelaar en beheerder van de Tweakwise modules voor Magento 1 & 2. Zo hebben we ook het project opgepakt om een Hyvä Themes Compatibility module te bouwen. We hebben de front-end van de module herschreven in lijn met de stack die gebruikt wordt in het Hyvä Thema.
Hyvä Themes biedt een goede oplossing voor de twee grootste pijnpunten van de Magento 2 native front-end (Luma thema). Ten eerste is, door het compleet uitkleden en opnieuw opbouwen met gebruik van lightweight libraries, de snelheid van het thema out of the box veel beter. Ten tweede is de ontwikkeling een stuk eenvoudiger en prettiger. Dit komt omdat de moderne stack, waar gebruik van is gemaakt, een flinke community achter zich heeft en ook goed gedocumenteerd is. Dit zorgt voor meer flexibiliteit tijdens het ontwikkelen en daarmee ook in een snellere time to market.
Hyvä Themes pakket
Het Hyvä Themes pakket bestaan uit meerdere modules die de front-end van Magento 2 in zijn geheel vervangen. De techniek voor de opbouw van templates is gelijk gebleven aan de Magento 2 native front-end, dit werkt dus nog met templating in PHTML files en layout instructions via XML. De techniek die werd gebruikt voor de styling (LESS) is vervangen voor het moderne Tailwind CSS en de verouderde Javascript libraries (RequireJS, KnockoutJS en jQuery) zijn vervangen voor Alpine.js.
In het Hyvä Thema wordt voornamelijk gebruikt gemaakt van moderne vanilla Javascript. Om deze Javascript functionaliteiten te initialiseren, bijvoorbeeld het updaten van een prijs of het open en dichtklappen van een accordeon, is gekozen voor het lichtgewicht framework Alpine.js. Dit framework is maar 9 kilobytes groot en het enige 3rd party Javascript wat standaard geladen wordt.
Tailwind CSS is een ‘utility-first CSS framework’. Dit houdt in dat er veel classes zijn voorgedefinieerd voor de voorkomendste styling. Deze kunnen worden gebruikt in de HTML om elementen te stylen, daarna wordt deze CSS via PostCSS opgebouwd en opgeschoond op basis van daadwerkelijk gebruikte onderdelen. Op deze manier blijft er slechts een minimale hoeveelheid CSS over.
Nu vraag je je misschien wat je daar dan mee wint? Gemiddeld een vermindering van minimaal 90% van het aantal en KB’s aan JS en CSS bestanden die over de lijn moeten. Daarnaast een Google Lighthouse score van ver boven de 80 zonder verdere optimalisaties. Ook is de “learning curve” niet zo steil als bij veel andere nieuwe technieken.
Magento 2 compatibility module
Vanuit Emico hebben we deze ontwikkelingen natuurlijk met veel interesse gevolgd. Binnen het project waar we onlangs zijn gestart met het implementeren van een nieuwe front-end gebaseerd op Hyvä Themes, was er al snel behoefte aan een Tweakwise implementatie. Naarmate de Hyvä community groeide, kwamen er steeds meer geluiden dat er behoefte was aan een compatibility module voor Tweakwise, welke compatible is met de Hyvä stack. Dit project hebben we uiteraard ook met veel plezier opgepakt.
We hebben de volledige front-end moeten herschrijven, voor de bouw van de Emico Magento 2 Tweakwise compatibility module, om deze compatibel te maken met de gebruikte technieken binnen het Hyvä Thema. We hebben de filter functionaliteit opnieuw gebouwd in vanilla Javascript en Alpine.js. Hierbij is de werking hetzelfde gebleven. Daarnaast hebben we de standaard Hyvä styling doorgevoerd in onze module templates, zodat deze out of the box naadloos aansluit op het uiterlijk van Hyvä.
De front-end onderdelen zijn overschreven met de Hyvä compatible templates, de back-end code is niet aangepast. Hierdoor is de compatibility module enkel een aanvulling op de standaard module, waardoor er minder kans is op het scheef lopen van nieuwe functionaliteiten. We hebben een onderscheid gemaakt tussen de bestanden met de stukken Javascript voor de functionaliteiten, en de templates die je tijdens het ontwikkelen misschien wil aanpassen met eigen Tailwind CSS classes . Het gebruik, en de implementatie, van deze module zijn hierdoor vrij gemakkelijk en er is minder kans op issues die kunnen ontstaan tijdens het updaten van de module naar een nieuwere versie.
