It’s no secret that working with Baldwin means working with one of the select agencies specializing in Alpine JS and Tailwind CSS, offering projects crafted using the cutting-edge Hyvä storefront technology. Yes, you got it. We just love Hyvä. So, in case you have a few minutes to spare, grab a coffee, make yourself comfortable, and read all about how we ended up in this situation.
Our colleague, Sorin, had the courtesy to put effort into documenting how we switched from Luma to Hyvä, but also into providing a few insights into the frontend theme for Magento we all love.
Our journey with Hyvä has a start
After a wonderful four-year relationship with Luma (with its ups and downs, like any relationship), we reached a tense moment. We’ve tried all ways to improve our webshop’s speed:
- by minifying HTML,
- by merging and minifying CSS and JS,
- by optimizing images and lazy loading them
After following all performance improvement guides and posts and Google’s improvement recommendations, we ran out of ideas and technical solutions for improvement.
Our webshops were too slow compared to the front ends of other platforms. Google’s Pagespeed score algorithm changes made it look even worse. The decent scores of 90+ on CMS pages and 80+ on category pages turned into 50+ and 40+, which was bad… As you can imagine, our marketers were crying. A change had to be made… and fast.
Willem Wigman presents ”The Biggest Secret Ever”
In the autumn of 2020, during the Reacticon online conference, Willem Wigman presented ”The biggest secret ever” – his lightweight frontend solution for Magento named Hyvä. A hyped discussion started in the Baldwin office based on Willem’s presentation. We’ve started breaking things apart and discussing pros and cons, but against all concerns, we were eager to give it a try.
Our journey with Hyvä has a (messy) middle
We are not sugarcoating anything. We will admit that the middle was a bit painful.
At the beginning of 2021, a huge project came in, brought the necessary budget to be able to research and build prototypes. It was Lochting, a SaaS, out-of-the-box webshop for European Pharmacists.
This is our product and we had to secure stability and scalability. So we’ve built it on top of Magento 2. A few FE and BE devs started experimenting with the source code, reading the Hyvä documentation, hands-on learning tailwindCSS, and AlpineJS, and asking and receiving valuable support via Slack from the growing Hyvä community.
Since the Hyvä compatibility for most of the 3rd party modules we were using before was still poor, we went with what came out-of-the-box with Hyvä (Smile elastic suite (Search + Layered navigation)) + our Baldwin modules for which we had to rewrite the frontend to make them Hyvä compatible. This was a great learning experience.
The source code of our Baldwin modules started shrinking, and AlpineJS helped a lot in reducing code complexity. Following Hyvä’s approach, Magento UI components, which everyone hated, went out the window. RequireJS and jQuery followed.
We started developing the front end for the Lochting shops, customizing and extending various parts of the Hyvä theme. Implementation time was still high due to the learning process and development flow accommodation, but at least the fun of working with Magento was back.
The second project came in, a project we also started from scratch with Hyvä on the front end. This was a bit more demanding than the previous one, because 3rd party modules were also required, and not all of them were Hyvä compatible yet.
Months passed, missing features were introduced in new Hyvä releases, and more and more compatibility modules became available in Hyvä GitLab. We needed to update our Hyvä-based themes. The layouts and templates upgrade part is pretty similar to Luma. It was not an easy one since it was the first we did on Hyvä and our code was heavily customized, but the well-documented how-to-upgrade procedure and the release notes, made a great difference.
Looking back at the upgrades we did, since Hyvä became more and more stable with every released version, upgrade complexity was reduced. The thing I liked the most was Hyvä’s constant concern on making the upgrades as smooth and simple as possible, to reduce upgrade time and effort.
After the go-live of this second project, we’ve decided to drop developing new shops on our Luma-based theme and go with a new customized theme based on Hyvä.
Throughout the following two years (2022-2023), our usual tasks mostly involved working with Hyvä, whether it was migrating from a previous Luma-based project or starting one from scratch.
Hyvä vs Luma: workflows and structure
Let’s have a quick look into a few differences and similarities between Luma and Hyvä workflows and structure.
Like in Luma’s case, you can create a custom theme in 2 ways:
- You can create a child theme, that will Inherit from Hyvä-default-theme
- You can create a duplicate of the Hyvä-default-theme and modify that
The File and folder structure
As you can see, file and folder structure, even file naming is pretty much the same. Hyvä is still using Magento’s layout and templating systems, which we all love.
One of the changes you can see in these screenshots is that the web/CSS folders are missing from Hyvä theme modules because the styles go either directly into the templates or in the CSS files in the theme’s web/tailwind folder.
Hyvä reduced dependencies on third-party libraries like Knockout, RequireJS, and jQuery, introducing a single lightweight one, AlpineJS (less than 20kb). If needed, such as for a more complex slider, very lightweight third-party libraries can be used. For example, Hyvä uses Glider for advanced slider features.
Hyvä
Luma
The code inside the templates also got slimmer. Let’s take for example a simple component, the collapsible.phtml template:
- On Luma, you have the template and the js logic in a separate file
- On Hyvä, the entire component logic is AlpineJS. The logic is simple and inlined in the html, eliminating the need for external files.
Luma Template
Hyvä Template
Js Logic
Hyvä – embedded JS logic and communication between components
In case of more complex functionality, the logic is usually moved to a separate function, in a script tag at the top of the template file. Communication between components happens through events. You can dispatch an event in your component and catch it in another one.
Complex JS logic in external function
Communication between components
Dispatch an event
Listen to that event in different component
Hyvä – simplified CSS complexity
Hyvä also reduced the CSS complexity: styling can be added directly in phml files (through TailwindCSS utility classes). Styling can also go in separate CSS files (in the theme’s web/tailwind folder, using Tailwind’s @apply directive).
The strong point of Tailwind that Hyvä makes use of is its purging mechanism. Tailwind will scan the files declared in tailwind.config.js and purge the generated CSS file, ensuring that only the styles used in the project remain, resulting in a reduced stylesheet size.
Styling in phml files (TailwindCSS utility classes)
Styling in separate CSS files (in theme’s web/tailwind folder, Tailwind’s @apply directive)
You can access Hyvä public documentation here: https://docs.Hyvä.io
Hyvä pros and cons (compared to Luma)
Pros:
- Outstanding out-of-the-box performance
- Modern tech stack
- Reduced time-to-market
- Shallow learning curve
- Custom features are less complex and easier to build (because of AlpineJS)
There are also a few cons (pseudo-cons):
- Hyvä is a Commercial product (although it’s a small price to pay for what it offers)
- Limited compatibility with 3rd party modules (though, the most popular modules on the market are already Hyvä compatible)
Our journey with Hyvä in the present moment
3 years later and 5 shops launched on Hyvä + the 200 which run on our Saas, in both Romania and Belgium, we still don’t regret our decision of picking Hyvä as the frontend solution. On Lochting our next challenge will be to scale up in France, Germany, Spain, Austria, and Australia.
Building shops using the Hyvä theme and finding compatible modules has become significantly less challenging since most popular 3rd party modules are now Hyvä compatible. This year we’ve also started experimenting with Hyvä UI and Hyvä Checkout and we’ve recently launched our first Hyvä shop that utilizes both Hyvä Theme and Hyvä Checkout.
We can’t wait to see what the future will bring. If you consider switching to Hyvä, don’t hesitate to contact us. We will be happy to have a chat!
