Warum Hyvä die Frontend-Entwicklung revolutioniert

· magento 2 · 14 Minuten Lesezeit

Magento 2 bietet neben dem LUMA Stack auch das PWA Studio, als ein vorgefertigtes Frontend-Framework zur Verfügung. Beide Frameworks sind allerdings aufgrund ihrer hohen Komplexität und langsamen Performance, einer komplizierten Navigation und der Tatsache, dass sie seit der Einführung von Magento 2 nicht mehr aktualisiert wurden, nicht besonders benutzerfreundlich. Um schnell leistungsfähige und profitable Shops zu erstellen, gibt es mittlerweile eine erheblich effizientere und effektivere Alternative zu den Magento-eigenen Frameworks.

Darum wollen wir uns hier einmal die Alternative, das Hyvä Theme anschauen und beleuchten, wie es funktioniert und welche Vorteile es gegenüber dem PWA Studio und dem LUMA Theme hat. Wie Magento 2 Shopbesitzer diese Optionen zu ihrem Vorteil nutzen können, wollen wir und ebenfalls anschauen.

Luma, PWA, Hyvä: Ein kurzer Überblick

E-Commerce-Plattformen bieten häufig Standard-Themes an, die von den Nutzern ohne Anpassungen verwendet werden können. Bei Magento 2 handelt es sich bei dem Standard-Theme um das LUMA-Framework. Überraschenderweise wurden seit der Veröffentlichung von LUMA im Jahr 2016 ca. 90 % der Magento 2-Themes mit dem LUMA-Framework erstellt. Im Gegensatz zu Magento 2 wurde LUMA seit seiner Einführung jedoch nicht aktualisiert oder verändert, was es in der heutigen, sich ständig weiterentwickelnden digitalen Welt zu einer veralteten Technologie macht.

Auch wenn es sich zu Beginn um ein effizientes Tool handelte, hat die übermäßige Verwendung von JavaScript zu einer langsamen und ineffizienten Performance des Frontends geführt. Im Vergleich zu anderen Shops führte die Einbindung großer JavaScript- und CSS-Dateien auf jeder Seite zu langsamen Ladezeiten.

Hinzu kam, dass die Entwickler aufgrund der komplexen Struktur von LUMA mehr Zeit aufwenden mussten, um neue Themes erstellen zu können. Wenn benutzerdefinierte Funktionen zum Shop hinzugefügt werden sollen, müssen die Entwickler noch mehr Zeit für die Arbeit mit dem LUMA-Stack aufwenden, was zusätzliche Kosten im Entwicklungsprozess zur Folge hat.

Hyvä Themes zielen darauf ab, die mit LUMA verbundenen Herausforderungen zu beseitigen, indem sie die Schwachstellen der Magento 2-Frontend-Entwicklung angehen. Hyvä Themes nutzt beispielsweise ein einziges JavaScript-Framework, Alpine.js, wodurch Hunderte von JavaScript-Dateien und aufgeblähte Bibliotheken überflüssig werden, die die Seitenladezeit verlangsamen. Dieser Ansatz verringert die Abhängigkeit von der komplexen Frontend-Codebasis, die die Leistung verlangsamt und den Entwicklungsprozess länger macht.

Die kürzere Lernkurve für Entwickler ist ein weiteres bemerkenswertes Merkmal von Hyvä Themes.

Neue Entwickler können sich schneller in Projekte einarbeiten, da es keine komplexe Kodierung und Struktur gibt. Durch die Arbeit mit leichtgewichtigen und einfach zu bedienenden Frameworks können Entwickler viel schneller Magento 2 Frontends erstellen. Dadurch profitieren die Benutzer von allen Vorteilen des nativen Magento 2 Frontends ohne dessen Nachteile.

Für den Fall, dass Sie immer noch nicht überzeugt sind, hier ist ein Fakt, der für Sie interessant sein könnte: Hyvä Themes erreicht bis zu 100 von 100 Punkten in Googles wichtigsten Webvitalen, sowohl für Desktop als auch für Mobile, und ist damit besser als die Konkurrenz.

Wenn Sie mit LUMA arbeiten, beginnen Sie mit Ihren Leistungskennzahlen ganz unten und arbeiten sich nach oben vor. Mit Hyvä Themes fangen Sie hingegen ganz von vorne an.

Das Luma Theme

Das Luma Theme ist das am weitesten verbreitete Frontend-Theme für Magento Open Source und ist das Standard-Frontend-Design, das mit der Magento 2-Plattform ausgeliefert wird.

Es dient als eine Art Schaufenster für die vielfältigen Funktionen und Kapazitäten, die Magento 2 seinen Nutzern bietet. Das Luma-Theme zeichnet sich durch sein klares und modernes Design aus, das auf eine verbesserte Benutzererfahrung abzielt. Es verwendet großzügigen Weißraum, auffällige Typografie und eine responsive Layoutstruktur, um auf verschiedenen Geräten gut auszusehen und effizient zu funktionieren.

Vorteile

  • Modernes Design: Das Luma Theme hat ein schlankes und modernes Design. Dadurch hebt sich Ihre Website von anderen ab und vermittelt einen professionellen Eindruck.
  • Reaktionsfähig: Luma wurde so entwickelt, dass es sich an verschiedene Bildschirmgrößen und Geräte anpasst, sodass Ihre Website für alle Benutzer zugänglich ist.
  • Anpassbar: Das Luma Theme ist in hohem Maße anpassbar. So können Sie das Farbschema, die Schriftarten und das Layout ändern, um es an Ihre Marke und Ihre Vorlieben anzupassen.
  • Schnelles Laden: Das Luma Theme ist für schnelle Ladegeschwindigkeiten optimiert, was zu einer Verbesserung des Nutzererlebnisses und zu einer Steigerung der Konversionsrate führen kann.
  • Mobilfreundlich: Ein immer größerer Anteil des Online-Verkehrs wird über mobile Geräte abgewickelt. Das responsive Design des Luma-Themes stellt sicher, dass Ihre Website auch auf mobilen Geräten gut aussieht und Ihren Kunden ein nahtloses Einkaufserlebnis bietet.

Nachteile

  • Langsame Performance: Luma verwendet eine große Anzahl von JavaScript- und CSS-Dateien, was zu einer langsamen Ladezeit der Seiten führen kann. Dies hat unter Umständen negative Auswirkungen auf die Benutzererfahrung und die Konversionsrate.
  • Komplexe Struktur: Lumas komplexe Struktur kann es Entwicklern erschweren, neue Themes zu erstellen und anzupassen. Dies kann zu einer Verlängerung der Entwicklungszeit und zu höheren Kosten führen.
  • Veraltete Technologie: Luma wurde 2016 veröffentlicht und seitdem nicht mehr aktualisiert. Daher ist es unter Umständen nicht mit den neuesten Technologien und Funktionen kompatibel, was eine Einschränkung der Funktionalität Ihrer Website zur Folge haben kann.
  • Begrenzte Designmöglichkeiten: Luma verfügt über eine begrenzte Anzahl von Designoptionen, die möglicherweise nicht den spezifischen Branding- und Ästhetikanforderungen aller Unternehmen entsprechen.
  • Schlechte Optimierung für mobile Geräte: Luma ist nicht für mobile Geräte optimiert, was angesichts der Tatsache, dass mehr als die Hälfte des gesamten Internet-Traffics von mobilen Geräten stammt, ein Problem darstellt. Dies kann zu einer schlechten Nutzererfahrung für mobile Nutzerinnen und Nutzer und zu einer Beeinträchtigung der Conversions führen.

Das PWA Studio

PWA Studio bietet die Tools, die Sie benötigen, um eine Progressive Web Application Storefront für Adobe Commerce oder Magento Open Source zu entwickeln.

Diese PWAs sind webbasierte Anwendungen, die ein ähnliches Nutzererlebnis wie native Apps bieten, aber über einen Browser zugänglich sind und viele Vorteile hinsichtlich Geschwindigkeit, Zuverlässigkeit und Engagement bieten.

Vorteile

  • Schnell und reaktionsfähig: PWA Studio wurde für die Erstellung von schnellen und reaktionsfähigen progressiven Webanwendungen mit hervorragender Benutzerfreundlichkeit entwickelt. Es nutzt moderne Web-Technologien wie Service Worker und Web App Manifests. Dadurch wird die Performance optimiert und die Seitenladezeit verkürzt.
  • Anpassbar: PWA Studio ist hochgradig anpassbar und ermöglicht Entwicklern die Erstellung einzigartiger Benutzeroberflächen, die den spezifischen Anforderungen ihres Unternehmens entsprechen.
  • Modulare Architektur: PWA Studio verfügt über eine modulare Architektur. So können Entwickler ihren Anwendungen neue Features und Funktionen hinzufügen, ohne andere Teile der Anwendung zu beeinträchtigen. Auf diese Weise wird die Wartung und Skalierung der Anwendungen im Laufe der Zeit vereinfacht.
  • Bessere Suchmaschinenoptimierung (Search Engine Optimisation, SEO): Im Vergleich zu herkömmlichen Webanwendungen bietet PWA Studio eine bessere Suchmaschinenoptimierung (Search Engine Optimisation, SEO). Da PWAs schnell und reaktionsfähig sind, ist es wahrscheinlicher, dass sie in den Ergebnisseiten von Suchmaschinen (Search Engine Result Pages – SERPs) höher eingestuft werden und mehr organische Besucher anziehen.
  • Offline-Funktionalität: Mit PWA Studio sind Anwendungen in der Lage, auch dann zu funktionieren, wenn keine Verbindung zum Internet besteht. Auf diese Weise haben Benutzerinnen und Benutzer weiterhin Zugriff auf wichtige Funktionen und Inhalte, auch wenn sie offline sind, was das Engagement und die Zufriedenheit der Benutzerinnen und Benutzer erhöht.
  • Geräteübergreifende Kompatibilität: PWA Studio-Anwendungen sind mit einer Vielzahl von Geräten kompatibel, darunter Desktops, Smartphones und Tablets. Dadurch wird eine konsistente Benutzererfahrung auf allen Plattformen gewährleistet.

Nachteile

  • Komplexität: PWA Studio kann für Entwickler, die keine Erfahrung mit fortgeschrittenen Frontend-Technologien wie React und GraphQL haben, kompliziert werden.
  • Lernkurve: Für Entwickler, die neu im Umgang mit PWA Studio sind, ist unter Umständen zusätzliche Zeit zum Erlernen und Einarbeiten in das Framework erforderlich.
  • Kosten: Die Implementierung von PWA Studio kann kostspielig sein. Zusätzliche Ressourcen und Expertise können für die Erstellung und Wartung erforderlich sein.
  • Kompatibilität: PWA Studio ist möglicherweise nicht mit allen Browsern und Geräten kompatibel. Dies kann die Reichweite der PWA Storefront einschränken.
  • Anpassung: Da ein tiefes Verständnis des Frameworks und seiner Komponenten erforderlich ist, kann die Anpassung von PWA Studio eine Herausforderung darstellen.

Hyvä

Das Hyvä-Theme ersetzt die im Luma integrierten Frameworks wir etwa knockout.js und jQuery durch Alpine.js und Tailwind CSS. Beide Frameworks sind erheblich kleiner, schneller und einfacher zu bedienen als die Standard-Technologien.

Werfen wir einen Blick auf einige der Aspekte von Hyvä Themes, die es zu einer perfekten Wahl für Magento 2 Onlineshops machen.

Leistung und Geschwindigkeit

Magento stellt mit dem LUMA Stack oder dem PWA Studio ein vorgefertigtes Frontend-Framework zur Verfügung. Dieser Stack ist jedoch aufgrund seiner langsamen Performance, seiner komplizierten Navigation und der Tatsache, dass er seit der Einführung von Magento 2 nicht mehr aktualisiert wurde, nicht besonders benutzerfreundlich. Um schnell profitable Shops zu erstellen, gibt es heutzutage effizientere und effektivere Alternativen zum LUMA Stack.

Konvertierungsraten

Ein langsamer Seitenaufbau führt zu niedrigeren Konversionsraten. Eine Verzögerung von nur einer Sekunde bedeutet, dass die Konversionsrate um 7% sinkt. Auch wenn dies nicht nach einem großen Problem klingt, können 7% weniger Konversionen über ein Jahr gesehen zu einem erheblichen Umsatzverlust für Ihren Shop führen. Mit Hyvä Themes können Sie dies zum Glück vermeiden.

Geringere Kosten und Entwicklungszeit

Die einfache Architektur von Hyvä Themes macht die Arbeit mit Hyvä Themes für Entwickler sehr einfach. Bei der Arbeit mit Hyvä Themes werden moderne Web-Entwicklungswerkzeuge verwendet, und es wird weniger Zeit für das Entschlüsseln von Frontend-Code und die Verwaltung verschiedener Dateien aufgewendet. Dies erleichtert auch die Arbeit an neuen Features und Funktionen.

Die Rechnung ist einfach: Je einfacher die Arbeit mit Hyvä Themes für Entwicklerinnen und Entwickler ist, desto weniger Zeit verbringen sie mit dem Programmieren und desto weniger Geld müssen Sie für die Entwicklung ausgeben. Im Ergebnis haben Sie nicht nur eine schnellere Lösung, sondern auch weniger Kosten für die Entwicklung.

Große Gemeinschaft

Hyvä Themes ist ein neues Produkt. Trotzdem hat es bereits eine große Entwicklergemeinde angezogen. Für Sie als Benutzer hat dies mehrere Vorteile. Eine lebendige Open Source Community sorgt dafür, dass Hyvä Themes sich ständig weiterentwickelt und eine Fülle von Erweiterungen bietet, die von Fachleuten entwickelt wurden und die Sie nutzen können, um Ihr Produkt zu verbessern. Darüber hinaus haben Sie durch die große Anzahl an Entwicklern mit unterschiedlichen Hintergründen und Fähigkeiten immer den richtigen Entwickler für die Arbeit an Ihrem Shop zur Hand, unabhängig von dessen spezifischen Anforderungen.

Flexibilität

Wenn Sie daran interessiert sind, Hyvä-Themes auszuprobieren, aber bereits eine Magento 2-Website haben, ist die gute Nachricht, dass Sie einfach zum neuen Theme wechseln können, ohne neu anzufangen. Sie müssen weder das Backend noch das Admin-Panel neu erstellen – ersetzen Sie einfach das aktuelle Theme durch Hyvä Themes.

Auf der anderen Seite, wenn Sie ein neues Projekt auf Magento 2 starten oder von Magento 1 migrieren: Die Verwendung von Hyvä Themes ist genauso einfach. Sie müssen nur beachten, dass Hyvä Themes nicht für Magento 1 zur Verfügung stehen – sie wurden ausschließlich für Magento 2 entwickelt.

Nachteile

Hyvä Themes bieten den Betreibern von Magento-basierten Shops viele Vorteile. Aber wie bei jedem Tool oder jeder Lösung ist es nicht die perfekte Lösung für jedes Unternehmen und es gibt auch eine Reihe von Nachteilen. Schauen wir uns einige davon an.

Kompatibilität mit Magento-Versionen

Hyvä Themes ist nur mit Magento 2.4 oder neuer kompatibel. Das bedeutet, dass Sie dieses Tool nicht verwenden können, wenn Sie eine ältere Version von Magento verwenden. Da jedoch viele Plattformen und Tools nur mit der neuesten Magento-Version kompatibel sind, wird ein Upgrade auf die neueste Version empfohlen.

Keine 100%-ige Unterstützung von Drittanbieter-Erweiterungen

Bitte beachten Sie, dass nicht alle Erweiterungen von Drittanbietern mit Hyvä Themes kompatibel sind. Für die Installation und Integration dieser Erweiterungen ist die Zusammenarbeit mit einem erfahrenen Entwicklungsteam erforderlich. Der Grund dafür ist, dass die meisten Magento-Module ähnlich wie die LUMA-Themes erstellt werden. Die Hyvä-Themes wurden jedoch anders entwickelt und erfordern Änderungen sowohl im Javascript als auch in den Templates, damit sie richtig funktionieren.

Mit der Hilfe eines erfahrenen Teams kann diese Aufgabe jedoch schnell und effizient durchgeführt werden, da alles, was erforderlich ist, die Änderung der Ausgabe des Schaufensters ist. Der Code im Backend und die externen Integrationen müssen nicht geändert werden, ebenso wenig wie die Ausgabe im Admin-Bereich geändert werden muss.

Das Hyvä-Themes-Team hat die Hyvä-Themes-Kompatibilitätsmodulbibliothek erstellt, um den Prozess weiter zu vereinfachen. Mit dem Erwerb einer Lizenz erhalten Sie Zugriff auf verschiedene Kompatibilitätserweiterungen. Diese wurden von Mitgliedern der Hyvä Themes Open Source Community entwickelt. Klaviyo und Klevu Magento 2 Erweiterungen sind zum Beispiel in der Bibliothek enthalten.

Zur Hyvä Themes-Bibliothek tragen viele Unternehmen und Entwickler Erweiterungen bei, die sie an ihre speziellen Bedürfnisse anpassen. Wenn Sie also auf der Suche nach einer neuen Erweiterung sind, können Sie die Bibliothek einfach nach einer Erweiterung durchsuchen, die Ihren Anforderungen entspricht.

Lizenzkosten

Bei Hyvä Themes handelt es sich teilweise um ein Open-Source-Projekt mit einer florierenden Gemeinschaft von Entwicklern. Für die Nutzung ist jedoch eine Lizenzgebühr von 1.000 € zu entrichten. Die Lizenzgebühr ist eine einmalige Zahlung und Sie müssen keine zusätzlichen Lizenzen für mehrere Magento 2 Projekte mit Hyvä Themes kaufen. Alle zukünftigen Updates und der Support für die Plattform, einschließlich des Zugriffs auf den Code und die Online-Dokumentation, sind in der Lizenz enthalten.

Die mit der Entwicklung und Wartung eines Magento 2 Frontends verbundenen Kosten können durch den Erwerb einer Hyvä Themes-Lizenz erheblich reduziert werden. Dies gilt sowohl für die Anschaffungskosten als auch für die laufenden Kosten. Alles in allem kann die Investition in eine Hyvä Themes-Lizenz ein kostengünstiger Weg sein, um Ihr Magento 2-Frontend auf den neuesten Stand zu bringen.

Zusammenfassung

Zur besseren ÜBericht haben wir hier noch einmal die Punkte im Vergleich zusammengefasst:

Feature
Luma
PWA Studio
Hyvä Themes
Time to Market**
Langsam
Mittel
Schnell
Performance
Langsam
Schnell
Schnell
Benutzerfreundlichkeit
Komplex
Komplex
Einfach
Anpassbarkeit
Gering
Hoch
Hoch
Kosten
Mittel
Hoch
Gering*
Kompatibilität
Gut
Gut
Gut
* zzgl. Lizenzkosten ** bezogen auf die durchschn. Entwicklungsdauer

Obwohl das LUMA-Theme die Standardlösung für Magento 2 ist, konnte sich, gerade in dern vergangenen Monaten das Hyvä-Theme aufgrund seiner Performance, Flexibilität und Benutzerfreundlichkeit bei Entwicklern durchsetzen. LUMA ist das erste Magento 2-Theme, das mit dem PWA Studio entwickelt wurde.

PWA Studio bietet einen „Headless“-Ansatz, bei dem der Schwerpunkt auf Geschwindigkeit und mobiler Nutzbarkeit liegt, während das Hyvä Theme eine moderne Frontend-Architektur mit einem intuitiven Page Builder und einer wachsenden Entwickler-Community bietet. Letztlich hängt die Wahl zwischen diesen Optionen von den spezifischen Anforderungen des jeweiligen Projekts und den Prioritäten des Magento-Entwicklungsteams ab.

Zurück zum Blog
Kostenloses Erstgespräch
Kontakt aufnehmen