Bevor wir Hyvä installieren, lohnt sich ein Überblick über die drei Bausteine, aus denen sich jede Hyvä-Seite zusammensetzt. Wer diese drei Ebenen einmal klar auseinanderhält, versteht praktisch jedes Hyvä-Template auf Anhieb.

Die drei Bausteine

• PHP-Templates (.phtml) - liefern Struktur und Inhalt. Werden serverseitig von Magento gerendert, genau wie klassische Magento-Templates.
• Tailwind CSS - liefert das Aussehen. Utility-Klassen direkt im HTML statt eigener CSS-Dateien pro Komponente.
• Alpine.js - liefert Interaktivität im Browser, aber nur dort, wo sie wirklich gebraucht wird (Menüs, Filter, Modals).

Der entscheidende Unterschied zu Luma: Bei Hyvä ist der HTML-Inhalt einer Seite bereits vollständig da, sobald die Antwort vom Server ankommt. Alpine.js kommt erst danach dazu, um einzelne Bereiche interaktiv zu machen - es baut die Seite nicht erst zusammen, wie es Knockout mit seinen Templates tut.

Serverseitig vs. clientseitig: wo Daten herkommen

In Luma liefert der Server oft nur ein Grundgerüst plus JSON-Daten, und Knockout baut daraus im Browser das eigentliche HTML zusammen (Data-Binding). In Hyvä läuft das anders: Ein Block oder ViewModel liefert PHP-Arrays oder -Objekte direkt an das .phtml-Template, das Template gibt daraus fertiges HTML aus - alles noch auf dem Server, bevor überhaupt etwas an den Browser geschickt wird.

<?php
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Mironsoft\TeamPage\ViewModel\TeamMembers $teamViewModel */
?>
<ul>
    <?php foreach ($teamViewModel->getTeamMembers() as $member): ?>
        <li><?= $escaper->escapeHtml($member['name']) ?></li>
    <?php endforeach; ?>
</ul>

Das ist im Kern ganz normales PHP-Templating - kein Framework, kein virtuelles DOM, keine Observables. Alpine.js kommt erst ins Spiel, wenn zum Beispiel ein Filter-Button diese Liste im Browser umsortieren soll, ohne dass die Seite neu geladen wird. Genau das bauen wir ab Kapitel 17 selbst.

Wo Magento-Kernkonzepte unverändert bleiben

Hyvä ändert nichts an der grundlegenden Magento-Architektur. Diese Konzepte bleiben exakt gleich wie in jedem anderen Magento-2-Theme:

• Layout-XML steuert, welche Blocks auf welcher Seite in welchem Container erscheinen.
• Blocks (bzw. bei Hyvä bevorzugt ViewModels) liefern die Daten an Templates.
• Dependency Injection, Plugins, Events/Observers funktionieren unverändert.
• Module-Struktur (etc/module.xml, registration.php) bleibt gleich.

Kein schwerer Build-Schritt pro Seite

Ein weiterer Architektur-Vorteil: Tailwind CSS wird einmalig zu einer einzigen, optimierten CSS-Datei gebaut (Kapitel 5 zeigt den Build-Prozess im Detail). Es gibt kein Bundle-JavaScript pro Seite wie bei RequireJS, das erst zur Laufzeit im Browser zusammengestellt wird. Das reduziert nicht nur die Ladezeit, sondern auch die Komplexität beim Debuggen: Was du im .phtml-Template siehst, ist (fast) genau das, was im Browser landet.