Is Hyvä the new frontier of Magento frontend?
Monsoon Consulting prides itself on being an industry leader, and experts in all things eCommerce. As part of this we are always looking out for new modules and themes that can enable us to provide better, more flexible, and unique experiences for our clients. And in doing this we often partner with or function as suppliers for third party tools that we trust and believe in. Believe it or not our very own Tadhg Bowe even wrote about this in a past blog post. Recently we decided to start offering the Hyvä Magento 2 theme to our clients.
Why Hyvä?
Well Hyvä offers the ability for our clients to remain using Magento and its powerful backend tools, while reducing the complexities and allowing for an improved performance and frontend capabilities. While the majority of Magento themes available on the market use the default Magento stylesheet as it’s basis, Hyvä sets itself apart by being one of the only, if not only, Magento themes that do not do so. And in doing this they were able to build a theme that only relies on 2 dependencies, TailwindCSS and AlpineJS. Hyvä is at its core a complete rebuild of the Magento frontend which uses a proven technology stack that still fits within the confines of the Magento 2 application architecture.
Reduced complexity and increased performance
Hyvä has managed to greatly reduce the complexity of its theme and overall increase its performance by optimising their use of JavaScript through AlpineJS. How do they do this? Well let me explain. The current Magento UI component system is created in a manner that requires a large amount of JavaScript to be loaded, which causes the frontend rendering to be slowed. The JavaScript resources required, combined with other needs can quickly overwhelm the filesystem, greatly slowing down everything. However, by switching to AlpineJS, Hyvä is able to drastically reduce the amount of JavaScript files loaded per page thus increasing performance.
Hyvä opens the Magento gates
What do I mean when i say this? Well, due to Hyvä’s use of AlpineJS and Tailwind CSS, developers who are used to working with these systems are able to expand into the Magento practice by joining teams that already specialise in Magento. These developers would no longer need to learn new languages as used in traditional Magento. Or alternatively, whole teams that specialise in these languages are able to expand their own practice into Magento. Through this the standard of Magento solutions created is able to rise, as is Magento’s use and reach.
An alternative to traditional PWA
We’ve talked recently about PWA’s (Progressive Web Applications) and how 2021 may be the year to develop your PWA site. Now before I say anymore let me just clarify that Hyvä is not a PWA. Most PWA’s are “headless”, allowing for them to run faster than server rendered websites. Hyvä is a server rendered website. But despite this it is faster than any available headless PWA on Magento, VueStorefront, PWA Studio, ScandiPWA etc. Essentially Hyvä is fast! And the best bit is that you can make a server rendered website a PWA. How do you do that? It is done through the use of some nifty coding modules, such as our very own SeviceWorker module, which we used to turn our apex Magento 2 accelerator solution into a PWA. Hyvä acts as a bridge between traditional eCommerce stores and PWA’s so that businesses can keep Magento at the heart of their operations while reaping the benefits of all the above.
Easing the pain of Design handovers
Hyvä’s use of TailwindCSS can also aid in the design handover process. Often when we hand over our designs to the developers we do so through predominantly visual means that they then need to recreate by customising pre-existing components as per our designs. However, rather than having to customise and rework existing UI components as is the case for traditional themes, Hyvä’s use of TailwindCSS means that there are no built-in UI components and so instead of customising existing elements, the CSS classes are generated following the submitted Tailwind configuration file.
