by Benoit, Front-End developer at Agence Dn’D
Since the announcement of its development during the Reacticon conference and the release of its first version on February 12, 2021, the Hyvä solution has not ceased to be talked about and to gain momentum in the E-Commerce ecosystem. It must be said that this brand new theme developed for Adobe Commerce (Magento Commerce 2) has serious assets with remarkable performances, including a modern technical stack and a great implementation simplicity. All these qualities, like the PWA solutions, open new perspectives and allow to answer e-merchants new needs.
Before going into the solution details, let’s take a quick look at the operating forces !
Adobe Commerce (Magento Commerce 2) native themes and their limitations
With the release of its second version on November 17, 2015, Adobe Commerce (Magento Commerce) has acquired two front-end themes (Luma and Blank) extremely complete compared to the theme offered through its version 1. Indeed, these themes are based on perennial and proven technologies (Less, jQuery, jQuery UI, RequireJS, Knockout.js, etc.) allowing the development of complex and customized interfaces while preserving a great stability. The native themes also benefit from an architecture based on a inheritance principle, allowing to extend the application possibilities by relying on community modules, which will easily come to be integrated into the website and thus enrich its functionalities.
Although it corresponds to many online stores needs, the native Adobe Commerce (Magento Commerce) front-end stack suffers from certain limitations that prevent it from being fully effective in certain projects, with high technical complexity and high stakes (performance, user experience, etc.). The large number of its dependencies, as well as their weight, can represent an obstacle when it comes to achieving optimal performance. The complexity of its architecture also requires very specific skills that are not suitable for all developers.
Finally, the technologies on which Adobe Commerce (Magento Commerce 2) themes are based (as efficient as they are) have progressively lost ground and appeal to more modern libraries and frameworks such as React.js, Webpack, Sass, etc.
PWA promises
Native themes limits and Adobe Commerce (Magento Commerce 2) latest advances (including the arrival of the GraphQL support with version 2.3) have allowed the growth of PWA solutions (= Progressive Web App). This type of application allows E-Commerce platforms to benefit from all the features of a native application, a quick installation, an offline navigation and an excellent user experience on mobile.
E-Commerce PWA applications are based on an Headless architecture, whose particularity is decoupling the view from the business logic using APIs and thus gain agnosticity, flexibility and scalability.
Solutions such as Vue Storefront, PWA Studio or Front-Commerce have gradually emerged since 2018 to meet these new needs. A large number of projects have been developed on these technologies since the arrival of these new solutions and this has helped to raise the user experience to levels still unmatched until today.
Despite its many strengths, an PWA application will not be suitable for all projects, especially because of its architecture complexity. Therefore, it is sometimes preferable for the e-merchant to keep a so-called « monolithic » application.
The HeadYes approach
Hyvä solution proposes a third way : the « HeadYes », a concept recently theorized by Salvatore Capritta (Adobe Commerce certified developer – CTO of Synthetic Lab). Contrary to an PWA application, this approach keeps the Adobe Commerce (Magento Commerce 2) native architecture and capitalizes on its strengths, namely the layout system, routing, the cache system, etc. On the other hand, it compensates the limitations of its view by proposing a completely rewritten theme whose mission is to replace the native themes of Adobe Commerce (Magento Commerce 2) which are Luma and Blank. Thus, there are two new themes that manage the Adobe Commerce (Magento Commerce 2) view :
- « Hyvä reset », whose function is removing the native front-end various elements and dependencies,
- « Hyvä default », which adds the theme graphic elements.
Hyvä philosophy is to rely on technologies natively supported by web browsers, in order to limit dependencies as much as possible to achieve very high performance and improve both the user experience AND the developer experience.
To do this, Willem Wigman, its creator, chose to draw inspiration from the « TALL stack » used in the Laravel framework ecosystem and which is highly popular with developers. Renamed « TAM stack » for its Adobe Commerce (Magento Commerce) version, this stack is composed by the following technologies :
- Tailwind CSS : a customizable CSS framework, based on the utility classes principle which will be used to create the theme graphic style,
- Alpine.js : a JS framework allowing to dynamize site elements,
- Magento Commerce 2.
In addition, just as the « HeadYes » approach facilitates developments by simplifying the architecture, the « TAM stack » guarantees a high degree of customization while remaining extremely light. These two essential characteristics offer many advantages to Hyvä :
- Top performances (load time, responsiveness, etc.),
- Faster production times,
- Lower costs (licensing and hosting),
- Better user experience.
Hyvä : an ambitious solution !
In just a few months, Hyvä has become an extremely attractive alternative to PWAs and classic B2C sites. This is evidenced by the Adobe Commerce (Magento Commerce) community growing enthusiasm, the numerous websites already in production or under development, the number of agencies already using the solution and even the interest shown by Adobe (publisher of Magento Commerce). The project can rely on the work of Willem Wigman, as well as on the support of the agency Integer_net and other partners of the solution who contribute to the code while bringing their expertise.
With an ambitious roadmap, the solution already covers all the Adobe Commerce (Magento Commerce 2) features and is already moving towards version 1.1.3. A large number of connectors are also being developed to quickly make Hyvä compatible with the most popular community modules. Finally, Willem Wigman plans to create a library of ready-to-use UI components based on Tailwind CSS and dedicated to the theme.
Hyvä has all the cards in hand to become a key player in the Adobe Commerce (Magento Commerce) ecosystem.
No doubt its intrinsic qualities will allow it to bring a new breath to E-Commerce !
To go further
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 !