The Adobe Commerce (Magento Commerce) Javascript stack is a stack of librairies (KnockoutJS, Jquery, RequireJS, UI Components…) which brings a great complexity and little flexibility. This also impacts the E-Commerce websites performance, in the sense that it’s necessary to load a large amount of Javascript data in the pages, which will be very little used at the end. Hyvä is a tool that considerably simplifies this process since it uses only one Javascript library: Alpine.js. This allows your technical teams saving a lot of time and designing developments in a more pleasant way.
Hyvä was officially launched on February 12, 2021. Some agree that Hyvä is the Luma version e-merchants wish Adobe Commerce (Magento Commerce) had built. Others believe that Hyvä is THE prime monolithic front-end for creating high-performance and scalable online stores. Specialized in E-Commerce, Dn’D is an historical Adobe Commerce (Magento Commerce) partner. Based on our experience in supporting e-merchants and on our technical expertise, we would like to help you understand why Hyvä is a tool that you will have to rely on in the coming months and even years !
Hyvä presentation
Hyvä has its origins in an experiment conducted by Willem Wigman. This turned into a prototype which was adopted by his employer : integet_net, a digital agency located in Germany, specialized in Adobe Commerce (Magento Commerce) E-Commerce websites creation. Today, Hyvä is a fully owned company, managed exclusively by Willem, and is growing considerably thanks to regular contributions from integer_net. As part of an ongoing effort, integer_net is the main technical partner for all Hyvä products. These products enable e-merchants to design an optimal front-end experience for Adobe Commerce (Magento Commerce 2). They include :
- Hyvä Reset : a module which removes all native templates from Adobe Commerce (Magento Commerce).
- Hyvä Themes : a themes collection built with Tailwind CSS, Alpine.js and Adobe Commerce (Magento Commerce) « TAM Stack ». The « TAM Stack » is a term invented by Willem Wigman, inspired by the « TALL Stack », used in Laravel framework ecosystem. The « TAM Stack » consists of Tailwind CSS, Alpine.js and Adobe Commerce (Magento Commerce 2) : we talk about it in another article ????
- Hyvä Checkout : an highly customizable checkout system for Adobe Commerce (Magento Commerce) built with React.js (there is also another module to fallback on the native checkout).
- A set of add-ons to ensure Hyvä’s compatibility with third-party modules.
Hyvä themes are Adobe Commerce (Magento Commerce 2) themes built from scratch, using a completely blank theme. In order to do this, all ‘layout.xml’, .’phtml’ and all ‘JavaScript’ files were removed, allowing them starting from scratch to build a performance-centric user experience. Hyvä themes have only two default dependencies : Tailwind CSS and Alpine.js. Here are some examples of Adobe Commerce (Magento Commerce 2) online stores built with Hyvä :
What are the Hyvä contributions compared to the current Adobe Commerce (Magento Commerce 2) themes ?
—
First of all, it should be noted that the default nature of Adobe Commerce (Magento Commerce) UI component system has some strengths but also some drawbacks. Not only it requires a lot of Javascript, but it sometimes loads them in a way that is not always the most optimized. Moreover, this process is difficult to improve. The plethora of components and associated processes slow down the front-end rendering.
Hyvä solves these performance issues in Adobe Commerce (Magento Commerce 2) through several ways : the theme runs through Alpine.js only, reducing the Javascript files number which needs to be loaded per page. While a standard Luma theme makes over 250 network requests on a category list page, Hyvä reduces the number of requests to 13. Note that some of these are associated with third-party software. The number of queries varies, depending on the complexity of the page. However, the ratio is always large enough to provide much better performance.
You are probably thinking that Adobe Commerce (Magento Commerce 2) still holds an advantage in terms of managing the requests amount. Although Adobe Commerce (Magento Commerce 2) bundling is at your disposal, Hyvä themes on Adobe Commerce (Magento Commerce 2) are more optimized. Indeed, Adobe Commerce (Magento Commerce) native bundling requires an analysis of the JS in place and optimization time, while this is native on Hyvä side, thanks to the technology and architecture used.
What is Hyvä’s technical positioning ?
Hyvä uses many tools from the Laravel ecosystem. Laravel is a great example of a PHP ecosystem that is innovating and thriving at an incredible pace. Hyvä’s technical team currently uses Tailwind CSS and Alpine.js to build high-performance, fast and flexible front-end themes for Adobe Commerce (Magento Commerce 2). Although Hyvä uses a modern front-end stack, there are still many classic Adobe Commerce (Magento Commerce 2) front-end elements which will be familiar to anyone who has experience with native Adobe Commerce (Magento Commerce 2) themes (Luma and Blank). Clearly, Hyvä’s technical team uses everything that adds value and gets rid of the elements they consider cumbersome (Knockout / Require / jQuery / JS libraries).
All Hyvä products are built with the goal of reducing library dependencies and achieving the best possible performance. The tool’s developers try to keep the complexity to a minimum in order to reduce the code point.
When you are previewing an Hyvä project for the first time, you discover the Hyva Reset and Hyva Default themes. According to Alan Storm, these two themes have a similar relationship to the one which exists between Magento/Blank and Magento/Luma. Therefore, the Hyva/Reset theme is a base theme with no parent and a parent theme for Hyva/Default. At the same time, the Hyva/Reset theme and the blank theme for Adobe Commerce (Magento Commerce) serve different purposes. The first one completely removes LessCSS styles from Adobe Commerce (Magento Commerce) to implement a CSS environment based on Tailwind CSS. Furthermore, it removes all the blocks that Adobe Commerce (Magento Commerce) modules place in basic layouts as well as front-end asset files, including JS and CSS. As a result, Hyva/Reset greatly reduces the complexity of an average Adobe Commerce (Magento Commerce) page. Hyvä introduces a completely new approach to the Adobe Commerce (Magento Commerce) front-end and although it integrates a modern stack, the theme fits perfectly into the Adobe Commerce (Magento Commerce) application architecture !
What are the Hyvä advantages for developers and e-merchants ?
As you can see, Hyvä offers a lot of advantages for e-merchants, both on the developer side and on the customer side. Let’s discover some of these advantages together.
For developers :
-
- Hyvä reduces expenses and allows developers concentrating their efforts on the front-end. As a result, development speed is higher. According to Peter Jaap, founder of the E-Commerce agency Elgantos, Hyvä makes it possible to build online stores twice as fast as with the standard Magento Commerce front-end. Thus, Hyvä provides an optimized and less complex development experience.
-
- Developers will find that, by using Hyvä, they can work with skills which are familiar to them (xml layout, blocks and phtml files…) They will not be disoriented and will carry out their developments essentially with the tools they already use in Adobe Commerce (Magento Commerce 1 and 2), but with all the unnecessary complexity removed from the front-end. This induces a simple and fast handling of the tool !
- To date, 75 digital agencies have chosen to work with Hyvä and this, only 1 month after its launch. According to Willem Wigman, a real community has been built around Hyvä and experienced developers are participating in the evolution of the product. Reactive and dynamic, this community is growing day by day !
For e-merchants :
-
- Hyvä is a ready-to-use tool that can be easily deployed. By using it according to best practices, you will observe an optimization of production time, which will allow you to realize significant cost savings and reach better profitability thresholds in the implementation of your E-Commerce projects.
-
- Hyvä provides a clear, simple, responsive and fluid navigation on all devices. By choosing to adopt Hyvä, you optimize the web accessibility of your site and ensure equal access to all your users, even those with disabilities.
-
- According to PageSpeed Insights, websites developed with Hyvä have excellent SEO results. This is a decisive advantage for e-merchants who want to achieve high visibility on the web.
- The loading speed of an e-commerce platform plays a fundamental role in the user experience. A study conducted by Kissmetrics reveals that 79 % of online shoppers say they will not continue browsing a website which takes too long to load. According to the same study, an estimated 40 % of visitors leave a website if pages take longer than 3 seconds to load. The performance gains offered by Hyvä allow e-merchants to obtain platforms whose pages are displayed in only a few milliseconds and therefore reaching higher conversion rates !
Conclusion
One of the most interesting features of Hyvä is that this tool is close to front-end developers expectations and needs, but also to the consumers, by significantly improving their browsing experience. The tool has been developed with a hands-on approach and the Hyvä team has used its experience in building Adobe Commerce (Magento Commerce) websites to transfer it to this theme. It is a software built by experienced developers which will allow e-merchants basing their entire online sales activity on a robust technological foundation, with the aim of increasing their business performance and achieving all their growth objectives.
The Hyvä team has the ambition to create an UI library for Adobe Commerce (Magento Commerce 2). Until then, feel free to check the following links in order to discover the whole solution :
At Agence Dn’D, we are confident that Hyvä will have a lasting impact on the Adobe Commerce (Magento Commerce) ecosystem.
What do you think about it ?
Do you want to implement Hyvä on your Adobe Commerce (Magento Commerce) platform ?
As a certified Adobe Commerce (Magento Commerce) agency, Dn’D can assist you in your E-Commerce website consulting, design and maintenance. Contact us via the form below to implement Hyvä within your online store !