We are proud to announce the release of PWA Studio 2.1.0, a set of tools that will let developers create Magento-backed storefronts! Keep reading to learn more about the project, the release, and how to join in contribution.
In 2018, we set out to build a proof-of-concept Magento storefront that would showcase the kind of mobile shopping experience made possible by PWA technology. As envisioned, this concept storefront would help us eventually provide merchants and integrators with infrastructure and components to create their own stores and would ultimately result in the growth of a new ecosystem.
First, though, it would help to explore the problem space.
While developing Venia (our concept store), we learned the following with the support of our community members:
As you can see, there's a lot involved in building a modern storefront! We could easily spend another year continuing to learn and improve the Venia experience. We've heard the feedback from our community, and we understand that merchants and integrators would be ready to start building PWAs today.
They just needed us to provide the tools. So we're ready to shift our focus to building the products we expect people to use.
If you were to build a Magento store today, you would typically start with a theme, such as Blank or Luma. A theme provides the view templates that make up a basic store, as well as some styles for presentation, but you need to customize the theme to give your store the exact functionality and presentation you have in mind.
Generally, there are three methods of customization available to you:
settings already referenced by the source code
changes applied as layers on top of the source code
changes woven directly into the source code
Configuration and modification are not specific to Magento. Any application responsible for rendering a tree of HTML may have settings configured through an admin interface or environment variables, and any open-source application may have its source code modified directly. But this kind of extension is unique to Magento-like systems because it requires a static tree of HTML (or XML) as a foundation.
Magento extensions target specific nodes in this tree and instruct the application to add, remove, or change nodes at those points. These instructions work because the operations involved are predictable (the tree is expected to have a particular shape, and the number of operations are limited) and somewhat mergeable (they can be expressed as XML directives).
We favor this approach for PWA Studio because it ensures that the current state of the application is reflected in the browser at all times, which eliminates entire categories of bugs and performance issues. However, since the tree is fully dynamic, Magento's existing extension strategy doesn't quite fit anymore. As a result, we need to recommend a new way to customize stores.
What if you could build a store by assembling it from many small components, piece by piece, from a clean slate? What if we extracted the logic from our views into functions you could use to render whatever you wanted? This is called composition, and it's our recommended approach for building a PWA store.
The first product we intend to ship for you to use to build a PWA store is a full collection of these components—enough to build an entire store—together with the infrastructure necessary to build and deploy an application composed from them and backed by a Magento instance. This collection of components will be called Peregrine, and it's one of our highest priorities. Our early adopters have already been successfully using Venia components to build PWA stores, but soon we're going to be translating components from Venia to Peregrine, and we'll be making them less opinionated and much more flexible in the process.
These components will be extremely useful to merchants and integrators who have development teams ready to build applications now. Teams creating bespoke stores and unique experiences will be able to take advantage of the effort we put into these components in terms of performance, configurability, and accessibility, without being restricted by the presentational choices we've made for Venia.
What about merchants and integrators who don't have front end development teams, though? What can we do for people who need a storefront right away, who can't justify the lead time and the upfront investment required to build a store from a collection of components? For many users, themes are a great solution even if they come with big limitations, so PWA Studio needs to offer something akin to a theme as well.
Accordingly, the other product we intend to ship is a full-fledged storefront application composed of components from Peregrine. Customization will be limited compared to what's possible with composition, but this app will have a variety of configurable settings, whose values will be used by components to render HTML and by CSS modules to apply presentational styles. Like Venia or Luma, some functional and aesthetic choices will be implicit or immutable, but this predictability will create opportunities for configurability, and potentially for extensibility.
Because the tree will still be dynamic, extensions won't be able to instruct the app to replace particular nodes, but they will be able to export components just as Peregrine does. Our challenge will be to devise an alternative method of instructing the app to use those components in specific places without having to modify component source files. We have several promising ideas, but we haven't selected one yet.
We'll share more details and solicit community feedback as these ideas develop. If you're interested in following along, please join the conversation on
Now that you have insights to PWA Studio, it’s time to learn more about our releases. The new v2.1.0 release is compatible with Magento Open Source and Commerce v2.3.1.
Thanks to the feedback and participation we've received so far, PWA Studio has more momentum than ever. We're excited to see our early partners rolling out their first stores and demos this year! Development has been fast and furious, with an incredible amount of contribution and change in the codebase since we opened the repo last year.
We know it has not been easy to follow along with all the changes, and there have been a lot of questions about how to get started, how to make a store, and how to customize it. Our work this year will help provide direct answers to these questions and more, and you can count on the Magento community to continue creating projects and tooling to help along the way.
As always, we're incredibly grateful to all of you who have contributed to the development of PWA Studio thus far, and we're looking forward to your continued involvement as we iterate on it this year.
We welcome all developers and designers to join and contribute to PWA!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.