Hyvä: More Than Just a Theme for Magento 2

Comparative characteristics of Luma and Hyvä themes using Lighthouse.

As a result, the product page loading is slower than expected. When developers use the Luma theme, they have to work with different libraries like Knockout, jQuery, RequireJS and UI Components, which makes development more complex and the project less flexible. 

This situation does not suit everyone. Thus, in 2021, several developers from Western Europe proposed a solution: the Hyvä theme, which is suitable for Magento 2 and is an improved alternative to the Luma theme.

Based on xkcd (updated and edited by Anastasiia Bondar).

I have worked with Hyvä on several projects so far, and I want to share what makes it unique and why it is becoming more and more famous. 

Hyvä was not created for the sake of hype or articles like mine. It was created to accelerate both the development and the final product stages. I dare say that Hyvä is the version of Luma that Magento could create or the interface that Luma could potentially become. With the release of Hyvä, it makes me ask: “What is still missing from the standard Magento Luma/Blank that will allow the needs of developers and users of a product to be met?”

First, of course, is slow performance. Second, older technologies are being abandoned or are no longer being supported by the development community. Knockout is an excellent library, but the last browser that didn't support modern JavaScript (JS) lost official support over a year ago. The third is the difficulty in development. Adding a new feature to a shopping cart, product or checkout page can take a long time and add a couple of bugs to the site. And last but not least, a large number of dependencies. We have to hope that the visitor stays long enough for all styles and scripts to load and process before deciding to leave the store page.

Hyvä: Ins and Outs

It only takes a few days to get started with Hyvä. During this time, you can read the official documentation, learn how Alpine.js works, understand the theme's structure and learn how to build it. It's worth looking at what Tailwind CSS is because that's what is used to create the styles in this theme. Technically, nothing prevents you from using pure cascading style sheets (CSS) or a preprocessor. Still, only with this CSS framework can you adhere to the style of development “without ever leaving your HTML,” according to the library's creators. It already contains thousands of classes out of the box and provides users the ability to add their own, handle breakpoints and work with color palettes and animations. It will also be helpful to remember or learn how to work with GraphQL. This technology stack is sufficient for a Magento front-end store developer using the Hyvä theme.

Hyvä technically contains two themes, Hyvä/Reset and Hyvä/Default, similar to the Magento/Blank and Magento/Luma. Unlike Magento/Blank, the Hyvä/Reset theme allows you to start developing your page from scratch. Once built, a developer can then add the necessary blocks.

Hyvä & PWA

Many associate Hyvä with a progressive web app (PWA). However, as the theme developers themselves stated, this is an alternative to headless PWA, designed for those who do not want to use only JavaScript. They do not believe that headless PWAs are suitable for all e-commerce systems and, therefore, have created a product that does not require a large team of highly qualified specialists to develop fast sites in a short time.

Tailwind CSS & Alpine.js

By default, the Hyvä theme has only two dependencies: Tailwind CSS and Alpine.js. Tailwind CSS allows you to add classes directly to your template.

If this approach is not suitable for one reason or another, you can also create separate CSS files using the @apply construct to use ready-made style sets from Tailwind.

Even though the library creators tried to make the class names as logical and straightforward as possible, it can be difficult to remember their designations when first starting out. Therefore, I recommend using the Tailwind CSS IntelliSense VS Code extension to complete the class name and immediately show what CSS is hidden behind this class.

Preset values from Tailwind can always be redefined in tailwind.config.js.

You can also create custom animations, connect plugins or add new styles.

Tailwind’s approach, termed “without ever leaving your HTML,” comes from Alpine.js, where it has almost no alternative. All the necessary functionality is created directly in the templates. It simplifies simple programming cases compared to Knockoutjs. A developer does not need to look for JS and HTML files responsible for the PHTML template.

Suppose there is a lot of functionality in the project, and you don’t want to turn HTML into a mess. In that case, Alpine suggests moving the initialization of the context and methods to an external function, making the code more similar to a Vue project.

The move to Alpine.js eliminated the vast amount of JS libraries used in Luma. It reduced the number of downloaded files, and if we compare the product detail page on Luma and Hyvä, we can see that the number of browser requests dropped from 265 to 16. The amount of data transferred was reduced by 10 times, and the page load time was significantly reduced.

Comparative characteristics of Luma and Hyvä themes.

That’s not bad! The developers are promising even more acceleration in the next versions of the theme.

For the checkout page in Hyvä, you can use both the familiar Magento Luma Checkout and the branded Hyvä React Checkout (the stable version has already been released). Magento version 2.3.4 or higher is required to use the latter.

Since Tailwind is just a set of predefined classes, even if you choose to include Luma Checkout, you can still use Tailwind CSS with a slight change in theme.

Areas of Improvement

Before you move all your projects to Hyvä, I must say that we have some obstacles to overcome. Hyvä is fast because it removes all extra dependencies, but almost every Magento site uses third-party modules. If the module uses Knockout, you’ll have to rewrite it with Alpine.js. Same thing with plugins that depend on jQuery and other libraries. The team has adapted all of the core Magento functionality, but some modules that belong to Magento Commerce/B2B have not yet been rewritten. You can always go through the current support table on the official website.

However, the Hyvä team, with its community members, are constantly working on making modules compatible and have already made 80 modules compatible. You can view their module compatibility tracker and check the progress of any of them in real time.

Conclusion

Despite these disadvantages, I think the pros outweigh the cons. High performance and faster development allow you to implement the functionality of varying complexity in a short time, even if it is not yet available. For example, on my projects, we implemented three B2B version modules in a few weeks. 

If you have any questions about working with the theme, you can ask them via Slack (it’s a private channel available for paying customers). The community discusses various nuances of working with the theme and future contributions. 

In any case, Hyvä is something new and forward-thinking. The developers really managed to create a fast and high-quality theme for Magento, which is rapidly gaining popularity and showing great results.