Update from December 08, 2020: Practical experience from several projects has shown that in our opinion the PWA approach is not suitable for all Magento projects. With Hyvä we have therefore developed a new approach for a high-performance and above all simpler frontend. More information about Hyvä Themes can be found here:
To understand why a new frontend technology is needed, we first have to shed some light on the current frontend of Magento 2.
Current Magento 2
Magento 2 has many strengths: backend development with Dependency Injection, Test Coverage and APIs to name a few. Unfortunately, the current frontend technology doesn’t belong to those strengths. Let me give a short overview of the current frontend:
The layout system
Magento 2 uses the same layout system as Magento 1 for big parts of the frontend. It consists of:
- Blocks (PHP classes)
- Templates (PHTML files: HTML mixed with a bit of PHP code)
- Layout XML (for the structure)
- LESS as a CSS Preprocessor
As the layout system is basically from 2007, it’s a bit oudated and lacks flexibility. After a learning phase (ideally supported by a training or other means), frontend developers can work with the layout system quite well usually, even if there are some drawbacks. In general, the developer experience is lacking and details like HTML code generated by XML are hard to debug and adjust. Outdated versions of jQuery and jQuery UI as well as an over-engineered CSS compilation don’t help with the suboptimal general impression.
UI Components have been invented by the Magento core team in order to have a modern, extensible frontend which can cope with many components. Those components are more or less self-dependant and can access other components by well defined interfaces. UI Components are used in the checkout and in the Admin area mostly, while there have been plans to extend their usage to the whole frontend, replacing the old layout system in the long term.
The main parts of the UI Components are:
- Template files (HTML) for displaying HTML
- XML to define the components (which is sometimes altered by PHP code)
- PHP classes for providing the necessary data as JSON.
While this works well in practice (except that you can see the page building up very clearly), it has a huge drawback:
- It’s extremely complicated and thus very hard to understand what’s going on.
This means that it takes a lot of time to get into the system, find out which part of the code is responsible for what and do adjustments, although UI Components are well extensible in general. This means that even experienced developers need a lot of time to do seemingly small adjustments, especially to the checkout.
Some quotes from two extremely experienced Magento developers:
Whenever I try to use a custom or core UI component the experience is frustrating, time consuming and painful.
Vinai Kopp (2016)
Hopefully […] Magento’s engineering teams will be able to get these new and incomplete systems under control.
Alan Storm (2016)
The depth of the XML code which is needed to do small adjustments is one sign of the complexity:
— Maria Kern (@maja_kern) 11. November 2017
While Magento has promised to simplify working with UI Components, the underlying complexity will always be there. If you are interested in more details about the UI Component system and its flaws, I recommend reading my blog post from November 2016:
In my opinion: Magento made a big mistake with the overly complicated UI Components, and they know it.
Fortunately, alternatives to the current frontend are on the way now, and we are looking forward to using them:
The Approach: Progressive Web Apps (PWA)
PWA is a relatively new technology which aims to combine the advantages of native apps and websites. You can for example pin a website to the home screen of your phone, use the machine sensors or cope with offline phases. But regarding Magento, there is one single factor why I think that PWAs are the future:
PWAs allow to decouple frontend and backend.
If you’d like to know more about the technical background and the use cases, we recommend reading the blog post “Progressive web apps – the future default” by Inchoo.
At the moment, we are seeing three approaches gaining a lot of traction:
This is the official technology which is currently being developed by Magento Inc. It will use React for the frontend. The final result will probably be very extensible, but it will take some time until a stable version will be released. There isn’t much information about the project publicly available at the moment.
DEITY also bases on React, but already has a couple of closed-source implementations under its belt. You can see it live in action at https://therake.com/ or at the official demo shop at https://demo.deity.io/. Its technical foundation was built by the Dutch/Polish agency Hatimeria. The newly founded company DEITY BV in Eindhoven (NL) has taken over development and support and is currently working hard on improving their Middleware and Progressive Web App technology.
As the name suggests, Vue Storefront bases on the Vue.js framework. It’s a full open source project initiated by the Polish Magento agency Divante. You can see a demo shop at https://demo.vuestorefront.io. Vue Storefront is currently in heavy development, but it will take a couple more months to get production ready.
For completeness, we have added Front Commerce as a fourth contentder. due to the closed source approach, we don’t believe in them getting a bigger market share, but it’s an intersting approach nontheless and might be a good fit for Magento 2 shops.
Front Commerce is a closed-source solution from France. It connects a Magento 2 based backend with a React frontend. They have an impressive demo at https://demo.front-commerce.com/. Using the solution isn’t for free, but they list all fees on their website.We cannot tell a lot about the current state as it’s a closed source project.
It’s great to have possibilities to decouple the frontend from the Magento 2 backend soon, as this will allow to bypass the overly complicated Magento 2 frontend in the future. The most important step will be to have a good extensible default theme which bases on React or Vue.js
There are a couple possible solutions for bringing PWA to Magento. Waiting for Magento itself will be a viable strategy, but there is no official timeline until the release yet, and there is always the risk of getting an instable, over-complicated solution.
On the other hand, it’s exciting to see the two competitors DEITY and Vue Storefront gaining a lot of traction. We at integer_net already made our selection: We partnered with DEITY who have the most advanced solution at the moment. We are looking forward to seeing (and influencing!) the further development and to implementing our first PWA Magento 2 project.
Read more about the DEITY project in our follow-up blog post:
PWA and Magento: About DEITY
Author: Andreas von Studnitz
Andreas von Studnitz is a Magento developer and one of the Managing Directors at integer_net. His main areas of interest are backend development, Magento consulting and giving developer trainings. He is a Magento 2 Certified Professional Developer Plus and holds several other Magento certifications for both Magento 1 and Magento 2. Andreas was selected as a Magento Master in 2019 and 2020.