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:

Ud over performance og at være udviklervenlig er en anden fordel, at Hyvä understøtter kompatibilitet med mange populære Magento-udvidelser, som er listet her. En "bivirkning" af dette er, at det bliver meget nemmere at opgradere Magento og Hyvä: Hyvä har fokus på kompatibilitet med tredjepartsleverandører, og ændringer i den oprindelige Magento-frontend påvirker ikke længere din butik.
I øjeblikket koster den ubegrænsede Hyvä-licens, der inkluderer support på en privat Slack, kun € 1.000,00.

Vue Storefront er en selvstændig headless og backend-agnostisk e-handels Progressive Web App (PWA)  skrevet i Vue.js. Den er frit tilgængelig via GitHub under MIT open source-licensen, og brugerne kan også købe kommercielle, cloud-hostede Storefront Cloud-abonnementer. PWA gør det muligt at udvikle enkle, skalerbare og responsive apps, der er kompatible med alle enheder eller browsere, herunder iOS og Android. Vue Storefront leverer mindre og lettere ydeevne end indbyggede apps og understøtter indbyggede platformsfunktioner som push-meddelelser, fuldskærmsvisninger og adgang til startskærmen samt en offline-løsning, der sikrer, at e-handelsbutikker stadig fungerer, selv om internetforbindelsen er afbrudt.
Open source-funktioner inkluderer en grundlæggende Storefront-skabelon, adgang til Slack-fællesskabet og PWA Storefront-appen, mens den abonnementsbaserede Storefront Cloud tilføjer cloud-hosting, sikkerhedskopier og AMP-rendering engine samt et åbent loyalitetsprogram.
Der findes en Vue Storefront 2, som har et større udvalg af funktioner og struktur, men dens Magento-integration er stadig i beta og ikke klar til produktion, så lad os fokusere på Vue Storefront 1.

Den stærkeste fordel ved VS, bortset fra PWA'en med fuld værdi, som har en høj score i bedste praksis for SEO, tilgængelighed og ydeevne målt af Google Lightroom, er platformsuafhængighed. Så på denne måde kan du opgradere Magento, migrere fra Magento 1 til Magento 2 eller endda skifte e-handelsplatform, uden at det påvirker frontend. 
Det er muligt på grund af arkitekturen. I stedet for at kalde Magento-applikationen direkte bruger den Vue Storefront API, der svarer med de tidligere indekserede data eller kommunikerer med Magento. Magento 2 Vue Indexer leverer data til en NoSQL-datapumpetjeneste, der konverterer dem og gemmer dem i en ElasticSearch-database, som storefronten bruger. Det gør, at selv store kataloger fungerer lynhurtigt, og at frontenden er tilgængelig i det mindste delvist, selv om Magento midlertidigt ikke er det.
En sådan applikation ville ideelt set passe til en cloud-hosting, men en enkelt virtuel privat server burde også være nok.

Så for at understøtte og tilpasse en sådan applikation er det nødvendigt at have et team af NodeJs-udviklere til de tjenester, der kommunikerer mellem Magento og Storefront, og VueJs-udviklere, der skal udvikle frontenden. I det ideelle tilfælde bør det være et team eller et bureau, der har erfaring med at integrere Vue Storefront med Magento 2, da en sådan proces kræver en masse kommunikation mellem de teams og specialister, der arbejder på meget forskellige dele af et enkelt komplekst system.
Vue Storefront tilbyder betalte integrationer med en række headless CMS- og betalingstjenester som Adyen, Paypal, Braintree, Stripe og andre.

Som vi kan se på skærmbillederne, er Google PageSpeed Insights-scorerne på trods af alle fordelene ikke høje: 45 på mobil og 81 for desktop på en kategoriside. Google Lighthouse-rapporten ser mere optimistisk ud:

Magento PWA Studio er et sæt udviklingsværktøjer til at udvikle, implementere og vedligeholde en PWA-butik. Det inkluderer Venia-temaet - et PWA-tema med full-value, der er bygget ved hjælp af PWA- Studio. De udvikles og understøttes af Adobe og Magento Community som et open source-projekt.

Den officielle PWA Studio-dokumentation anbefaler at bruge Magento Commerce Cloud og særlige pakker, der er udviklet specifikt til at implementere og forbinde din storefront med Adobe Commerce-software på den samme server. Det er dog også muligt at installere den på en hvilken som helst anden løsning til at hoste den, som en separat server eller på den samme, som kører Magento-applikationen.

PWA Studio-shoppen og Venia-temaet er bygget på ReactJS, men det er også muligt at udvikle en brugerdefineret frontend ved hjælp af alle frontend-frameworks og -biblioteker. Det har et ret bredt og stærkt netværk af udviklere, og det er heller ikke kompliceret at arbejde med for React JS-udviklere. Desuden er det muligt at adskille Magento- og frontend-team, så frontend-udviklere behøver slet ikke at have erfaring med Magento, hvilket gør det lettere at finde et team af specialister til din frontend.

Da frontenden er en separat applikation, der kommunikerer med Magento-applikationen hovedsageligt ved hjælp af GraphQL API, er det ikke sandsynligt, at Magento-opgraderinger giver bagudkompatible ændringer og forventes at være nemme og enkle, især for ikke-major-versioner. Men hvis din frontend er baseret på Venia-temaet, kræver opdatering af selve PWA Studio manuel sammenligning af ændringer og opdatering af dine egne skabeloner for at sikre, at de ikke er i konflikt.

Ligesom Vue Storefront PWA er Google Pagespeed Insights-scoren ret lav sammenlignet med Hyvä og omtrent den samme som Luma. Google Lighthouse-rapporten giver næsten maksimal score for tilgængelighed, SEO og bedste praksis.

Store udbydere af udvidelser som Amasty leverer flere udvidelser til Magento PWA Studio Venia-temaet. Nogle andre tredjeparter leverer GraphQL eller API til deres udvidelser, hvilket gør det muligt at integrere deres funktionalitet i din brugerdefinerede frontendløsning, men generelt er der få kompatible "out of the box"-udvidelser på markedet sammenlignet med Hyva og Luma.

Verdenen af Magento udvikler sig. Alternative frontends bliver mere populære, og PWA står højt på listen over moderne webtrends. Der er ingen universel løsning, og enhver mulighed har sin bedste anvendelse afhængigt af de individuelle forretningsbehov.

Luma er stadig en god mulighed for forhandlere, der ønsker at bevare deres investeringer i tilfælde, hvor køb af flere tredjepartsudvidelser og anvendelse af et design med minimale tilpasninger er nok til at opfylde webshopens forretningsmål, mens hastighedsscore og lignende målinger ikke betyder så meget.

Hyvä er sandsynligvis det perfekte valg til en total modernisering af standard Magento frontend med en mere eller mindre traditionel udviklingsmetode, mens det holdes enkelt. Hyvä-teamet vil tage sig af kompatibilitet med en liste af understøttede tredjepartsudvidelser og holde opgraderinger smidige, og sandsynligvis er den eneste mærkbare ulempe behovet for Magento frontend-udviklere, der har erfaring med det.

Magento PWA Studio og Vue Storefront er de mest åbenlyse løsninger til at få en mobil-først PWA med Magento. Begge gør deres bedste for at skabe PWA "magien". Vue Storefront er mere kompliceret, men platform-agnostisk og kan fungere mere effektivt for store butikker med betydelige mængder af produkter, kategorier og butikker.