Ligemeget om du er ved at starte dit online eventyr på Magento eller du allerede har en veletableret webshop, tænker du måske over hvilken frontend du skal vælge til din Magento shop. Måske oplever du problemer med at få implementereret nye frontend features, din webshop loader langsomt, eller måske vil du bare gerne være sikker på du får den bedste start til din webshop. 

Hvor der for blot nogle år siden kun var var meget få løsninger til Magento Forntend end, vil spørgsmålet "hvilken Magento Frontend skal jeg vælge" give dig mange muligheder der kræver overvejelse for at vælge det rigtige. Så i denne artikel har jeg sparet tiden og sammenlignet de mest populære løsninger for dig. I denne omgang har jeg valgt at sammenligne: Hyvä theme, Vue Storefront, Magento PWA Studio og Luma.

Hovedkriterierne for sammenligning i denne artikel er:

• Pris, hvor der er en
• Ekstra hosting krav, hvis der er nogle
• Kompleksistet af udvikling
• Udviklere og "tech stack" (hvilke kodesprog der anvendes)
• Support og opgraderings muligheder
• Google page speed / Google Lighthouse scores
• Support af 3. parts moduler

Helt kort, så er Luma theme Magentos standard frontend og det theme der kommer med en standard Magento Installtion. 99.9% af Magneto frontend udviklere vil have erfaring med Luma theme, så det er nemmere at finde Magento udviklere der kan udvikle Luma.

Udover det, er en af de stærke sider ved Luma at alle moduler fra Magento Marketplace er udviklet og testet for og på Luma, hvilket kan spare timer på at få udviklet noget der virker til din frontend. Men, der er også en negativ side. Helt simpelt, så opnås tilpasning oftes ved at overskrive Luma kompontenter eller de bliver overskrevet af 3. parts modulet - hvilket resulterer i at desto flere moduler du har installeret og desto flere tilpasninger du får lavet til din Magento Luma, desto sværere bliver det at opdaterer dem og Magento i sig selv. For store og meget tilpassede webshops anvendes op til 40% af tiden på en Magento Versions opgraderin på frontenden, selvom designet forbliver det det samme.

En anden, og meget stor ulempe ved Luma theme er den ringe ydeevne og hastighad temaet har, hvilket for eksempel kan måles med Google Page Speed Score

Som du kan se her, scorer kategori siden 49 på mobil og 79 på desktop. Dette er en helt ren installation af Luma Theme, uden nogle tilpasninger, moduler m.m.

Google Lighthouse rapporten, udover for SEO, er også meget middelmådig. Hvor nogle af de tal rapporteret i Google Lighthouse kan forbedres ved at foretage bedre Magento konfigurationer og optimerer billeder, Page Speed scoren kan optimeres ved at investerer i optimering. Men, det er stort set umuligt at få minimum 90, og over tid vil det tal også blive mindre og mindre, efterhånden som nye module og funktioner tilføjes og page speed anlyse algoritmerne opdateret. Dette er uundåeligt, da Magento 2's frontend framework levereret af Luma bliver mere og mere uddateret og i den tekniske verden går udviklingen hurtigt - også indenfor teknologier til webshops.

As the Hyva themselves say about their product:
“One could say that Hyvä is the version of Luma we wished Magento had built. Or the frontend that Luma potentially could have become.”
It is an alternative to headless PWAs, for those that choose not to venture into the Javascript-only web.”
Hyva is being positioned as just one of the themes for Magento. But unlike all the traditional themes, it has the Magento frontend completely reimagined. It builds it from scratch in a brand new way rather than just inheriting the legacy approaches. So we can call it a theme technically, but in fact, it’s a new frontend.

What’s the difference? The Hyva developers used the best approaches of Luma like the traditional layout and templates system that is well known among the Magento developers and provides the extensibility, and replaced the worst ones. So Javascript frameworks and libraries like jQuery, RequireJS, and KnockoutJS are trashed in favor of AlpineJS, and the Less CSS is replaced by the Tailwind CSS framework.
 All these changes make it more modern which means much simpler to customize and more performant. Another point is - that Hyva requires frontend developers experienced with both, Magento and AlpineJs (or Vue.js which is very similar), which might be not so easy compared to the alternatives listed in the article.

​​​​​​​Also, Hyva provides a possibility to choose a checkout page frontend: use default Luma (or any custom) or Hyva Checkout. The Hyva Checkout is built using React JS library. It is not a full-value replacement for the default checkout but provides a base for building your own custom checkout that should be much easier than doing the same with the Luma.
Hyva PageSpeed Insight gives 100/100 performance score for the same category page:

Google Lighthouse report results also are looking awesome:

Besides the performance and being developer-friendly, another benefit is that Hyvä supports compatibility with numerous popular Magento extensions which are listed here. A side effect is that it becomes much easier to upgrade Magento and Hyvä: Hyvä cares about compatibility with 3rd party vendors, and native Magento frontend-related changes do not affect your store anymore.
At the moment, the Hyvä one-time purchase unlimited license that includes support on a private Slack costs only €1,000.00.

Vue Storefront is a standalone headless and backend-agnostic eCommerce Progressive Web App (PWA) written in Vue.js. Available freely via GitHub under the MIT open source license, users can also purchase commercial, cloud-hosted Storefront Cloud plans. PWA then facilitates the development of single, scalable and responsive apps compatible with every device or browser including iOS and Android. Delivering smaller and lighter-weight performance than native apps, Vue Storefront supports native platform functionalities such as push notifications, full-screen views, and home screen access, plus an offline mode that ensures eCommerce stores still function when web connectivity is compromised.
Open source features include a basic storefront template, Slack community access, and the PWA Storefront app, while the subscription-based Storefront Cloud adds cloud hosting, backups, and AMP rendering engine, and open loyalty program.
There is a Vue Storefront 2 that has a wider variety of features and structure, but its Magento integration is still beta and not ready for production, so let’s focus on Vue Storefront 1.
The strongest benefit of the VS except for the full-value PWA which has high scores in the SEO, Accessibility, and Performance best practices measured by Google Lightroom is platform independence. So this way you can upgrade Magento, migrate from Magento 1 to Magento 2 or even change the e-commerce platform without having the frontend affected. 
It is reached due to its architecture. Instead of calling the Magento application directly, it uses Vue Storefront API that responds with the previously indexed data or communicates with the Magento. Magento 2 Vue Indexer provides the data for a NoSQL Data Pump service that converts it and persists it in an ElasticSearch database that the storefront uses. That makes even large catalogs work blazing fast and the frontend to be available at least partially even if the Magento temporary is not.
Such an application would fit a cloud hosting ideally, but a single Virtual Private Server should be enough as well.

So to support and customize such an application it is needed to have a team of NodeJs developers for services communicating between Magento and storefront, and VueJs developers who will develop the frontend. In an ideal case, it should be a team or agency that is experienced in integrating Vue Storefront with Magento 2 because such a process requires a lot of communication between the teams and specialists working on very different pieces of a single complex system.
Vue Storefront provides paid integrations with a variety of headless CMS and payment services such as Adyen, Paypal, Braintree, Stripe, and others.

As we can see from the screenshots, despite all the advantages, the Google PageSpeed Insights scores are not high: 45 on mobile and 81 for desktop on a category page. Google Lighthouse report looks more optimistic:

Magento PWA Studio is a set of development tools to develop, deploy, and maintain a PWA storefront. It includes the Venia theme - a full-value PWA theme built using the PWA studio. They are being developed and supported by Adobe and Magento Community as an open-source project.

Official PWA Studio documentation recommends using Magento Commerce Cloud and special packages developed specifically to deploy and connect your storefront with Adobe Commerce software on the same server. However, it is also possible to install it on any other solution to host it, as a separate server or on the same one that runs the Magento application.
PWA Studio storefront and Venia theme are built on ReactJS, but it is also possible to develop a custom frontend using any frontend frameworks and libraries. It has a quite wide and strong community, and also it is not complex to work with for React JS developers. Moreover, unlikely Hyva, it is possible to separate the Magento and Storefront teams, so frontend developers are not required to be experienced in Magento at all which makes it easier to find a team of specialists for your storefront.
Since the storefront is a separate application with communicates with the Magento application mainly using GraphQL API, Magento upgrades are not likely to provide backward-incompatible changes and are expected to be smooth and easy, especially for non-major versions. However, if your frontend is based on the Venia theme, updating the PWA Studio itself requires manual changes comparison and updating your own templates making sure they are not conflicting.

Like Vue Storefront PWA, Google Pagespeed Insights score is quite low compared to Hyvä and about the same as Luma. Google Lighthouse report gives almost maximal ratings for Accessibility, SEO, and Best Practices scores.

Big extension providers like Amasty provide several extensions for the Magento PWA Studio Venia theme. Some other 3rd parties provide GraphQL or API for their extensions making it possible to integrate their functionality into your custom storefront solution, but in general, there are few compatible “out of the box” extensions on the market compared to Hyva

The Magento world is evolving. Alternative frontends are becoming more popular, and PWA is standing on its pedestal in trends of the modern Web. There is no silver bullet and any option has its best use depending on individual business cases.
Luma is still a good option for merchants who would like to save their investments in a case when purchasing several 3rd party extensions and applying a design with minimal customizations is enough for fulfilling the business goals of the webshop while page speed scores and similar metrics do not matter too much.
Hyvä is probably the perfect choice for a total modernization of the default Magento frontend with a more or less traditional development approach while keeping it simple. The Hyvä team will care about compatibility with a list of supported 3rd party extensions keeping upgrades smooth, and probably the only noticeable disadvantage is a need for Magento frontend developers who are experienced with it.
Magento PWA Studio and Vue Storefront are the most obvious solutions for having a mobile-first PWA with Magento. Both of them do their best in making the PWA "magic". Vue Storefront is more complicated but platform-agnostic and may function more efficiently for large stores with significant amounts of products, categories, and stores. The PWA Studio is maintained by the Adobe and Magento Community rather than 3rd parties and was created by and for Magento specifically. Also, the Progressive Web App frontends require having a separate team of frontend developers that might be more affordable than Magento-oriented specialists.