Schlank und blitzschnell: Magento 2 mit Hyvä Themes

Am 12. Februar 2021 wurde das Release von Hyvä Themes 1.0 gefeiert und wir würdigen das mehr als vielversprechende Projekt mit einem Blog-Beitrag. Hyvä Themes ermöglichen federleichte und enorm schnelle Magento Frontends, die sich viel schneller und einfacher entwickeln lassen als Progressive Web Apps (PWA). Wir fassen die wichtigsten Fakten rund um Hyvä Themes zusammen.

Hyvä – der Name geht auf das finnische Wort für „gut“ zurück – beeindruckt auf ganzer Linie und hat in der Community schon vor dem Final Release von Hyvä Themes so großes Aufsehen erregt, dass Magento Evangelist Ben Marks die Keynote zur (Online-)Release-Party für Hyvä Themes beisteuert. Und dabei begann alles erst vor wenigen Monaten mit einer simplen Idee eines leidgeprüften Entwicklers.

Die Idee hinter Hyvä Themes

Der Kopf hinter Hyvä Themes ist Willem Wigman. Im Juni 2020 wollte er für seine Frau einen Magento 2 Shop bauen. Auf das überdimensionierte und schwerfällige Luma Theme wollte er dabei nicht setzen und auch die Entwicklung einer PWA (etwa Vue Storefront) schien ihm kein sinnvoller Weg: viel zu komplex, viel zu viel Code. Was also tun? Er überlegte, ein Theme zu entwickeln, das möglichst wenig JS und CSS enthalten, schnell performen und nicht nur unkomplizierter anzupassen sein, sondern dabei auch noch Spaß machen sollte. Den Wunsch dahinter wird jeder Frontend-Entwickler in der Magento Community verstehen. – Aber sich hinsetzen und „from scratch“ beginnen, genau das umzusetzen? Den unbedingten Willen dazu hatte nur einer – Willem.

Was in Hyvä Themes steckt – und was nicht

Willem Wigman warf über Bord, was nicht notwendig war (jQuery, RequireJS, Knockout, UI Components) und reduzierte die Komplexität des Layouts. Auf den Weg zu einem neuen, unkomplizierten, leichten und schnellen Magento 2 Theme nahm er nur mit, was unbedingt notwendig war: Layout.xml, Blocks, ViewModels, Routing, Cookies, private-data und Caching. Auf dieser Grundlage hatte er die Möglichkeit, mit einem puristischen Ansatz die Welt der Magento 2 Themes neu zu erfinden.

Als wir Willem im Oktober 2020 – zur Halbzeit zwischen der ersten Idee und dem feierlichen Release von Hyvä Themes 1.0 – auf der Reacticon Conference v3 „The online version“ begegneten und er einen aktuellen Entwicklungsstand präsentierte, um das Projekt Hyvä Themes erstmals vorzustellen, war die Begeisterung im Publikum schier grenzenlos.

Die schlanke Architektur und die überragende Performance stellen alles in den Schatten, was die leidgeprüften Magento Frontend-Entwickler bis jetzt gesehen haben. Hyvä Themes nutzen für zahlreiche Funktionalitäten ganz einfach die Möglichkeiten, die moderne Browser ohnehin eingebaut haben, etwa die Validierung von Formulardaten, anstatt dafür jeweils umfangreiche JavaScript-Bibliotheken an das Gerät des Nutzers zu übertragen und dort auszuführen. Hinzu kommen zwei mit viel Bedacht ausgewählte Komponenten: Alpine.js und TailwindCSS.

Alpine.js

Das JavaScript-Framework Alpine.js basiert größtenteils auf Vue.js und wurde in Teilen durch Anleihen aus Angular erweitert. Da es allerdings auf ein virtuelles DOM verzichtet und extrem klein ist, fällt es weitaus schlanker aus als das in vielen PWA eingesetzte Vue.js und ist daher deutlich performanter.

TailwindCSS

Mit TailwindCSS enthalten Hyvä Themes ein CSS-Framework, das ohne ellenlange Stylesheets auskommt und sich zudem hervorragend komprimieren lässt. Zudem ist es einfach anzupassen und auf ein bestimmtes Design zuzuschneiden.

Die Technologien hinter Hyvä Themes machen das möglich, was bislang der Quadratur des Kreises nahe kam: extrem performante Shops auf der Grundlage von Magento 2. Wo sonst JavaScript im Megabyte-Bereich und Unmengen an CSS übertragen wurden, kommen Hyvä Themes mit wenigen Kilobyte JS und einem einzigen, zusammengefassten Stylesheet aus.

Und als wäre das nicht schon sensationell genug, gibt es in der jungen Hyvä Familie noch zwei weitere Module, die – anders als Hyvä Themes – kostenfrei angeboten werden und auch mit anderen Frontends kombiniert werden können.

Noch mehr Hyvä

Hyvä Themes können mit dem gewöhnlichen Magento Admin und mit jedem Magento Checkout eingesetzt werden. Aber mit dem Modul Hyvä Admin lässt sich das Backend auf Wunsch an die eigenen Bedürfnisse anpassen – und einen Hyvä Checkout gibt es auch.

Hyvä Checkout: Die schnelle Checkout-Alternative

Mit Hyvä Checkout steht Magento 2 Shopbetreibern ein intelligent gebauter, sehr gut anpassbarer, auf React.js und GraphQL basierender Checkout zur Verfügung. Das Modul lässt sich auch mit anderen Frontends betreiben – und umgekehrt vertragen sich Hyvä Themes auch mit jedem anderen Checkout.

Hyvä Admin: Einfach eigene Grids und Formulare entwickeln

Mit dem maßgeblich von Vinai Kopp entwickelten Hyvä Admin lassen sich neue Admin-Grids deutlich einfacher als im Magento Standard anlegen. Bald soll das unkomplizierte Erstellen eigener Formulare hinzukommen. Die bestehende Grids und Formulare bleiben davon übrigens unberührt.

Drei Vorteile für Shopbetreiber

Auch wenn sich das alles zunächst sehr technisch anhört, ist es längst nicht nur ein Thema für Entwickler. Hyvä Themes bieten aus Händlersicht drei sehr gewichtige Vorteile gegenüber Progressive Web Apps und herkömmlichen Magento 2 Frontends wie dem Luma Theme:

• Aufwand und Kosten für die Entwicklung eines Magento 2 Frontends mit Hyvä Themes fallen dank der schlanken und geradlinigen Code-Architektur deutlich geringer aus.
• Die drastisch reduzierte Menge an zu übertragenden Daten führt zu atemberaubend schneller Performance. Für die Kunden des Shops führt das zu enorm kurzen Seitenladezeiten und absolut reibungsloser User Experience.
• Die überragende Performance von Hyvä Themes führt zu deutlich besseren Werten in Metriken wie Googles PageSpeed Insights und Lighthouse mit den Core Web Vitals – und wirkt sich damit direkt auf die Platzierungen in Suchergebnislisten aus. Schnelle Seiten haben einen SEO-Vorteil – insbesondere nach dem Google Page Experience Update 2021.

Vor diesem Hintergrund empfehlen wir allen, die einen Magento 2 Shop betreiben oder planen und über ein neues Frontend nachdenken, sich mit Hyvä Themes auseinanderzusetzen bzw. sich an eine spezialisierte Hyvä Agentur zu wenden. Es gibt keinen besseren Weg, seine Mitbewerber – auch diejenigen, die auf Progressive Web Apps setzen – im Hinblick auf Entwicklungsaufwände und Seitenladezeiten elegant zu überflügeln. Für uns haben wir eine klare Entscheidung getroffen: Wir werden Magento 2 Shops künftig ausschließlich mit Hyvä Themes umsetzen.

Demoshop: Magento 2 mit Hyvä Themes

Wer jetzt sofort wissen möchte, wie das aussieht und wie schnell es sich anfühlt, kann Magento 2 mit Hyvä Themes in unserem Demoshop ausprobieren.