With tools such as Require.js, Bootstrap, Less CSS in general, as well as Knockout.js, jQuery plugins, and browser session caching especially in the checkout experience, supported on the backend side by the Rest API, Varnish, Redis and Elasticsearch it is a huge step forwards a more dynamic and modular architecture but it has some natural limitations.
The Luma frontend theme
In Luma, HTML is generated in two main ways. On the server-side via PHP in the view layer of Magento modules, by JavaScript plugins either directly or by the mechanism of Knockout.js. The good old server side rendering is practically still the most reliable and widely used way to generate HTML and Magento 2 does a great job with it.
The idea behind using Knockout.js and the Rest API in the Magento 2 frontend code was to start moving the logic of generating user-specific data from the backend to the frontend. This approach has a number of benefits: Full page caching is easier on the backend side, the frontend and backend communicate via a well-defined API, dynamic data can be heavily cached in the frontend as they are only pulled re-generated when there is a change. Require.js and Knockout.js, however, have some drawbacks both in terms of performance and usability. Though still stable and maintained, especially Knockout.js has become obsolete in today’s quickly changing world. Their main downside is that the browser has to reload and re-parse the javascript libraries and the knockout templates so that it can start displaying dynamic content on every new page.
The Luma frontend was the first huge step towards a headless architecture and separating the backend and the frontend in Magento. For the next step, however, a bald and radical change had to be embraced, which meant a complete re-invention of the Magento API as well as the frontend.
PWA Studio and The Venia frontend theme
Magento started completely new backend and frontend projects and started to develop a React-based PWA with a GraphQL API backend. PWAs combine the words and benefits of single-page applications, websites and mobile apps: with their offline mode and “add to home screen” feature they act like mobile apps without the need to publish them, they are cross-platform, indexable by search engines, and faster than normal websites thanks to the service workers technology.
Choosing React and GraphQL as the basis for the Magento PWA was probably the best choice, as they are actively maintained, future-proof, widely used and widely supported technologies with a very steep learning curve in general.
Magento’s PWA Studio as of the end of 2020 is still a work in progress, but quite stable and although is missing some important features such as Internationalization and Localization, Multi-Store, some My account features, wider support of payment methods, these functionalities can be added by developer agencies on their own with some effort and can be used in production.
Why is GraphQL so amazing?
GraphQL is flexible both on the client and server side and is fun to work with.
On the server side
- GraphQL APIs are organized in terms of interfaces, types and fields, not endpoints. In Magento 2 Backend, it is easy to create, extend them, or modify the behavior.
- The Magento 2 team is implementing a full coverage of customer data types
- Extension developers already started to implement the GraphQL API for their modules
On the client side
- Developers can use cool tools and documentation
- GraphQL Gives clients the power to control data and ask for what they want and nothing more or less
- It is possible to get structured data in one go traversing the hierarchy of types
- Modifying and querying data can be done in one go
- It is allowed to get many resources in a single request using a single endpoint
- Data can be cached on the type level
- PWA studio implements the powerful and easy to use Apollo Client library to fetch, modify cache application data
The main potential issue with GraphQL is the performance of more complex queries, which can be overcome by wise use and performance optimization.
Why is React so amazing?
ReactJS is a JavaScript library for building user interfaces. While it does not provide a complete pre-defined application framework on its own, it allows the choice of libraries for data access, data storage or design patterns. This flexibility let the Magento PWA Studio team create, for example, to apply different caching strategies, and develop their custom Peregrine library to handle the business logic of the Venia UI components.
The main benefits of ReactJS
- Simple – The React library does one thing: build a user interface. It does this without making assumptions about the underlying technology stack.
- Declarative – Creating a complex user interface is difficult when working directly with the DOM API. React allows to describe how your interface should look for a specific application state.
- Modular – React encourages developers to create modular and reusable components. Taking a modular approach to development makes the code easier to debug and maintain.
Is it recommended to start developing a new PWA Studio website in Q1 of 2021?
With some limitations, it is. Magento PWA Studio is very close to having complete coverage of all the basic features being available for the wider audience but the gaps can be already filled in. Some points to be considered:
- It is best if the webshop uses only a limited number of 3rd party extensions – the frontend of these extensions has to be rebuilt on PWA from scratch as well as any missing GraphQL functionality on the backend side, which increases development time.
- SEO needs extra care, pre-rendering or server-side rendering is recommended
- it is recommended not to deviate too much from the common e-commerce look-and-feel so that existing components can be reused as much as possible
- It is highly recommended to use CDN for static content
What ITG Commerce can add to Magento PWA Studio?
To fill in the gaps, ITG Commerce provides the following features and packages:
- Support for multi-site and multi-language
- Support for multiple payment methods
- Customized checkout
- PayPal on checkout, wish lists, compare, full dashboard coverage
- Improved GraphQL and frontend performance
- Support for bundle products
- Pre-rendering for SEO
- Product ratings and reviews
- Improved product gallery
- A base template as the starting point of the design
- GTM support
- Support for recommendation engines, such as Nosto
- Support for marketplaces via Unirgy uMarketplace Suite
The future of Magento frontend
PWA Studio is definitely the future of Magento frontend. It not only provides a new level of user experience but puts Magento development in the front line of technology.
Useful links:
Examples of PWA studio implementations by ITG:
Considering a PWA site?
If you’re already excited about launching a PWA site, you can get started with us right away.
In case you are keen to explore our solutions further, we welcome you to talk with one of our professional PWA, Marketplace and Magento eCommerce specialists to answer your questions now.
As Chief Technology Officer, Ferenc leads the technology department at ITG Commerce, Ferenc is a recognized Magento Master and certified Shopware Developer.