Hyvä Theme for Magento. Brief Review
The Hyvä theme creators claim that they never wanted to become a hype but they kind of did, as the talk about Hyvä theme is getting louder every month and the number of merchants ready to install it on their website is getting bigger. Our team has recently started to work with Hyvä and we are ready to share our experience.
Table of contents:
Hyvä Overview
Main Advantages of the Hyvä Theme
Hyvä Issues
Hyvä Overview
Released in February 2021, the Hyvä theme was meant to be an alternative for Single Page Application (SPA) or headless commerce. Its creators believe that headless/PWA solutions are not for everyone. So they made an alternative for those who do not want to build a JavaScript only website.
As a result, they were able to get rid of everything that annoys developers and merchants in other Magento themes: RequireJS, jQuery, Knockout, and LESS.
The creator also used a lot of tools and ideas from the Laravel ecosystem. In particular, they use TailwindCSS and AlpineJS. These frameworks ensure frontend effectiveness as they make the code clean, lightweight, and easier to read.
For example, TailwindCSS has a lot of built-in classes that the developer doesn’t have to write from scratch. Do you need a black background? There is already a class for that.
Same goes for AlpineJS which can be a good alternative for KnockoutJS. The platform has a simple and intuitive syntax and helps to speed up the development process after you get a grip on it.
Main Advantages of the Hyvä Theme
According to the promo materials, Hyvä allows a low entry level for developers, better performance, and fast development process. And these are the main reasons why you need to pay for the license. We asked our developers, who worked with Hyvä if these characteristics are true.
Low Entry Level for Developers
Hyvä uses tools that Magento developers are familiar with. The only thing they might not be comfortable with is React, which is mostly used for React-based checkout and can be avoided by using Luma fallback checkout.
We asked our frontend developer what was his opinion on interacting with Hyvä:
The main issue with Hyvä is to switch from the way Magento handles styles and JS to the way Hyvä does it. The inner part is still Magento. But when you get how it works, the development becomes faster and easier. — Sergei Voinich, Senior Frontend developer at BelVG.
The developers don’t have to ship megabytes of JavaScript, and less code means more comfort.
High Performance
A request for speed optimization is one of the most common for a standard Magento store, as Magento frontend is rather slow by default. You can spend a lot of time on optimization, but there are still limits that developers can overcome only with PWA.
Hyvä gives an alternative. The theme has a much better performance. Out of the box, Hyvä scores 100/100 in Google PageSpeed and it passes Core Web Vitals on all metrics. Which is hardly an option with the Luma theme or Single Page Applications (SPA).
The performance of the Hyvä website still depends on other things. For example, if you must add some script or oversized images. But with Hyvä, you have a much better starting point and perfect scores are possible.
When the Luma theme loads over 200 JS/CSS resources (1,5 megabytes), Hyvä loads only 2 JS/CSS resources (0,2 megabytes). If we check its demo, we can see that while loading the configurable product page, the system has a full product gallery, videos being loaded, configurable products with price logic, and a wishlist. It still only takes about 26 kilobytes of JavaScript and 40 kilobytes of CSS.
Faster Development Speed
The development process with Hyvä is quite fast thanks to the specifics of TailwindCSS and AlpineJS, as we have already described. But the developers need to spend time on learning the way these frameworks are working.
The first agencies who have developed websites on Hyvä said that their biggest project took them about 100 hours from Figma design to an MVP-level website. The project included custom design, Elasticsearch implementation, 360-degree photo view, prismic.io for custom content types, and React checkout for B2B.
These numbers are from Hyvä partners and can be not as promising in reality. The technology is still young, and the numbers can vary significantly from one project to another.
Hyvä Issues
Hyvä is a new theme and we are still learning what the drawbacks of its use can be. For now, most of them are connected with its novelty: checkout uncertainties, number of compatible modules. Here is more info about them.
Extension Compatibility Issues
For now, there are more than 200 extensions that are already compatible with Hyvä, you can see the whole list here. So yes, if you want to use a module that is not anywhere on this list yet, you will have to pay for the extra development time to make it compatible with the theme.
In practice, making most Magento modules compatible for Hyvä is not such a big deal as the extension doesn’t need changes on the PHP/Magento side. Hyvä doesn’t affect it. You only need to make the frontend part compatible and rewrite PHTML, LayoutXML files, and JavaScript, which is not the biggest part of the work for the vast majority of modules.
For example, we made several modules for our project compatible with Hyvä, including Mageplaza Reward. As it doesn’t have a lot of js, the developer only needed to adjust styles to Tailwind that took us several hours.
Checkout Issues
So the checkout solutions are workable but are considered still unclear. For now, there are two of them:
- React-based checkout
- Luma fallback checkouts
There is also a Hyvä checkout now in development, but we can not use it yet.
React-based checkout is not a replacement for Luma checkout and is not a ready-to-use solution. It is a separate project, a toolkit to build your custom checkout. The tricky part is that you need to know React and Magento to use it correctly and make something interesting.
The benefits of this checkout are:
- Fast loading speed – the checkout is much faster than most of Magento solutions.
- High customization capability – as it is a toolkit, you can do almost anything you want with your checkout.
- Open source code – you can check it out here
- Almost headless approach – the react code can be used with Luma, Hyvä, or any other theme, and can make it work with a headless approach.
Here are also two more interesting facts about React checkout:
- Shipping/Payment integration – payment service providers (PSP) usually come with the third-party extension and they work with Luma checkout out of the box. With React, you need to install them manually, which is hard and long work if performed for each website. So the development team solved the issue by keeping payment gateway integration in a separate repository. React-based checkout now supports Amazon Pay, PayPal Express, Stripe, offline payment methods, and several other payment and shipping systems.
- Theme integrations – you can use different theme checkouts as a starting point and then customize it. For now, there is a basic theme available, as well as the Lumazon theme.
So basically this checkout allows a lot of customization, but you need a good knowledge of React to use it and the payment/shipping integration can be challenging.
Luma Fallback Checkouts is a solution for those who are not comfortable with using a React checkout. You can configure it using magento2-luma-checkout module, which is available on the Private Packagist or the Hyvä repository on GitLab. One gets access to it after buying a Hyvä license.
Magento 2 Custom Development
Make you website stand out from your competitors with custom Magento development
Visit the pageHyvä checkout is a new checkout solution that is still in the development stage. The developers claim that it is going to be fun to work. It is using all the Hyvä stack such as AlpineJS and TailwindCSS, extended with Magewire PHP. This checkout is also fast, but now is not ready to use.
The Cost of the License
If you want to use Hyvä for your webstore, you’ll have to buy a license. The Hyvä team decided that they don’t want to work with subscriptions. You only need to pay once to get access to Hyvä code and start working with it.
The cost is €1,000 for everything. Meaning, you get:
- unlimited number of updates
- access to the Private Packagist and Gitlab
- access to third-party compatibility modules
- support and community access to the Hyvä slack
Summary
According to our experience, the Hyvä theme is what it claims to be: a fast, easy-to-use theme that still has issues with checkout and compatibility modules. But using it has its perks in website performance and customization possibilities.
It is reasonable to use Hyvä when migrating the website, developing one from scratch or if your site has huge problems with performance. But we still don’t know if it is a good idea to migrate a Magento website with hundreds of CMS pages to Hyvä as changing styles to Tailwind can be a huge job.
