Do you actually need Magento PWA Studio?

The GraphQL API is the real revolution

To my opinion, the GraphQL API of Magento 2.3 is the real revolution: It allows people to build their own frontend, instead of using the traditional Magento frontend (for reasons). And that's where Vue and React come into the picture.

Headless allows you to be free of the choices of Magento. It allows you to build your own frontend from the groundup. It allows you to choose your own CSS strategy - LESS, SASS, OOCSS, BEM, PostCSS. It allows you to pick the HTML strategy of your choice. It allows you to finetune performance and bypass limitations, because it is all your own code. This does not even need to be a JavaScript-based frontend, but could also be a server-side rendered page with Blade, Plates, Twig, Smarty or whatever.

And I've been one of the folks responsible for making others enthousiastic by saying that React or Vue leads to less development time than the silted Magento frontend. PWA is the future, hurray! And everything is better with PWA.

What about the costs?

I intend to write another blog soon on how much building a PWA costs. Because I believe there are numerous pitfalls when going headless. And running a project with a headless mindset is very different from developing a traditional frontend-based shop. Coming up soon.

The reality of headless Magento

So let's take a shortcut here. I'm going to assume that you believe PWA technology and headliness in general is the future. And that you are willing up take this up as an investment.

Next, vital questions pop up: Do you want to build a frontend from scratch? Or do you want to use an existing technology from a PWA provider like Vue Storefront or DEITY? Or do you want to use Magento PWA Studio? Do you want to use React or Vue?

Narrowing it down to React and Magento PWA Studio

Let's narrow things down to React (assuming that you are not a Vue fan) - for the sake of this blog (which was supposed to be about PWA Studio). If React is your preferred choice, than you can still build a PWA from scratch, you could use DEITY or something similar and you could use Magento PWA Studio.

I'm underlining these choices, because Magento PWA Studio should not be picked just because it is Magento. You are going headless, so you can make these choices on your own.

When I built my own custom PWA

By now, I've built the foundations of my own PWA (Duka) which is actually used as a base for at least two Magento agencies to create their own frontend. It is not using anything of Magento PWA Studio. Instead, it is based on plain old React with hooks, some Context and Redux middleware for connecting to Magento using Apollo Client.

Discussing this setup with other developers, I've concluded that this stack is pretty solid. There are variations possible: You could drop Redux and use Apollo Link instead. You could simply connect everything with hooks and context. You could add thunks or sagas to Redux. Or you could swap Redux with an alternative state machine like Mobx. But they are kind of still variations of the same theme.

A custom PWA compared to Magento PWA Studio

When you look at the architecture of Venia (the concept theme of PWA Studio, tightly connected to Peregrine), it pretty much follows the same architectural decisions: hooks, context, Redux, Apollo Client.

When building a PWA, I often say that it should be dead-simple to create components (HTML, CSS, output stuff) but it is more work to connect this to the actual business logic (adding to cart, login, checkout, multilinguality, caching). The business logic in PWA Studio is largely based on hooks in the Peregrine library. Some business logic is also in the Venia UI library (which contains about 99% of the code of the Venia concept theme), but you could get away with rewriting those components yourself.

Simply put, I would pick React for the ease of writing my own React components in exactly the way I want to. But writing business logic (aka Redux middleware with Apollo Client queries and mutations) from the ground up is a pretty daunting task, so I would happily reuse the logic from Peregrine. Note that I say Peregrine, not PWA Studio.

What to modify in Magento PWA Studio?

Magento PWA Studio is much more than just Peregrine. The Venia concept theme is pretty much stripped down and most of its code is currently taken from the Venia UI library. On top of Venia and Peregrine, there are buildpack and UPWARD. And I've written in the past already that buildpack and UPWARD can be skipped by using Create-React-App and your own workarounds for CORS. So if you would follow my line of thought and get rid of buildpack and UPWARD, what else is there in Magento PWA Studio? Well, Peregrine and Venia.

It needs to be noted that Venia (concept theme plus UI library) is opiniated in its choices for HTML naming and CSS standard. There's some CSS variables, little BEM, no SASS or other precompiler. The HTML (and the default React component tree) is setup with the visual output of the concept theme in mind.

When building your own PWA, you will need to modify all of this. The Venia theme is therefore a concept, it shows you how you can do things. But you will build a hell of a lot of React components, with your own CSS and HTML strategy in mind, to work towards the custom-made graphical design of your specific project.

The lego effect

This is how React is supposed to work. Instead of treating the code-base as an existing structure that than needs to be modified marginally, the goal is to see all components in Venia as lego stones. Even better, instead of just using those lego stones, you can easily create your own lego stones as well. And from the ground up, you will build your own custom component tree.

My claim here is that - if you are more experienced with React - you will not be extending Venia, unless your graphical design looks pretty much the same as theirs. You will not be treating the Venia theme as a blank theme either. Instead, you will be treating it as a component collection, where most components will not even be used in your own component tree.

Drop Venia as well (drops microphone)

So the main statement I'm making here in my blog(s) is that Magento PWA Studio is not a PWA, it is not a turnkey solution for creating a new PWA, it is a studio, a toolbox, a collection of things that you can use for your own purpose. Drop buildpack, drop UPWARD, drop the Venia Concept theme, drop the Venia UI library. But Peregrine might be very very useful, so that you don't need to write all of the business logic yourself.

Do you actually need Magento PWA Studio to go headless? Not exactly. But part of the code that the PWA Studio team is developing might come in darn handy.