Contrary to five years ago, in 2022 there is not the one single frontend solution for Magento or Adobe Commerce. Instead there are now multiple solutions available that cater to different needs. This blog post features the three most used frontends today and compares their advantages and drawbacks.
PWA Studio is a headless framework developed by Adobe as the upcoming default frontend solution. It’s a separate piece of software, communicating with Magento via GraphQL. Key facts:
- Styling: Tailwind
- Dynamic Content: React
- Server Side Rendering: supported, via additional middleware “UPWARD”
- Maintenance: regular releases (approx. one release every two months), with frequent breaking changes. Current version 12.4.0, following semantic versioning
PWA Studio is a set of components, intended to be used to build your own frontend. In the end, the results will be very individual; you have a lot of flexibility when implementing a frontend with PWA Studio. On the other hand, that means that you have to put a lot of effort into your frontend. You will need a separate team for frontend development, which, on the positive side, can work completely decoupled from your backend development team and doesn’t need to know a lot about Magento in order to be productive.
While PWA Studio nowadays supports the full Adobe Commerce functionality including the B2B suite, most third party extensions don’t support PWA Studio at all.
- Full support of Adobe Commerce and B2B suite functionality
- Flexibility allows for individual frontend designs
- Frontend development runs separately from backend development team
- Frontend team doesn’t need extensive Magento knowledge
- Lack of support by third party extensions
- Development of frontend requires a lot of effort
There is no ultimate best choice that is valid for all Magento based projects. Depending on your project’s unique requirements and the team’s situation, you will put a different weight to these frontend options’ pros and cons. In general, we differentiate between these cases:
Case 1: Low budget, lots of features to implement
This is the only case in which we would recommend using the Luma theme: If you have numerous feature wishes, but a tight budget, so you plan to rely on third party extensions that may not yet be compatible with Hyvä.
The biggest disadvantage in this setting is the low site speed coming from the Luma theme itself, which is potentially made worse by a third party theme on top and a long list of extensions.
Case 2: Extensive budget, individual requirements
Case 3: Any other project
For most projects, we recommend using Hyvä as a frontend framework. The 1.000 € license fee pays off very quickly as the developer experience is much better than in the other solutions, thanks to Hyvä’s lean base and modern tech stack that results in shorter implementation times. An additional huge plus is the better performance of Hyvä.
While supporting the full Magento Open Source functionality and many third-party modules, Hyvä doesn’t support all Adobe Commerce features and the B2B Suite yet. But that doesn’t mean that you can’t use Hyvä for Adobe Commerce projects: many features are already supported, and the effort required to make other parts compatible usually isn’t too big.
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.