Magento conundrum: Vue or React?

So, why not the old frontend?

First of all, let's deal quickly with the question why newer frontends are preferred over the old Magento 2 frontend. The old frontend is based on outdated technologies (KnockoutJS, RequireJS) which makes it harder to tune shops for performance: Whatever you do to try to make the current frontend faster, things are easier to tune with a simple yarn build command in either React or Vue (relying on excellent Webpack plugins to optimize your bundles).

On top of this, the JavaScript architecture of the current frontend is really hard to get through: The checkout is a beast. Various core snippets are down-right ugly. The way that Knockout ViewModels (providers, imports, exports) is overly complex. And because of all this fluff, small changes cost an insane amount of time.

Why Vue or React?

Compared to the old frontend, working with React and Vue is a breeze: Slick code that is easy to optimize and refactor. Tuning shops to a 100 points in Lighthouse is doable. And the architecture of React and Vue apps is kind of easy to get the hang of, once you know the basics.

Both frameworks are popular and both frameworks allow for rapid development. Some people like Vue, some people like React. You will hear Vue fans say that Vue is better than React and React fans say the opposite. But fact is that both of them are popular, both of them offer similar benefits. They are simply different.

The differences are hard to summarize

The difference between React and Vue is hard to summarize. For instance, both have routing as a feature, but they implement things differently. The bottom-line is that they behave in similar ways, they solve the same kind of problems, they allow for the same kind of performance wins, etcetera. I think this is important to state and to realize: They are similar.

In my opinion, you should not look at the features of React and Vue to make a decision between the two. True, there are differences and these slight different approaches make Vue and React developers have discussions. However, as a newcomer, you will not see those differences right away. You will need to learn both first to get the nuances.

Personal preference

If opting for both React and Vue (as I have done) is not an option for you, then the advice still stands to get a taste of both: Play with Vue a bit, play with React a bit, see which you like most. Already after playing with either for a couple of days (or joining an excellent Yireo training if you want to become awesome too), you will get the hang of the coding style, the logic of components, interaction and even state management.

It boils down to the fact that you are going to like either or both (or theoretically none, but I haven't bumped into those kinds of people yet). It is a personal preference.

Difference in learning curve

One important difference for newcomers is that with a little bit of Knockout or Angular knowledge, you often get the hang of working with Vue templates quickly. And with React, the approach is very different, even more with arrow functions and hooks. And often this leads people (me too) to say that the learning curve of Vue is smaller than with React.

Maybe Vue is easier at first. And maybe React requires to jump into the deep from the very start. You could say Vue is a bit Mac and React a bit Linux. However, both of them deal with JavaScript logic, JavaScript strangeness. My personal opinion is that Vue will make that jump into the deep a little bit harder (because you are first getting used to not knowing too much of what happens under the hood), while with React, you are already past the culture shock and simply find out about more and more technical parts.

Taking in the ecosystem

This is already getting a long read. And I don't have the feeling that there is more to say than to start playing and find out which you'll like best. However, there is another aspect to this story that might be far more important: This blog is not meant for new developers that simply want to start playing with JavaScript. No, Yireo has made name in the Magento community and this blog is meant for Magento developers that want to explore new frontends.

If you want to build your own frontend (which is what the true revolution of headless e-commerce actually allows us to do), then the story does stop here: Pick either Vue or React and build a new frontend with it. I've done so myself - well, it's a React prototype that I not putting into production. And I'm helping various teams build their own React frontend. Why build your own frontend? Well, because it is just a frontend, it's not Magento.

Existing solutions in the ecosystem

However, if you do not want to build your own frontend, you'll need to look around in the ecosystem to see what existing headless e-commerce solutions are out there: Magento PWA Studio, FrontCommerce, DEITY, ScandiPWA, Neo StoreFront and Vue Storefront. There might be more, so let me know in the comments below if you have another one.

Picking one PWA provider

I have dubbed these headless e-commerce solutions as PWA provider, because they provide a headless architecture to build a PWA upon. The PWA is (in these cases) written in either Vue or React. Or actually, the only one using Vue is Vue Storefront, which currently seems to have the most thriving community. And the headless architecture of all PWA providers includes choices like having a Node middleware layer or not, easier state management in the PWA connected to remote actions, offering SSR, connecting to Magento using GraphQL or not, etcetera.

Maybe whether you should pick React or Vue is a really wrong question. It boils down to a personal preference. But once you like Vue, you would choose also Vue Storefront and their future plans, their vision on Magento, their vision on alternative e-commerce platforms, their way of dealing with extensions (Magento extensions, Vue or React components, their own extension architecture). Likewise, if you would pick Magento PWA Studio, you would become to depend on UPWARD, the Magento GraphQL layer (with less options to migrate to elsewhere), the Adobe vision and serving professional solutions to high-end customers.

It is not just a language that you pick, it is a stack. The PWA providers choice of a stack. And the question is now: Do you like that stack?

Where will e-commerce go to?

Headless is the future of serious e-commerce. This also means that you need to adopt headless stacks as well - middleware layers, ElasticSearch integrations, microservices. In a sense, Magento plays a less vital role in that future. It is no longer a monolith that enforces stuff that we hate (CMS, frontend, logging). It is only an e-commerce application. And this changed stack is the real essence of going headless.

Vue Storefront is friends with Shopware, DEITY is friends with BigCommerce. It also shows that the choice is broader than just the frontend tool (React or Vue). It is about what kind of shops are built for what kind of customers. What kind of features are required? How much time are you currently loosing on the current frontend craziness and how much custom code could you build so much easier in React or Vue? How important are what kind of integrations with which backend systems (PIM, CRM, ERP, warehousing, fulfillment)? The number of questions increases.

React and Vue are easy!

The choice is hard. But realize that the frontend is just a smaller piece in a larger puzzle. And realize as well that one of the main reasons why frontend developers love React and Vue is that they are so easy to work with. So maybe, you can simply adopt both, build apps with them, have fun with them. The choice for the underlying stack is much more vital. And harder.

Chat with me

Feel free to contact me via mail ((jisse@yireo.com)[mailto:jisse@yireo.com]) or twitter ((@jissereitsma)[https://twitter.com/jissereitsma]) to discuss things further. But just realize that these conversations are not done in 5 minutes. Your future stack should be picked using a thorough technical plan. Sounds difficult but it is awesome. You pick the headless components that you want to become an expert in.

Oh, in this blog title I've used the word conundrum. I simply love the sound of it. Just to make you feel fuzzy. Fuzzy is another such word.