Magento is slowly becoming an application supporting Progressive Web App (PWA), first implementations are emerging and more is being said about the PWA at Magento conferences. For this reason, the Magento team started working on a set of tools supporting the work of programmers in learning how to use PWA. These tools are designed to help programmers in the use of PWA techniques, creating fast interfaces, components and extensions for reuse or sale in the Magento Marketplace. Magento PWA Studio is very helpful in all these activities.
WHAT IS PWA?
The term Progressive Web App was invented by Google, although Google does not own the intellectual property of PWA in the way Adobe, for example, has Flash. Unlike Flash, PWAs are built on the basis of open standards that Google often uses and implements, but which are not reserved. Google maintains even the PWA documentation and tutorials, teaching how to use it, and also provides a tool for assessing the PWA performance of the Lighthouse aisle.
WHAT MAKES PWA DIFFERENT THAN ANY OTHER QUICK WEBSITE?
First of all, PWA minimizes traffic and resources needed to browse subpages, and thus significantly reduces the need for server resources. The first-page load returns a small document with links to the appropriate resources. The network traffic is handled by HTTPS and strongly buffered, and the special workers intelligently cache appropriate resources, so it is not necessary to send back requests or refresh the page each time. The application code is loaded gradually as required, as well as data. Special downloading techniques without blocking resources maintain the responsiveness of the interface at the level of 60 frames per sex, so that the recipient seems to be dealing with a native application, instead of incredibly slow simulation.
HOW WILL THE PWA WORK IN MAGENTO?
The assumption is that Magento will be equipped with a set of independent, but cooperating tools that will allow any developer to create a new Magento PWA front in a few minutes, and then help him achieve a reliable and highly optimized production of this PWA. Every person who starts to learn PWA with the Magento PWA Studio will be another developer creating faster shops in a short time, with less frustration and greater efficiency.
API LAYER IN MAGENTO
The REST API offered by Magento 2 makes an impression, but the creation of PWA Studio required adding some additional methods to obtain other, more effective endpoints for the API – the goal of the project is to deplete methods and get more personalized responses than the standard REST API methods do. There are, among others, experiments with GraphQL a popular choice of programmers for building web services. The application shell is a simple PHTML file, prepared manually at the beginning of the project and edited. It is the basis of the HTML response for each query.
FRAMEWORK OF THE APPLICATION
Magento PWA Studio will work with Magento using a small subset of existing functionalities that will be used with API calls. The application implements the pattern of “unidirectional data flow”, using pure components, rendering methods and virtual nesting of the DOM tree instead of each time checking the application status, generating templates and bidirectional data binding. For this purpose, ReactJS is used to render all elements of the application and view, as well as Redux, used to create the application’s business logic. With React-Redux, changes are associated with the generated views.
WHY MAGENTO PWA STUDIO USES REACT?
There are three main reasons why Magento decided to use React technology in the construction of PWA Studio:
Technology evaluated well by developers, with the introduction of changes gives immediate feedback which translates into high usability of application development
A large community of developers with a broad knowledge base that allows relatively efficient learning of this technology
A structured format of changes view (virtual DOM tree) that can be analyzed and easily transformed.
IS PWA WORTH YOUR TIME?
It’s important to note, once again that also from a technical point of view, PWA is the future of eCommerce and Magento in particular. Up until now, the issue of the heaviness of Magento has often been raised because of the number of elements that are rendered. PWA completely changes the character of things. As with RWD, there are many different ways to implement it, but all of them should take into account the architectural and performance guidelines that cause the site to load progressively. The use of it gives the user an exceptional experience.