Hyvä: een nieuw alternatief basis thema voor Magento?

Het nieuwe Hyvä theme brengt een nieuwe frontend stack voor Magento 2 en moet zorgen voor een betere en snellere development ervaring en een betere performance van je webshop. Dit soort voordelen zijn meer dan welkom natuurlijk. Vooral omdat het standaard Magento Luma theme van zichzelf traag is en complexe frontend technieken gebruikt, waardoor ontwikkelen vaak veel complexiteit met zich meebrengt. Daarnaast zijn sommige frontend technieken binnen de standaard zoals jQuery en KnockoutJS, erg verouderd. Het nieuwe ​​Hyvä theme zou development makkelijk maken en de performance hoger. Benieuwd naar onze visie?

In dit blogbericht lichten we de kansen en uitdagingen van Hyvä themes toe ten opzichte van het standaard Magento 2 Luma theme. We kijken naar frontend development, performance, de checkout en de compatibiliteit van Magento 2 modules. Daarnaast zullen we onze eigen visie delen over Hyvä en haar plek in de toekomst van Magento 2.

Frontend development

In het Hyvä theme zijn er bepaalde onderdelen van het standaard Magento theme uitgehaald zoals KnockoutJS, RequireJS en jQuery. Een verademing voor alle frontend developers, want hierdoor wordt ontwikkelen minder complex en de grootte van de JavaScript kleiner wat beter is voor de performance. Deze JavaScript technieken zijn vervangen door AlpineJS, een lightweight JavaScript framework voor moderne browsers met een korte leercurve. Wat opvalt: er wordt haast geen gebruik meer gemaakt van losse JavaScript bestanden. De JavaScript wordt binnen templates geïmplementeerd. Hierdoor heb je bijna geen scheiding tussen HTML en JavaScript en zul je altijd templates moeten overschrijven om JavaScript aan te passen.

Ook zijn alle templates aangepast en is er een andere manier van styling toegepast met het TailwindCSS framework. TailwindCSS is een CSS framework die gebruik maakt van helper CSS klassen binnen je HTML. Hierdoor kun je met weinig regels CSS styling toevoegen en gebruik je verschillende HTML klassen om de styling toe te passen.

Er draait PostCSS op het theme. Dit is een tool om CSS te transformeren en hiermee is het mogelijk om bijvoorbeeld bepaalde SCSS functies te kunnen gebruiken zoals nesten, mixins, functies, enzovoort. Verder heeft Hyvä een uitgebreide documentatie - dat trouwens onlangs open source is gemaakt - en het heeft een eigen slack kanaal met meer dan 1650 leden voor al je vragen.

Kansen:

• Geen verouderde technieken zoals KnockoutJS, RequireJS en jQuery.

• Ontwikkelen met het Hyvä is minder complex t.o.v. het standaard Magento theme.

• De bestandsgrootte van assets zoals CSS en JavaScript bestanden zijn met het Hyvä theme kleiner. Dit is bevorderend voor de performance.

• Doordat JavaScript binnen de templates worden geplaatst wordt het enkel ingeladen waar het nodig is.

• AlpineJS is een lightweight JavaScript framework en heeft een hele snelle leercurve.

• Uitgebreide documentatie

Uitdagingen:

• Onoverzichtelijk structuur in je html klassen vanwege Tailwind CSS.

• De templates zullen overschreven moeten worden indien je de styling wil aanpassen. Zodra je Magento 2 update zou je nog meer rekening moeten houden met veranderingen binnen de templates.

• JavaScript is geïmplementeerd binnen templates. Om JavaScript aan te passen, moet je dus templates overschrijven.

Laten we inzoomen op de performance tussen de twee. Hieronder zie je een lighthouse score van het standaard Magento 2 Luma theme. Wanneer je met een standaard Magento 2 webshop met het Luma theme begint zul je dus al het een en ander moeten doen om de performance te optimaliseren. Daarnaast is vaak maatwerk nodig bovenop het Luma theme wat ook negatieve invloed kan hebben op de performance.

Wanneer we de lighthouse score van Hyvä themes bekijken zien we dat de performance in het groen scoort met een score van 99. Het is bijna een perfecte score! Dit komt doordat Hyvä themes geen gebruik maakt van de complexe frontend codebase die in het standaard Magento 2 Luma theme zit.

Om een checkout met Hyvä te realiseren heb je twee opties en opties vereisen allebei een module:

• Luma Checkout

• Hyvä React Checkout

Luma Checkout

De Luma Checkout is een fallback naar de standaard Magento 2 checkout van het Luma theme. Wanneer je deze fallback gebruikt, kun je nog wel Magento 2 modules bovenop de checkout gebruiken die hierop inhaken omdat je de standaard van Magento 2 gebruikt.

Kansen:

• Je kunt nog steeds gebruik maken van Magento 2 modules in de checkout.

Uitdagingen:

• Wanneer je voor de Luma Fallback (standaard Magento 2 checkout) kiest moet je alsnog gebruik maken van RequireJS, UI Components en KnockoutJS.

• Niet plug&play. Je dient alsnog een module te implementeren.

Hyvä React Checkout

De Hyvä React Checkout is een nieuwe checkout binnen Magento ontwikkeld met ReactJS. Hyvä heeft met deze methode de standaard Magento 2 checkout eruit gehaald en een checkout from scratch ontwikkeld met behulp van ReactJS. Met behulp van API-calls communiceert het met de backend van Magento.

Deze checkout is hoe Hyvä het zelf beschrijft niet bedoeld om geïnstalleerd te worden als plug-and-play, maar meer als een toolbox om er een eigen checkout op door te ontwikkelen met de nodige requirements. Hyvä heeft deze module ontwikkeld als voorbeeld module of voorbeeld template voor een werkende checkout met React. Dit betekent meer ontwikkelwerk voor de checkout naarmate het maatwerk toeneemt. Third party modules die niet voor deze checkout bedoeld zijn maar voor de standaard Magento 2 checkout, zullen dus niet out-of-the-box werken. Tegelijkertijd zit je ook niet meer vast aan de technieken van Magento 2. En dat kan fijn zijn, want de checkout van Magento wordt door veel developers beschouwd als het meest complexe onderdeel van Magento. Ook is de React checkout veel sneller dan de standaard Magento 2 checkout en is het in de basis een one-step-checkout in plaats van de bekende stappen in Magento.

Een ander voordeel: de checkout zit niet vast aan het Hyvä theme. Je zou deze checkout ook kunnen gebruiken binnen het Luma theme. Het is namelijk een losstaande toolbox of module, die te gebruiken is op iedere Magento 2 webshop.

Kansen:

• Geen knockoutJS, UI Components en Magento standaard checkout, maar met React. Dit betekent eenvoudiger (en wellicht ook sneller) ontwikkelen.

• Werkende voorbeeld checkout module van React waarop zelf doorontwikkeld kan worden.

• Niet per se Hyvä Themes voor nodig, werkt ook op een standaard Magento 2 Luma theme.

• Mega snel, ook lokaal.

Uitdagingen:

• Niet plug-and-play.

• Tailwind CSS wordt gebruikt, maar zou je er uit kunnen halen.

• Meer ontwikkeltijd dan een standaard Magento 2 checkout doordat functionaliteiten maatwerk zijn.

• Magento modules die betrekking hebben op de checkout werken niet met deze checkout. Functionaliteiten op de checkout is automatisch maatwerk.

• Het is geen Magento checkout meer, het is daarom vergelijken of de Hyva checkout ook datgene kan bieden wat de Magento checkout standaard biedt. De Hyva checkout biedt wel standaard functionaliteiten als inloggen, verzendadres, offline betaalmethodes en een samenvatting van bestelling. Betaalmethodes van een bepaalde betaalprovider is al snel maatwerk.

Doordat Hyvä andere technieken gebruikt kan het voorkomen dat een 3rd party module niet compatibel is. Een 3rd party module dat gebruik maakt van RequireJS werkt bijvoorbeeld niet in een webshop met het Hyvä theme. Wanneer je deze third party module werkend wil krijgen, zal er dus maatwerk verricht moeten worden. Er is wel een lijst door Hyvä opgezet met modules die compatibel zijn met het theme. Dit overzicht kun je hier vinden.

Waar moet je rekening mee houden met het implementeren van een module?

• Gebruikt het RequireJS? Indien er RequireJS gebruikt wordt, dan zal de module niet direct compatibel zijn. Binnen RequireJS worden vaak afhankelijkheden neergezet zoals jQuery of KnockoutJS. Ook jQuery en KnockoutJS worden namelijk niet meer ingeladen binnen het Hyvä theme. In veel gevallen zal de gehele JavaScript van een module herschreven moeten worden om de module compatibel te maken.

• Gebruikt het standaard layout handles van Magento 2? Dan moet je dit extra controleren. Veel layout handles binnen het Hyvä theme zijn onder de loep genomen en herschreven. Het kan dus zijn dat bepaalde blokken niet meer of anders werken waardoor dit kan conflicteren met het theme.

• Overschrijft het standaard templates van Magento 2? Ook dit moet extra gecontroleerd worden. Hyvä overschrijft een hoop standaard Magento 2 templates. Het kan dus zijn dat aanpassingen binnen een module niet zichtbaar zijn of conflicteren met Hyvä.

Kansen:

• Er bestaat een lijst met modules die compatibel zijn met Hyvä.

Uitdagingen:

• Veel third party modules gebruiken de standaarden van Magento zoals RequireJS, jQuery en KnockoutJS.

• In eigen modules kan geen RequireJS meer gebruikt worden.

We zien dat performance een steeds grotere rol speelt binnen e-commerce. We geven toe dat Magento 2 out-of-the-box niet de beste performance heeft en dat er flink wat uren werk in kunnen zitten om de performance te optimaliseren. Hoewel er nog een aantal uitdagingen kleven aan het inzetten van het Hyvä theme, geloven we ook dat we een workaround voor deze uitdagingen kunnen vinden.

De performance van Hyvä lijkt namelijk veel hoger, wat ten goede komt voor de gebruikerservaring en conversies op je webshop. We kijken ernaar uit om meer van Hyvä te zien. Binnen Bluebird Day geloven we dat ieder vraagstuk vraagt voor zijn eigen aanpak en implementatie. Samen bepalen we of Hyvä een geschikte tool is dat aansluit op jouw specifieke wensen en behoeftes. Ben je benieuwd? Neem dan gerust contact met ons op. Dan plannen we een goed gesprek!