PWA: Ein neues Frontend für Magento 2

Update vom 08.12.2020: Die praktische Erfahrung aus mehreren Projekten hat gezeigt, dass der PWA-Ansatz aus unserer Sicht nicht für alle Magento-Projekte geeignet ist. Wir haben daher mit Hyvä einen neuen Ansatz für ein performantes und v.a. einfacheres Frontend entwickelt. Mehr Informationen zu Hyvä Themes gibt es hier:

Um zu verstehen, warum eine neue Frontend-Technologie gebraucht wird, müssen wir zunächst unseren Blick auf das derzeitige Frontend von Magento richten.

Aktuell in Magento 2

Magento 2 hat viele Stärken: Backend-Entwicklung mit Dependency Injection, Testabdeckung und APIs, um nur ein paar zu nennen. Leider gehört die aktuelle Frontend-Technologie nicht zu diesen Stärken. Ein kurzer Überblick über das aktuelle Frontend:

Das Layout-System

Magento 2 verwendet für große Teile des Frontends das gleiche Layout-System wie Magento 1. Es besteht aus:

• Blocks (PHP-Klassen)
• Templates (PHTML-Dateien: HTML gemischt mit etwas PHP-Code)
• Layout-XML (zur Strukturierung)
• JavaScript (größtenteils jQuery, mit RequireJS zur Verwaltung der Abhängigkeiten)
• LESS als CSS-Preprocessor

Da das Layout-System im Prinzip aus dem Jahr 2007 stammt, ist es etwas veraltet und lässt Flexibilität vermissen. Nach einer Einarbeitungsphase (im Idealfall durch eine Schulung o.ä. unterstützt) können Frontend-Entwickler üblicherweise ganz gut mit dem Layout-System arbeiten, wobei es da ein paar Einschränkungen gibt. Im Allgemeinen ist die „developer experience“ nicht zufriedenstellend, und einige Details wie durch XML generierter HTML-Code sind schwer anzupassen bzw. zu debuggen. Veraltete Versionen von jQuery und jQueryUI sowie eine langsame CSS-Kompilierung hinterlassen einen suboptimalen Eindruck.

UI Components

UI Components wurden vom Magento-Core-Team eingeführt, um ein modernes, erweiterbares Frontend bereit zu stellen, das mit vielen einzelnen Komponenten umgehen kann. Diese Komponenten sind mehr oder weniger unabhängig und können über wohldefinierte Schnittstellen auf andere Komponenten zugreifen. UI Components werden hauptsächlich im Checkout und im Adminbereich eingesetzt. Es gab allerdings auch Pläne, ihren Einsatz auf das ganze Frontend auszudehnen, um langfristig das alte Layout-System zu ersetzen.

Die Bestandteile der UI Components sind:

• JavaScript (Knockout.js) für die Logik
• Template-Dateien (HTML) um HTML darzustellen
• XML um Komponenten zu definieren (welches teilweise noch durch PHP-Code angepasst wird)
• PHP-Klassen, um die notwendigen Daten als JSON bereitzustellen.

Während das in der Praxis gut funktioniert (außer, dass man sehr deutlich erkennen kann, wie sich die Seite Stück für Stück aufbaut), gibt es ein großes Problem:

• Es ist extrem kompliziert und daher sehr schwer zu verstehen, was wie vor sich geht.

Das heißt, dass es viel Zeit kostet, sich in das System einzuarbeiten; herauszufinden, welcher Teil des Codes wofür verantwortlich ist; und Anpassungen zu machen, auch wenn UI Components im Allgemeinen sehr anpassbar sind. Dadurch benötigen auch erfahrene Entwickler viel Zeit, um scheinbar kleine Anpassungen zu machen, insbesondere im Checkout.

Einige Zitate von sehr erfahrenen Magento-Entwicklern:

Whenever I try to use a custom or core UI component the experience is frustrating, time consuming and painful.
Vinai Kopp (2016)

Hopefully […] Magento’s engineering teams will be able to get these new and incomplete systems under control.
Alan Storm (2016)

Die Verschachtelungstiefe des XML-Codes, der benötigt wird, um scheinbar kleine Anpassungen zu machen, ist ein Zeichen für die Komplexität:

@max_pronko explains why building christmas trees in layout files of #Magento2 checkout for configuring #uicomponents at #MageTitansMCR 😁 pic.twitter.com/nDYbNH5KYh

— Maria Kern (@maja_kern) 11. November 2017

Auch wenn Magento versprochen hat, die Arbeit mit UI Components zu vereinfachen, wird die darunter liegende Komplexität immer bleiben. Bei Interesse an mehr Details über das UI-Components-System und dessen Schwächen empfehle ich meinen (englischen) Blogpost aus dem November 2016:

Reality Adjustment: Why a talk about UI Components changed Scope and Title.

Meiner Meinung nach: Magento hat mit der Einführung der übermäßig komplizierten UI Components einen großen Fehler gemacht, und es ist ihnen auch bewusst.

Glücklicherweise gibt es die Aussicht auf Alternativen zum jetzigen Frontend. Wir freuen uns darauf, sie hoffentlich bald einsetzen zu können.

Der Ansatz: Progressive Web Apps (PWA)

PWA ist eine relativ neue Technologie, die darauf abzielt, die Vorteile nativer Apps und Websites zu kombinieren. Sie ermöglichen es beispielsweise, eine Website wie eine App als Icon auf dem Startbildschirm eines Smartphones abzulegen, Gerätesensoren zu verwenden oder Offline-Phasen zu überbrücken. In Bezug auf Magento gibt es allerdings einen speziellen Punkt, weshalb ich denke, dass PWAs die Zukunft darstellen:

PWAs ermöglichen es, Frontend und Backend zu entkoppeln.

PWAs bauen üblicherweise auf einem JavaScript-Framework wie React, Vue.js or AngularJS auf, um die Daten zu verwalten und darzustellen. Im Hintergrund kommunizieren Sie mit einem Backend (in unserem Fall Magento 2) über REST-APIs. Dazu noch eine Caching-Ebene (beispielsweise eine node.js-Middleware), und wir haben ein sehr flottes Frontend, das die gleiche Funktionalität bereit stellt wie das traditionelle Magento-Frontend. Da das eigene Frontend von Magento nicht mehr benutzt wird, wird dieser Ansatz als Headless Shop (oder Headless Magento) bezeichnet.

Falls Sie mehr über den technischen Hintergrund und die Anwendungsfälle wissen möchten, empfehlen wir den (englischen) Blogpost „Progressive web apps – the future default“ von Inchoo.

Die Wettbewerber

Aktuell können wir diese vielversprechenden Ansätze beobachten:

PWA Studio

Hier handelt sich um die offizielle Technologie, die aktuell von Magento Inc. entwickelt wird. React wird hier für das Frontend genutzt. Das Endergebnis wird voraussichtlich sehr flexibel erweiterbar sein, aber es wird noch einige Zeit dauern, bis eine stabile Version veröffentlicht werden wird. Aktuell sind nur wenige Informationen über das Projekt öffentlich verfügbar.

DEITY

DEITY basiert ebenfalls auf React, hat aber bereits einige Closed-Source-Implementierungen auf dem Markt. Live in Aktion sieht man dies unter https://therake.com/ oder im offiziellen Demoshop unter https://demo.deity.io/. Die technische Grundlage wurde von der niederländisch-polnischen Agentur Hatimeria geschaffen. Die neu gegründete Firma DEITY BV in Eindhoven (NL) hat die Entwicklung und den Support übernommen und arbeitet derzeit intensiv an der Verbesserung ihrer Middleware- und Progressive Web App-Technologie.
https://deity.io/

Vue Storefront

Wie der Name bereits suggeriert, basiert Vue Storefont auf dem Vue.js-Framework. Es ist ein OpenSource-Projekt der polnischen Magento-Agentur Divante. Ein Demoshop ist unter https://demo.vuestorefront.io verfügbar.
Vue Storefront wird im Moment kräftig weiterentwickelt. Es wird aber voraussichtlich noch ein paar Monate brauchen, bis es als „stabil“ bezeichnet werden kann.
https://divante.co/products/vue-storefront

Der Vollständigkeit halber haben wir Front Commerce als vierten Wettbewerber hinzugefügt. Wegen des proprietären Ansatzes (kein OpenSource) glauben wir nicht, dass es einen relevanten Marktanteil erobern kann. Dennoch ist es ein interessanter Ansatz und könnte eine gute Ergänzung zu Magento-2-Shops sein.

Front Commerce

Front Commerce ist eine proprietäre Lösung aus Frankreich. Sie verbindet ein Magento-2-Backend mit einem React-Frontend. Unter https://demo.front-commerce.com/ ist eine eindrucksvolle Demo zu sehen. Der Einsatz der Lösung ist nicht kostenlos; alle Gebühren werden auf der Website aufgeführt. Da es keinen offenen Quellcode gibt, können wir nicht viel über den aktuellen Zustand des Projektes sagen.
https://www.front-commerce.com/

Fazit

Es ist großartig, in Zukunft die Möglichkeit zu haben, das Frontend vom Magento-2-Backend abzukoppeln, da es dadurch ermöglicht wird, das hochkomplizierte Magento-2-Frontend zu umgehen. Der wichtigste Schritt wird sein, ein gutes, erweiterbares Standard-Theme zu haben, das auf React oder Vue.js aufbaut.

Schon jetzt ist klar, dass es mehrere mögliche Lösungen gibt, um PWA und Magento zusammenzubringen. Es kann eine vernünftige Strategie sein, auf die offizielle Lösung von Magento selbst zu warten; aktuell gibt es allerdings noch keinen offiziellen Zeitplan zum Release. Auf der anderen Seite besteht immer das Risiko einer instabilen, überkomplizierten Lösung.

Spannenden Entwicklungen beobachten wir besonders bei den zwei Wettbewerbern DEITY und Vue Storefront, bei denen sich viel bewegt. Wir bei integer_net haben unsere Wahl bereits getroffen: Wir sind Partner von DEITY, die im Moment die am weitesten fortgeschrittene Lösung haben. Trotzdem gilt natürlich auch hier: Konkurrenz belebt das Geschäft. Deshalb freuen wir uns darauf, die weitere Entwicklung zu beobachten (und zu beeinflussen!) und unser erstes PWA-Projekt mit Magento 2 umzusetzen.