Uanset om du først lige skal til at i gang med din Magento webshop eller du allerede har en webshop der kører på Magento, har du måske gjort dig overvejelser omkring hvilken frontend der giver mening for din shop. Måske er du løbet ind i problemer med at implementere nye frontend funktionaliteter, eller måske er din webshop langsom. Det kan også være du bare vil have den bedste start til din Magento, så du forhåbentlig kun behøver at vælge frontned theme én gang.

For 3-4 år siden var der nærmest kun en eller to muligheder at vælge til din Magento shop, når det kom til frontend themes, udover noget der var custom. Og alle muligheder var bygget på det samme. I dag er der mange flere muligheder, såsom PWA og headless-løsninger. Så vi har sparet dig tiden og sammenlignet de mest populære Magento frontend themes for dig i denne artikel.

Vi har udvalgt Hyvä theme, Vue Storefront, Magento PWA Studio, og Luma som de mest populære alternativer. 

Hovedkriterierne for sammenligning er:

• Pris, hvis der er en
• Krav til hosting, hvis der er nogen
• Kompleksitet af udvikling
• Udviklingsteam og techstack der er brug for
• Tilgængelighed af support og opdateringer
• Google Page Speed og Google Lighthouse Score
• 3. parts support af moduler og integrationer

Luma har været default frontend til Magento 2 og er det frontend theme der kommer med Magento ud af boksen. 99.9% af alle Magento udviklere har erfaring med at udvikle til Luma, så et plus er at det er nemt at finde udviklere til Luma. 

Udover det, supporterer alle moduler og integrationer Luma. Alle moduler på Magento Marketplace er først og fremmest udviklet til og testet på Luma, hvilket sikre at du ikke skal bruge ekstra udviklingstimer på at gøre moduler kompatible med themet.

Men mønten har også sin negative side. Kort sagt opnås tilpasningen af Luma Theme i mange tilfælde ved at overskrive komponenterne i Luma-temaet eller udvidelserne, eller de themeelementer, der allerede er omskrevet af tredjepartsleverandørerne. Det gør dem afhængige og følsomme over for bagud kompatible ændringer. Så jo flere tredjepartsudvidelser du installerer og tilpasser eller bare justerer, så de passer til designet, jo sværere vil det være at opgradere dine moduler og selve Magento. For store og meget skræddersyede Magento webshops bruges op til 40% af Magento-opgraderingstiden på at opdatere frontenden, selv om designet forbliver det samme.

Den anden store ulempe er ydeevnen, som f.eks. kan måles med en Google Page Speed Score.

Som vi kan se, har kategorisiden en score på 49 for mobil og 79 for desktop.

Googles Lighthouse-rapportresultater, bortset fra SEO, er også gennemsnitlige. Mens en del af Lighthouse-rapportens score kan forbedres ved korrekt Magento-konfiguration og optimering af billeder, kan Pagespeed-scoren forbedres ved at investere i optimering af koden. Men det er tæt på umuligt at opnå en score på mindst 90, og den vil også blive forringet, efterhånden som der kommer nye udvidelser og funktioner på shoppen, eller algoritmerne til analyse af sidehastighed bliver opdateret. Det er uundgåeligt, fordi standard Magento 2 frontend framework anvendt på Luma bliver mere og mere forældet i en verden af hurtigt udviklende webteknologier.

Som Hyvä selv siger:
” Man kan sige, at Hyvä er den version af Luma, vi ville ønske, Magento havde bygget. Eller den frontend, som Luma potentielt kunne være blevet." 
Du kan besøge deres hjemme side her og få flere endnu flere detaljer om hvad Hyvä Theme er.

Det er et alternativ til headless PWA'er for dem, der vælger ikke at vove sig ud på det rene Javascript-web.

Hyvä er positioneret som blot et af temaerne til Magento. Men i modsætning til alle de traditionelle temaer har de totalt nytænkt themet. Det bygger det op fra bunden på en helt ny måde i stedet for bare at arve Lumas teknologier. Så teknisk set kan vi kalde det et tema, men faktisk er det en ny frontend.

Hvad er så forskellen? Hyvä -udviklerne brugte det bedste fra Luma, som det traditionelle layout- og skabelonsystem, der er velkendt blandt Magento-udviklere og giver udvidelsesmuligheder, og fjernede det værste. Så Javascript-frameworks og biblioteker som jQuery, RequireJS og KnockoutJS er smidt ud til fordel for AlpineJS, og Less CSS er erstattet af Tailwind CSS-frameworket.

 Alle disse ændringer gør det mere moderne, hvilket betyder, at det er meget nemmere at tilpasse og gør det til en langt hurtigere løsning end mange af de andre muligheder. En pointe der er værd at nævne er, at Hyva kræver frontend-udviklere, der har erfaring med både Magento og AlpineJS (eller Vue.js, som er meget lig), hvilket måske ikke er så let sammenlignet med de alternativer, der er nævnt i artiklen. Dog er læringskurven lav og Hyvä Theme har en grundig dokumentation, så dine udviklere hurtigt kan komme i gang. 

Hyvä giver også mulighed for at vælge en frontend til checkout-siden: brug standard Luma (eller en hvilken som helst andet checkout) eller Hyvä Checkout. Hyvä Checkout er bygget ved hjælp af React JS-biblioteket. Hyvä checkout er nemmere at skræddersy og ifølge Hyvä selv er deres checkout op til 13x hurtigere på load-tid end standard Luma Checkout. Du kan se en video fra en af grundlæggerne, Willem, forklarer mere om hvordan de har målt og fået de resultater her.

Hyva PageSpeed Insight giver 100/100 i performance-score for den samme kategoriside vist i Luma eksemplet:

Google Lighthouse-rapportens resultater ser også fantastiske ud:

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.