UPCOMING: Magento 2 Bootcamp of four days in The Netherlands (April 29th - May 2nd)
background

November 15, 2018

Is Magento PWA ready yet?

Yireo Blog Post

I get this question a lot, so thought it would be a good idea to write something down. While people often ask it as a yes/no question, the answer is not straightforward. Not because of PWA, but because the question is wrong. Or if you are too lazy to read: PWA is ready ... but first, you need to learn how to start.

Ready? Ready? What is ready?

The first counterquestion that needs to be asked is: What do you mean with Magento PWA? Magento is developing a toolbox called PWA Studio and while it is perhaps flaky at this moment, it already allows developers to build a PWA from scratch. So PWA Studio is ready. More or less. It is just a bunch of scripts to fire a temporary Node webserver, tricks to have a local hostname with SSL, a Webpack configuration and a couple of other tools. Easy peasy.

And you don't necessarily need these tools to build a PWA in Magento anyway. You can also just fire up create-react-app, add Apollo to it, connect to a custom GraphQL endpoint and there you go. What do mean with Magento PWA?

Meet Venia theme

What most people think when saying "Magento PWA" is that there will be some kind of ready-to-go version of PWA that you can easily use. This is where the Venia theme comes in: See it as the Luma theme but then for PWA. It is not ready yet, as far as I can see because the GraphQL API did not have stable quote and cart support yet.

This is changing quickly, because the GraphQL API contains almost all necessary endpoints for a PWA to be built. They might have some issues. But so does any software package I have encountered.

Meet the Peregrine components

However, we should not wait for Venia. The Venia theme is supposed to be a demo theme. Ok, if some clients simply want to use the Luma theme, the Venia theme might fit them as well. However, the real power lies with the ease of creating custom components - that's why we favor React over the current frontend.

So, as a React developer, you should not be waiting for Venia to be complete. You should be waiting for various components to become ready, so that you can custom-build your own PWA: cart, checkout, customer-pages, category overview, navigation, menus, routing, GraphQL caching, Redux couplings - this is the kind of thing a developer needs. Most of those components will be contained in a Magento library called Peregrine.

And you could state that if the Venia theme includes all functionality, then it is because the Peregrine library has reached its first (stable) release. You can already start using it.

Is Magento PWA ready for whom?

But the question is still wrong. The question "Is Magento PWA ready yet?" needs to be dissected properly. And the problem is often that the person asking the question does not know enough about PWA in the first place to make the question effective. So here is a Dummy's Guide in Answering The Question "Is Magento PWA ready?":

For merchants: Is Magento PWA ready?

If you are a merchant, you should know that PWA is going to boost the speed of your shop tremendously, hence a higher revenue. Is PWA ready? Well, there is not going to be a click-click PWA that you can use without the assistance of a developer. So, if you are asking if you can use PWA without a developer, the answer is "No". Most likely, the answer is going to remain "No".

If you have a developer that is able to build you a PWA, the answer is to ask your developer if he/she can build you a PWA already with the current tools. Perhaps they need more experience. Perhaps they are ready. Assuming the right budget.

For managers: Is Magento PWA ready?

Perhaps it will be a huge challenge to run a new PWA project if you have zero experience with it. You could join initiatives like Deity or Vue Storefront, but it remains a risk to migrate to a new platform like this. This risk might be reduced quickly however in a matter of months: The stability goes hand in hand with the adoptation rate. And face it, PWA is hugely popular. Do you want to be too late when PWA is actually the new standard?

Perhaps Magento PWA is not ready yet, but when it is, you will need to be ready as well: Your team will need to know about React, PWA, Redux, GraphQL. They need to be familiar with modern JavaScript, NPM, browser-based development, Node packages. Train them in advance before you run out of options.

For backend developers: Is Magento PWA ready?

Tough question: As a backend dev, you are often called in when the frontend developers find the JavaScript too hard. If so, assign one developer to become the JS guru. The term full-stack developer is silly when it comes to Magento.

The GraphQL handling will become the responsibility of backend devs. Make sure to familiarize yourself with the new Magento 2.3 features, because the PWA team will develop things quickly and it would be a waste if a PWA project can't be made stable because you are still working on creating custom GraphQL endpoints. Think GraphQL schemas, extension attributes, plugins for repositories and perhaps even Apollo.

For frontend developers: Is Magento PWA ready?

Yes and no, depending on your experience level. If you are already experienced with React, you are good to go - even though you do not want to write all React components from scratch. You can already start the React structure, borrow the essential components from Peregrine and start customizing things. Just make sure your manager does not sell a deadline of a month, even though it would be possible to deliver a plain React project in that timeframe.

If you are not yet experienced with React, gain that knowledge fast. Or opt for Vue. Either way, you should make plans on migrating your current Magento 2 knowledge (XML layout, Knockout) to PWA. Also, take note that there are quite a few experiments at this moment to add React components to the current frontend. It might ease the migration.

For payment providers: Is Magento PWA ready?

See above for the answer towards backend and frontend devs, because with a payment method, you will need knowledge of both. Additionally, keep track of how the browser Payment API fits in Magento. By embracing this, it might become peanuts to support PWA.

For shipment providers: Is Magento PWA ready?

While payment providers can rely on a Payment API, shipment providers can not. All communication between Magento and your service is custom-made. Perhaps you can reshape your platform to support GraphQL, which might ease the integration with Magento. It will be best to keep a close eye on the status of the Peregrine components responsible for shipment API calls. And push other PWA providers (Deity, Vue Storefront) for compatibility with those API calls.

For extension developers: Is Magento PWA ready?

It is too soon to say how extension developers should respond to the PWA movement. If your extension works in the backend, nothing is going to change. If your extension works in the frontend, you might consider creating a GraphQL endpoint so that a dummy React component could be created. Most likely, you will need to support the old frontend and the new frontend for some time.

And keep an eye on ExtDN which will try to push extension compatibility when the time is there. We will kick ass.

For others: Is Magento PWA ready?

No.

Done. Drops microphone, leaves stage.

Posted on November 15, 2018

About the author

Author Jisse Reitsma

Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.

Sponsor Yireo

Looking for a training in-house?

Let's get to it!

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.

Do not miss out on what we say

This will be the most interesting spam you have ever read

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.