My Reacticon 4 summary

First of all, thanks to the sponsors

First of all, I would like to thank all Main Sponsors, being ShipperHQ, Akoova, Hyvä and Shopware. Also, we are grateful with our Support Sponsors: GoMage, MaxServ and Splended. And finally we are also proud to have had the following community sponsors: Adobe, Magento Association and ExtDN.

Second of all, thanks to the team

And definitely not less important, I would like to thank everyone in the Yireo team. Without you, this event would definitely have been undoable to create. Thanks Ruud van Zuidam and Sean van Zuidam - your continuous support and enthousiasm keeps pushing us to new heights, even though you are being barked at by me. Also, I was extremely proud to have you both pop up as a presenter. Well done!

I would also like to thank Janet Iljas for all her help in the background. And Ruben Creemers for the graphical designs - people loved the animals! Finally, Reacticon was streamed live from my living room, which forced Suzan and Sophie out: Thanks for being flexible. And Philou (the cat), thanks for not bringing mice back home during the livestreams.

Day 1 - Misc

After kicking off the day, Roy Duineveld was the first speaker of the event, presenting on his Rapidez: A great way to use Laravel as an alternative frontend. Not only great because of the usage of the Laravel coding API, but also because of the resulting speed. Last year at Reacticon 3, Michiel Gerritsen also showcased something similar, but he never meant to turn it into a real product. But Roy and his team did and the results are promising. I'm really eager to do some coding with Laravel again soon and perhaps, Rapidez could be added to my personal toolbox. (And yes, LiveWire will be part of that toolbox too.)

After this, Ruud van Zuidam and I walked through various Luma optimizations, like MagePack, Breeze, WebP and others. The talk felt like an obligation to all that are still stuck on Luma. The rest of Reacticon showed the right way forward: Drop Luma, use something better.

Filip Rakowski presented one of those options - Vue Storefront. His talk was mainly about the current state of the Vue Storefront 2 project, composable commerce and new products (among which a VSF Platform and the VSF Gateway). But after that, Heitor Ribeiro showed off the new Magento 2 integration. Being based on Vue Storefront 2 (thus Nuxt, thus Vue with composition API), I really feel that this is the right way forward and I will be working on this myself towards the end of the year, perhaps also turning this into a live or on-demand training. By the way, congratulations to the Vue Storefront team for raising funding to enhance the project even more.

Peter Jaap Blaakmeer followed up with a talk about Cypress and Magento. He also announced a Cypress repository for Magento with handy reusable tools and tests. In the past, I created a similar thing (I guess) with Codeception. But Selenium (and therefore Codeception) are dead to me. I'd rather go the Cypress way. I've been using Cypress for some time now already. Like Peter Jaap said, use it and you will love it. Stay tuned for more news on the Cypress repository of Peter Jaap and also note that he is going to release a video course on using Cypress successfully!

Next up, Bartek Igielski explained why he hates AlpineJS. Well, he had much much more to say, mainly also presenting the Next version (capital "N" is required) of Alpaca. Alpaca offers a great alternative to Luma but also Hyvä. And the main beauty here is that it shows that there are more alternatives out there: Every approach of CSS and JS is opinionated. So why not form your own opinion, like Bartek does? He also mentioned a couple of JS frameworks like petite-vue and AstroJS that I didn't know about and I'm definitely going to look into them.

Finally, Travis Bernard had an inspiring talk about how he and his team dived into hexagonal architecture and nano-apps and replatforming and React.lazy and Bob Ross. I loved his talk, which seemed non-technical at first, but actually went quite in-depth and showed a possible path for extension developers (amongst others) to integrate their logic in multiple platforms like Magento and Shopware. If you didn't see this talk, you should definitely watch it back later.

Day 2 - Shopware

The second day was dedicated to Shopware, yay! The day started with Ben Marks and I having a chat. At first, Ben was reluctant to be there: He no longer seems himself as a developer perse and what value could he add to a developer conference like Reacticon? He was wrong, his presence was actually a clear message. Him hopping from Magento to Shopware was a personal decision. I've done the same thing (though I'm still very much part of the Magento ecosystem). And others are considering replatforming as well. Ben and I concluded that this is not evil, it is natural to change your life once in a while. Even better, it is healthy as a tech person to change perspective once in a while. And with that, the chat with Ben touched upon the very essence of Reacticon: Diversity is a good thing.

Next up, Dominic Klein took things into a more technical direction: He pondered on the possibilities of Shopware PWA as being more than just a shop-building tool. It could also be used to create satelite-sites, highlighting specific products - all based on Vue and composables to allow for faster prototyping. He also revealed a project he has been working upon: Guided Shopping, where a direct communication between the customer (using the PWA) and the Shopware backend (via an external service based on Mercure) could allow for remote assistance and suggestions on the shopping flow. Really exciting features are ahead of us.

Kore Nordmann of Frontastic then joined with a broader story on how composable commerce could be the right path forwards with e-commerce. His company developed Frontastic, a backend for frontend tool, sitting in between the PWA-side (React, Vue) and Shopware, allowing for cool features like widget creation by non-tech people, dynamic pricing and much more. His talk was not just about his own tool but simply gave insight on where to take things next.

After Kore, Christian Dangl joined the stage - with an awesome OBS setup - explaining how Continous Integration could improve the frontend was easy steps: Cypress was already mentioned by Peter Jaap the previous day, but CI/CD could also catch bugs early in the deployment process by various linting tools and unit testing (like with Jest). His talk focused more on plugin development, but applying everything to a custom project would be just as easy. Testing is simply not just for backenders.

Next, I joined the stage with a scenario in which a Shopware plugin added a little configuration in the Administration, allowing you to set a specific CMS Page (aka Shopping Experience). Next, via a Config class and a service decorator, this configured CMS Page ID could be fetched using Shopware PWA to display that content in any Vue slot of your liking. No point to be made here, just a nice example of how cool the combination of Shopware backend and Shopware PWA could be. The source code can be found here.

Ramona Schwering was next with an outline of how to get started with Cypress testing under Shopware. Her talk was complementary to the talk of Peter Jaap Blaakmeer on day 1 (or vice versa). And they are aiming to work together on a video course about Cypress - cross fingers. If you liked the clear explanation that Ramona was giving, make sure to be on the lookout for that course.

The last speaker of the day was Björn Meyer, who watched Willem Wigmans his Hyvä announcement of Reacticon 3 last year, and was eager to try to build a Tailwind / Alpine theme for Shopware 6. The end result is really promising and during his talk, he went into various aspects of its setup and inner workings. The theme is already offered on GitHub but still needs work. Any enthousiast that is happy to collaborate with Björn is invited to join. But it is not a copy-click solution. It requires effort to convert Twig templates to the Tailwind output of your liking. And likewise various JS plugins could need some work (by rewriting it to Alpine or VanillaJS). But it is there. And it is working. Plus, I'm really happy to see how Shopware devs can be inspired by the work of Magento devs and the other way around. That's what Reacticon is about.

Day 3 - Magento PWA Studio

The third day was all about PWA Studio. The day was opened up with me chatting to Dave Macaulay, chief engineering of the Magento PWA Studio - sorry, Adobe PWA Studio team. Dave came up from the PageBuilder team, he actually worked for Gene Commerce who created the initial Bluefoot CMS, and then moved over to the PWA Studio team for more of a managers role. Apart from the chitchat about PWA Studio, Dave also invited us all to his parents home in Brighton, UK. So let's do this - project X.

After the start of the Day with Dave, Olena Tkacheva came on stage. She is the product manager of PWA Studio and she outlined the strategy ahead and what kind of things to be expecting soon. PWA Studio 12 will be out soon and it marks the completion of yet more features. Exciting is also the announcement of an integrated SSR solution, which deprecates the UPWARD approach. Interestingly enough, in her slides, Olena referred to three stages - the monolithic stage, the decoupled stage (where Luma is deprecated, PWA Studio and GraphQl are introduced and the core is being refactored for further decoupling) and the headless stage (which we are slowly working towards). In that final stage, Luma is not only deprecated but removed entirely from the overview: This is to be expected and it does not say anything about what parts of the code will actuallly be removed from the core. But still, I found it to be refreshing to no longer see Luma in a description of the Magento stack.

Next, Lars Roettig came on stage, he made it though having a bike accident earlier that day. His talk outlined everything that you need to know to enhance the performance of a React application (like PWA Studio): React lazy loading, memoization and bundle sizing. Definitely recommended if you're new to React and wonder about Lighthouse scores.

The next speaker never spoke that much on conferences: Jimmy Sanford, one of the main architects of PWA Studio, always stayed in the shadows and therefore, I'm really proud to have had him as a speaker at Reacticon 4: He revealed a new proposal for themability based on Tailwind. Not just a plain implementation but shipped with some magic to allow for including those CSS utility definitions that are used by the active React components. It will not be included in PWA Studio 12 (expected on October 18th) but is definitely exciting stuff.

Chris Brabender spoke next on PWA Studio targetables. They are often misunderstood and seen as complex. True, but in Chris his talk, he underlined the usecase of experienced developers exposing targetables to junior developers to make life easier. Also, thanks to the target interception API, Venia is not just a component tree that could be overwritten and modified, but it becomes extensible as well: Something that is not done to my knowledge anywhere else in the React ecosystem (but my vision might be narrow). Anyway, Chris outlined the usage of various hooks, wrappers, interceptors and targetables. And with that, it was definitely interesting to anyone willing to start with PWA Studio.

Chris was followed by Yuriy Protsiuk and Vasilii Burlacu (both from GoMage) to talk about their widgets that they built on top of PageBuilder. It sounds simple but it's not: They actually built an alternative to the current PageBuilder setup, which allows for easier creation of widgets and allows for more customization on the PWA side. Furthermore, they built a tool to import and export widgets from the Admin Panel, so that widgets become interchangeable across multiple Magento instances. Very cool stuff and it definitely shows how flexible the architecture of PWA Studio is.

Next up, Justin Conabree dived into the perceived performance of PWA Studio, which specifically circled around preventing layout shifts by using shimmering. But that shimmering was more than just creating some dummy divs: By hooking into React routing, he and his team were able to predict page types, hook into UPWARD PHP for specific details and explore the entire topic of shimmering in-depth. Perhaps his talk was all about one single performance trick, I actually found the talk to be extremely useful because of his live coding: Seeing him fly through various parts of PWA Studio code, really helps newcomers understand the architecture better. Kudos.

Finally, the day was ended with a panel discussion together with Eric Erway, Dave Macaulay and Olena Tkacheva - all three from Adobe. And Lars Roettig. Various points were picked up upon, like the knowledge required to start with PWA Studio, the meaning of the announced open source distribution (formerly known as the fork) by the MOSCA group, deprecating Luma, the complexity of PWA Studio and much much more. It was not just a marketing talk but definitely dived into a couple of pain points, so is worth checking out.

Day 4 - Hyvä

And then finally, day 4: The Hyvä day. Willem Wigman and I opened up the day, but then Willem quickly stole the mic to review what has happened to Hyvä, since the official release at Reacticon 3 last year. Simply put, Hyvä grew exponentially, showing that the community really was in need for a Luma alternative other than PWA. The number of features supported by Hyvä is already staggering and third party extension support is growing as well. Checkout the slides for the full story, because it is too much to mention here.

Hyvä started with one man: Willem. But now the team has expanded with Vinai Kopp, Willem Poortman and Frank Soeters. After Willems opening talk, Vinai gave insight into how the newly added Tailwind JIT compiler was added to the Hyvä stack to allow for better support from PageBuilder and other CMS parts in Magento.

Next, Fabian Schmengler and Rajeev Tomy took the stage to announce their work on the Hyvä Checkout aka React Checkout module. The React app has reached an RC stage but will be released as stable in weeks time, as soon as some last bugs are crossed off the list. The React checkout looks great, performs great and allows for a lot of customization: Not just with Hyvä but also as a headless solution or with Luma legacy themes. It shows also how "Hyvä-related tech" could help non-Hyvä developers as well. I love the work. If you love React, you'll love this too.

John Hughes presented his integration of Hyvä and PageBuilder. He worked at it before PageBuilder was made open source, but now that it did (so that every Magento shop owner is able to use PageBuilder for free, making it perhaps the de-facto CMS for Magento) his work has become even more relevant.

Next, Sean van Zuidam came up on stage. He's part of the Reacticon event team (and thus Yireo team), but also works for a Dutch agency and worked in his freetime on a CSS framework Fylgja. Now that Hyvä came out, he started to work on integrating Fylgja with Hyvä, which basically also led to the removal of TailwindCSS from Hyvä. That might sound stupid, but not everyone is a fan of TailwindCSS. In a baffling short amount of time (8 hours or less) he was able to remove Tailwind, add in Fylgja and rewrite all PHTML templates required. It shows hopefully that Hyvä could be used with other CSS frameworks (Bootstrap, Buma, Material, Foundation) as well, without loosing the other tech included in Hyvä (reset theme, Alpine scripts, checkout, compatibility modules, etc etc). Really great stuff.

And then, the buzz got real. Willem Poortman joined the livestream to talk about what he had been working upon for months: A port of Laravels LiveWire, called MageWire. If you know about LiveWire, you might got hyped by this announcement already. But if you don't know LiveWire, do checkout his talk - he explained things step-by-step. Bottomline is that MageWire allows for much faster creation of (JS) components that need to communicate with the Magento backend, by simply connecting a LiveWire syntax to public methods and properties in a PHP class. Sounds magical and it is: It can be a lifesaver.

After this talk, the original Willem and Vinai joined in as well, to brainstorm upon the ideas. The brainstorm led from throttling to product configurators to checkout options. And that last bit became real, moments later, when Willem Wigman and Willem Poortman announced that the rebranded Hyvä site contained a working checkout based on MageWire and that Willem Poortman will be working upon an official Hyva MageWire Checkout in the upcoming months. Stay tuned for more announcements on this.

Willem Wigman had more to offer: He announced the redesigned site and logo. He announced a Hyvä meetup (organized together with integer_net) on November 3rd and a real Hyvä conference somewhere next year. He announced pricing based upon Purchasing Parity Pricing so that lower-income countries can benefit from Hyvä as well. He announced the compatibility of Magento CMS Widgets with Hyvä, with additional widgets as well, created by BEMEIR. And ofcourse the MageWire-based checkout. So many announcements - four, six, seven, we lost count. And it definitely lived up to the high expectations that many had of the Hyvä day of Reacticon. It was a blast.

Conclusion of 4 days

The final conclusion was together with Willem, Willem and me, talking about the future of Magento frontends. Even though Hyvä is scoring high, there are many alternatives as well: Vue Storefront, Alpaca, PWA Studio, they are all viable options - depending upon who you are and what kind of technology you have experience with. Even better, with Fylgja and MageWire, Hyvä itself has opened up for even more opportunities and more flexibility.

Reacticon reached its target, exposing new technologies to Magento frontend developers, showing the various options, showing the path away from dead legacy. But there is more happening in the Magento community: An open letter was written, a fork was turned into a conceptual distribution, discussions have opened up.

Instead of fearing the diversity, let's realize that we are all part of the same community while we actually are very different and have different needs. Having the same stack do everything at once, is complicating the stack. So hopefully the future will lead into a healthy fragmentation so that all pieces work together, while every piece is something we can decide upon and combine in the stack of our choice. Headless is not only detaching ourselves from a backend the PWA-way. Headless means also making different choices than the monolith dictates. And let's hope we can make this fragmented future work while still having a single overall community, thanks to the common tech of Magento.

Practicalities

All talks were streamed to YouTube and the livestreams can be watched back there. In the upcoming months, we'll chop up the large livestream blob in smaller parts and upload each talk as a separate video.

All speakers will be asked to send their slides or a link to their slides. And this will be added to the Program page of the Reacticon site. Expect that most talks will be listed next week.

The end?

At the last day of Reacticon 4, I hinted towards something that had been on my mind for a while. And then I simply spit it out: Reacticon 5 is not going to happen. Why? The fragmentation on the frontend is becoming too much. PWA Studio, Vue Storefront, Hyvä - they all deserve their own day. But even in a full day, their story could not be told properly.

I personally added Shopware to the mix, because I dig Shopware too. But that's a personal taste: What about BigCommerce, Shopify, CommerceTools or WooCommerce (wash your mouth)? And what is up with that horrible name "Reacticon" anyway? It does not apply to TALL, Alpaca and Vue in the first place. Hence, I see the concept of Reacticon as outdated. It will not happen anymore.

But I will be back. To the future.