Magento-Shop mit PWA Studio aufsetzen

Über die Agentur

Die Mothership GmbH ist eine E-Commerce Agentur aus München, die sich insbesondere auf Magento-Lösungen für den Onlinehandel spezialisiert hat. In der Zusammenarbeit mit ihren Kunden setzt die Agentur auf agile Methoden aus der Softwareentwicklung mit dem Ziel umsatzstarke, stabile und optisch überzeugende Onlineshops zu kreieren, die den Usern ein optimales Shoppingerlebnis bescheren. Mothership berät lösungsorientiert bei der Entwicklung und Optimierung von E-Commerce-Aktivitäten und bietet Strategieberatung, Aufbau, Entwicklung, Erweiterung Anwendungsintegration und technische Integration von Magento-Onlineshops unter Berücksichtigung der Wertschöpfungskette ihrer Auftraggeber. Onlineshops aus der Mothership-Schmiede wurden bereits mehrfach als „Bester Magento-Shop Deutschland“ ausgezeichnet.

maxcluster arbeitet bereits seit vielen Jahren erfolgreich mit der Agentur zusammen, unter anderem bei dem Onlineshop "Roeckl", der im Oktober 2019 auf PWA umgestiegen ist.

Ihr habt kürzlich Euren ersten PWA-Shop erfolgreich gelauncht. Dazu habt Ihr PWA Studio genutzt. Wie war die Arbeit damit?

Zum Zeitpunkt, als wir das Projekt gestartet haben, war die PWA-Studio-Basis noch nicht vollständig entwickelt. So fehlte es nicht nur an Features, sondern vor allem auch an ausreichender Dokumentation bzw. Quellen, von welchen man Wissen beziehen kann. Dadurch war die Einstiegshürde etwas höher, da zunächst verstanden werden musste, wie das System funktioniert, korrekt aufgesetzt und konfiguriert werden kann. Dies vor allem im Hinblick darauf, dass man keine "Hello World"-App erzeugt, sondern bereits einen komplexen Anforderungskatalog mitbringt.

Abgesehen von den neuen Anforderungen an Infrastruktur und Deployment war die Umsetzung eines komplexen Designs, durch die Entwicklung der einzelnen React-Komponenten deutlich angenehmer und schneller, als es mit einem Magento 2 Standard-Frontend möglich gewesen wäre. Die Umsetzung des Projekts hat wirklich Spaß gemacht.

Welche Vorbereitungen waren relevant?

Wir mussten ein Setup evaluieren, das für uns eine gute Entwicklungsumgebung ermöglicht, in welcher unabhängig für Front- und Backend Features entwickelt werden können. Da es sich auch für uns um etwas ganz Neues handelte, war es wichtig eine hohe Qualität in der Entwicklung von Anfang an durchsetzen zu können. Deshalb gehörte es auch dazu herauszufinden, wie eine automatisierte Testing-Strategie für das neue Setup umzusetzen ist. Von Vorteil war auch, dass wir bereits im Vorfeld mit React gearbeitet haben.

Welches Hosting Setup war wichtig und wie konnte maxcluster Euch dabei unterstützen?

Es ist wichtig, dass wir beim Hosting einen Ansprechpartner haben, dem wir vertrauen können. maxcluster hat uns hier enorm weitergeholfen und nach einer gemeinsamen Planung technische Lösungen bereitgestellt. Im Vorfeld des relativ komplexen PWA-Kontextes gab es einige Fragen zu klären, etwa welche Dienste auf welcher Instanz platziert werden, wie Ports vergeben werden, wie der Umgang mit verschiedenen Routing-Regeln stattfinden soll, wie man die Applikationen monitort oder wie man mit Zertifikaten umgehen soll. maxcluster war für uns jederzeit erreichbar und konnte kompetente Lösungen anbieten. Dabei ist es uns wichtig, dass wir uns auf die Entwicklung des Shops fokussieren können und Dev-Ops Themen guten Gewissens an einen erfahrenen Partner auslagern können.

Welche Einschränkungen gibt es noch (im Vergleich zum regulären Magento Frontend)?

Momentan merkt man an vielen Stellen, dass das Magento-Ökosystem überwiegend noch auf das Legacy-Frontend setzt. Dies ist im Moment für bestehende Magento 2 Shops eine enorme Hürde, nun einen Wechsel durchzuführen. Bestehende Features, wie zum Beispiel das "Content-Staging", funktionieren ebenfalls nur mit dem Standard-Legacy-Frontend - zumindest in der Darstellung. Auch gibt es große Unterschiede in der Kommunikation zwischen dem Frontend und dem Backend. Während man bei einer strikten Trennung, zwischen Frontend und Backend ausschließlich über die API kommuniziert, ist die Kopplung beim Legacy-Frontend geringer, sodass sich genug Beispiele finden lassen, wo statt der inzwischen in Magento 2 verfügbaren API-Interfaces auf darunter liegende Methoden zurückgegriffen wird.

Das erschwert die Umsetzung da in der Folge zwei unterschiedliche Ergebnisse zustande kommen. Zum Beispiel fehlten Kategorie-Seiten-Filter in der GraphQL-Schnittstelle - oder aber die Unterstützung für den Page-Builder war mangelhaft.

Welche Vorteile konntet Ihr aus dem neuen Frontend gewinnen?

Das Frontend-Team kann relativ sorgenfrei und unabhängig vom Backend arbeiten. In der Tat haben wir zwei getrennte Teams, die sich für die Umsetzung an der API-Spezifikation orientieren können. Natürlich sind Anpassungen für das Projekt notwendig, diese sind aber durch die starke Entkopplung zum Magento-System relativ schmerzfrei durchzuführen. PWA-Studio setzt auf die Javascript Library React, die hierfür erstellten Komponenten können mithilfe von Storybook granular und unabhängig getestet werden. Insgesamt kann man sagen, dass die Entwicklung sehr viel Spaß gemacht hat. Jeder erfahrene Magento 1 Entwickler, der wenig Spaß mit dem XML-basierten Layout hatte, hat nun die Möglichkeit mit einem modernen Tech-Stack zu arbeiten, welches die Arbeit erleichtert und Spaß macht. Durch die dahinterliegende Technologie ist es möglich, hochperformante Onlineshops zu erstellen. Auch ist es möglich, nur Teilbereiche der Website auszutauschen, ohne die gesamte Website neu laden zu müssen, wenn User durch die Website navigieren. Das dadurch verbesserte User-Erlebnis wirkt sich in der Regel auch auf bessere Suchmaschinen-Platzierungen und den Umsatz aus.

Wo seht Ihr aktuell noch Schwächen in Magento PWA Studio?

Die Hauptschwächen von PWA Studio sind auf der einen Seite die unserer Meinung nach geringere Sichtbarkeit des Projektes innerhalb von Adobe/Magento und auch die falsche Erwartungshaltung dem Projekt gegenüber. Zu Beginn des Projektes gab es auch eine relativ steile Lernkurve, da es nicht viel Material gibt. Einige Standard-Funktionen eines Onlineshops stehen zum aktuellen Zeitpunkt noch nicht funktional zur Verfügung, außerdem fehlt noch größtenteils der Support von Extensions.

Sehr hilfreich ist daher ein enger Austausch über Github oder aber den Magento 2 PWA-Slack-Chat. Daher könnte die Dokumentation verbessert werden, allerdings befindet sich das Projekt noch in stetiger Entwicklung, wodurch das Framework regelmäßig verbessert wird.

Warum habt Ihr Euch für diese Lösung entschieden (statt für eine andere kompatible PWA-Lösung wie VueStorefront)?

Als Beratungsunternehmen ist es uns wichtig, dass wir vorhandene Lösungen evaluieren und eine wirtschaftlich sinnvolle Entscheidung treffen. Faktisch gab es zu dem Zeitpunkt der Evaluierung ab Ende 2018 neben PWA Studio nur zwei relevante Technologien: Deity und VueStorefront. VueStorefront ist aufgrund seines Tech-Stacks bereits vorab rausgefallen. Wir müssen bei der Umsetzung mit den Technologien arbeiten, bei denen wir langfristig produktiv sein können. Bei Deity ist uns nach wie vor die technologische als auch strategische Entwicklung nicht klar. Es muss seitens der Community bzw. des Unternehmens eine klare Linie gegeben sein. Technologisch war zu dem Zeitpunkt PWA-Studio noch nicht fertig für den Produktiveinsatz, man darf aber nicht vergessen, dass hinter Magento inzwischen Adobe steht. Hier passen die gesetzten Ziele, das Budget und der Support. Langfristig war es also eine strategische Entscheidung, welche für uns rückblickend die Richtige war.

Welche zukünftigen Entwicklungen erwartet Ihr im Bereich PWA in den nächsten Jahren?

Es ist schwierig, PWA als Allheilmittel abzustempeln - das ist es definitiv nicht. PWA kann Probleme im E-Commerce lösen, da es die Benutzererfahrung drastisch verbessern kann, indem zum Beispiel ein großer Teil vom Anwendungscode lokal gespeichert wird und auch ein Offline-Modus genutzt werden kann. Wir befinden uns in dieser Branche allerdings erst am Anfang, dessen was möglich ist. Wenn man über den Tellerrand schaut und beobachtet, was zum Beispiel Microsoft (siehe hierzu Artikel auf zdnet) auf die Beine gestellt hat, so ist das schon sehr beeindruckend. Die E-Commerce-Branche hat es zwar hervorragend verstanden, innerbetriebliche Prozesse zu optimieren und auch in Sachen Conversion-Optimierung muss sich hier keiner verstecken, allerdings gibt es Anwendungsfälle, die bisher noch keiner umgesetzt hat. Wir können uns gut vorstellen, dass PW-Apps in Zukunft klassische Client-Anwendungen, wie zum Beispiel E-Mail-Clients oder Office-Anwendungen, den Rang ablaufen.

Es wird spannend werden, ob wir sowohl neue als auch bestehende Kunden auf PWA-Lösungen migrieren können. Die Implementierung einer PWA ist auch meistens mit der Umsetzung einer API-First-Strategie verbunden. Die Kosten für diese Migration sind nicht unerheblich. Es geht nicht nur darum, dass das Frontend seine Daten zügig bekommt, sondern auch darum, dass die Infrastruktur diesen Anforderungen gerecht wird. Das fängt zwar im Frontend an, zieht sich aber durch die gesamte Wertschöpfungskette (CRM, ERP, PIM, etc.) eines Unternehmens.

Welche neuen Anforderungen haben sich an Mothership als Agentur ergeben?

Glücklicherweise hat Mothership ausgezeichnete Mitarbeiter, die sich nicht nur in einem Bereich spezialisiert haben; auch war zum Beispiel bereits Wissen im Bereich React, Elasticsearch oder Varnish vorhanden. Hier hat jeder die notwendige Expertise, um sich fachlich mit anderen austauschen zu können. Die Arbeit an PWA erfordert, dass man sich mit verschiedenen Meinungen und Ansichten konfrontiert sieht. Da kann es nicht schaden, dass man in der Lage ist, Situationen möglichst neutral zu bewerten. Weiterhin gibt es keine richtigen oder falschen Entscheidungen - wichtig ist der selbstbewusste Umgang mit Anforderungen und Veränderungen.

Unabhängig von PWA ist es so, dass E-Commerce-Infrastrukturen komplexer und wesentlich enger vernetzt sind. Es ist nicht unüblich, dass wir in einem Projekt mindestens zwei oder drei verschiedene Programmiersprachen im Einsatz haben, auch sind zunehmend mehr unterschiedliche Technologien involviert. Eine Herausforderung ist die Verschiebung des typischen Magento-Ökosystems von der "eierlegenden Wollmilchsau" zu "lediglich" einem Shopsystem. Das heißt, dass verschiedene Systeme dedizierte Aufgaben übernehmen und es so unterschiedliche Fehlerquellen geben kann. Ein gutes Monitoring der Dienste ist hier sehr wichtig.

Foto: Agentur Mothership: Johannes Müller, Peter Höcherl (v.l. hinten im Bild), Niklas Wolf, Andreas Emer, Don Bosco van Hoi, Ludwig Wacker (v.l. vorn im Bild). © Mothership GmbH, 2019