Before we install Hyvä, it's worth getting an overview of the three building blocks that make up every Hyvä page. Once you clearly separate these three layers, you'll understand practically any Hyvä template on sight.

The three building blocks

• PHP templates (.phtml) - provide structure and content. Rendered server-side by Magento, just like classic Magento templates.
• Tailwind CSS - provides the look. Utility classes directly in the HTML instead of separate CSS files per component.
• Alpine.js - provides browser interactivity, but only where it's actually needed (menus, filters, modals).

The key difference from Luma: with Hyvä, a page's HTML content already exists in full by the time the server's response arrives. Alpine.js is added afterwards, to make individual areas interactive - it doesn't assemble the page in the first place, the way Knockout does with its templates.

Server-side vs. client-side: where data comes from

In Luma, the server often only delivers a basic skeleton plus JSON data, and Knockout builds the actual HTML in the browser from it (data binding). Hyvä works differently: a block or ViewModel provides PHP arrays or objects directly to the .phtml template, and the template outputs finished HTML from them - all still on the server, before anything is sent to the browser at all.

<?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>

At its core, that's just plain PHP templating - no framework, no virtual DOM, no observables. Alpine.js only enters the picture once, say, a filter button needs to re-sort this list in the browser without a page reload. That's exactly what we'll build ourselves starting in chapter 17.

Where Magento's core concepts stay the same

Hyvä doesn't change anything about Magento's underlying architecture. These concepts remain exactly the same as in any other Magento 2 theme:

• Layout XML controls which blocks appear in which container on which page.
• Blocks (or, preferably in Hyvä, ViewModels) supply data to templates.
• Dependency injection, plugins, and events/observers work unchanged.
• Module structure (etc/module.xml, registration.php) stays the same.

No heavy build step per page

Another architectural advantage: Tailwind CSS is built once into a single, optimized CSS file (chapter 5 covers the build process in detail). There's no per-page JavaScript bundle like with RequireJS that gets assembled at runtime in the browser. That reduces not only load time, but also debugging complexity: what you see in the .phtml template is (almost) exactly what ends up in the browser.