02/23/2021

A new approach to Magento 2 frontend: Hyvä Themes

Author: Julia Kwiecień

We all want our pages to be fast and if you have Magento 2 shop, you’ve probably been struggling with boosting the performance. Moreover, a “classic” M2 frontend can be utterly frustrating for developers. I’m sure every frontend developer working with Magento has been at least once considering burning it to the ground and starting anew - for sake of one’s own sanity. Certainly, there are great things in Magento 2, but the way of handling JS and styles is not one of them.

PWA is one of the solutions to this problem and we’ve been building e-commerce on PWA for some time now. But we are always looking for some new and promising possibilities. And there is a new player on the Magento frontend field that we couldn’t ignore: Hyvä Themes.

What is Hyvä?

Hyvä Themes is technically Magento 2 theme, but it is built with a completely redesigned approach to Magento 2 frontend. Its creators cleared it from all styles and JavaScript and have written it all once again starting from HTML skeleton. It uses Tailwind CSS for styling and AlpineJS as the only JS library (goodbye jQuery, Knockout JS and RequireJS). As a result, the Magento frontend is much more light and simple. Hyvä Themes comes without checkout (it will fallback to Luma), but you can use Hyvä Checkout for it (they work independently).

Why look for alternatives?

Magento frontend is rather slow by default. Sure, you can optimize it to some extent, but, without switching to PWA, you will probably hit the barrier sooner or later. After all, this is a Lighthouse result for the Luma demo:

And this is the one for Hyvä demo:

I’m sure you cannot take the page speed for granted with Hyvä. It could be ruined during the development by loading some external scripts that your client simply MUST use or by packing the page with oversized images. You still need to care for optimization to maintain this high level of performance. Yet you have to agree, Hyvä definitely offers a much better starting point than Luma.

What lies ahead?

We are just starting our work with Hyvä. Sure, there are things we worry about. How hard would it be to adjust external plugins? If we want to migrate to the Hyvä project with hundreds of CMS pages, how should we approach changing styles to Tailwind without losing head over it? We don’t know yet, but the beginning looks promising and we hope we will be able to answer these questions soon.

Contact with: Julia Kwiecień