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)
- JavaScript (mostly jQuery, with RequireJS for managing the dependencies)
- 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
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:
- JavaScript (Knockout.js) for the logic
- 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:
@max_pronko explains why building christmas trees in layout files of #Magento2 checkout for configuring #uicomponents at #MageTitansMCR 😁 pic.twitter.com/nDYbNH5KYh
— 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:
Reality Adjustment: Why a talk about UI Components changed Scope and Title
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.
PWAs are usually built on a JavaScript framework like React, Vue.js or AngularJS for handling data and displaying it. In the background, they communicate with a backend (in our case Magento 2) via REST APIs. Add some caching layer (like a node.js middleware) and you have a frontend which is blazingly fast, covering the same functionality as the traditional Magento frontend. And as Magento doesn’t use its own frontend layer any more, this approach is called Headless webshop (or Headless Magento).
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.
Three Contenders
At the moment, we are seeing three approaches gaining a lot of traction:
PWA Studio
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
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.
https://deity.io/
Vue Storefront
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.
https://divante.co/products/vue-storefront
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
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.
https://www.front-commerce.com/
Conclusion
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.
Hello Andreas!
Thank’s for this post, it’s nice too read what we are all thinking: Stop M2 Front and going to a new PWA front end.
Sylvain Rayé told you on Twitter and I repeat it now, but our friends in France (Occitech) have built FrontCommerce (React / GraphQL)
:
– Demo available here: https://demo.front-commerce.com/
Some stores are already in production and Vincent (my associate at PH2M) and I will build all our new futures M2 frontend with FrontCommerce.
Give them a try.
Technical contact at FrontCommerce: Pierre Martin (contact@front-commerce.com)
—
Fred
Hello Andreas, first of all thanks for this post, I agree that front-end in m2 is outdated. But what happens with SEO?
Fred doesn’t speak about this. Everybody knows that a SEO strategy is incompatible with a single page applications. What do you think about that? and Fred, how do you solve this problem?
Thanks in advance.
Vue Storefront seems ahead of Deiti. There is documentation and they claim is ready for production, articles on Medium, etc. Tempted to give it a try.
Can’t see much new stuff on Deiti compared with the last time I’ve checked a few months back…