What is Hyvä?

Introducing Hyvä

There is a new kid on the block and they are disrupting the Magento ecosystem! Who is this new kid and what are they up to?

Their name is Hyvä and they are showing Magento how a frontend should be done.

It has been years since the Magento community was this animated and we couldn’t be any more excited. But before we go into what Hyvä is we first need to understand what problems it is solving…

So, How did we get here? Magento’s core frontend just isn’t good enough.

Dated Technologies

Having a theme to use as a base is vital otherwise everything will need to be created from scratch for every project which would take an excruciatingly long time due to the wheel constantly being reinvented. To solve this Magento ships with two themes that can be used as a base for the frontend, the Blank theme and the Luma theme which are both very similar with Luma adding an additional layer of polish on top of the Blank theme.

Unfortunately, both are far from ideal due to unnecessary complexities and out of date technologies, both themes were slightly dated back when they were released in 2015 and due to not being updated much since then they are effectively ancient at this point in time.

This results in the following problems.

Not Meeting User Expectation

The expectation users have when shopping online has changed significantly since Magento 2 was first released, many huge tech companies such as Google, Uber, Facebook, and Twitter have streamlined their applications spending a huge amount of time on almost perfecting the user experience which results in users expecting that level of quality in all their online experiences.

The current Magento themes do not come close to meeting this expectation and it can be incredibly time-consuming to work on these themes to get them to that point.

Performance

Site speed is also more important now than it ever has been and not just due to user expectation, Google themselves take performance into consideration when ranking websites which they’re making very evident with the Vitals update which will make the likes of largest contentful paint, first input delay, and cumulative layout shifts even more important.

Again, the Magento themes are not up to the job and are very slow before custom features have been added never mind after.

High Costs of Magento Frontend Development

It’s well known that the core Magento frontend is much more complex than it should be, this means that changes take longer than they should and it’s more likely for bugs to be introduced which results in higher costs and prolonged development time.

It’s safe to say that everyone involved with Magento would love to see the cost of frontend development lowered.

Recruitment Is Harder Than it Should Be

For a Magento frontend developer to be effective they need to master the Magento platform on top of the already difficult specialism of frontend development. This does not appeal to many frontend developers as you’re vastly increasing the amount of knowledge required to be effective at your job. Not to mention the dated and overly complex technologies also make it very stressful at times as frontend developers almost always want to work with modern tooling such as React or Vue and not so much the old tools such as jQuery and Knockout.

Trying to find someone who specialises in both frontend development and Magento is hard resulting in recruitment taking much longer than it should.

The above problems result in unhappy business owners, unhappy users, unhappy developers, unhappy project managers, and all this unhappiness results in pent up demand for a solution which is where Hyvä comes into play.

What is Hyvä?

A set of Magento modules that improves performance, development times and decreases complexity.

Hyvä is a set of tools which provide a new frontend base to Magento 2 stores bringing:

• Reduced complexity
• Improved performance
• Improved developer experience
• Improved development velocity
• Reduced dependencies
• Reduced learning curve

It achieves this by stripping out the pain points of Magento frontend development such as dated technologies and the overly complex frontend codebase and replaces them with modern tooling and a much more simplistic approach whilst still providing the majority of the core features we love. It retains the useful features of Magento frontend such as layout XML, PHTML templates, caching etc which results in the best of both worlds.

How is Hyvä different?

It goes further than all the other frontend alternatives and has a large community behind it.

Many people have attempted to create a new frontend base for Magento and none have really gained long term traction within the community which is down to them not solving enough of the problems mentioned earlier.

• Some introduce modern tooling on top of the problematic Magento tech stack, this just adds more complexity and more moving pieces to cause problems.
• Some modify the Magento codebase to improve performance, these approaches only solve one problem and often introduce more complexity.
• Some are purely themes that ship with an improved design but do not solve any of the problems.
• Progressive Web Apps do solve many of the problems but also bring a lot of complexity and overhead which are often unnecessary for the majority of online stores.

With the exception of PWAs the common theme in why other solutions have not succeeded is because they still use the core Magento technologies which is largely down to two steps that are required when removing them:

• A complete rebuild of the frontend which is a huge task
• The frontend for third party and Magento Commerce (Enterprise) modules will no longer work

The frontend rebuild can be solved with time and effort but the module incompatibility is too large for any one team to solve, it requires the community to jump onboard with the effort which thankfully has already happened with Hyvä and we are seeing more compatibility modules added every week including but not limited to:

• Magento Page Builder
• Magento B2B RMA
• Algolia Search
• Amasty CustomForms
• Mirasvit SEO
• Magezon Blog
• Smile ElasticSuite

How do you use Hyvä?

Very easily! As Hyvä is a collection of Magento Modules they are installed just like any other which is often the case of running 1 or 2 commands with Composer.

There are two popular ways of working with the Hyvä theme itself:

Theme Hierarchy

It is possible to use the theme hierarchy just like with the core Magento themes meaning you can create your own theme which inherits files from Hyvä.

Pros:

• Less code to maintain

Cons:

• The generated CSS file will not be as well optimised
• Code reviews are more time consuming when overwriting files due to full files being shown in the pull request and not just the changes made by the developer

This approach is more suitable for projects that will not be straying far from the Hyvä design and features.

Cloning Hyvä

For projects utilising a custom design and feature set cloning Hyvä into a new theme and only using the reset as a base will be the better option.

Pros:

• CSS will be very well optimised with users only downloading the CSS which is actually used in the theme
• Code reviews take less time due to only seeing the changes made by the developer

Cons:

• More code to maintain

Who is behind Hyvä?

Hyvä was created by Willem Wigman who has worn many hats working as a consultant, system integrator and developer working on both front-end and back-end features. He knows what he is talking about!

The project started as a side project of Willem’s and after working on it for a month he got the go-ahead to use it on a real project and nobody could believe how fast features were being built nor how performant it was.

Is Hyvä a PWA?

Nope! One of the main benefits of going down the PWA (Progressive Web App) route is often increased performance however one of the important downsides is PWAs often take much longer to build than a traditional Magento storefront.

Hyvä has the best of both worlds here with increased performance whilst not taking as long as the equivalent site would as a PWA.

Popular opinion is that PWAs are better suited to merchants with large budgets that require a heavily customised Magento frontend, for most other merchants Hyvä will be a more suitable choice.

What’s the Catch with Hyvä?

Whilst we love working with Hyvä it is not a silver bullet and there are downsides and risks that come with its use.

Lack of Third Party Module Support

As the huge majority of Magento modules are written using the same technologies as the Magento themes they will often not work out the box when using Hyvä. This means a rewrite of the Javascript, templates, and CSS can be required and the time this takes will depend on the complexity of the module.

The creators of Hyvä and the community are aware of this and there is a large effort to create compatibility modules that will add support for popular third-party modules, the list of modules and their current status can be seen here.

Lack of Support for Magento Commerce / B2B Features

The same point as third party modules apply to Magento Commerce (previously known as Magento Enterprise) and B2B features, they can’t be included in core Hyvä for licencing reasons but there is an active effort from the creators of Hyvä and the community to create compatibility modules for these modules too.

At the time of writing Magento Page Builder and Quick Order has support with RMA and requisition list support currently being built.

Checkout is not Included

As building a whole new Magento checkout is a huge task the Hyvä theme does not come with a new frontend for it. Thankfully Hyvä does offer an optional alternative in the form of an open-source React app which can be seen on Github.

It is currently early days for this project and at the time of writing it has some critical bugs so isn’t fit for production use in its current state but we are confident it will be production-ready in no time with version 1.0 coming soon.

Conclusion

It’s still very early days for Hyvä and it has already made a huge impact on the community and Magento ecosystem so we are really looking forward to seeing what the future holds.

Armed with the knowledge of how problematic the core Magento themes can be and how Hyvä can really help solve these problems we hope you’re as excited about it as we are.

Written by: Ben Crook, Tech Lead at Space 48.