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.
Luma
Luma is the default frontend, pre-installed and pre-activated in Magento 2 since the beginning. It is the successor of the Magento 1 frontend, updated with technologies which were modern around 2015. Key facts:- Non-headless
- Styling: LESS
- Dynamic content: RequireJS, Knockout, jQuery, custom Javascript framework built on top of Knockout and RequireJS ("UI Components")
- Server Side Rendering: yes, by default, using layout XML and PHP templates
- Maintenance: bugfixes only, published along with quarterly Magento core updates
The biggest advantage is the full compatibility to all available Magento 2 extensions. The biggest disadvantage is the low base performance and the outdated tech stack which doesn't allow it to be used as efficiently as more modern solutions.
Pro:
- Full compatibility to all available Magento 2 extensions
- No extra licence costs
Contra:
- Low base performance
- Outdated tech stack
Besides the default Luma frontend which can be used as a base for individual customizing, there are several themes available which allow customizing the storefront at low cost. In most cases, these themes contain a lot of additional code and modules that bloat the shop and make it even slower due to mediocre quality.
PWA Studio
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:
- Headless
- 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.
Pro:
- 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
Contra:
- Lack of support by third party extensions
- Development of frontend requires a lot of effort
Hyvä
The Hyvä theme is a third-party theme, created in 2020 by our former team member Willem Wigman. It uses the same backend functionality as the default Magento frontend "Luma", but completely strips down HTML, CSS and Javascript in order to reimplement the functionality with lean and more modern frontend technologies. This leads to a much faster frontend which reaches 90 to 100 points in Google's Lighthouse score by default. Key facts:
- Non-headless
- Styling: Tailwind
- Dynamic Content: AlpineJS
- Server Side Rendering: yes, by default, using layout XML and PHP templates
- Maintenance: regular releases (approx. one per month), with high focus on backwards compatibility. Current version 1.1.16, following semantic versioning
You need to pay a license fee of 1.000€ if you want to use the Hyvä theme, but thanks to the increase in developer productivity this theme unlocks, it pays off very quickly. This increased productivity and development speed are, next to the frontend performance, the biggest advantages of Hyvä.
Hyvä is compatible with Magento Open Source and supports almost all Adobe Commerce features too. Compatibility to third party extensions is growing constantly, a big chunk has already been made compatible, either by the extension providers themselves or by the Hyvä community of more than 300 agencies.
Pro:
- Excellent frontend performance
- Increase in development speed and productivity
Contra:
- Partial support of Adobe Commerce features
- Limited compatibility with third party extensions
- License fee of 1.000€
Recommendations
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
In our experience, PWA solutions like PWA Studio require a lot of effort to implement well (it took us less than half the time to re-implement a PWA frontend with Hyvä - same features, same layout). The software base still changes frequently, and as the user base of PWA Studio is low, the stability is not very high yet. If you have the budget and possibly want to use all Adobe Commerce features including the B2B Suite, PWA Studio might be the right solution for you. Keep in mind that it is still a niche product, even though it is officially supported and actively developed by Adobe. Also, you want to closely watch the site's speed: it may not be as high as you'd expect, as a lot of Javascript has to be loaded on the first request.
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.
Summary
With the different frontend solutions available for Magento Open Source and Adobe Commerce, merchants and agencies have the ability to choose what fits best to their project. However, given that these options differ widely, this decision should be the result of careful consideration to ensure the best investment of the project's budget.
For too long, the Magento ecosystem has suffered from insufficient frontend solutions that left agencies exhausted and merchants burning their budget on frontend solutions that either stranded before launching or never brought the expected return on investment.
Hyvä for every project?
We are certainly somewhat biased towards Hyvä since we are in a close partnership with Hyvä. For us, Hyvä has been the knight in shining armour when other frontend solutions failed. But especially in the early days of Hyvä we also experienced the drawbacks, e.g. when third party extensions weren't compatible. With every day the Hyvä community grows and the potential drawbacks - missing compatibility with third party extensions and Adobe Commerce features - dwindle.
Still, for certain projects, a PWA frontend might be the better approach - especially if there is a lot of budget available.
Now it's your turn
We would love to hear your opinion on the topic: Which experiences have you had with different frontends? Do you agree with us? Leave us a comment!