Hyvä: More Than Just a Theme for Magento 2
My name is Anastasiia Bondar, and I'm a Magento front-end developer at Magecom. Over the five years of working with Magento, I have participated in the creation and improvement of dozens of stores. In working on these projects, I’ve noticed that the tasks, while unique to each project, are all roughly the same: improving performance, optimizing code and reducing dependencies.
Are you like me and tired of removing the same components on every project? Or that the repetitive tasks are taking up a lot of time? Optimizations are important, and that is why both front-end and back-end developers should know about the new improvements in Magento 2.
Hyvä: An Improved Alternative to the Luma Theme
In May 2021, Google announced that page experience signals would be included in Google Search rankings. We already knew that users didn’t like to wait for pages to load, but it appears that even search engines don't want to wait anymore.
This is why developers started repeating the same steps that allow for fast loading from store to store. But what if there was a system that worked faster from scratch? Today we have modern technologies and even user browsers that support faster systems, and Internet Explorer isn't a blocker anymore, so we are free to use the latest approaches.
At Magecom, we usually start all projects with a basic theme, and in most cases, Luma is the default one for Magento 2. However, projects based on this theme are quite slow due to voluminous architectural solutions and an overabundance of scripts and styles.
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?”
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
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.
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.