Hyvä: een nieuw alternatief basis thema voor Magento 2.
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.
Kansen en uitdagingen t.o.v. het standaard Magento theme.
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 | Uitdagingen |
|
|
Performance
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.
Performance / optimalisatie e-book
Meer weten over performance? Naar welke metrics je het best kunt kijken en hoe je de voortgang bijhoudt? In dit gratis e-book geven onze developers je alle ins en outs + een handige checklist!
Checkout
Om een checkout met Hyvä te realiseren heb je twee opties en opties vereisen allebei een module:
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 | Uitdagingen |
|
|
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 | Uitdagingen |
|
|
Modules
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 | Uitdagingen |
|
|
Meer over frontend development?
Word je al helemaal enthousiast over de nieuwe mogelijkheden die Hyvä met zich mee brengt voor Magento development? Onze frontenders houden ook van innovatie en uitdaging. Neem een momentje om ze beter te leren kennen!
De toekomst van Magento 2?
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!
Gratis performance / optimalisatie e-book
Onze developers hebben de handen bijeen gestoken en een e-book geschreven over web performance en hoe dit je webshop positief/negatief kan beïnvloeden. Dit e-book beantwoordt o.a. de vragen:
- Waarom performance belangrijk is
- Hoe je performance meet en welke metrics belangrijk zijn
- Hoe je de voortgang bij kunt houden
- Waar performance wins liggen
Benieuwd? Vul je e-mailadres in en ontvang het e-book direct in je inbox.
Even sparren?
Hi! Ik ben Ezra, aangenaam. Ik ben frontend developer bij Bluebird Day en ik help je graag met jouw technologische uitdagingen! Geef me gerust een belletje om eens te sparren over bijvoorbeeld het Hyvä theme.
