Hyvä - The new theme on the block in Magento 2

There’s regular talk of new themes in the Magento ecosystem, however few have turned heads like the Hyvä theme since its launch.


...
Mike

share:


In this article, I explore what Hyvä is, and why I think it matters so much for developers, store owners and customers. So, whether you have heard of Hyvä or not, or have already used it, this is my take on it.

I'm going to hit the ground running here (hold on to your cereal) - I believe the Hyvä theme is unorthodox and disruptive to the land of Magento themes, that's what is so brilliant about it. It has carved its own path of how it believes a Magento theme should be, not conforming to an old and disliked tech stack of Luma. It’s truly blown theme standards to a whole new level.

Developers are openly advocating their support for it and the tech stack it brings with it; AlpineJS and Tailwind CSS. I can understand why too - Its re-ignited a spark for Magento developers to enjoyably create Magento 2 websites again without feeling encumbered with the Luma tech stack, which is admittedly at times hard to work with - whether you were a Magento veteran or not.


The Hyvä concept

The Hyvä theme was created by Willem Wigman and is backed by many trusted vendors from the Magento ecosystem.

The project started off as an experiment by Wigman, everything was re-written from scratch. No javascript, requirejs or stylesheets remain from Magento. (oh no, not the removal of our beloved knockout.js - said no one!). With a blank slate, the stars of the Hyvä show, AlpineJS and Tailwind CSS are added. A popular combo from the Laravel community, where lots of innovative technology is being used.

All the layout XML and template PHTML files have been re-written from the ground up too. This brings two big notable changes. The simplification of many different pages code - without compromising on functionality (like the product page). Allowing implementation of the themes design and functionality into Tailwind CSS and AlpineJS. Every page looks and feels very different to Magento websites we’ve seen in the past, and the best bit? It’s impressively fast. Blink and you miss a page-load. That feels worlds apart as a customer browsing the store compared to Luma, where speed definitely isn’t it’s strong point.

They’ve kept the layout XML system, so whilst there are newer additions the theme brings, there's just the right level of changes in the Hyvä theme codebase to keep it familiar enough and exciting for you to hit the ground running.


Why change?

Earlier in this article, I mentioned how I thought the Hyvä theme was unorthodox and disruptive. This isn’t a negative point. I wholly believe the frontend developer experience for the Magento 2 Luma theme drastically needed bringing in line with modern technologies and practices. It is slow to develop and build on what is considered by the Magento community as either outdated or unpopular frontend libraries. Though I have got used to the quirks and downsides of Luma, I definitely didn’t enjoy them anymore.

Magento has seemingly moved their focus onto PWAs in terms of themes, so it doesn’t look likely that they will concentrate on an overhauled version of Luma. And while there have been 3rd party themes crop up in the Magento community, none quite made the opinionated and bold leaps that Hyvä has done so successfully. It’s done this while staying rooted to some classic Magento 2 theme concepts, like the Layouts system that works so well for flexibility. So if a PWA isn’t the right fit for your website, you have a powerful alternative to use that is just as fast, flexible, and impressive, and most importantly, doesn’t take as much time or money to develop on, compared to a PWA.

The speed of Hyvä is what's really impressive. Out of the box, it’s blazing fast, the Lighthouse scores are 100 in each category, that’s no easy feat. It’s important to note that while it may have been acceptable for Luma to be relatively slow and cumbersome when it launched, the growing importance of page speed and accessibility is higher than ever. Having a low page speed score affects your SEO. Having top page scores out of the box gives Hyvä a huge benefit over Luma here.


The Developer Experience

The learning curve for making changes in the frontend for Hyvä is much easier than it ever was with Luma. Logic and styling is isolated to mostly single PHTML files. The layout XML is decoupled better from the PHTML, though it’s still there and flexible as ever, the power to style the page has been handed back over to PHTML files again. There is no better example of this than the Product Page. Which previously required extensive knowledge of the product page layout XML to make any notable layout changes. 

The theme is using technologies that new developers are perhaps already learning too, which means more people can work on the front end, giving a lower barrier to entry for implementing designs and making changes.

To achieve high Lighthouse scores with Luma, you must fight hard to achieve this, with a whopping 250+ requests from the Luma theme, it's no wonder Luma is hard to get great page scores with. This is where Hyvä particularly comes into its own, it’s really fast, and has 100 in each lighthouse category, out of the box. Which not only is a big deal for developers trying to make the website as efficient as possible, but also a great piece of mind for the store owners.Closing Words


Closing Words

Wigman has outlined his technical vision for Hyvä, they are impressive aims, but what's more impressive is that they have all been achieved too. You can see why certain changes have been made to the theme, it really does contribute overall to a refined experience.

  • Reduced complexity

  • Improved performance

  • Improved developer experience

  • Improved development velocity

  • Reduced dependencies

  • Reduced learning curve

  • Reduced complexity

  • Tooling

All the work put into the theme and the direction it has been confidently taken and all works together so well. It’s different. But in a fabulous way. The choices made go against the grain of what people are used to. But I believe the change was needed, it has allowed developers to have what I think is a better developer experience when creating Magento 2 websites. And that's why this theme over countless others, really stands out. It has made a great impact on the developers, customers and store owners.

Have a website that requires a fast front end providing you with overall better UX for your customers? Contact us


Check out our most recent project using the Hyvä theme 

Lubricant Supplies



...
Mike

share:


Want to know more?

Get in touch today and we can get the ball rolling