Wenn du als Magento-2-Entwickler zum ersten Mal auf ein Projekt triffst, das mit Hyvä Themes arbeitet, wirkt vieles zunächst ungewohnt: keine requirejs-config.js, keine Knockout-Bindings wie data-bind, kein ui_component-XML für Formulare und Listen. Stattdessen: normale .phtml-Dateien, Tailwind-Klassen und ein paar x-data-Attribute. In diesem Tutorial lernst du genau das von Grund auf - und am Ende baust du eine eigene Storefront-Seite komplett selbst.

Das Problem mit Luma

Magentos Standard-Theme Luma bringt einen sehr schweren Frontend-Stack mit: RequireJS lädt dutzende JavaScript-Module asynchron nach, KnockoutJS übernimmt die Datenbindung über Observables, und viele Formulare und Listen im Adminbereich (teils auch im Frontend) basieren auf dem UI-Components-Framework mit eigener XML-Deklarationssprache. Das Ergebnis: sehr viel JavaScript, das im Browser geparst, kompiliert und ausgeführt werden muss, bevor eine Seite überhaupt interaktiv ist - selbst für einfache Dinge wie einen Mini-Cart oder ein Mobile-Menü.

Dazu kommt: LESS statt eines modernen Utility-CSS-Ansatzes, viele ineinander verschachtelte Knockout-Templates, und ein Build-Prozess, der bei jeder kleinen Änderung recht lange braucht. Für Entwickler bedeutet das: viel Zeit für Frontend-Performance-Optimierung, die eigentlich in die Struktur des Frameworks selbst gehört.

Was Hyvä anders macht

Hyvä Themes ist kein weiteres Theme, das auf Luma aufbaut - es ist ein vollständiger Ersatz für den gesamten Luma-Frontend-Stack. Konkret bedeutet das:

• Kein Knockout.js - Templates werden ganz normal serverseitig in PHP (in .phtml-Dateien) gerendert, wie man es aus klassischem PHP-Templating kennt.
• Kein jQuery - für Interaktivität im Browser kommt stattdessen das sehr viel kleinere Alpine.js zum Einsatz.
• Keine UI-Components im Frontend - Formulare, Filter und Listen werden mit normalem Layout-XML, Blocks/ViewModels und Templates gebaut.
• Kein LESS - Styling passiert mit Tailwind CSS, einem Utility-First-CSS-Framework.

Wichtig zu verstehen: Hyvä ersetzt nicht die Magento-Kernkonzepte selbst. Layout-XML, Blocks, DI, Plugins, Events - all das bleibt exakt gleich. Hyvä ersetzt nur die Frontend-Schicht: wie Templates aussehen, wie Interaktivität entsteht und wie CSS erzeugt wird.

Warum das spürbar schneller ist

Der Performance-Gewinn kommt nicht durch einen Trick, sondern schlicht dadurch, dass sehr viel weniger JavaScript existiert, das der Browser laden und ausführen muss. Eine Standard-Kategorieseite mit Luma lädt oft mehrere Megabyte an JavaScript (RequireJS-Module, Knockout, jQuery-Plugins). Die gleiche Seite mit Hyvä kommt mit einem Bruchteil davon aus, weil Alpine.js winzig ist und der HTML-Inhalt bereits serverseitig fertig gerendert an den Browser geht - der Browser muss also nicht erst JavaScript ausführen, um überhaupt Inhalt zu sehen.

Das wirkt sich direkt auf Kennzahlen wie Largest Contentful Paint und Time to Interactive aus - beides Faktoren, die auch in Google-Rankings einfließen. Kapitel 25 dieser Serie geht im Detail auf Performance-Best-Practices ein.

Hyvä-Lizenz kurz erklärt

Ein Punkt, der bei einem ersten Blick manchmal überrascht: Hyvä Themes ist keine reine Open-Source-Software wie der Rest von Magento. Der Kern (hyva-themes/magento2-default-theme bzw. die CSP-Variante) wird unter einer kommerziellen Lizenz von Hyvä Themes GmbH vertrieben - für ein Projekt braucht man also eine Lizenz. Für dieses Tutorial spielt das keine Rolle, weil wir uns auf die technischen Konzepte konzentrieren, aber es ist gut zu wissen, falls du ein eigenes Projekt aufsetzt.

Was in dieser Serie entsteht

Die ersten Kapitel bauen die Grundlagen auf: Installation, Theme-Struktur, Build-Prozess, Layout-XML, ViewModels, CSP, Tailwind und Alpine. Ab Kapitel 17 ziehen wir das gesamte gelernte Wissen in einem einzigen, durchgehenden Beispielprojekt zusammen: eine eigene Storefront-Seite mit einer Team-Übersicht, die sich per Kategorie-Buttons live filtern lässt - komplett mit Layout-XML, Controller, ViewModel, Tailwind-Template und einer CSP-konformen Alpine-Filterlogik.