Reacticon 2021 Summary

Reacticon 2021 Summary

Testing Magento 2 with Cypress

On the first day (11. October) Peter Jaap Blaakmeer gave a presentation on testing Magento 2 with Cypress. Even though his talk was not strictly related to Hyvä, he used the Hyvä demo site for a test subject in his presentation.
He announced that Elgentos will be releasing a base suite of tests as free open source that can be used as a smoke testing suite, and also can be a base to build on top of.
We hope to use this to improve the overall quality of Hyvä going forward, too.

[Cypress for Magento 2 slides]

Review since the launch of Hyvä

The 14. October was all about Hyvä.

Since Hyvä was announced at Reacticon 2020 one year ago, it was fitting the day started with a review by Willem and Jisse covering all the achievements that were unlocked since then.
In a nutshell, since the public launch in February:

  • 200+ agencies
  • 1200+ members on Slack
  • 950+ active developers on Gitlab
  • 300+ shops being built (124 live according to builtwith, with a handful of staging/demo)
  • 70+ compatible modules/extensions

Active contributions from members
The Hyvä theme feature coverage for Magento Open Source is almost complete, and a number of commerce features are already supported, too.
The team grew to 4 full time members (Willem Wigman, Vinai Kopp, Willem Poortman and Frank Soeters).

Integrating the Tailwind JIT compiler in the Magento Admin

Next up I got to talk about some work I have been recently doing on enabling the use of Tailwind CSS classes in CMS content added in the Magento Adminhtml.
This talk was a technical deep dive into the underlying problem of using Tailwind CSS in content stored in the database, and some of the challenges encountered while implementing a solution.
The feature is currently available for CMS Blocks, CMS Pages, Product Descriptions (& short descriptions), and Category Descriptions. It supports both the WYSIWYG editor as well as PageBuilder.
The extension’s API was designed in a way that it can also be used for custom content elements.

[Integrating the Tailwind CSS JIT compiler in the Magento Admin slides]

The new react checkout for Hyvä

Rajeev Tomy and Fabian Schmengler from our partner agency integer_net presented the new react checkout, which has undergone several iterations until it now finally has reached release candidate status.
The presentation covers the current state of checkouts for Magento, and then they demo the impressive feature set of the new React checkout.
They cover the development setup, customization and how to create a production build, which weights in at under 90KB!
At the moment PayOne (by webvisum and integer_net) and MultiSafepay (by MultiSafePay) integrations already exist, with several more already being developed.
The code is openly available on github, and you are invited to get involved!

[The new react checkout for Hyvä slides]

Integrating PageBuilder and Hyvä

John Hughes (Fisheye Media) presented an updated version of his presentation on how he made the native Magento PageBuilder compatible with Hyvä.
He covers the challenges he faced and the process he followed, and which features are covered by the compatibility module.
I personally realized I really enjoy talks that discuss the pros and cons of solutions, and why one solution was chosen over another.
Note: PageBuilder compatibility will be merged into Hyvä Themes with the next release.

[Integrating PageBuilder and Hyvä slides]

Adding CSS frameworks like Fylgja to Hyvä

Ever since Hyvä was released, a surge of inventive new energy can be observed in the Magento ecosystem. Sean van Zuidam is a passionate friend of CSS, and believes that Tailwind CSS is not the end all for styling. He created a CSS framework that can be applied on top of Hyvä to allow using native CSS in addition to utility styles.

[Adding CSS frameworks like Fylgia to Hyvä slides]

An exciting new technology that Willem has been working on (aka Magewire)

Our very own Senior Solution Engineer Willem Poortman presents the next talk of the day. He starts with his journey with Magento, and how it brought him to the current place he is at, presenting a port of Laravel Livewire for Magento, dubbed Magewire!


He has released the library as open source, and I’m sure many fun and exciting new features will be built on top of it.
In the talk Willem gives an introduction to what it takes to build a Magewire component and shows many examples he built and also released as open source.
If you are looking to learn about Livewire, Willem recommends the Laravel Livewire documentation. For more infos on the features covered by Magewire, check out the Features file in the Magewire repository.

[Magewire presentation slides]

Panel Discussion about Magewire

After Willem Poortmans presentation, Willem Wigman, Jisse and Vinai Kopp join the call and discuss the possibilities opened up by the new Magewire library, and how it might be used as part of Hyvä Themes in future.

Hyvä Product updates and roadmap (and surprises)

This session probably was the most anticipated of the day. Willem W. takes the stage to present what’s upcoming in the Hyvä Ecosystem.

First, the documentation will be opened up to the public. This will help merchants and developers evaluate the Theme before purchasing a license.

The next announcement was that a purchasing power parity program will be introduced, to allow merchants from countries with less strong currencies to participate in the Hyvä revolution. This will level the playing field. The program will use the Big Mac Index to determine a discount for a Hyvä license for merchants based on their countries currency. To be entitled for the PPP program, the merchant's country is used, not an agency or other third party. This will avoid agencies abusing the discount to undercut competitors from countries with a stronger currency. We want to keep things fair.

Next Willem showcased the first two Hyvä UI widgets, which happen to be mega menus. They are CSS only with only a little bit of JavaScript that progressively enhances the behavior.
A big focus of the menus is that they can be customized and reused in many different ways.
Many more Hyvä UI components are being developed and will be released soon.
At this time the component library is included with a Hyvä license, but once the component library reaches a mature size it will become a separate product to be purchased individually.

Not every content manager can handle the freedom given by a CMS like PageBuilder. Such open tools need to be used with restraint so a site does not look cobbled together or performance is impacted.
Because of that a more restrictive content management solution can be a better solution. Magento Widgets have often been overlooked. The US based Hyvä partner agency Bemeir contributed a flexible widget system, which templates can be customized to ensure a consistent look and feel for any given site. The Hyvä widgets will be released soon.

Probably the biggest surprise of the evening was the announcement of a new Magento checkout based on the Magewire library Willem Poortman announced earlier.
During the announcements he joined the session again to demonstrate and show details on what already exists.
The Magewire checkout will be the most easy to customize and extend checkout for Magento for PHP developers, and will be a commercial product for both Hyvä and Luma based Magento stores. Since the announcement we already have received several requests, so we know many are very eager to start building on top of it.

Finally, a fresh new branding and design for the Hyvä website will be launched soon. Bye bye nerd look, hello professionalism. This update will make it easier for partners to sell Hyvä to merchants. Also we are very excited to have nice looking things :)

Besides all these new announcements, Willem shared the next steps for the product road map, which include completion of the Magento Open Source feature coverage and further coverage of Commerce features within the next months.

So that leaves us to get back to work and get all these nice goodies out into the world to you. I for one can’t wait to help make it happen!

Share