Hyvä + Magewire: reactive components zonder page reload

Hyvä + Magewire: reactive components zonder page reload

Een filter aanvinken zonder dat de hele pagina opnieuw laadt. Een formulier dat live valideert. Een mini-cart die direct bijwerkt. Dat klinkt als een SPA met React of Vue, plus een REST-API erachter. Met Magewire heb je dat niet nodig.

Magewire brengt reactive UI naar Hyvä zonder dat je een aparte JavaScript-applicatie bouwt. Geen GraphQL-laag, geen state management in de browser, geen build-pipeline voor een frontend-framework. Je schrijft PHP en Blade. De server doet het werk.

Wij bouwen er bij klanten complete checkouts, configurators en filters mee. In dit artikel: wat Magewire precies is, hoe het werkt binnen Hyvä, wanneer je het wel inzet en wanneer juist niet, en wat je qua performance moet weten.

Wat is Magewire?

Magewire is een port van Livewire naar Magento 2. Livewire is een populair Laravel-pakket dat reactive interfaces bouwt vanuit de server. Magewire neemt dat concept en maakt het werkend binnen Magento, specifiek in combinatie met Alpine.js — de JavaScript-laag waar Hyvä standaard op draait.

Het idee is simpel. Je definieert een component als PHP-class. De bijbehorende view is een Blade-template (.phtml met Hyvä's templating). Wanneer een gebruiker iets doet — klikken, typen, een select wijzigen — stuurt Magewire een AJAX-request naar de server. De server berekent de nieuwe state, rendert de HTML opnieuw en stuurt alleen de verandering terug. Alpine.js werkt de DOM bij.

De gebruiker ziet een reactive interface. Jij hebt geen regel custom JavaScript geschreven.

Magewire is open source en wordt onderhouden door de community rond Hyvä. Het is geen onderdeel van Hyvä zelf, maar de twee zijn gebouwd om samen te werken.

Hoe het werkt zonder API of SPA

Bij een klassieke SPA-aanpak splits je je applicatie in tweeën. De frontend draait in de browser, de backend levert data via een API. Je onderhoudt twee codebases, twee sets validatie en een contract daartussen.

Magewire kapt die scheiding weg. De flow ziet er zo uit:

1. De server rendert de initiële HTML, inclusief Magewire-component.
2. Een gebruiker triggert een actie (bijvoorbeeld wire:click).
3. Magewire stuurt de huidige component-state plus de actie naar de server.
4. De PHP-class verwerkt de actie en muteert zijn properties.
5. De server rendert de component opnieuw en stuurt de nieuwe HTML terug.
6. Magewire patcht alleen de gewijzigde delen van de DOM.

De state leeft op de server, niet in de browser. Dat betekent dat je je hele bestaande Magento-logica kunt hergebruiken: repositories, service contracts, ACL, alles. Je hoeft niets te dupliceren in JavaScript.

Een concreet verschil met een SPA: er is geen aparte API-route die je moet beveiligen, documenteren en versioneren. Magewire handelt het transport af over één endpoint. Voor een team dat al sterk is in Magento-backend werk, is dit een veel kortere weg naar reactive UI.

Een voorbeeld: live formuliervalidatie

Stel je hebt een aanvraagformulier. Je wilt het e-mailveld valideren zodra de gebruiker het veld verlaat, zonder full page reload.

De PHP-component:

<?php

namespace Vendor\Module\Magewire;

use Magewirephp\Magewire\Component;

class ContactForm extends Component
{
    public string $email = '';
    public string $message = '';

    protected $rules = [
        'email' => 'required|email',
        'message' => 'required|min:10',
    ];

    public function updatedEmail(): void
    {
        $this->validateOnly('email');
    }

    public function submit(): void
    {
        $this->validate();
        // verwerk de aanvraag via je bestaande service
    }
}

De bijbehorende template:

<form wire:submit.prevent="submit">
    <input type="email" wire:model.blur="email" />
    <span class="text-red-600">@error('email') {{ $message }} @enderror</span>

    <textarea wire:model.blur="message"></textarea>
    <span class="text-red-600">@error('message') {{ $message }} @enderror</span>

    <button type="submit">Versturen</button>
</form>

Wat hier gebeurt: wire:model.blur bindt het veld aan de PHP-property en stuurt bij blur een update. updatedEmail() draait dan de validatieregel voor alleen dat veld. De foutmelding verschijnt zonder reload. De validatieregels staan op één plek — in PHP — en gelden zowel client-side voelend als server-side echt.

Geen dubbele validatielogica. Geen JavaScript-validatiebibliotheek. Eén bron van waarheid.

Een voorbeeld: een reactive filter

Filters op een categoriepagina zijn een tweede klassiek geval. Een gebruiker vinkt "Maat M" en "Blauw" aan. Bij Magewire muteer je properties en herrender je de productlijst.

public array $selectedFilters = [];

public function toggleFilter(string $code, string $value): void
{
    $key = $code . '_' . $value;

    if (isset($this->selectedFilters[$key])) {
        unset($this->selectedFilters[$key]);
    } else {
        $this->selectedFilters[$key] = ['code' => $code, 'value' => $value];
    }
}

public function getProducts(): array
{
    // gebruik je bestaande collection met de actieve filters
    return $this->productProvider->getFiltered($this->selectedFilters);
}

De template roept wire:click="toggleFilter('color', 'blue')" aan. De server filtert de collection en stuurt de nieuwe productgrid terug. De gebruiker ziet de resultaten verschijnen zonder dat de URL-bar knippert of de pagina opnieuw opbouwt.

Wanneer je Magewire wél inzet

Magewire is sterk wanneer reactiviteit nauw verweven is met server-side logica. Dat geldt voor:

• Formulieren met validatie, conditionele velden of meerdere stappen.
• Checkout-componenten, waar shipping, betaalmethodes en totalen onderling afhankelijk zijn. Veel Hyvä-checkouts draaien volledig op Magewire.
• Product configurators waarbij opties prijs en voorraad beïnvloeden.
• Add-to-cart en mini-cart updates.
• Wishlists, compare en quote-aanvragen in B2B.

De rode draad: situaties waarin de server al de waarheid heeft over prijs, voorraad, regels of permissies. Magewire haalt die waarheid naar de frontend zonder dat je hem dupliceert.

Het is ook de pragmatische keuze als je team uit backend-developers bestaat. Je levert reactive UI in PHP, zonder een Vue- of React-stack te leren en te onderhouden.

Wanneer je het juist NIET doet

Magewire is geen wondermiddel. Wij raden het af in deze gevallen:

• Puur visuele interacties. Een accordion, een tab-switch, een dropdown — dat regel je met Alpine.js, client-side, zonder server-roundtrip. Magewire daarvoor inzetten is verspilling.
• Zeer frequente updates. Denk aan een live-zoekveld dat bij elke toetsaanslag de server bevraagt op een grote catalogus. Elke keystroke is een request. Zonder debounce en caching loopt dat snel vast.
• Offline of zwaar interactieve apps. Een complexe configurator met honderden client-side berekeningen per seconde hoort thuis in een echt frontend-framework.
• Wanneer latency hoog is. Magewire voelt reactive zolang de roundtrip naar de server snel is. Op trage hosting of bij zware queries merkt de gebruiker de vertraging.

Eerlijk advies: als je interactie geen server-state nodig heeft, gebruik dan gewoon Alpine. Hyvä geeft je daar uitstekende tools voor. Magewire is voor het moment dat je de server écht nodig hebt.

Performance-overwegingen

Elke Magewire-actie is een serverrequest die Magento (deels) bootstrapt en de component opnieuw rendert. Dat is goedkoper dan een full page reload, maar niet gratis. Houd hier rekening mee:

Een paar vuistregels uit onze praktijk:

• Debounce alles wat bij typen triggert. Een ongedebouncede wire:model op een tekstveld is de snelste weg naar een trage site.
• Houd de state slank. Magewire serialiseert de component-state en stuurt die heen en weer. Hoe groter de state, hoe groter elk request.
• Meet de roundtrip. Op goede hosting zit je rond 100-200ms per actie. Boven de 400ms voelt het traag. Dan is je query of je hosting het probleem, niet Magewire.

De performance-winst van Hyvä zelf — geen jQuery, geen RequireJS, minimale JavaScript — blijft volledig overeind. Magewire voegt alleen server-roundtrips toe waar je ze bewust inzet. Wil je de bredere performance-context, lees dan onze vergelijking tussen Hyvä en Luma.

Magewire versus een eigen API/SPA

De keuze tussen Magewire en een SPA-aanpak is uiteindelijk een keuze over waar je complexiteit legt.

• Magewire: complexiteit blijft op de server, in PHP. Sneller te bouwen, één codebase, makkelijker te onderhouden voor een Magento-team. Prijs: een serverrequest per interactie.
• SPA met API: complexiteit verschuift naar de browser. Maximale client-side snelheid, offline-mogelijkheden, maar twee codebases, een API-contract en meer onderhoud.

Voor de meeste Hyvä-shops is Magewire de juiste keuze. De interacties die er toe doen — checkout, filters, configuratoren — leunen allemaal op server-state. De zeldzame uitzondering waarin je echte client-side rekenkracht nodig hebt, rechtvaardigt een SPA. Twijfel je waar jouw project valt? Neem contact op — we kijken graag mee naar je specifieke case.

Zie ook hoe dit uitpakt in de praktijk in onze analyse van de Hyvä-checkout versus Luma.

Veelgestelde vragen

Heb ik JavaScript-kennis nodig om met Magewire te werken?

Nauwelijks. De logica schrijf je in PHP, de view in Blade-templating. Wat je wel begrijpt over Alpine.js helpt, want Magewire en Alpine werken samen in Hyvä. Maar je hoeft geen JavaScript-framework te leren of een aparte frontend-build te onderhouden. Voor een Magento-backend-developer is de leercurve kort.

Is Magewire een officieel onderdeel van Hyvä?

Nee. Magewire is een los, open source pakket dat door de community rond Hyvä wordt onderhouden. Het is wel specifiek gebouwd om met Hyvä en Alpine.js samen te werken. Veel Hyvä-checkouts en -modules gebruiken het. Het is de facto de standaardmanier om reactive, server-driven UI in Hyvä te bouwen.

Werkt Magewire met full page cache?

Ja, maar je moet er rekening mee houden. De initiële render valt onder Magento's full page cache. De Magewire-acties daarna zijn dynamische requests die de cache niet raken. Zorg dat je componenten zo zijn opgezet dat de eerste render cachebaar blijft en alleen de interacties de server belasten.

Is Magewire trager dan een React- of Vue-SPA?

Per interactie wel, omdat elke actie een serverrequest is in plaats van client-side rekenwerk. In de praktijk merkt de gebruiker dat niet, mits je hosting snel is en je queries efficiënt zijn. Reken op 100-200ms per actie op goede hosting. Voor de meeste e-commerce-interacties is dat ruim snel genoeg.

Kan ik Magewire toevoegen aan een bestaande Hyvä-shop?

Ja. Magewire installeer je als Composer-pakket en je voegt het stapsgewijs toe waar je reactiviteit wilt. Je hoeft niet je hele frontend te herbouwen. Wil je weten hoe Hyvä zelf in een bestaande Magento-shop landt, lees dan ons artikel over Hyvä installeren op een bestaande shop of bekijk onze Hyvä-partnerpagina.