Some background on Magento Front Ends
I think that
Progressive Web Apps (PWA’s) are a stand alone front end for ecommerce platform, in this case Magento. Before we dive into the specifics of a PWA. Its necessary to understand how the traditional native Magento theme (Luma) works.
Luma is built to provide the core ecommerce functions for users to engage with. This includes category navigation, the add to cart navigation, order placement in the checkout with credit cards etc. Think of these as the fundamentals of transacting online.
To the user these appear as instantaneous actions where the only action occurs on the webpage. In technical reality when the user completes an action, say ‘add to cart’, the button initiates an action to the back end (software/database) where this action is stored. As the user completes more actions (add other items to cart, create an account, complete checkout etc) each of these triggers an event in Magento.
This interplay between the front end (Magento theme) and the back end (Magento admin) comes built into the Magento platform.
With a PWA or other headless solution, this connection between the back end and the front end does not natively exist. Depending on the front end solution the integration between the backend and the theme can vary widely in complexity.
So why go through the effort to connect a different front end if Magento already comes with one (Luma)?
There are a number of reasons that make this a good (eg. profitable) approach. Without going into too much technical detail, the technology that Magento uses to connect the back end and front end has always been slow in its performance. After all this is 20+ year old tech. Additionally, the method of integrating the two comes with extensibility limitations. First, the time to add new features and integrate the two can be lengthy. It can also be limiting as Luma comes with practical restrictions. It’s not the most flexible front end theme on the market. Furthermore, this method originates in the pre-mobile, pre-tablet era. This type of theme structure is not very mobile friendly. It requires a heavy investment of development time to provide a sub-optimal experience. Browser and device compatibility remains a major challenge. It may look and work great on a iphone 12 using safari. But the android chrome experience may be miserable for users.
PWA’s, conversely, are built using modern technology method (code). While there is additional effort required to build the connection between the front end and the back end, this is justified in several ways:
There are no theoretical cons that I am aware of today. But there are challenges. Depending on the features and 3rd party modules that are in use there could be compatibility issues. Or simply recreating those features in a PWA is cost prohibitive.
There is also a greater upfront cost as the “connection” between the front end and the back end needs to be built. This has greatly improved as PWA’s have become more commonplace. There are front end PWA frameworks that support core features out of the box (ScandiPWA). The extensions have become compatible. Magento hosts now widely support PWA.
The SEO concerns are a larger conversation best served in its own post. The short of it being there are both SEO winners and losers in moving to a PWA front end. But the net gain is typically highly positive. Google recommends PWA’s as optimal in its ranking models.
The objective in this piece is to explain the key differences between using the native Luma theme versus a Progressive Web App front end.
Again, the main concept is that Magento’s built in front end theme is detached and the PWA front end is built in its place.
There are many more advantages in using a PWA front end. Many more complexities as well. A detailed post (for those interested in a Progressive Web App) can be found here.
