Magento PWA Studio, Vue Storefront or Hyva? They all suck

Destroying the buzzword PWA

You might almost believe that the P in PWA stands for Pingpong, the way that the word is bouncing up and down in its meaning and how its using used and misused. It's not a word anyway, it is an acronym: Progressive Web Apps refers to a set of features, including the Add-To-Dashboard feature that makes websites behave more like native apps.

To add this Add-To-Dashboard feature to a native Magento frontend, you only need to add a manifest.json file. So turning a traditional Magento shop into a PWA usually takes about 1 minute.

It is just a word

Obviously, when the word PWA is used nowadays, it is not the original technical meaning that we refer to. Instead it has become something else, a concept, a wrong reference: In general, in the Magento ecosystem, PWA refers to a webapp, built by using a barebones HTML skeleton and a large portion of JavaScript, so that the eventual DOM is built with this JavaScript - practically being React, Vue or Angular.

I don't really care too much about this confusion of what PWA refers to. PWA has become a different concept than its original meaning, face it. If the majority of the ecosystem refers to a Vue app or React app as a PWA, I'm fine with that. (I've actually been partially responsible for this confusion.) In this blog, I'll often refer to a Vue or React app as a PWA, or the other way around. And I'm leaving AngularJS unfairly out of this, sorry Damien.

Hail PWA

Back to the main topic here: PWA technology is said to be the future (with offline, push notifications, geolocation and much more). Hence, React and Vue apps were pushed into our faces. Even worse, they were pushed into our faces as being the future, which we maybe misinterpreted as the only future.

PWA: A hype

PWA has been a hype. And some people have seen this hype become a disappointment. The number of times that I hear developers grewl of Magento PWA Studio, DEITY and Vue Storefront is quite overwhelming. And then I hear that they have been playing with it for less than 6 months, which is kind of shorter than the period they grewled over Magento 2 when it first came out - so come on.

It is a hype. But I do believe Hyva is a hype too. And people could get disappointed with Hyva as well.

Magento developers are not good in JavaScript

For a Magento backend developer, shifting from PHP to Node (with React or Vue) is a big step. You suddenly need to become experienced in a different programming language. It took me 5 years to master PHP (and I still sucked at it after 5 years). It took me less time to dive into Node, because I became more Jisse.

For a Magento frontend developer that should have been active with JavaScript (and modern CSS and more) for years already, this should have been a smaller step. The opposite seems to be the case. It seems to be that after 5 years, Magento developers are still struggling with the Knockout-based frontend: Not because KnockoutJS is in itself so difficult or because KnockoutJS changed, but more because Magento developers keep sucking at JavaScript. They don't like it, they think it is weird.

Another reason is that the Knockout-based frontend is ugly - a not so irrelevant fact. But even though it is ugly, you can concur it. We have done so with Magento 2 numerous times (pun). It is a fact, however, that with most agencies that I train, the frontenders lack a fundamental knowledge of JavaScript. And because JavaScript is too complex, backenders need to step in while it is obvious that their prime focus is PHP.

All in all, Magento developers suck at JavaScript. But it is silly to blame JavaScript for that!

JavaScript developers like PWA

So here is a fact: While some Magento developers think PWA is horrible and unnecessary, an average JavaScript developer will think it is completely natural to go the PWA-route. Vue and React syntax are childs play, state engines are obvious, SSR is exciting and overall performance (assuming that you know your stuff) can be accomplished quite easily.

True, some out of the box solutions ship with too much JavaScript (Magento PWA Studio?), similar to some CSS frameworks shipping too much CSS (Bootstrap?). But with Bootstrap, you shouldn't download all CSS parts, you should base your code upon SASS imports. Is it not reasonable to treat Magento PWA Studio the same way? Not base your app upon Venia directly, but reuse the good parts for your own custom app?

All in all, experienced JavaScript developers don't have issues with React- or Vue-driven e-commerce. It is simply the next step for them. The headless way.

Not enough JavaScript developers?

As I see it, the problem in the Magento ecosystem is that too many agencies try to attract Magento developers to turn them into JavaScript developers.

This, while agencies that make PWA work do attract JavaScript developers, letting them build an app facing the GraphQL API of Magento, without requiring them to know too much about Magento itself.

The promise of Hyva

And then came Hyva. The next hype. It promises a simple thing: Less JavaScript (by using AlpineJS), less complexity (by removing the original fluff). This is good and it makes Hyva an awesome development - don't get me wrong.

However, I'm not sure if Hyva is technically superior to Magento PWA Studio or Vue Storefront. Or the opposite ... I believe that - with all these frontends - the same benchmarks can be met, the same Lighthouse score, the same frontend experience.

Something that you are used to

It is just that with Hyva you can accomplish this outcome by using a stack that is similar to the Luma stack: XML layout, Blocks, ViewModels, PHTML templates, some CSS preprocessing (using Tailwind), some JavaScript (using AlpineJS).

And actually comparing Hyva and Luma, I would say that Hyva is way-cleaner than Luma, because Knockout is dead and AlpineJS is cool, because Magento core developers messed up the Luma CSS entirely and Tailwind is ... hmm.

I like the Hyva stack, but I dislike Tailwind. It is personal.

Why I think Tailwind sucks

I'm personally not a fan of the utility classes of Tailwind. I think they feel similarly like what Bootstrap felt like in its earlier years. I want the CSS to be skinny, true. But I want my HTML to be semantical and not cluttered with utility classes. And @apply could overcome this, but simply leads me further away from an ideal solution.

Simply put, I prefer another CSS approach. And I firmly believe that anyone dealing with frontend technology should developer their own preference. Like Bootstrap, dislike Tailwind. Like Tailwind, dislike Bootstrap. Make up your mind.

Back to Hyva

Because I like everything else about Hyva (including its creators, kiss-kiss), I hope that we are going to see more freedom in Hyva (or derivatives) where the reset is there, AlpineJS is there, but an alternative CSS approach could be used.

But, Jisse, shut it - I don't want to talk about the CSS here. I want to talk about JavaScript.

Hyva is overly complex ... for JavaScript developers

Currently, Hyva is being hyped. It is promised to be the future of Magento. And many of my friends on the Magento community are jumping up and shouting along with them. However, among them, I don't see many experienced React or Vue developers - I mainly see Magento backend developers. Some of them caught up on some React or Vue. But none of them became JavaScript developers, they are still Magento developers, busy with PHP stuff.

Here is the thing: Hyva is extremely complex for JavaScript developers. If you are a Magento newbie and you've never heard of things like ViewModels and XML layout, but you are experienced with Vue, than you are going to have a really tough time to adopt to Hyva. And Luma. However, introducing Vue Storefront 1 for this person leads to much more result.

Magento PWA Studio is not complex

Likewise, Magento PWA Studio is not complex. I have been hearing this repeatedly from the Magento community. But in the recent 4 years, I have played quite a bit with React. And what Magento is doing within Venia and Peregrine is not rocket-science. To make PWA Studio work for a community of frustrated Magento developers is magic, but to make PWA Studio work for React developers is peanuts: They are already happy with what is there.

While Magento is going the headless way, realize that Magento developers will find PWA difficult, but PWA developers will find Magento difficult. Exactly by going the headless way, you can separate those teams.

Is the Magento community ready for PWA?

So is the Magento community ready for PWA? No. Yes. Yes but no but yes. It depends. All of us need to make up their mind what they want to be: A pure Magento developer, a pure JavaScript developer, a mix. And this leads to a possible stack.

I completely understand that for some people Magento PWA Studio (or Vue Storefront or DEITY) have been disappointing. But for others, the overwhelming frontend stack of Magento has been disappointing and Hyva is not fixing that entirely. Therefore, I believe that each frontend technology that we have is there for a reason, it was created for a specific need.

Multiple frontends are the future

The ecosystem is splitting up - when looking at it from the frontend view: This sounds like a dramatic change. However, it doesn't mean that the community is splitting up. I'm personally envisioning a future where there is one backend (Magento) and multiple frontends based on multiple technologies, so that each agency will pick that frontend that is prefers.

Tolkien reference

Three frontends for the React developers, one for the Vue developers, two for the Magento developers. But one backend rules them all. And with GraphQL binds them.