Hyvä – rEvolution of Magento 2 Frontend & PWA Alternative

According to the Platonic theory of ideas, there should be an ideal Magento 2 theme and lots of imperfect implementations in the physical (digital) world. However, the revolution is about to hit the Magento 2 ecosystem since Hyvä introduces the closest realization of the ideal theme. The new solution will see the light of the day soon, and we’d like to draw your attention to the new potent asset that claims to deliver outstanding usability and performance. Consider Hyvä Magento 2 theme a better version of Magento’s Luma. It is a frontend that the latter potentially could have become but failed. Alongside this, Hyvä is an alternative to PWA that doesn’t put you into the boundaries of the Javascript-only web. Below, you will find out what Hyvä Magento 2 theme actually is, where to get it, why it is better than the existing solutions.

‘

Magento 2 Hyvä Theme Has Been Released!

The first version of this revolutionary new theme is finally avilable! Check it here: Magento 2 Hyvä Theme. 

Magento 2 Hyvä Theme Basics

Let’s look at some basic facts about Hyvä. Now, it is a single solution. However, you can find some speculations over the Internet about a bunch of Magento 2 themes under this name. Hyvä is developed from scratch based on a completely blank theme. As for long-term plans, the team behind the project is going to create a UI library for Magento 2.

Here is how fast the new theme is:

Wednesday I teased you about our new Hyvä. build, today the word is out – go check out https://t.co/ny3KOjGVAG

4x 100 Lighthouse scores and sub-300ms pages; it is insanely fast!

Here is our case study (in Dutch, but Google Translate is your friend): https://t.co/orTkoKQhtV pic.twitter.com/IYVAzxwj2l

— Peter Jaap Blaakmeer (@PeterJaap) January 22, 2021

Magento 2 Theme With Little to No JavaScript libraries

The creators of Hyvä got rid of all layout.xml and .phtml files. What’s even more important, you won’t find as much JavaScript as in traditional Magento themes. Hyvä eliminates the use of JS libraries, except Alpine.js, to achieve this goal. 

Minimum Dependencies

All Hyvä products aim to reduce dependencies to third-party libraries. The core team behind the project keeps the technology stack as limited to a few of them as possible. By default, you will find only two dependencies in Hyvä themes. Firstly, it is TailwindCSS. Secondly, you have to deal with Alpine.js. Both are utilized to implement the most user-friendly interface and experience.

Hyvä Core Principles

All Hyvä Magento 2 themes incorporate the following core principles:

• Reduced Complexity. Hyvä Magento 2 themes are powerful and feature-rich but yet simple. Reduced complexity is the number one principle they incorporate.  
• Enhanced Performance. E-commerce shoppers never forget slow websites. Therefore, fast-working web pages are another goal hidden behind all Hyvä products. To achieve it, these Magento 2 themes incorporate the principle of enhanced performance and increased efficiency. 
• Improved Developer Experience. A developer-friendly work-environment is also among the benefits of Hyvä Magento 2 themes. 
• Improved Development Velocity. Reduced complexity multiplied by good work conditions let your coders implement and customize Hyvä Magento 2 themes much faster than other similar solutions. As a result, you reduce average time-to-market metrics and costs.
• Reduced Dependencies. As we’ve just mentioned above, Hyvä Magento 2 themes contain only two dependencies. Thus, they are way more reliable than most alternative solutions.
• Reduced Learning Curve. All the principles mentioned above let you reduce the learning curve necessary to master Hyvä Magento 2 themes. It won’t take much time until you become a specialist in the Hyvä Magento 2 themes development.

Tools Behind Hyvä 

Hyvä themes incorporate tools that originate in the Laravel ecosystem. If you are not familiar with the latter, it is a PHP ecosystem that follows the latest trends to grow rapidly.

The team behind Hyvä currently leverages such tools as TailwindCSS and Alpine.js. Both help build fast and flexible frontend themes that not only look beautiful but are reliable and fast.

Along with a modern frontend-stack, various native Magento mechanisms are still in the game. Thus, if you are experienced with Magento’s Luma/Blank themes, Hyvä won’t be something completely new.

Hyvä as a PWA Alternative

We’ve been so much impressed by PWAs. It was another revolution in the world of Magento 2 frontend solutions. However, not everyone shared our opinion. Developers behind Hyvä themes were never super passionate about progressive web apps. They have never considered it a cure for all e-commerce problems.

PWA’s main concern is that you cannot just implement even the most basic e-commerce website without a high expertise degree and lots of time, money, and effort. Building a truly great online shop based on a PWA solution is still a very complicated routine available for large market players. Thus, the overwhelming majority of merchants still need an alternative to PWA. And Hyvä successfully serves the role. 

The project’s team aims to close the existing gap to let Magento remain the best solution for merchants of all sizes. From the perspective of merchants, they get a wider variety of solutions. Consequently, it is possible to choose a system that better follows their business requirements. 

From the agencies’ perspective, developers get more work since they have to explore a new dimension of Magento 2 themes. At the same time, they potentially get more clients due to a more extended field of solutions being covered.  

Do you really need PWA?

Let’s see why you may NOT need a PWA solution for your Magento 2 website. Perhaps, Hyvä suits your business needs much better. Below, you will find core concerns associated with PWAs:  

• Limited Functionality. At the moment, PWAs are quite limited. While they support some basic functionalities like geolocation, many more advanced features remain beyond their competence. PWAs usually do not work with fingerprint scanning, NFC, advanced camera controls, proximity sensors, audio and video recording, or even Bluetooth. And you will agree that fingerprint scanning may be crucial for an e-commerce app.
• Ready-made Developments. An existing mobile app is one of the main points against PWA. If you already have an application that works well and satisfies your business needs, why do you need to start a new project associated with complex development and additional expenditures? Note that you have to create everything from scratch since converting a ready-made app to a PWA solution cannot be done within a few code lines. However, it is always possible to combine both approaches: a native mobile application and a progressive web app.
• Audience. If your customers don’t use mobile devices to shop on your website, you don’t need a PWA. A good old e-commerce storefront is enough. However, it should be optimized for mobile users who may visit your site. But note that more and more buyers prefer using smartphones to purchase anything online. Even B2B segments are more exposed to this trend than ever before. Still, if you target mobile or desktop users only, there is no need to create a PWA solution. There is always a possibility to use a mobile-friendly theme and an application.  
• In-browser Downloads. The PWA nature forces your store visitors to download your progressive web app right from your e-commerce website. Note that some prospects may prefer app store downloads since they are 100% secure. Thus, you need a mobile application to tether them to your e-commerce website.

Considering the advantages of Hyvä over PWAs and other Magento 2 themes, let’s look at how the Hyvä frontend works.

Hyvä Demo

Below, we demonstrate different sections of the Hyvä Magento 2 storefront.

Home Page

You can create the following home page for Magento 2 with Hyvä:

Category 

A category page on a Hyvä storefront looks as follows:

Product

A Hyvä product page has the appearance as shown below:

Hyvä GitHub

You can also explore Hyvä on GitHub. Currently, there are four repositories available there. 

Magento 2 Hyvä Admin

You can leverage this Hyvä module to create grids and forms in the Magento 2 adminhtml area. The theme lets you do that in the most unobtrusive manner.

Magento 2 Hyvä Checkout

Hyvä’s highly customizable React checkout is completely headless due to GraphQL. It works not only with Hyvä but also Luma and PWA Studio frontends. Another good news is that it is free and open source.

Magento 2 GraphQL Tokens for Hyvä 

Besides, Hyvä offers Customer and Cart tokens. You can use them to enhance the experience associated with the CustomerData sections of your Magento 2 website.

Hyvä Admin Test Module

There is also a tiny test module for the Hyva_Admin module available on Hyvä’s GitHub page.

Hyvä Themes vs. Magento 2 Themes

Hyvä Magento 2 themes are more than that. While most of the existing Magento 2 themes follow the Magento/luma pattern and use Magento/blank as a parent theme, Hyvä follows a slightly different approach. Even Magento 2 themes that don’t inherit from Magento/blank may rely on it as a starting point. However, our hero doesn’t do that. 

Let’s say a few more words about the default algorithm implemented in Magento 2. Magento’s modules use class and ID names to render HTML. The default .less files also leverage them. As a result, an average theme relies on Magento/blank to leverage the work the Magento 2 core team previously did. Consider it an existing neural connection that the brain uses instead of creating a new one. Thus, using Magento/blank is about enhanced efficiency and reduced expenses associated with the time and resources necessary to create a new Magento 2 theme.

Besides, if you have no ideas on what’s hidden behind the Magento/blank theme, you risk breaking Magento’s design by creating a new theme that doesn’t rely on the default one. Since most people think it is unnecessary to reinvent the wheel, we have most third-party Magento 2 themes based on the same default theme.

The irony is that nobody forces Magento developers to use Magento/blank. It is a fact of life that coders don’t want to break things in complex and time-consuming ways. However, there is always someone who breaks the rules to make this world better. 

Hyvä’s Approach

When you preview the Hyvä project for the first time, you will discover Hyva/reset and Hyva/default themes out there. According to Alan Storm, they have a relationship similar to the one between Magento/blank and Magento/luma. Thus, the Hyva/rest theme is a base theme without a parent one and a parent theme for Hyva/default.

At the same time, the Hyva/reset theme and Magento’s blank theme serves different purposes. The former entirely removes Magento’s LessCSS styles to implement a Tailwind CSS-based environment. Besides, it removes all blocks that Magento’s modules place in the base page layouts as well as frontend asset files, including JS and CSS. Consequently, Hyva/reset dramatically reduces the complexity of an average Magento page to render it as a blank skeleton HTML page. As you might have already guessed, it leads to a useless website, while Magento/blank creates a fully-functional storefront. 

At this point, the Hyva/default theme hits the stage. It rebuilds the entire Magento 2 frontend experience page by page and recreates new blocks and templates. HTML, TailwindCSS, and the Alpine.js framework are used.

Thus, Hyvä introduces a completely new approach to Magento’s frontend. Although it incorporates a modern technology stack, the theme perfectly suits the system’s application architecture.

Hyvä’s Improvements

The default nature of Magento’s UI Components system has lots of disadvantages associated with performance bottlenecks. It not only requires tons of JavaScript but loads it inefficiently. Furthermore, this process is hard to optimize. The plethora of components and associated processes slow down the frontend rendering. How does Hyvä address the Magento 2 performance issues? 

The theme switches to Alpine.js, reducing the number of JS files necessary to be loaded per page. While a stock Luma theme makes over 250 network requests on a category listing page, Hyvä reduces the request count to thirteen. Note that some of them are associated with third-party software. The number of requests changes depending on the page complexity. However, the ratio is always huge enough to provide much better performance.

You may argue that Magento 2 also offers the cure for the tremendous amount of requests. Although bundling is under your disposal, Hyvä Magento 2 themes are still better. Bundling in Magento 2 is associated with more work, not the most friendly environment, and several more issues related to various coding aspects.

You may find more information on the default issues of the Magento 2 frontend associated with JS, CSS, and other factors in the following presentation:

[embedded content]

Hyvä Price

Now, there is a possibility to pre-order a license for the entire Hyvä Themes suite. You can do that here: PRE-ORDER: Hyvä Themes License. However, only a limited amount of customers can get early access. Also, note that this pre-order is not binding. It means that you won’t be invoiced until Hyvä reaches you.

As for the price, the Hyvä license costs €1000 without VAT. What do you get for this price? 

The license provides you with access to three major assets:

• Hyvä Themes collection;
• Private Slack;
• Hyvä documentation. 

However, you may spend an additional €500 per year on support and updates. Bear in mind that the first year of updates is provided as a part of the initial license fee.

Pros & Cons of Using Hyvä

Let’s peruse the good and bad aspects of Hyvä. What’s wrong with it? 

• Price Tag. In comparison to an average Magento 2 theme, Hyvä’s price is stratospheric. You may buy a robust Magento 2 template and several useful extensions for this money. 
• New Technologies. You will have to look for specialists familiar with the technologies behind Hyvä. Although it should be familiar for developers who work with other Magento 2 themes, some new challenges are still hidden behind the hood.
• Third-party Extensions. Another drawback of Hyvä is that it doesn’t work with third-party extensions out-of-the-box. However, Hyvä offers compatibility modules to address the issue. For instance, you may leverage solutions for Elasticsuite, Sentry, and Google Tag Manager extensions.

If these two drawbacks don’t confuse you, let’s take a look at the pros of using Hyvä. 

• Reduced Complexity. Below, we’ve illustrated that Hyvä can be way more simple than an average Magento 2 theme. It not only offers an improved developer experience but also enhanced development velocity.
• Better Performance. Due to reduced JS and dependencies, Hyvä introduces improved productivity and fast page load speed.
• Relatively Low Comparative Costs. In comparison to the creation of a theme similar to Hyvä, its existing price tag doesn’t seem so frightening. 
• Hyvä Community. When you purchase the Hyvä theme, you also get access to the Hyvä community via a corresponding slack room. You and your team can recon upon support directly from the Hyvä core team there!
• Wider Range of Specialists. Hyvä opens the Magento ecosystem for developers familiar with TailwindCSS and Alpine.js. Simultaneously, good old Magento 2 coders are also under your disposal due to the reason illustrated above.
• Back to Roots. Alan Storm thinks that Hyvä resurrects ancient traditions, and we completely agree with him. Long before the eBay acquisition, the Magento 2 ecosystem was way more flexible and open. It was built by developers for developers. Now, top-notch specialists are still there, but they have to follow the rules of the huge corporation and the demands of corporate clients. As for Hyvä, its team has taken the project-tested approach and implemented it into the theme. As a result, we have a solution with a developer-friendly working environment, a tool that reminds us of the Magento ecosystem at the beginning.

Current State of Things

Although Hyvä is currently in a limited beta, its full 1.0 release is planned for February 2021. Placing a pre-order right now means that you’ll get on a waiting list until the first version is released. 

Initially, it was planned to introduce the first version of the Default Hyvä Theme in January 2021. However, it was postponed for a month. Additional features should be available. 

If you don’t want to wait, some early access options are at your service. They have limited support and lack several features that have to be developed independently.

Hyvä Links

Follow these links to get additional information about Hyvä Magento 2 themes:

‘