Pick the Magento frontend that you prefer

Magento frontend? Which frontend?

I'm still being asked quite a lot by agencies to provide them with a Magento frontend training. Most of the time, this refers to a Luma-based training, for instance with a focus on PHTML templating, or a focus on the Knockout-based checkout. But often, I add now into the story of that training that there are alternatives out there: Hyva Themes is a much simpler approach, PWA Studio offers tooling to build a complete React app, Vue Storefront offers a Vue alternative and there are numerous other options like ScandiPWA and Alpaca out there.

The natural answer to the question Can you help me with a Magento frontend? would be a counter-question Which frontend?. Because it would be silly to assume that there is only one Magento frontend. Even more because that frontend is based on outdated technology, is not being refactored by Magento and gives a very disappointing frontend performance.

Extensibility vs performance

True, the Luma frontend is still the one that is most supported by third party extensions, but it comes with the price of a really bad performance. So if you are looking to save money by choosing Luma because of its extensibility, you either choose to miss out on revenue because of a bad performance (so bad SEO score) or you highly need to invest anyway to crank up that performance.

On the other hand, frontends like Hyva and Magento PWA Studio perform amazing out-of-the-box, but their extension support lacks: You would choose a modern-day frontend for a lot of benefits, but you will still need to invest yourself to make extensions work. It is your duty as solution provider to find out which one is better for the customer (or more profitable).

If you are simply stating that Luma is better because of the extension support, you are probably not taking in the fact that Luma its technology is more complex and requires more tuning, which raises costs.

Which one to choose?

Ok, there's different frontends out there. Next, I'm being asked a lot which one is better. While I don't want to be biased and I don't want to prefer one frontend over another, I do have my opinions. But to make sure that my recommendation to some developer or agency is sincere, it often takes more than a single sentence ("O, just go for Hyva") to give the right information.

Years ago, the decision was simple. Either you would go for Luma, or you would need to build something on your own. Now, it requires a proper study to find out which frontend will suite you best.

Cobbler, stick to your last

In general, Magento developers are focused quite a bit on PHP and for many of them, JavaScript is newish.

One theory that I'm slowly developing is that Magento developers that have been working with Magento 1 and the traditional Magento 2 frontend (Luma) have grown accustomed to this way of working and thinking and are therefore a lot of times overthrown by the different way of dealing with things of Vue Storefront 1. JavaScript frameworks (with AlpineJS) are found quite complex and therefore, disappointing at first.

However, for newcomers, it is not Vue Storefront that is overwhelming, it is the original Magento stack: XML layout, Block & ViewModel classes and PHTML - whether you add Knockout/Require or AlpineJS (Hyva) or FractalJS (Alpaca) on top of it. And for those newcomers, a headless Vue stack is (sometimes) easier. In short, Vue Storefront is highly relevant for anyone with enough Vue experience. Vuex is a piece-of-cake for those Vue developers and the architecture of Vue Storefront is therefore to-the-point. For them, Magento its weird mix is exotic.

Likewise, React developers will find Magento PWA Studio easier to work with then Hyva.

Which frontend you like is depending on who you are

So in short, which frontend you are going to like, depends upon who you are now. And upon who you want to be in the future. Look at me: I'm still seeing myself as a PHP backend developer. But I've played around with React so much in the last couple of years, that I feel confident with the Magento PWA Studio. And while I often hear that the codebase of PWA Studio is a nightmare, it is not often a React developer saying that.

Now, as a trainer and an experimenter, I'm choosing to be a generalist, instead of a specialist. I don't need to build complex projects, I simply study the technology, I extract the essentials, best practices and in-depth caveats, I transfer that to my students and I'm done. However, as a developer, busy full time with real-life projects, I think it would be best to focus open a single thing: Do not choose Luma, Hyva, Vue Storefront and Magento PWA Studio all at once, because it will drive you crazy. Instead, pick that framework that you prefer. Or perhaps that framework that you want to become professional in.

As an agency, the choice is harded. It is no longer up to the personal preference of one person, but you need to take in all of your developers. If a majority of Magento developers have played around with Vue and they liked it, perhaps Vue Storefront is an awesome base for the future. If you have just attracted new React developers, do explore the possibilities of Magento PWA Studio. If most of your developers are hesitant of learning a new programming language besides JavaScript, checkout Hyva (and ignore its fee because you are making way more money anyway).

Destructuring Yireo training

The frontend story has expanded, there are many choices to make. The Yireo training pages are now being modified, step-by-step, to demonstrate this as well. Training on Vue Storefront 1 and Magento PWA Studio is already offered, training on Hyva will be added in the near future. But more importantly, the old Luma frontend will no longer be presented as the official Magento frontend. It does not make sense to promote something old when something new is way more efficient.

Because of this, the traditional Magento 2 Frontend Development trainings (I and II) will be dismantled and refactored into separate frontend trainings instead. Some bits on XML layout, PHTML templates, Blocks and ViewModels will still be relevant for both Luma and Hyva developers. Bits on GraphQL will be relevant for React devs, Vue devs and Hyva devs. And so on.

I'm refactoring my business model because of the exciting changes ahead. Are you?