Wie Alpine.js und Tailwind in Hyvä RequireJS und Knockout ersetzen

Hyvä wird oft als “schnelleres Theme” beschrieben. Das stimmt, verdeckt aber den eigentlichen Grund, warum es schneller ist.

Hyvä optimiert nicht das Frontend von Luma, sondern ersetzt es durch einen anderen, deutlich kleineren Stack. Dieser Beitrag zeigt, wie dieser Stack in der Praxis aussieht.

Der Luma-Stack in Kürze

Das Frontend von Luma besteht aus vier Hauptbausteinen.

• RequireJS lädt JavaScript-Module bei Bedarf und verwaltet ihre Abhängigkeiten.
• jQuery und jQuery UI treiben viele Widgets an, etwa Tabs, Menüs und Modals.
• KnockoutJS rendert dynamische Teile wie den Mini-Warenkorb, die Kundendaten und den gesamten Checkout.
• LESS kompiliert die Theme-Styles, mit einem verschachtelten System aus Variablen, Mixins und Overrides.

Jedes Element war sinnvoll, als Magento 2 entworfen wurde. Zusammen ergeben sie eine schwere Seite.

In unserem Hyvä-vs.-Luma-Benchmark: Eine saubere Luma-Seite erzeugte mehr als 250 Requests und lud rund ein halbes Megabyte JavaScript.

Der Hyvä-Stack in Kürze

Hyvä ersetzt diese vier Bausteine durch zwei.

• Alpine.js übernimmt die Interaktivität, direkt im HTML des Templates geschrieben.
• Tailwind CSS übernimmt das Styling mit Utility-Klassen in den Templates.

Es gibt keinen Modul-Loader, keine jQuery-Abhängigkeit und kein Knockout-Template-System. Dieselbe saubere Benchmark-Seite erzeugte auf Hyvä weniger als 20 Requests und lud rund 26 KB JavaScript.

Ein einfaches Beispiel: ein Toggle

Nehmen wir etwas, das jeder Shop hat: einen Inhaltsblock, der sich öffnet und schließt.

In Luma hängen Sie typischerweise ein jQuery-UI-Widget über einen RequireJS-Initialisierungsblock im Template an.

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

Damit das läuft, lädt der Browser RequireJS, dann den Mage-Initialisierer, dann jQuery, jQuery UI und das Collapsible-Widget.

In Hyvä besteht dasselbe Verhalten aus ein paar Attributen direkt im HTML.

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

Alpine.js ist bereits auf der Seite, es muss also nichts weiter geladen werden. Die Logik steht direkt neben dem Markup, das sie steuert – das macht sie leicht lesbar und änderbar.

Kundendaten ohne Knockout

Magento nutzt “Private Content” für alles Persönliche auf einer gecachten Seite, etwa die Anzahl im Warenkorb oder den Namen des Kunden. In Luma rendern KnockoutJS-Templates diese Daten clientseitig.

Hyvä behält die Customer-Data-Sections von Magento bei, verzichtet aber auf Knockout. Sobald die Daten verfügbar sind, löst Hyvä ein Browser-Event aus, auf das jede Alpine-Komponente reagieren kann.

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

Der Full-Page-Cache liefert weiterhin allen dieselbe Seite aus. Nur die kleinen personalisierten Teile werden anschließend befüllt, damit das Caching wirksam bleibt.

Styling: LESS versus Tailwind

In Luma bedeutet das Ändern eines Buttons meist, die richtige LESS-Variable oder das richtige Mixin zu finden, sie in einem Child-Theme zu überschreiben und neu zu kompilieren. Die finale CSS-Datei enthält Styles für viele Komponenten, die die Seite nie nutzt.

In Hyvä steht das Styling als Tailwind-Utility-Klassen direkt im Template.

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

Beim Build durchsucht Tailwind die Templates des Themes und schreibt eine CSS-Datei, die nur die tatsächlich gefundenen Klassen enthält. Ungenutzte Styles erreichen den Browser nie.

Markenfarben, Schriften und Abstände liegen als Design-Tokens in der Tailwind-Konfiguration des Themes. Token ändern, neu bauen – und die Änderung gilt im ganzen Shop. So kann ein Team das Erscheinungsbild eines Shops anpassen, ohne Dutzende Stylesheets anzufassen.

Was das für Ihre Entwickler bedeutet

Für ein Team, das von Luma kommt, fühlt sich Hyvä meist einfacher an.

• Templates sind weiterhin PHTML-Dateien mit Magentos Layout-XML, die Magento-Struktur ist also vertraut.
• Alpine.js ist klein und für jeden mit JavaScript-Grundkenntnissen schnell zu erlernen.
• Tailwind ersetzt lange Override-Ketten durch Klassen, die Sie direkt im Template lesen können.
• Es gibt keine RequireJS-Konfiguration und kein JavaScript-Bundling, das debuggt werden muss.

Eine neue Gewohnheit gibt es: Nach Änderungen an Templates oder an der Tailwind-Konfiguration muss das CSS des Themes mit seinem Node-Build-Skript neu gebaut werden. Dieser Schritt gehört in Ihren Deploy-Prozess.

Was das für Ihre Extensions bedeutet

Das ist die Kehrseite derselben Medaille. Jede Extension, die eigene RequireJS-Module, Knockout-Templates oder jQuery-Widgets mitbringt, setzt voraus, dass der Luma-Stack vorhanden ist.

In Hyvä fehlt dieser Stack, daher funktioniert der Storefront-Teil der Extension nicht ohne Weiteres. Die Backend-Logik funktioniert weiterhin.

Die Lösung ist ein Kompatibilitätsmodul, das den Frontend-Teil in Alpine.js und Tailwind neu schreibt. Viele gibt es bereits, der Rest lässt sich entwickeln. In unserer Hyvä-Migrations-Checkliste erfahren Sie, wie Sie Ihre Extensions vor dem Start auditieren.

Wo Alpine an Grenzen stößt: der Checkout

Der Checkout ist die komplexeste Seite jedes Shops, mit vielen Schritten, Validierungen und Zahlungsintegrationen.

Hyvä Checkout löst das mit Magewire, einer serverseitig gesteuerten Komponentenbibliothek für Magento. Ein Großteil der Checkout-Logik läuft auf dem Server in PHP; der Browser erhält aktualisiertes HTML, und Alpine.js übernimmt kleine clientseitige Verhaltensweisen.

Wann sich Hyvä Checkout lohnt und wann ein anderer Checkout besser passt, erklären wir in Lohnt sich Hyvä Checkout?.

FAQ

Kann ich in einem Hyvä-Shop weiterhin jQuery verwenden?

Technisch können Sie es laden, aber damit kommt das Gewicht zurück, das Hyvä entfernt hat. Besser ist es, das Verhalten in Alpine.js oder reinem JavaScript neu zu schreiben.

Müssen meine Entwickler ein neues Framework lernen?

Sie müssen Alpine.js und Tailwind CSS lernen. Beide sind klein, gut dokumentiert und für alle, die bereits mit Magento-Templates arbeiten, schnell zu erlernen.

Ändert Hyvä Magentos Layout-XML?

Nein. Hyvä nutzt Magentos normales Layout-XML und die PHTML-Templates. Was sich ändert, sind JavaScript und CSS innerhalb dieser Templates.

Sie planen den Umstieg von Luma oder brauchen eine Hyvä-fähige Extension? Wie wir arbeiten, sehen Sie auf unserer Seite Hyvä-Theme-Entwicklung .