Hoe Alpine.js en Tailwind RequireJS en Knockout vervangen in Hyvä

Hyvä wordt vaak omschreven als “een sneller thema”. Dat klopt, maar het verhult de echte reden waarom het sneller is.

Hyvä optimaliseert de frontend van Luma niet. Het vervangt die door een andere, veel kleinere stack. Dit artikel laat zien hoe die stack er in de praktijk uitziet.

De Luma-stack in het kort

De frontend van Luma bestaat uit vier hoofdonderdelen.

• RequireJS laadt JavaScript-modules op aanvraag en beheert hun afhankelijkheden.
• jQuery en jQuery UI drijven veel widgets aan, zoals tabs, menu's en modals.
• KnockoutJS rendert dynamische onderdelen, zoals de mini-winkelwagen, klantgegevens en de hele checkout.
• LESS compileert de themastijlen, met een diep systeem van variabelen, mixins en overrides.

Elk onderdeel was logisch toen Magento 2 werd ontworpen. Samen leveren ze een zware pagina op.

In onze Hyvä vs Luma-benchmark, deed een schone Luma-pagina meer dan 250 requests en laadde ze ongeveer een halve megabyte JavaScript.

De Hyvä-stack in het kort

Hyvä vervangt die vier onderdelen door twee.

• Alpine.js zorgt voor de interactiviteit, rechtstreeks geschreven in de HTML van de template.
• Tailwind CSS zorgt voor de styling, met utility classes in de templates.

Er is geen module loader, geen afhankelijkheid van jQuery en geen Knockout-templatesysteem. Dezelfde schone benchmarkpagina deed op Hyvä minder dan 20 requests en laadde ongeveer 26 KB JavaScript.

Een eenvoudig voorbeeld: een toggle

Neem iets wat elke webshop heeft: een contentblok dat open- en dichtklapt.

In Luma koppel je meestal een jQuery UI-widget via een RequireJS-initialisatieblok in de template.

<div id="product-details">
    <div data-role="title">Gegevens</div>
    <div data-role="content">...</div>
</div>
<script type="text/x-magento-init">
{
    "#product-details": {
        "collapsible": { "openedState": "active" }
    }
}
</script>

Om dit uit te voeren laadt de browser RequireJS, dan de mage-initialiser, dan jQuery, jQuery UI en de collapsible-widget.

In Hyvä is hetzelfde gedrag een paar attributen op de HTML zelf.

<div x-data="{ open: false }">
    <button type="button" @click="open = !open" :aria-expanded="open">
        Gegevens
    </button>
    <div x-show="open" x-cloak>...</div>
</div>

Alpine.js staat al op de pagina, dus er hoeft niets anders te laden. De logica staat naast de markup die ze aanstuurt, waardoor die makkelijk te lezen en aan te passen is.

Klantgegevens zonder Knockout

Magento gebruikt “private content” voor alles wat persoonlijk is op een gecachete pagina, zoals het aantal artikelen in de winkelwagen of de naam van de klant. In Luma renderen KnockoutJS-templates die data aan de clientkant.

Hyvä behoudt de customer data sections van Magento, maar laat Knockout vallen. Zodra de data beschikbaar is, verstuurt Hyvä een browserevent, en elk Alpine-component kan daarnaar luisteren.

<div x-data="{ count: 0 }"
     @private-content-loaded.window="count = $event.detail.data.cart?.summary_count || 0">
    <span x-text="count"></span>
</div>

De full-page cache serveert nog steeds dezelfde pagina aan iedereen. Alleen de kleine persoonlijke onderdelen worden achteraf ingevuld, zodat caching effectief blijft.

Styling: LESS tegenover Tailwind

In Luma betekent een knop aanpassen meestal de juiste LESS-variabele of mixin opzoeken, die overschrijven in een child theme en opnieuw compileren. Het uiteindelijke CSS-bestand bevat stijlen voor veel componenten die de pagina nooit gebruikt.

In Hyvä staat de styling in de template als Tailwind utility classes.

<button type="submit" class="btn btn-primary w-full md:w-auto">
    Add to cart
</button>

Bij het builden scant Tailwind de templates van het thema en schrijft een CSS-bestand met alleen de classes die daadwerkelijk zijn gevonden. Ongebruikte stijlen bereiken de browser nooit.

Merkkleuren, lettertypes en witruimte staan als design tokens in de Tailwind-configuratie van het thema. Pas een token aan, build opnieuw en de wijziging geldt voor de hele webshop. Met dezelfde aanpak kan een team de uitstraling van een webshop aanpassen zonder tientallen stylesheets aan te raken.

Wat dit betekent voor je developers

Voor een team dat van Luma komt, voelt Hyvä meestal eenvoudiger.

• Templates zijn nog steeds PHTML-bestanden met de layout-XML van Magento, dus de Magento-structuur is vertrouwd.
• Alpine.js is klein en snel te leren voor iedereen die basiskennis van JavaScript heeft.
• Tailwind vervangt lange override-ketens door classes die je in de template kunt lezen.
• Er is geen RequireJS-configuratie of JavaScript-bundling om te debuggen.

Er is één nieuwe gewoonte. Na het wijzigen van templates of de Tailwind-configuratie moet de CSS van het thema opnieuw worden gebouwd met het Node-buildscript. Die stap hoort in je deployproces.

Wat dit betekent voor je extensies

Dit is de keerzijde van dezelfde medaille. Elke extensie die eigen RequireJS-modules, Knockout-templates of jQuery-widgets meelevert, verwacht dat de Luma-stack aanwezig is.

Op Hyvä is die stack verdwenen, dus het storefront-gedeelte van de extensie werkt niet zomaar. De backendlogica werkt nog wel.

De oplossing is een compatibiliteitsmodule die het frontendgedeelte herschrijft in Alpine.js en Tailwind. Er bestaan er al veel, en de rest kan worden geschreven. Lees in onze Hyvä-migratiechecklist hoe je je extensies controleert voordat je begint.

Waar Alpine ophoudt: de checkout

De checkout is de meest complexe pagina van elke webshop, met veel stappen, validaties en betaalintegraties.

Hyvä Checkout pakt dit aan met Magewire, een servergestuurde componentenbibliotheek voor Magento. Een groot deel van de checkoutlogica draait op de server in PHP, en de browser krijgt bijgewerkte HTML, terwijl Alpine.js klein gedrag aan de clientkant afhandelt.

Wanneer Hyvä Checkout loont, en wanneer een andere checkout beter past, leggen we uit in is Hyvä Checkout het waard?.

Veelgestelde vragen

Kan ik op een Hyvä-webshop nog jQuery gebruiken?

Technisch kun je het laden, maar dan voeg je het gewicht weer toe dat Hyvä heeft weggehaald. Je kunt het gedrag beter herschrijven in Alpine.js of gewone JavaScript.

Moeten mijn developers een nieuw framework leren?

Ze moeten Alpine.js en Tailwind CSS leren. Beide zijn klein, goed gedocumenteerd en snel op te pikken voor iedereen die al met Magento-templates werkt.

Verandert Hyvä de layout-XML van Magento?

Nee. Hyvä gebruikt de normale layout-XML en PHTML-templates van Magento. Wat verandert, is de JavaScript en CSS in die templates.

Plan je een overstap van Luma, of moet een extensie Hyvä-klaar worden gemaakt? Bekijk hoe we werken op onze Hyvä-themaontwikkeling pagina.