A Review of Magento PWA Studio
Published: 2020-02-26 23:40:15

---
title: A Review of Magento PWA Studio
published: true
date: 2020-27-02
tags: 
canonical_url: https://larsroettig.dev/a-review-of-magento-pwa-studio
---

<picture>
        <source srcset="https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/92d98/PWA_Studio_Teaser.webp 250w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/c0ce8/PWA_Studio_Teaser.webp 500w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/bc682/PWA_Studio_Teaser.webp 1000w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/90b83/PWA_Studio_Teaser.webp 1280w" sizes="(max-width: 1000px) 100vw, 1000px" type="image/webp"></source>
        <source srcset="https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/ef2e0/PWA_Studio_Teaser.jpg 250w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/66ca5/PWA_Studio_Teaser.jpg 500w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/aaa41/PWA_Studio_Teaser.jpg 1000w,https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/d79eb/PWA_Studio_Teaser.jpg 1280w" sizes="(max-width: 1000px) 100vw, 1000px" type="image/jpeg"></source>
        <img src="https://larsroettig.dev/static/e07126a21bad2d2ef181159498f93859/aaa41/PWA_Studio_Teaser.jpg" alt="PWA_Studio_Teaser" title="PWA_Studio_Teaser" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0">
      </picture>

Before we start, I want to provide a short overview of the PWA Studio architecture. With Magento PWA Studio, we should have the opportunity to build a complex Progressive Web Applications on top of Magento 2. Can we already realize **real** customer **projects** with PWA Studio? I would like to have a look at that with you. This blog post will be updated at regular intervals.The Magento Core Team selected **React** ( **JavaScript** ), **GraphQL** , **CSS Modules** as the leading technologies to build this theme to build from scratch.

Magento PWA Studio uses a Monorepo structure.For those reasons, after checkout, we already see ten subfolders.They packages are most likely unrelated, loosely connected, or connected. To give an example, **venia-ui** needs elements from **peregrine**. Let’s take a look at which components we have in the current state.

**Main Libraries** If we start our a PWA-Project, we mostly change components from these two libraries to have our own PWA theme.

- **peregrine** - A component library for adding logic to visual elements
- **venia-ui** - Library of React Component for PWA storefront projects

**Elements for building**

- **pwa-buildpack** - A tooling library to help with PWA storefront development
- **upward-spec** - UPWARD specification and test suite
- **upward-js** - A reference implementation of the UPWARD specification
- **babel-preset-peregrine** - A babel preset plugin that is required to use peregrine components
- **graphql-cli-validate-magento-pwa-queries** - A script to validate your project’s GraphQL queries against a schema

**Other elements**

- **venia-styleguide** - The style guide for venia components
- **venia-concept** - A concept storefront project built using PWA Studio tools
- **pwa-devdocs** - Source for the documentation site ([http://pwastudio.io/](http://pwastudio.io/))

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#current-features-in-pwa-studio-version-50)Current features in PWA Studio version 5.0

Currently, the PWA Studio offers a small collection of tools and components.For me, it is a library that allows building a custom PWA Theme for Magento.

- Support Simple and Configurable Product
- Category Page
- CMS Pages and Blocks
- Magento PageBuilder
- Product Detail Page
- Cart
- Checkout
- Page Builder integration
- Braintree payment

**Release Notes:**

[https://github.com/magento/pwa-studio/releases/tag/v5.0.0](https://github.com/magento/pwa-studio/releases/tag/v5.0.0)

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#release-501)Release 5.0.1

PWA Studio 5.0.1 is a patch release to fix an Image loading issue. Also, a security fix prevents invalid mutation caching.With `fetchPolicy: 'no-cache'` it is possible to define mutation the should not be added to Apollo query cache.

**For more Information see:**

[https://www.apollographql.com/docs/react/caching/cache-interaction/#bypassing-the-cache](https://www.apollographql.com/docs/react/caching/cache-interaction/#bypassing-the-cache)

**Release Notes:**

[https://github.com/magento/pwa-studio/releases/tag/v5.0.1](https://github.com/magento/pwa-studio/releases/tag/v5.0.0)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#features-that-are-currently-not-supported)Features that are currently not supported

- Sort and Filters on the category and search page (Planned for v6)
- Payment Methods for Central European Market
- Deployment scripts
- ”More” Extension Points
  - build
  - env valid
  - talon
  - routing
- Shipping methods
- Wishlist
- Translation support
- Bundle product support
- Multi-Store support of multi-currency, and languages

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#summary)Summary

Although the project is still in an early stage of development, the PWA Studio already offers a toolkit for creating a PWA theme. Due to the lack of extension points and multilingualism, you will have to write many React extensions yourself, which can make large projects very complicated and expensive.With build things from scratch, it is possible to ignore legacy problems and create new great ideas. On the other hand, it takes a long time to get a stable software anyway with a production-ready feature set.From my point of view, it is good to now with a small project to gather experience with the new PWA Studio even there are already a few bigger projects live.

(This article was posted to my blog at [https://larsroettig.dev](https://larsroettig.dev). You can [read it online by clicking here](https://larsroettig.dev/a-review-of-magento-pwa-studio).)