PWA Studio with custom extensions

Question

First of all, sorry if the answer is obvious. I read the Devdocs, PWA-Studio Docs and some Tutorials, but somehow couldn't wrap my head around this.

Does using a PWA with Magento2, for example Magento's PWA-Studio, require me to add a GraphQL API to every module I use for this shop? Or can Magento somehow "skip" PWA-rendering when no GraphQL is in place? For example, I mean modules we created ourselves, modules we bought from 3rd parties, as well as payment methods (where the PWA docs state that it's currently only compatible with Braintree, which is not much imho).

Also, I'd be glad to get any tutorials on how to make a custom module PWA-compatible.

Answer 1

Yes, theoretically it does. A PWA is not the same as a simple theme like Luma. Luma is still based upon the foundations of the old frontend architecture - XML layout, Blocks, controllers, PHTML templates, etcetera. With a PWA, you will be replacing this with something completely custom (React, Vue, Angular) using nothing or something created by PWA providers (Scandi, PWA Studio, Vue Storefront, DEITY). You pick your own strategy.

In this strategy, you will also need to find out how you want extensions to work. Most likely, by using an API - as Alfreds already pointed out - like REST or GraphQL.

If I were you, I would first make a study of React and Vue, to make a choice between the two, because that's the thing that you will be developing a new frontend with. See which one you like best. Next, move into the PWA providers of your choice, based upon either Vue or React. And then make a study on how they support extensions.

It seems a lot of work and it is. But the whole goal is to leave the burden of badly coded extensions that bring down performance and security behind you and design a headless system without limitations.

Answer 2

By design, ScandiPWA uses GraphQL for communication with BE. This however, does not mean you MUST. It is 100% legit to reuse existing REST API available. Yes, it is bad for consistency. But when your going for something which will simply work - it okey.

The frontend, however is required to be made in React. Yes, you can still use simple di.xml to bypass request right to your M2 controller, but the APIs should exist to allow displaying something on frontend.

Where to store it, and how to make it available to others? Use plugins. Then you can ship FE code alongside your BE logic in a single module! Plugins in ANY аpplication part. This means, any extension you take for develoрment can be made using plugins, published, and later get installed alongside BE in the same composer module.

ScandiPWA is the closest there is to original Magento 2 рatterns. To create themes you create files under same path as the original one. Тo plugin, you declare where to plugin in you composer module, and then you have alternatives of M2 РHP's around, before, after.

See instructions here: https://docs.scandipwa.com/docs/development/plugin-mechanism/

With upcoming release of v3 more then 23 extensions will be ready for publishing. This includes payment, shipping providers, return management, blogs, marketplaces and more-more-more. This is huge. Stand by for more! And happy coding ❤️