Alpine.js vervangt jQuery in Hyvä — en terecht. Het weegt 15 kB, werkt declaratief en past perfect bij de Magento component-architectuur. Een praktische tutorial voor developers die de overstap maken.
Alpine.js voor Magento developers: van jQuery naar modern JavaScript
15 kilobyte. Dat is wat Alpine.js weegt. Vergelijk dat met jQuery's 87 kB of Magento's volledige RequireJS-bundel die gemakkelijk 300 kB haalt. Alpine.js is de standaard JavaScript-laag in Hyvä Magento themes — en als je gewend bent aan jQuery of Knockout.js, is de leercurve mild.
Dit artikel legt uit hoe Alpine.js werkt in een Magento/Hyvä context. Met concrete voorbeelden die je direct kunt gebruiken.
Wat je leert in dit artikel
- Waarom Alpine.js past bij Magento's component-architectuur
- De kernprincipes:
x-data,x-on,x-show,x-bindenx-model - Hoe je Alpine.js componenten registreert en hergebruikt in Hyvä
- Interactie met de Hyvä event bus en GraphQL
- Praktische patronen: tabbladen, modals, quantity selectors
Waarom Alpine.js en niet React of Vue?
React en Vue zijn frameworks voor applicaties. Ze beheersen de volledige DOM, vereisen een build-stap en voegen complexiteit toe die de meeste Magento-componenten niet rechtvaardigen.
Alpine.js is een bibliotheek voor interactiviteit op HTML-niveau. Je schrijft je HTML in een Magento .phtml template, voegt een paar x--attributen toe en Alpine.js beheert de state. Geen virtual DOM, geen component lifecycle hooks, geen Webpack-configuratie.
Voor Hyvä is dat perfect. Hyvä gebruikt Alpine.js voor kleine, scherpe componenten: een menu dat opent, een modal die verschijnt, een quantity selector die telt. Grote datatransformaties gaan via Tailwind + PHP, niet via JavaScript.
Vergelijking met Knockout.js (Magento's eerdere standaard):| Aspect | Knockout.js | Alpine.js |
|---|---|---|
| Gewicht | ~60 kB | ~15 kB |
| Syntaxis | data-bind="text: naam" | x-text="naam" |
| Leesbaarheid | Matig | Hoog |
| Hyvä-ondersteuning | Geen | Standaard |
| Two-way binding | Ja | Ja (x-model) |
De kern van Alpine.js: x-data
x-data is het startpunt van elk Alpine component. Het definieert de state die dat component beheert.
<!-- Eenvoudige teller — basis van elk Alpine component -->
<div x-data="{ aantal: 1 }">
<button x-on:click="aantal--" :disabled="aantal <= 1">-</button>
<span x-text="aantal"></span>
<button x-on:click="aantal++">+</button>
</div>De state leeft binnen het element en zijn children. Buiten dat element weet Alpine niets van aantal. Dat is bewuste encapsulatie.
x-data als functie registreren
Voor herbruikbare componenten registreer je de state als een functie via Alpine.data(). In Hyvä doe je dat in een .js-bestand dat je inlaadt via