Hyvä Themes: Reacticon 2021 Announcements

Reacticon

Reacticon 2021, a conference for Magento and Shopware frontend developers, was held from October 11th through the 14th. The conference was held online and presented a number of new developments coming out of the Magento community, including headless and PWA storefronts and exciting announcements from the Hyvä team.

In this post, we’ll go over a few of the highlights from the Magento Hyvä Themes announcements and discuss how you might use these technologies to improve your Magento store.

Growth of Hyvä Themes


Since the public release of Hyvä Themes on February 12th, 2021, the project and community have grown considerably.


  • Over 120 live Magento sites
  • Over 300 Magento sites in development
  • Over 950 active developers
  • Over 70 compatible Magento extensions

React.js Checkout for Hyvä

Magento sites using Hyvä themes have significant performance advantages over standard sites based on the Luma theme. The checkout pages, however, typically fall back to the standard Magento or Luma theme and don’t benefit from Hyvä technology. This is because checkout is complex and often has many customizations or third party extensions that require significant development for compatibility and maintenance.


This issue is actively being addressed with a number of approaches, including an all-new React-based checkout that works in conjunction with Hyvä. The checkout uses the modern React Javascript library that runs as a headless checkout application and leverages GraphQL to communicate with the Magento backend.


What are some of the pros and cons that you should consider before implementing the React Hyvä Checkout?


Pros

  • More performant checkout results in a better user experience.
  • More enjoyable developer experience, making it easier to customize the checkout experience.
  • Easy installation and integration with Magento.
  • Works with Luma-based themes and Hyvä Theme.

Cons

  • Does not provide feature parity with the default Luma checkout.
  • Existing checkout customization must be rebuilt and/or made compatible.
  • Limited payment options are available, but more are actively being developed.

Hyvä Checkout currently requires Magento 2.3.4 or higher.

For more information, please see the Hyva Checkout Github repo and documentation.

Magento Page Builder Support for Hyvä

Page Builder for Magento 2 was a significant improvement over the previous CMS provided by Magento. Until earlier this year, Page Builder was only available for Magento Commerce, but is now available for merchants using Magento Open Source 2.4.3 and above.

Since many merchants will choose to use Page Builder to more easily build and maintain their landing pages and other site content, it’s important for Page Builder to work seamlessly with Hyvä Themes, which is why the announcement that Page Builder support will be included in the next Hyvä release is significant.

Providing Hyvä support for Page Builder presented a number of technical challenges. Notably, Page Builder frontend is built using older frontend frameworks/technologies such as jQuery, so to provide support for Hyvä without losing the performance benefits required a rewrite of the frontend components using a Hyvä compatibility module. The end result is a Hyvä compatibility module that offers:

  • Support for all Page Builder content types
  • Retains performance benefits of Hyvä
  • Uses existing Page Builder markup – only recreates Javascript widgets and CSS

Magewire for Hyvä

From a developer’s perspective, perhaps one of the most exciting announcements was the release of Magewire for Hyvä. Magewire is essentially a port of the Laravel Livewire project to Magento 2, which enables fullstack developers a much easier way to develop and support complex and dynamic interfaces.

While many Magento merchants won’t understand the technical details behind this technology, Magewire has the potential to reduce the cost to develop and support more complex interfaces in Magento. This is achieved by Magewire/Livewire’s simplified approach to responding to user interactions and rendering dynamic changes on the frontend. What typically involves complex frontend Javascript code, can now be accomplished by fullstack or even backend developers.

There are limitations to the scalability of the solution in some circumstances, but Magewire has the potential to reduce the cost of developing and maintaining complex product configurators or other highly dynamic user experiences in Magento.

To learn more about Magewire, Hyvä currently recommends reviewing the Laravel Livewire documentation. To learn more about the features covered by Magewire, you can review the Features file in the Magewire repository.

Hyvä UI Components

Finally, the Hyvä team announced an all-new rebrand of the Hyvä website as well as Hyvä UI. Hyvä UI will be a collection of UI components for Hyvä Themes that will provide a much more robust starting point for merchants using Hyvä. Initially, the Hyvä UI will be included in the Hyvä Themes license, but once the component library is more complete they will move Hyvä UI into a separately licensed product.

Initially, Hyvä UI includes mega menu components that can be used to simplify the creation of more complex navigation menus, but more components will likely be released soon. 

A demo of the new mega menu UI components can be found here.

Summary

Reacticon 2021 was packed with helpful information for Magento developers and exciting announcements for anyone interested in using Magento as the foundation for their storefront.  The latest Hyvä Themes developments will further help existing and new Magento merchants create high-performing sites and engaging user experiences.

If you’re interested in a demonstration of Hyvä or learning more about how Hyvä and related technologies can improve your Magento store, please contact us today!

Recent Posts

Receive Email Updates