Since the Recticon Conference March, we are eagerly waiting for the chance to get the hands on Magento PWA studio. Last month, we have kept the initial development release of Magento PWA Studio deep and wanted to give a general overview of the toolkit.

Yes, you have read this right. At its core, Magento PWA Studio is a set of tools used for the development of Rect-Powered Magento 2 themes, and in this article we are going to see why this is the matter. It is also important to note that Magento PWA Studio uses the graphQL component which is part of the development version of Magento 2.3.

There are several parts (packages) in the current Magento PWA Studio Repo on the GitHub:

  • pwa-module
  • pwa-buildpack
  • peregrine
  • venia-concept

pwa-module

Magento module which provides module-assisted, server-side functionality and works as the basis for all the themes created using Magento PWA Studio.It presents an app shell, handles the RootComponent assignments and embeds the GraphQL Payload in the server render (optimization).So far, this module should only be enabled in backend and should be referred to as the parent for all subjects (with “standard.xml”, with each standard Magento 2 theme) using Magento PWA Studio .

pwa-buildpack

BuildPack is a set of WebPack plugins and tools used to develop the Magento PWA themes. It is also used to set up and configure local development environments for Magento 2 platforms. It contains the following tools:

PWADevServer

Magento sets up development server for PWA studio theme. This creates custom localhost, SSL certificate, Magento public path settings, emulation service workers etc.

MagentoResolver

WebPack’s resolution handles configurations for the property and seems to be adopting WebPack in the Magento file system.

MagentoRootComponentsPlugin

Handles code division. Generates unique bundles for each page with a common (global) bundle. Automatically works out of the box.

magento-layout-loader

Tools to change layout, similar to Magento layout system It allows insert containers (before and after) and remove the containers. It is still very early in development.

ServiceWorkerPlugin

Wrap around Google Workbox webpack, which is used for service worker configuration based on development scenario.

Peregrine

Peregrine is a set of React components designed to handle Magento-specific functionality such as routes, root components, layout handlers, product lists, price performance etc.The storybook JS contained in the Peregrine package is an environment used for documentation and visualization of UI components.This enables frontend developers to provide quick reference of components included in the Peregrine package and an accessible document.To run Storybook JS in the Peregrine package, use the following line in the terminal in the Peregrine root folder:

npm run storybook

This storybook will return a URL for example. Here’s a preview of how Storybook Peregrine UI displays components.

venia-concept

venia-concept Magento is a demo theme created by Magento using PWA Studio. It shows the currently available functionality, workflow and pages. It is still early in development and is updated regularly as Peregrine and buildpacks are being developed.

Custom Theme

Custom theme in Magento documentation includes step by step in very detail, so we’ll provide a general overview of the custom theme NPM package which is the newest addition to the standard Magento 2 theme structure (with the .env file).

It is interesting to see that PWA themes are regularly compared with a regular Magento 2 theme. For example, these are essential NPM dependencies for the Magento PWA studio theme:

"dependencies": {
    "@magento/peregrine": "^0.1.5-alpha",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "@magento/pwa-buildpack": "^0.2.0",
    "babel-core": "^6.26.0",
    "babel-helper-module-imports": "^7.0.0-beta.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "dotenv": "^5.0.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.0"
  }

As you can see, Magento PWA Studio has provided independence and flexibility to the Frontend developer to use the NPM package and tools they want to use.This is not limited to CSS workflow and style, also includes feedback components.You can also note that any graphQL middleware (such as Apollo using Venia demo theme) is included in the package.With Magento PWA Studio Magento PWA Studio with Magento 2 PWA Theme providing the only components and tools necessary to develop,which make the whole process easy and painless.

Learning Pre-requisites

If you had the experience of working with Magento and Magento 2 to start working with Magento PWA Studio, but not with PWA and React, you should be familiar with the following technologies:

  • npm
  • Webpack
  • React & Redux
  • GraphQL & Apollo GraphQL (or some other GraphQL middleware)
  • Storybook JS (optional)

Conclusion

Although it is still in early development, Magento PWA Studio demonstrates many promises by providing a very useful and flexible toolkit to frontend developers to create PWA themes for Magento 2. Regardless of the regular Magento 2 frontend workflow which is restricted, it is definitely a step in the right direction.In Gurubhyo, we are excited to follow the development of Magento PWA studio and start playing with it. Expect more articles explaining Magento PWA studio workflow, plugins and various complications and details.