PWA Magento Studio
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.
In a nutshell, the Progressive Web App is a web-based application that works on the browser’s side but behaves like a native application running on the cloud. It works like an application because it runs “installs” and the code on the client’s device or computer, with better speed and capabilities than the JavaScript pages that were created. However, it is still a web application because it is written in HTML, CSS, and JavaScript, not in a specific language like the native framework as in the case of the application. Its progressiveness results from the fact that it loads itself, along with all relevant data and resources and the user using the store. All this means that on the one hand, the programmer can use its ease of portability, global reach, and open network standards, on the other hand, the end-user can experience speed, usability, receive the ability to perform operations offline as well as the benefits of using native applications. Hence, it is said that PWA is the future of the network and one day the use of this technology will be obligatory for every major website, just as today it is obligatory to use Responsive Web Design or image compression. Therefore, Magento has partnered with Google to make PWA an integral part of the Magento platform.
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.
PWA does not directly touch the DOM document tree, instead, it renders it through a special library such as Polymer, React or Vue. It has the ability to detect when the user is offline, so it can display a special message, can also send push notifications and run JavaScript functions after receiving the notification, even when the browser is closed. On supported operating systems (Android, Windows Phone) it also has the ability to add as a native application, appearing on the user’s screen just like any other application, instead of running in the browser window. It should be noted that it “installs” itself much faster than the native binary application downloaded from the application store.
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.
