To help developers fully understand why a new frontend technology like Progressive Web Applications (PWA), is needed, we first need to shed some light on the current Magento 2 interface. This developer’s guide will breakdown Magento 2 PWA’s technology.
While Magento’s current front-end technology is showing signs of age, PWA is a potentially game changing technology that will empower you to bypass the front-end design system to create amazing experiences for your customers.
Here is a brief description of the current Magento front-end interface:
Magento 2 uses much the same design system as Magento 1 for the main parts of the interface, which consist of:
• Blocks (PHP classes)
• Templates (PHTML:HTML files combined with some PHP coding)
• XML Layout (infrastructure)
• JavaScript (mainly jQuery with RequireJS to manage dependencies)
• Less as a CSS preprocessor
Because the layout system has essentially gone unchanged since 2007, it lacks flexibility. After a learning phase, ideally including formal training, front end developers can easily work with the design system, albeit with some inconveniences.
One issue for the current Magento frontend is a general lack of documentation. Also, the HTML code generated by XML is difficult to adjust and debug. The outdated versions of jQuery and jQuery UI and the problem of CSS compilation being too loaded also harm the general perception of Magento’s frontend accessibility.
User Interface Components
Magento’s central team created the UI components to obtain a modern and extensive interface that can handle many components. These components are more or less self-dependent and may access other components through well-defined interfaces. While the user interface components are mainly used throughout the payment process and the administrative area, there are plans to extend their use through the entire interface to replace the old design system in the long run.
The main user interface components are:
• JavaScript (js) for the logic
• Template files (HTML) to show HTML
• XML to define the components, which are sometimes altered with the PHP code
• PHP Classes to provide data such as JSON
While this mostly works well in practice, it means that a lot of time is required to access the system and identify which parts of the code are responsible for which functions, although the user interface components are very extensible throughout. This means that even the most experienced developers will need a lot of time to do seemingly minor adjustments, especially regarding payment.
While Magento has promised to simplify the user interface components, the underlying complexity will be always present. Fortunately, alternatives to the current interface are on their way.
Progressive Web Apps (PWA)
PWA is a new technology that combines the advantages of mobile apps and native web sites. But regarding Magento, there’s one key factor that will shape the platform’s future: PWA allows you to disengage frontend and backend.
PWAs are generally created in a Javascript framework such as React, Vue.js or AngularJS to handle and showcase data. These Javascript frameworks communicate with a backend (Magento 2 in our case) through API REST. If we add a storage layer cache (such as a node.js middleware), we will have an incredibly fast front end that covers the same functionalities as the traditional Magento one.
The ability to disengage the Magento 2.0 backend allows you to bypass the complicated interface. The most important step will be to have a good predetermined extensible theme based on React or Vue.js
In the meantime, Magento is currently developing a PWA Studio using React for the interface. While there’s not much public information on this project, this will be the optimal road for an exponentially growing platform.
