What is the difference between PWA Studio and the current Magento frontend
PWA Studio is becoming increasingly popular, and I think it will be the base frontend for Magento stores in the future. This change will be a big challenge for frontend developers because working with PWA Studio is entirely different from working with the current Magento frontend. The technology stack used is completely different. Therefore, different competencies and skills are required. In this article, I would like to show you the differences between the two and compare the current Magento frontend technology stack with that of PWA Studio.
The one thing
The most crucial difference is that the PWA Studio is a typical React app, and you don't need special knowledge about Magento to get started with PWA Studio development.
Do you know React?
Do you know GraphQl and Apollo?
You are ready to go!
On the other hand – because it's a React App – the typical Magento Frontend Developer will have problems getting started.
You may ask, why?
That is the main reason why there are not too many frontend Magento developers. Almost nobody wants to learn Magento-specific stuff (who wants to use KnockoutJS in 2021, BTW?)
I had a problem returning to the "normal world" after a few years with Magento frontend development and learn React.
Ok, this was only an introduction. Take a look at the differences between Magento-monolithic frontend and PWA Studio below.
Theme vs. Application
The current Magento frontend is built based on themes. There are two primary themes (Blank and Luma) that you can inherit from. The Luma theme inherits from the Blank theme, and the Blank theme overrides files from core Magento modules.
Theme code is placed in the Magento structure, and it is a part of a project. Moreover, it’s possible to create modules and manage frontend customization directly in module code.
PWA Studio uses an entirely different approach. Have you heard about headless? First of all, this means that the storefront is separated from the backend. This is the right approach because the frontend developer environment is faster and more straightforward. A Magento instance can be set up in a different place entirely. In this case, the frontend team and the backend team are independent, and developing software is more comfortable for both sides.
The only important thing when it comes to using a headless storefront with the Magento backend is data such as products, customer data, shopping cart, etc. All this data is retrieved from Magento using GraphQLqueries (it is also possible to use the REST API to get data from the backend if The GraphQL API is not available for a particular functionality).
Please take a look at this example GraphQL query:
One of the most significant advantages of using GraphQL is that a frontend developer can quickly mock sample data, and switch to real data when the backend is done.
Inheritance vs. modularity
When working with a Magento theme, frontend developers typically override templates, layouts, JS and CSS/Less files from the parent themes or modules. With multi-level inheritance and a large number of modules, a minor change can quickly become complicated.
The PWA Studio storefront is quite different and requires frontend developers to build a storefront from scratch using ready-made React components, or by making their own. PWA Studio is simply a collection of tools that are designed to facilitate your storefront development. Take a look below at the most essential parts of PWA Studio.
This library gives developers a set of functions responsible for providing data to visual components in their application. This is mostly achieved through hooks and talons. You may be wondering what ‘talons’ means. Talons are a specific type of hook, which are designed for particular components. For example, the useFooter talon is designed to be used with the footer component and provide it with copyright text.
Venia UI API
This is a set of visual components that you can use when building a storefront. Within this set you will find a few base components, for example, Button, ButtonGroup, Logo.
Venia Storefront (Concept)
This is a storefront built using Peregrine and Venia UI. This is a storefront demo that presents the capabilities of PWA Studio. It can be the starting point of your application, but it doesn’t have to be.
Developer skill set comparison
I wanted to give this section the title: “Frontend Developer skill set comparison,” but sometimes, when I think about Magento Frontend Developers, I get confused, because they need to be familiar with a few non-frontend technologies like PHP and XML. In my opinion, this is also necessary if they want to manage staff who deal with the Magento frontend. I believe that for more experienced frontend developers, the right career path will be working towards becoming a Full Stack Magento Developer.
But not everyone wants to work this way, and it is not surprising that not every frontend developer will want to learn PHP. Here, PWA Studio has an advantage because it uses typical frontend tools and technologies, which are more friendly for frontend developers. Take a look at the table below where you can find a comparison of the technologies and tools used in a typical Magento frontend and in PWA Studio.
|Magento Luma||PWA Studio|
|CSS & Less||CSS & CSS modules|
|Magento UI Library||Venia UI|
|Magento UI Components||Peregrine|
Grunt vs. Webpack
The Magento frontend uses Grunt as a task runner. A frontend developer can compile Less files and run unit tests using Grunt, but in fact, using Grunt is not necessary. For example, a developer can compile styles using a client-side compilation workflow. PWA Studio uses Webpack, and this tool is very different to Grunt. Webpack is a module bundler, and it is responsible for compiling the whole PWA Studio application.
Less vs. CSS modules
CSS modules are an interesting approach. The key feature is that all styles are used locally, i.e., within one component. This is an entirely different approach from the current Magento frontend, where styles are global.
Knockout, jQuery, Magento UI components vs. React
In PWA Studio, React is used, and the best thing is that a Frontend developer doesn’t need to know PHP, XML, or any other non-frontend tools and technologies.
Magento templates vs. JSX
Also, there is another type of template that is used by Magento UI Components. These templates are written as HTML files, and within them, you can find static HTML code mixed with KnockoutJS bindings.
Now, just as a comparison, take a look at an example piece of code for a PWA Studio view component:
PWA Studio is different from the current Magento frontend in every area. The most significant advantage (for developers) is that PWA Studio is more developer-friendly. This is the future for Magento Frontend developers, and I am keeping my fingers crossed for this project. Also, keep in mind that there are alternatives to PWA Studio, for example: Vue Storefront. So maybe PWA technology is the future of e-commerce? What do you think? Feel free to post comments. I would appreciate it.
Did you like it? Share!
Each share supports and motivates me to create new content Thank you!
About the author
Certified Magento Full Stack Developer, based in Poland. He has 7 years of professional Software engineering experience. Privately, husband, father, and DIY enthusiast.Read more