In e-commerce land, a shift is underway to a new way of building web shops: PWA.
But what exactly is a PWA, and why is this technique so promising?
Before we explain PWA, let's take a brief look at the common way webshops are set up.
With a traditional Web shop, the browser's request arrives at Magento.
Magento searches for all the relevant data and builds an HTML page based on it. This page returns to the browser, which then displays it. This process repeats for each page the user views.
This has always worked and will continue to do so. But the online world has changed considerably over the years. Well over half of all visits are on mobile and by no means always on wifi but, more often than not, on the move on mobile networks. In addition, people expect an increasingly enriched user experience with more dynamic elements on a web page (the "app-feel"). This automatically means a different frontend technology stack that makes this possible.
This is where PWA comes in.
With a PWA - short for Progressive Web App - the frontend is detached from the backend. The PWA itself retrieves the data it needs and takes care of displaying it.
The PWA flow runs like this: the browser requests a page from the Web shop and a static HTML page is immediately served up by a Web server (this is a very quick process). In the browser, dynamic data is requested from the Magento API using Javascript. Magento sends the data back, which is rendered in the frontend.
Instead of retrieving every page entirely from Magento, the 'framework' of the shop, i.e. the header, footer, menu, etc. is actually retrieved once. And from then on, when you click to another page, that framework remains loaded in the browser, and new data is requested via the API, and that framework is updated with new information. This can happen very quickly.
Because the perceived performance (the speed perceived by the user) is so good, it contributes enormously to the user experience and conversion of your shop.
So how fast is it? Well that fast.
Because Magento itself no longer builds HTML pages and actually does nothing "visible," this is called a headless backend.
So Magento no longer generates the pages that users see, but actually only makes data available through the API. Not only reading data, but also modifying data in Magento can be done through the API. Such as creating a shopping cart and adding an address to a customer account.
Bold wouldn't be Bold if we didn't put our own spin on Magento PWA. We do that, for example, by flipping the architecture and extending technology stack to include the NUXT framework and ElasticSearch as the catalog's data backend.
Magento frontend development is known to be complex due to overengineering and thus has a steep learning curve.
At first glance, small adjustments sometimes take a lot of time. This is a thing of the past with PWA. By using common, frequently used technologies, every frontend developer can get started right away. Last but not least, the fun is back in developing a webshop frontend.
Finally, where previously the frontend would suffer from cache flushes or long-running indexers, this is not the case with a PWA. The PWA runs separately from Magento and will therefore always remain fast and stable even if Magento is having a hard time.
Come and experience for yourself how we implement PWAs on Magento.
Dial 020 - 303 50 76 on your phone and press 'Call' or email to [email protected]. You may also drop by: go to Teleportboulevard in Amsterdam and ring the bell at number 128.