What do you know about PWA? What about Headless Magento? Both are hot topics. Besides, they are closely related; and below, we explain each phenomenon as well as shed light on Magento 2 PWA – PWA e-commerce based on our favorite platform via Headless Magento 2. The article describes the official Magento 2 instrument – PWA Studio. Next, it discusses the current frontend and compares it to the PWA alternative. Besides, you will find our thought of the Magento PWA readiness for different target groups. There is also a section that offers links necessary to start the exploration of the new technology. And of course, we explore the biggest Magento PWA projects. The remaining chapters of this article explore the PWA concepts and its application to the Magento ecosystem.
Below, we’ve gathered some important facts and thoughts about the native Magento 2 PWA approach and PWA Studio. Let’s try to figure out what important changes the community is going to face and when. But first of all, we’d like to draw your attention to the Magento PWA Studio overview.
Magento PWA Studio Overview
It is finally clear that the PWA concept will entirely change the way the frontend part of an e-commerce store is implemented. While you can still use the current approach to the storefront development and maintenance (you can also stay on Magento 1 if you want, but it is no longer the most powerful e-commerce instrument), PWA Studio has officially become a part of Magento 2. Is it ready? You will see the answer in a corresponding chapter of this article (and it is a very complex answer), but now we’d like to say a few words about PWA Studio itself.
Being a set of tools aimed at the development of Magento 2 themes on the basis of React, PWA Studio introduces a revolutionary approach to the way an e-commerce store is born. It is not a secret that there is a repo on GitHub that contains the current Magento PWA Studio components: pwa-module, pwa-buildpack, peregrine, and venia-concept. Let’s take a look at each one individually.
This package contains a module that offers module helpers and server-side functionality. Consider it a foundation for all PWA themes (themes created in PWA Studio). The module does several important things:
renders an app shell;
handles RootComponent assignments;
embeds GraphQL payloads into a server render.
Your interaction with the PWA module is very straightforward. First of all, you need to install it. Next, go to your backend and enable the PWA module. Finally, you can reference it as a parent for all themes developed via Magento PWA Studio. Everything seems quite simple, so let’s take a look at another component.
Here, the picture is a little bit more complicated since the pwa-buildpack package contains multiple Webpack plugins and tools for the Magento PWA themes development. Besides, you can use them to set up and configure the local development environment. Let’s see what tools are under your disposal:
PWADevServer. The name of this tool speaks for itself: it is designed to set up a development server for your Magento PWA studio theme. Use this instrument to create a custom localhost, SSL certificate, service workers, etc.
MagentoResolver. This one is necessary to adapt Webpack to the Magento file system. Besides, it handles config for Webpack’s resolve property.
MagentoRootComponentsPlugin. You will hardly рandle code splitting without this instrument. It is designed to provide you with the most user-friendly way of generating a unique bundle for each page alongside a global bundle.
magento-layout-loader. While developing a new Magento PWA theme, you will need a tool for transforming a layout. And this solution will help you insert and remove containers.
ServiceWorkerPlugin. This one is a wrapper around Google Workbox Webpack. It is designed to be used for service worker configuration where everything depends on a particular development scenario.
Now, let’s see what the third package includes. Being a set of React components, it contains everything you need for handling Magento-specific functionalities. Root components, routing, product lists, layout handler, and multiple other things can be handled with the help of Peregrine. Another thing the package includes is Storybook JS – an environment you need to manage documentation and visualization of UI components properly. As a result, you get a quick reference for components included in the Peregrine package as well as an accessible documentation.
This package provides a demo theme developed by Magento via PWA Studio. But it is a simple demo designed to showcases some basic features related to standard functionality, workflow, and pages. The theme is in early development but you can find it as a working website here: Magento 2 Venia Theme Store. And it looks stunning!
The core benefit of Magento PWA Studio is its exceptional flexibility so that frontend developers can use any npm packages and tools. And no limitations caused by CSS workflow and styling occur. As a developer, you can freely use React components of your choice, and, as you can see, no GraphQL middleware is added to the package! Thus, you get components and tools necessary for developing Magento 2 PWA themes – not tons of various instruments that consume your time and effort instead of making the whole process easy and painless. But what underlying potential problems are hidden in PWA Studio?
2017 was a year when we found out plans for PWA Studio: the new huge improvement was announced illustrating the company’s choice to React and Redux. Since that time, you might have read lots of articles dedicated to this topic. The community was excited because the new concept was way better than the existing approach to the frontend development. Here at Firebear, we’ve been also monitoring the appearance of the new thing. And while it is still early days of Magento PWA, it is obvious that soon we will face a new trend. Since the current frontend is too complex, PWA is the obvious next move. But can they exist together?
Yes, but only for a limited period of time. The situation is similar to the two platform versions. Magento 2 is much better than its predecessor, but Magento 1 is still widely used by merchants of all levels. They just got used to it and don’t wont to bother themselves with the migration which still has a room for improvement.
Something similar is predicted for the Knockout-based frontend. While it is more complex than the new solution, it is associated with stability, which is extremely important for merchants. Such a situation comes in response with the early days of Magento PWA. Merchants don’t want to bother themselves with the migration burden as well as face the instability of the new technology and the lack of top-notch specialists.
Differences Between PWA & KO Frontends
Nobody will prevent you from using it, but there will be a more powerful, fully-featured, and stable frontend that continuously receives updates and new features; a frontend that everyone deserves and wants! PWA is the future, and you cannot deny that. Thus, it seems obvious that Magento will deprecate the current Knockout frontend. The only question is “When?”.
Let’s take a look at a simple example that is unrelated to the Magento ecosystem but illustrates our problem in the most vibrant form. You might have noticed that trends of wearing a particular outfit don’t appear out of anything. First, you see some “freaks” with this “strange and wacky” appearance. Then, after a year or two, and everyone looks like that strange guys. Thus, an underground trend appears in a small community, but after a certain amount of time, it is adopted by the majority.
Consider PWA enthusiasts those freaks who push everything forward. They always introduce the avant-garde movement that initially looks unknown and frightening but makes everything better from a long-term perspective. Since fashion is way more mainstream and simple than the frontend development in the Magento ecosystem, one or two years seem not to be enough to make PWA the number one approach to the frontend development. Maybe we’ll witness the depreciation of the Knockout frontend within the next five years, who knows?
Reasons To Panic
But there is no reason to panic. Do you still remember the announcement of Magento 1 End-of-Life? Let us remind that there were many merchants, marketers, and developers who were waiting for the appearance of Magento 2. But at the same time, even more people got upset by the fact that Magento 1 will soon be forgotten.
What do we have instead right now? Many merchants still use the outdated version of the platform. And it is not good or bad – it is the state of their culture, mind, budget, or anything else (there are really many reasons to stay on 1.x, but many more – to upgrade to 2.x). The world is not going to end when Magento stops its support for older versions or outdated technologies, and the Knockout frontend is not an exception. You will be able to use it and rely on fixes for major bugs, but no new features will be added.
Fix The Roof Before It Starts To Rain
At the same time, the shift to the new frontend is a very very big deal and a major move. So we recommend you to get ready for it if you are a developer, marketer, or merchant. There is no need to be ahead of the curve, but ignoring the genesis of the new trend can be a terrible bloomer. For most dwellers of the Magento ecosystem, the best scenario is to sit and wait, watching the early adopters. They do their job, make mistakes, provide some fixes, and you can learn from this experience using your old but stable frontend and exploring the new one.
Now, we’d like to discuss the readiness of Magento PWA. As you might have already guessed, the answer depends on who you are. Developers, merchants, marketers, and other dwellers of the Magento ecosystem require different conditions for adopting the concept of the PWA frontend. Let’s try to figure out which group can already leverage the new approach, and who won’t be able to use in the nearest future.
Magento PWA for Merchants
Are you an avant-gardist or average merchant? How huge and experienced your development team is? What do you expect from the Magento 2 PWA frontend? Try to answer this questions before choosing a PWA frontend as a part of your e-commerce website.
Yes, it is better than the existing solution but not as stable as the old one. Do you want to sacrifice the stability to get a faster and better-looking storefront? If yes, you need a team of experienced developers. Magento 2 PWA is not a solution that can be installed and configured in just a few clicks. Get ready for a time-consuming development, if you want to get a frontend fully suitable for your needs that meets all your expectations.
Higher speed means higher revenue. Lower stability means lower revenue. So you can either risk or wait. If you are looking for a one-click PWA. It is not yet available. If you want to leverage a development team – get ready to enhance your e-commerce store with the most powerful frontend ever. But your developers should have enough skills, and you need a budget.
Magento PWA for Managers
So, you a manager who has decent experience in the Magento ecosystem, but heard about PWA recently? It might be a huge challenge to run a PWA project if you have zero experience with the concept. Below, you will find a list of projects to explore. Check what is already available, what features are implemented, and what problems exist.
As a project manager, you have to examine all aspects of PWA before leading such a project. Now, everything depends on your experience and skills. PWA is always ready for managers, but are managers ready for PWA? That’s a completely different store.
The fact is that PWA gains its popularity and have all chances to become mainstream. Perhaps, it won’t be so cool anymore, but we are talking about the development of the ecosystem and the way you should adopt it. So, our advice is not to be too late when PWA is actually the new standard.
Train yourself and your team before starting the first serious PWA project. Below, we provide many useful links to the existing projects and required technologies and instruments.
Magento PWA for Backend Developers
Magento PWA for Frontend Developers
As you might have already guessed, everything depends on your skills. PWA Studio is here – take it and stars creating your frontend masterpieces with the most engaging and intuitive shopping experience. Yes, the tools are not as powerful and fully-featured as they will be within the next few years, but your experience and creativity are the only barriers that prevent you from leveraging the new frontend approach.
You should be already experienced with React – that’s the main requirement. And if you don’t want to write all React components from scratch, take them from Peregrine and apply customizations. But evaluate your skills before accepting any deadlines. It is always better to finish the project faster than you’ve promised than to run out of time without any results.
If you are new to React, start exploring it right now. The Magento ecosystem won’t wait until you will master the missing skills. Once again: Magento PWA is here, are YOU ready for it?
Magento PWA for Payment Providers
As a payment provider, you need a team of both frontend and backend developers familiar with React and other things to implement a new payment method for a PWA frontend. Besides, don’t forget to check how the browser Payment API fits in Magento. PWA is still new and unexplored, but it can be a piece of cake if you understand all the nuances, so don’t waste time and start exploring the new opportunities right now.
Magento PWA for Shipment Providers
Unlike a payment provider, you cannot rely on a Payment API. In your case, the communication between Magento and your platform is entirely custom. Thus, your system should support GraphQL providing the simplified integration with the PWA frontend. Monitor Peregrine for components responsible for API calls regarding shipment. And don’t forget to ask/watch how other providers solve the problem.
Magento PWA for Extension Developers
Hi everyone! We are the team of extension developers and our product is already ready for PWA! The Improved Import & Export Magento 2 extension is frontend agnostic, so you can use it with any PWA project out of the box. What about your tools?
If your module works in the backend, nothing is going to change. If it affects the frontend, you will need to figure out how to adopt it for the PWA approach. But it is obvious that both frontend versions should be supported.
Magento PWA for Others
Turn on your creativity, evaluate your skills, gain the necessary experience, monitor avant-gardists to create your own strategy on the way to the PWA future of Magento!
Below, you can see technologies necessary for becoming a competent Magento 2 PWA developer.
React is a JS library for building user interfaces. It is declarative, component-based, and flexible. With the library, you will effortlessly create interactive UIs. Designing a simple view for each state in your app will no longer be a problem. Furthermore, React is developed for efficient updates: when your data changes, it renders only the appropriate components. And with declarative views, your code is always more predictable and easier to debug.
As for the component-based nature, it is also a very useful benefit. React lets you build encapsulated components with self-management abilities. Next, you can effortlessly compose them to make a complex UI. The component logic is written in JS instead of templates allowing you to pass rich data through your app keeping the state out of the DOM.
And the best thing is that you don’t need to rewrite existing code since React is agnostic to the rest of your technology stack. It can render on the server via Node. As for mobile applications, they can be powered by React Native.
Check the following links for further information:
GraphQL is a query language for APIs and a runtime. It is designed to fulfill queries with your existing data providing a complete and understandable description of the data in your API. After sending a GraphQL query to your API, you will get exactly what you need, since GraphQL returns predictable results. As a result, you can create fast and stable apps.
Furthermore, you can combine many resources in a single request, since a GraphQL query accesses not just the properties of one resource but follows references between them. Here is a huge difference between REST and GraphQL: while the former requires loading from multiple URLs, the latter gets all the necessary data in a single request. Even if an internet connection is slow, apps using GraphQL remain fast. It is also worth mentioning that GraphQL APIs are organized in terms of types and fields. Since it is not endpoints, you can effortlessly access the full capabilities of your data from a single endpoint. Types are used to ensure apps only ask for what’s possible. Clear and helpful errors are provided.
According to Inchoo, Progressive Web Applications are the next big thing in e-commerce, and we cannot deny this statement. Although PWAs will never mimic all the native apps features, they offer much better performance, are quicker to deploy, and introduce better user experience for both customers and developers.
Currently, there are different products, services, and tools designed to help you get started. And if you still use Magento 1, the Magento PWA concept provides a good opportunity to leverage the new benefits of 2.x. You can find a list of agencies specialized in building PWAs here: Directory of Agencies Building Progressive Web Apps.
As for the Vue Storefront project, it is based on the Vue.js framework. Being a fully open source project, it is run by the Polish agency Divante.
The Vue Storefront demo welcomes us with a blasting fast homepage with lots of interactive elements, such as buttons, banners, sliders, and links. Scroll down, and the sticky menu bar will immediately disappear hiding numerous icons: “hamburger”, search, favorite products, cart, and customer account. Scroll back a little bit, and they will be displayed again – just like Google Chrome behaves on your smartphone:
Hover over a product on the homepage, and it will be zoomed in, but no additional elements appear. However, it doesn’t seem to be a problem, since you can freely add them by implementing a few code snippets. We are here to illustrate the performance of the Magento 2 PWA store first of all.
As for a product page, it behaves as you’d expect. Nothing extraordinary happens here, but all elements are responsive, all actions are fast, lots of additional data is stored on the bottom part of a page:
Configure product options and add it to cart – you will be surprised how fast this process is.
Now, let’s open the cart. It is necessary to click the icon on the top bar and the miracle happens here. The cart appears faster than you release your finger from the touchpad. And it acts like a mini cart widget covering only a part of the screen. You are not redirected to a separate cart page but the provided interface is fully functional, so you will never think about looking for a normal cart page. It is just unnecessary.
As for the Checkout section of the Vue Storefront demo, it provides only positive impressions. The summary section is huge and informative: it even includes relatively big product thumbnails – big enough to see what product is that. And it is a one-page checkout with top performance and user-friendly interface.
DEITY is a React theme with some closed-source implementations. Started by the Dutch/Polish agency Hatimeria, the project is now run by the newly founded company DEITY BV.
DEITY also illustrates how fast and user-friendly Magento 2 PWA can be. Despite the appearance of various frontend elements differ from the scheme applied in the previous project, the Deity storefront still represents an alternative way for customers to surf for products. The sticky top bar doesn’t hide like in the previous example, but the frontend page is also cool.
At the same time, by hovering over products, you don’t get any new buttons – the same behavior was illustrated above.
A product page includes fewer elements than one used by Vue but it is still fast and fully-functional:
Besides, Deity offers both a mini cart widget and a cart page. Click the black cart icon on the top right part, and the mini cart will be displayed. you can configure product details here, review the cart page, or proceed to checkout.
The redirection from the mini cart to the cart page happens literally in no time. All calculations and changes are applied immediately here:
As for the checkout page, it is less user-friendly than one described above:
It is also necessary to say a few words about Front Commerce – a closed-source solution from France. This project looks quite canonical with a Magento 2 based backend and a React frontend. Note that it is closed source.
Magento 2.3 with GraphQL support is available, so you can fully leverage the new feature generating static landing pages with Gatsby.js as a core. As a result, you get VERY FAST landing pages that cannot be created with the standard Magento 2 tools.
As for Gatsby.js, it internally provides you with the ability to query GraphQL “resources” to generate static pages, which is a new and very extensible concept. As a developer, you get the ability to define own resources which emit whatever you need when you query them. The GraphQL support allows eliminating a very complex logic behind the new idea and provides the ability to implement it without any headaches.
This one is a PWA analog of the Luma theme. Being the only official Magento 2 PWA theme, Venia is available as a part of PWA Studio. Below, you can see some screenshots of its live demo.
Progressive Web Applications Explained
There are three core requirements for every progressive web app. First of all, it must be reliable. But what does this term mean? We can provide dozens of explanations but in case of PWA reliability is closely related to the following features:
fast load time
accessibility in unclear network conditions
The second important aspect and another PWA benefit over native apps is speed. Progressive web apps respond quickly and provide the most smooth way of interaction. No janky scrolling occurs.
The third PWA requirement is totally engaging user experience. Any progressive web app feels like a native app and provides the even more immersive user experience.
As you can see, all three PWA benefits make the new approach oriented at users. The new level of quality becomes a substantial competitive advantage over the existing methods, but we’ve only described a tip of an iceberg.
How many times did you face the dreaded error message during the last few weeks? Of course, the particular number depends on the device and apps you use, but the message appears on a screen quite often. What alternative solution do progressive web apps offer?
The idea behind the PWA approach is to eliminate this message by providing extra reliability and availability. With PWA, you will no longer get all these annoying messages even in the offline mode.
Content is delivered to a user via the app shell. In offline, it calls up the page’s structure. While the common page is unresponsive and displays errors, a progressive web app shows a page header, layout, and illustration that the page is loading. Nothing happens like in the case of native apps and web pages, but the visual aspect of the problem becomes more user-oriented.
Another critical PWA requirement and benefit is adaptiveness. Any PWA is responsive so that an individual can use it on any device quickly switching between devices.
To provide extended availability, PWAs rely on a service worker which is used for content caching. Thus, after the first launch, the application contains not only the aforementioned interface elements while the network connection is disabled but also some additional details, for instance, articles list.
This method is called the RAIL model:
Response – an app is responsive to the user’s request;
Animation – it displays an animation to keep the user waiting;
Idle – a PWA uses the “idle” moment to cache content;
Load – it loads under a second.
If you think that these are all PWA benefits, we should introduce you to another outstanding feature of the revolutionary technology: the installation.
Do you like the installation of native apps? We don’t think so. Perhaps, you got used to it, but it doesn’t mean that you enjoy the procedure. It’s a pitfall, but you will no longer get into it with progressive web apps. With PWAs, you are prompted to install the app on the home screen of the device. A new icon appears there and sends information about the PWA to the browser.
And due to the usage of the aforementioned service worker, there is an opportunity to fully leverage push notifications. The technology is fully supported on desktop devices by Chrome, Firefox, Opera, and Safari. The mobile support should be added soon. This feature allows implementing an extra layer of engagement and provides a new channel of interaction with your buyers, readers, clients, subscribers, etc.
The requirement to be served over HTTPs is another PWA benefit. The technology is more secure than other existing approaches, unless the HTTPS becomes a requirement for other apps, for instance, iOS apps.
We’ve just explored progressive web apps from the end user perspective. Now, let’s focus on several important PWA e-commerce aspects.
The most important benefit of PWAs over native apps is the ability to find them in search results. You can implement various SEO techniques to make them more visible, while native apps don’t provide any similar opportunities. Moreover, they require an app store to become available to your customers. Thus, PAWs give the ability to reach a broader audience.
Another critical aspect is improved conversion. Due to a better user experience we’ve just described, PAWs radically decrease the abandonment rate. From the perspective of e-commerce, they also have a chance to reduce cart abandonment rate, which is very high, increasing sales.
Besides, the aforementioned push notifications increase the conversion rate as well. Unfortunately, mobile support is not available yet, but you can already leverage the PWA feature for desktop devices.
And you will save lots of time and money, since PAWs are platform-agnostic, so you don’t need separate applications for Android and iOS.
Does it mean that all e-commerce merchants should rapidly move from AMP to PWA? We don’t think so. It is still possible to use both approaches to leverage all the benefits they provide. A significant advantage of AMP is the ability to improve load times on specific pages without redoing the entire site. And there are several extensions designed to implement the optimization most efficiently: Magento 2 AMP extension. On the other hand, PWAs create an app-like experience through the use of modern web features. Both approaches are right; it’s up to decide what balance between them to set up.
Headless Magento is a relatively new term that describes an e-commerce store that is based on the Magento platform but uses a different technology stack for the UI/UX. Magento REST API endpoints are still used for the store functionality. Thus, you get an analog of a progressive web app for Magento. Of course, it is necessary to reimplement the front-end store and any extension functionality so that it is not a budget-friendly technique, but you can create any custom user experience which is more optimized and customer-centric.
a vanilla HTML page;
remote calls to the Magento API.
The benefit of the new markup is not only in its simplicity but in the lack of the necessity to execute PHP code. As a result, the HTML page could be served statically. What does it mean? Right – the application load time is reduced to the minimum. No Magento parts are available in the HTML page so that products, categories, and cart need to be lazy loaded.
Thus, we get tiny TTFB (time-to-first-bite) and not so small TTI (time-to-interact). Note that the page becomes useful only when the elements mentioned above are lazy loaded.
Another vital aspect of Headless Magento 2 is the ability to avoid using KnockoutJS. Now, it is a solid requirement for developing in Magento 2, but by going ‘headless,’ you can quickly swipe the framework. As a frontend developer, you can seamlessly use Angular, Vue, or other frameworks with Headless Magento 2. And what are the consequence of freedom?
You don’t need to be a Magento specialist to create cool things from the platform. Thus, it is not necessary to hire a team of Magento developers if you already have someone who can focus on REST API. Unfortunately, everything is not as easy as it may seem now. In practice, building your own pricing rules might be more natural than modifying the existing Magento pricing rule system. Lots of time and effort are usually required, but everything works the way you want it to work. Are all the endeavors reasonable? It depends on the project. For most business ideas, the default Magento 2 will be always enough (if it is extended with third-party modules), but some complicated ideas still require complex solutions and Headless Magento 2 introduces the best way to achieve the goal.
Headless Magento 2 Resources
The App Shell Model – you can find the most critical information about the application shell architecture her. It is a standard design for headless apps, so if you are not familiar with the topic, please, explore it before going to Magento-specific resources.
Going Headless – the repository created during Imagine 2017 DevExchange sessions; contains various ideas regarding usage of Magento’s Web API with custom frontend – Headless Magento 2 + the most critical and painful points in Web API flows and development.
Headless Magento & Extensions – if you are a Magento 2 extension developer, you will find answers to all your questions concerning third-party modules and Headless Magento in this article. Besides, Alan Kent shares his thoughts on Headless Magento 2.
CMS API In Mage2– the demonstration of how to add and edit CMS pages via REST API built into Magento 2. The article is focussed on how to create and edit CMS pages.
MageSDK – A PHP wrapper for the Magento 2 APIs that offers the ease of use for retrieving and setting data.
Mamas & Papas and OUNASS – two e-commerce storefronts developed via the Headless Magento approach.
Magento 2 PWA Explained
After reading all the previous paragraphs, you won’t be surprised if we say that Magento 2 is becoming a Progressive Web Application platform. The company is working on a new suite of tools designed to provide developers with the easiest way to build Magento 2 PWA stores. Meet the Magento PWA Studio!
Why did the Magento team decide to introduce this approach? Perhaps, they don’t want to stay in the same place, pushing the technology to an entirely new level. Both user and developer experience may be substantially enriched in the nearest future. Increased speed, better usability, offline operation, device integration, and many many things described above will soon be introduced with Magento 2 PWA.
Magento 2 PWA is better than any reasonably fast website due to the following reasons:
The network traffic is reduced to the minimum. As we’ve explained above, progressive web apps work even if the network connection is lost. Of course, they create the appearance of work, but in case of a slow connection, users can still efficiently interact with the application. Besides, the first-page load serves a very small shell document; web traffic is served over HTTPS; ServiceWorker does intelligent caching; no postback or page refresh; app code loads new functionality as-needed, etc.
Non-blocking techniques are used for keeping UI responsiveness at 60fpsand providing the same experience as a real native app does. DOM elements are not touched directly; layout thrash is avoided via complex calculations deferring; the page does not “jump around” during the content load.
ServiceWorker acts like a “smart client” that doesn’t require network traffic for every interaction.
Acts as an app that could live on the home screen alongside native apps.
As for the tools, they will be much more developer-friendly. Many of the existing instruments are hard to master and use on the frontend, but the Magento PWA Studio is an exception. Almost all early-stage design thinking was concerned with the developer experience. If you think that the PWA Studio suite is just a theme, you are mistaken. Get ready to enjoy the end-to-end self-education experience with a full feedback cycle, reliable quality assurance, and robust deployment.
The idea behind the Studio is to make Magento 2 development possible for every specialist. The suite can guide a novice developer to hacking on a new store in minutes building a reliable and highly optimized product. Making faster stores in less time is another goal of the project. The development should be less frustration and more confident providing a merchant with one more instant shopping channel. There are also plans to make the tool open source. But how can it change the community?
If the plans mentioned above are real, we will get an absolutely new competitive environment in the Magento market. The existing Magento developers will get lots of competitors from other segments. Everyone can master Magento 2 PWA, so it should push the market forward. The existing specialists will have to provide better (more affordable) conditions or offer products and services which have substantial competitive advantages. At the same time, the significantly increased army of coders may fundamentally enhance the usability of the platform making Magento even more popular among e-commerce merchants. Perhaps, it is a preventive measure against the growing popularity of Shopify and other competitors.
Magento 2 PWA & Its Core Concepts
API Layer. You may be impressed with the Magento REST API coverage, but get ready to get more with the PWA Studio since it will require new API methods. More efficient API endpoints at runtime are also planned. Chances are, a new API style will be added because slimmer more customized responses are required.
You can forever forget about dirty state checking, string templates, and two-way data-binding since it is possible to implement the “unidirectional data flow” pattern with pure components, render methods and virtual DOM reconciliation. Looks nice and this is just the beginning.
Magento 2 PWA provides the ability to leverage ReactJS to do all rendering and event handling. Progressive loading, extensible by third parties, is also among the provided PWA benefits since you get a core library of simple view components and higher-order behavioral components.
Redux is another vital bonus. It is used for managing all shared state and a core library of Redux reducer functions. React-Redux is also used to bind state transformations to views and optimize renders. To achieve the maximum performance, the Magento PWA Studio swaps out React with Preact in the final production bundle.
It is also possible to take CSS Modules and isolate/scope stylesheets to components. There is a possibility for customizations so that you can expose a familiar stylesheet paradigm to third parties.
Testing of components, reducers, and actions involves Jest and Storybook.
To pre-compile store configuration into the frontend, the tool builds, bundles, and minifies with Webpack enhanced with custom loaders and plugins.
Developer experience. As we’ve already mentioned, the number one priority of Magento 2 PWA is developer experience. A robust and fully-featured tool will improve all aspects of daily routine. Even error messages will be enhanced with links to documentation providing the easiest way to solve any problem. Get ready to take advantage of the compile-time AST analysis that catches all frequent errors and explains step-by-step how to fix them. All misleading parts of the development experience will be removed if possible. Everything else will be appropriately documented.
If you are put off by the idea of Magento 2 PWA and Headless Magento 2, don’t make hasty conclusions. If the concept looks similar to “applets” that were using Flash or Java and are now recognized by both users and developers as the Wrong Way to Web, you are mistaken. Indeed, PWAs introduce the exact opposite approach. Every “page” is bookmarkable with extended possibilities. SEO is not only supported, but it also has some extra space for the optimization. The same is about accessibility. Besides, the Magento 2 PWA shop can provide communication between multiple tabs of a site and make them talk to the server as a single application. Fewer resources are used, and customers get a better shopping experience. And, unlike applets, Magento 2 PWA allows reducing page cruft and is built around caching. The future is born right in front of your eyes.