Hyvä Logo in Dunkelblau

Frontend & Hyvä 10.8.2022

Hyvä, Luma, PWA Studio: Frontend-Lösungen für Magento und Adobe Commerce in 2022

In den letzten fünf Jahren hat sich viel verändert: Im Jahr 2022 nicht mehr die eine Frontend-Lösung für Magento oder Adobe Commerce. Stattdessen gibt es jetzt mehrere Lösungen, die auf unterschiedliche Bedürfnisse zugeschnitten sind. Dieser Blogbeitrag stellt die drei heute am häufigsten verwendeten Frontends vor und vergleicht ihre Vor- und Nachteile.

Luma

Luma ist das Standard-Frontend, das in Magento 2 von Anfang an vorinstalliert und voraktiviert ist. Es ist der Nachfolger des Magento 1-Frontends, aktualisiert mit Technologien, die um 2015 modern waren. Die wichtigsten Fakten:
  • Nicht Headless
  • Styling: LESS
  • Dynamischer Inhalt: RequireJS, Knockout, jQuery, eigenes Javascript-Framework, das auf Knockout und RequireJS aufbaut ("UI Components")
  • Server Side Rendering: Ja, standardmäßig, mit Layout XML und PHP Templates
  • Aktualisierung: Nur Bugfixes, die zusammen mit den vierteljährlichen Magento-Updates veröffentlicht werden.

Der größte Vorteil ist die volle Kompatibilität zu allen verfügbaren Magento 2-Erweiterungen. Der größte Nachteil ist die geringe Basis-Performance und der veraltete Tech-Stack, der es nicht ermöglicht, es so effizient wie modernere Lösungen zu nutzen.

Vorteile:

  • Volle Kompatibilität mit allen verfügbaren Magento 2 Erweiterungen
  • Keine Lizenzkosten

Nachteile:

  • Geringe Basis-Performance
  • Veralteter Tech-Stack
Neben dem Standard-Luma-Frontend, das als Basis für individuelle Anpassungen genutzt werden kann, gibt es verschiedene Themes, die eine kostengünstige Anpassung der Storefront ermöglichen. In den meisten Fällen enthalten diese Themes eine Menge an zusätzlichem Code und Modulen, die den Shop aufblähen und ihn aufgrund mittelmäßiger Qualität noch langsamer machen.

PWA Studio

PWA Studio ist ein Headless-Framework, das von Adobe als kommende Standard-Frontend-Lösung entwickelt wurde. Es handelt sich um eine separate Software, die mit Magento über GraphQL kommuniziert. Die wichtigsten Fakten:
  • Headless
  • Styling: Tailwind
  • Dynamischer Inhalt: React
  • Server Side Rendering: unterstützt, über zusätzliche Middleware "UPWARD"
  • Aktualisierung: regelmäßige Releases (ca. ein Release alle zwei Monate), mit häufigen Breaking Changes. Aktuelle Version 12.4.0, nach semantischer Versionierung

PWA Studio ist ein Set von Komponenten, mit denen ihr euer eigenes Frontend erstellen könnt. Das Ergebnis wird am Ende sehr individuell sein; Ihr habt viel Flexibilität bei der Implementierung eines Frontends mit PWA Studio. Auf der anderen Seite bedeutet das, dass sehr viel Aufwand in das Frontend gesteckt werden muss. Ein eigenes Team für die Frontend-Entwicklung ist nötig, das aber völlig entkoppelt vom Backend-Entwicklungsteam arbeiten kann und nicht viel über Magento wissen muss, um produktiv zu sein. Während PWA Studio heutzutage die gesamte Adobe Commerce-Funktionalität einschließlich der B2B-Suite unterstützt, bieten die meisten Erweiterungen von Drittanbietern überhaupt keine Unterstützung für PWA Studio.

Vorteile:

  • Komplette Unterstützung aller Funktionen von Adobe Commerce und B2B-Suite
  • Flexibilität ermöglicht individuelle Frontend-Designs
  • Frontend-Entwicklung läuft separat von Backend-Entwicklung
  • Frontend-Team braucht kein umfangreiches Magento-Wissen

Nachteile:

  • Mangelnde Kompatibilität mit Erweiterungen von Drittanbietern
  • Entwicklung des Frontends benötigt viel Aufwand

Hyvä

Das Hyvä-Theme ist ein Drittanbieter-Theme, das im Jahr 2020 von unserem ehemaligen Teammitglied Willem Wigman entwickelt wurde. Es verwendet dieselbe Backend-Funktionalität wie das Standard-Magento-Frontend "Luma", reduziert aber HTML, CSS und Javascript vollständig, um die Funktionalität mit schlanken und moderneren Frontend-Technologien neu zu implementieren. Dies führt zu einem wesentlich schnelleren Frontend, das standardmäßig 90 bis 100 Punkte im Lighthouse-Score von Google erreicht. Die wichtigsten Fakten:

  • Nicht Headless
  • Styling: Tailwind
  • Dynamischer Inhalt: AlpineJS
  • Server Side Rendering: ja, standardmäßig, mit Layout XML und PHP Templates
  • Aktualisierung: regelmäßige Releases (ca. eins pro Monat), mit starkem Fokus auf Rückwärtskompatibilität. Aktuelle Version 1.1.16, nach semantischer Versionierung

Für die Nutzung des Hyvä Themas ist eine Lizenzgebühr von 1.000€ zu entrichten, die sich jedoch dank der höheren Produktivität der Entwickler:innen, die dieses Frontend ermöglicht, sehr schnell bezahlt macht. Diese erhöhte Produktivität und Entwicklungsgeschwindigkeit sind, neben der Frontend-Performance, die größten Vorteile von Hyvä. Hyvä ist mit Magento Open Source kompatibel und unterstützt auch fast alle Adobe Commerce-Funktionen. Die Kompatibilität zu Erweiterungen von Drittanbietern wächst ständig; Ein großer Teil wurde bereits kompatibel gemacht, entweder von den Erweiterungsanbietern selbst oder von der Hyvä-Community von mehr als 300 Agenturen.

Vorteile:

  • Ausgezeichnete Frontend-Performance
  • Verbesserung der Entwicklungsgeschwindigkeit und Produktivität

Nachteile:

  • Partieller Support von Adobe Commerce-Funktionen
  • Begrenzte Kompatibilität bei Erweiterungen von Drittanbietern
  • Lizenzgebühr in Höhe von 1.000€
---

Empfehlungen

Es gibt keine ultimativ beste Wahl, die für alle Magento-basierten Projekte gültig ist. Je nach den individuellen Anforderungen des Projekts und der Situation des Teams muss man die Vor- und Nachteile dieser Frontend-Optionen unterschiedlich gewichten. Im Allgemeinen unterscheiden wir zwischen diesen Fällen:

Fall 1: Geringes Budget, viele Funktionen zu implementieren

Dies ist der einzige Fall, in dem wir die Verwendung des Luma-Themes empfehlen würden: Wenn es zahlreiche Feature-Wünsche gibt, aber ein knappes Budget, so dass man plant, sich auf Erweiterungen von Drittanbietern zu verlassen, die möglicherweise noch nicht mit Hyvä kompatibel sind. Der größte Nachteil in diesem Fall ist die geringe Geschwindigkeit der Website, die vom Luma-Theme selbst ausgeht, was durch ein Drittanbieter-Theme und eine lange Liste von Erweiterungen noch verschlimmert werden kann.

Fall 2: Umfangreiches Budget, individuelle Anforderungen

Unserer Erfahrung nach erfordern PWA-Lösungen wie PWA Studio viel Aufwand, um gut implementiert zu werden. (Wir haben weniger als die Hälfte der Zeit benötigt, um ein PWA-Frontend mit Hyvä neu zu implementieren - gleiche Funktionen, gleiches Layout.) Die Software-Basis ändert sich noch häufig, und da die Nutzerbasis von PWA Studio klein ist, ist die Stabilität noch nicht sehr hoch. Wenn das nötige Budget zur Verfügung steht und möglicherweise alle Funktionen von Adobe Commerce einschließlich der B2B-Suite genutzt werden sollen, könnte PWA Studio die richtige Lösung sein. Denkt daran, dass es sich immer noch um ein Nischenprodukt handelt, auch wenn es offiziell von Adobe unterstützt und aktiv weiterentwickelt wird. Außerdem solltet ihr die Geschwindigkeit der Website genau beobachten: Sie ist möglicherweise nicht so hoch, wie ihr es erwartet, da bei der ersten Anfrage eine Menge Javascript geladen werden muss.

Fall 3: Jedes andere Projekt

Für die meisten Projekte empfehlen wir die Verwendung von Hyvä als Frontend-Framework. Die 1.000€ Lizenzgebühr machen sich sehr schnell bezahlt, da die Entwicklererfahrung dank der schlanken Basis von Hyvä und dem modernen Tech-Stack, der zu kürzeren Implementierungszeiten führt, viel besser ist als bei den anderen Lösungen. Ein weiterer großer Pluspunkt ist die bessere Performance von Hyvä. Hyvä unterstützt zwar alle Magento Open Source-Funktionen und viele Drittanbietermodule sind kompatibel, aber die B2B Suite und einzelne Adobe Commerce-Funktionen können derzeit noch nicht mit Hyvä out-of-the-box verwendet werden. Das bedeutet aber nicht, dass ihr Hyvä nicht für Adobe Commerce-Projekte verwenden könnt: Viele Funktionen werden bereits unterstützt und der Aufwand, andere Teile kompatibel zu machen, ist normalerweise nicht allzu groß.

Zusammenfassung

Mit den verschiedenen Frontend-Lösungen, die für Magento Open Source und Adobe Commerce zur Verfügung stehen, haben Händler und Agenturen die Möglichkeit zu wählen, was am besten zu ihrem Projekt passt. Da sich diese Optionen jedoch stark unterscheiden, sollte diese Entscheidung das Ergebnis einer sorgfältigen Überlegung sein, um die beste Investition des Projektbudgets zu gewährleisten. Zu lange hat das Magento-Ökosystem unter unzureichenden Frontend-Lösungen gelitten, die Agenturen frustriert haben und mit denen Händler ihr Budget für Frontend-Lösungen verbrannt haben. Zu oft sind diese Projekte entweder vor dem Start gestrandet oder haben nie den erwarteten Return on Investment erbracht.

Hyvä für jedes Projekt?

Wir sind sicherlich etwas parteiisch gegenüber Hyvä, da wir eine enge Partnerschaft mit Hyvä haben. Für uns war Hyvä der Retter in der Not, als andere Frontend-Lösungen versagten. Aber gerade in den Anfangstagen von Hyvä haben wir auch die Nachteile erlebt, z.B. wenn Erweiterungen von Drittanbietern nicht kompatibel waren. Mit jedem Tag wächst die Hyvä-Community und wir sehen mit Freude, dass potentielle Nachteile - fehlende Kompatibilität mit Drittanbietererweiterungen und Adobe Commerce-Funktionen - schwinden.

Dennoch könnte für bestimmte Projekte ein PWA-Frontend der bessere Ansatz sein - vor allem, wenn viel Budget zur Verfügung steht, um individuelle Anforderungen umzusetzen.

Eure Meinung

Wir würden uns über eure Meinung zum Thema freuen: Welche Erfahrungen habt ihr mit verschiedenen Frontends gemacht? Stimmt ihr uns zu? Schreibt uns gerne einen Kommentar.