PWA-Studio - Erfahrungen aus der Praxis

Auf der Meet Magento 2019 habe ich viele Gespräche über PWA-Studio geführt und musste feststellen, dass es noch so gut wie keine Praxiserfahrung damit gibt und deshalb auch eine große Verunsicherung diesbezüglich herrscht. Aus diesem Grund möchte ich meine Erfahrungen und Gedanken aus der täglichen Arbeit an unserem ersten Projekt mit PWA-Studio hier teilen. Dieser Artikel kann durchaus der Startpunkt einer kleinen Serie an Artikeln mit Erfahrungen und Gedanken sein, von denen ich denke, dass sie für die Community interessant sein könnten.

1) Magento: PWA-Studio ist produktiv einsetzbar

Magento geht öffentlich sehr offensiv mit dem Thema PWA um und lässt meiner Meinung nach den Eindruck entstehen, dass PWA-Studio produktiv einsetzbar ist. Was sie in der Kommunikation aber vernachlässigen ist eine Zielgruppendefinition. Diese hat Jisse Reitsma (Yireo) in seinem Talk "How Magento Extensions Will Fit into PWA" auf der Meet Magento 2019 aus meiner Sicht sehr treffend hinzugefügt, daher möchte ich sie hier einmal kurz zusammenfassen.

PWA-Studio ist produktiv einsetzbar...

... für Merchants

Hier ist die Antwort aktuell einfach: Nein!
PWA-Studio ist keine Software, die man wie Magento selbst "einfach" installieren und über einen schönen Wizard konfigurieren kann. Das ist auch gar nicht der Anspruch: PWA-Studio ist als Toolkit für Entwickler zu verstehen, die damit eine PWA Storefront für einen Magento Shop entwickeln wollen/können.

... für Entwickler

PWA-Studio bietet Entwicklern einige hilfreiche Tools, eine PWA-Storefront für Magento zu entwickeln. Natürlich sollte man sich mit den Grundtechnologien und Tools wie z.B. React, Redux und Webpack vorher auseinander gesetzt haben. Auf Basis der Venia-Storefront kann dann eine eigene Storefront entwickelt werden. Zu beachten ist allerdings, dass Venia bei weitem noch keine produktiv einsetzbare Version erreicht hat, viele wichtige Features fehlen noch. Dazu zählen z.B. Filter auf Kategorieseiten oder andere Zahlarten als Braintree im Checkout, um nur Einige zu nennen.

Zusammenfassend ist PWA-Studio für Entwickler also einsetzbar, es ist aber noch sehr viel Eigenarbeit nötig.

... für Extension-Hersteller

Auch hier lautet die Antwort "Ja", auch wenn man hier zwischen verschiedenen Typen von Extensions unterscheiden muss.
Backend-Extensions sind von den Änderungen nicht betroffen, hier ändert sich für die Hersteller nichts. Hersteller von Extensions, die sich direkt oder indirekt auf das Frontend auswirken, sollten einerseits ihren Extensions GraphQl-Endpoints (hierüber kommuniziert das Frontend mit dem Backend) hinzufügen, bzw. bestehende Standard-Endpoints erweitern. Außerdem sollten sie evaluieren, ob es Sinn macht, eigene React-Komponenten (oder Referenz-Implementierungen) zur Verfügung zu stellen, die in die neue Storefront eingebunden werden können.
Für diese Zielgruppe ändert sich also einiges, was aber auch eine große Chance sein kann, immerhin gibt es noch kaum Konkurrenz auf diesem neuen Feld.

2) Storefront-Entwicklung = Individualentwicklung

Die Entwicklung einer Magento PWA-Storefront unterscheidet sich grundlegend von der bisherigen Frontend-Entwicklung von Magento. Es gibt keine Standard-Themes wie Luma oder Blank, auf denen man ein eigenes Theme mittels Fallback Mechanismus aufbauen kann. Die Venia-Storefront ist mittlerweile zu einem ordentlichen Fundament geworden, auf deren Basis man seine eigene Storefront entwickeln kann. Hierbei gilt es allerdings folgendes zu beachten: sobald man angefangen hat, seine Änderungen vorzunehmen wird es schnell sehr schwer Updates der Venia-Storefront (welche aktuell noch häufig und auch nötig sind) zu übernehmen. Das heißt im Umkehrschluss, dass man ab einem gewissen Punkt auf sich alleine gestellt ist (a.k.a. Individualentwicklung). Die Abspaltung des Frontends in eine eigenständige Applikation bietet also enorme Freiheiten. Diese Freiheit wird dazu führen, dass Shop-Frontends wieder deutlich individueller werden, was für mich persönlich grundsätzlich erst einmal nichts Schlechtes ist; gleichzeitig bedeutet dies aber auch einen deutlich höheren Entwicklungsaufwand.

3) Projektsetup

Das Setup von PWA-Studio ist erstmal nicht sonderlich kompliziert. Über die Anleitung unter https://magento.github.io/pwa-studio/venia-pwa-concept/setup/ kommt man schnell zu einer lauffähigen lokalen Installation der Venia-Storefront. Diese Installation ist aber sehr umfangreich, da PWA-Studio als Monorepo entwickelt wird. Das heißt, alle Pakete wie Venia, Peregrine, Upward, usw. sind in dieser Installation enthalten, obwohl das für die Entwicklung einer Storefront gar nicht notwendig ist. Außerdem wird das Paket-Management dadurch deutlich schwerer und träger, da alle Dependencies des Monorepos aufgelöst werden müssen. Das macht es kompliziert, einzelne Pakete zu updaten oder ersetzen.

Für einen schnellen Start und erste Änderungen kann es sich anbieten, Fallback-Studio (https://github.com/Jordaneisenburger/fallback-studio) zu verwenden. Hier kann man die Venia-Storefront in ihrer Ausgangsform belassen und nimmt seine Änderungen getrennt über eine Fallback-Struktur vor. Der Vorteil ist, dass man die Venia-Storefront per Knopfdruck auf den aktuellen Stand bringen kann, ohne seine eigenen Änderungen zu überschreiben. Je nach Art und Größe des Updates wird es aber unumgänglich sein, seine eigenen Änderungen wieder an den aktuellen Stand der Venia-Storefront anzupassen.

Für unser Projekt haben wir uns dafür entschieden, die Venia-Storefront als Basis in unser eigenes Projekt zu kopieren. Die Pakete für upward-js (Server, https://www.npmjs.com/package/@magento/upward-js) und Peregrine (Komponenten-Library, https://www.npmjs.com/package/@magento/peregrine) werden über NPM in das Projekt eingebunden. Über diese Art des Setups ist es deutlich einfacher, Änderungen an Build-Setup und Tools vorzunehmen. Der Nachteil ist wie bereits in Punkt 2 beschrieben, dass es sehr schnell schwierig wird, Weiterentwicklungen der Venia-Storefront in das eigene Projekt zu übernehmen.

4) Fehlendes Serverside Rendering

Serverside Rendering (SSR) spielt in der Suchmaschinen Optimierung (SEO) eine große Rolle. Aber auch aus Performance- und User-Experience-Sicht ist SSR bei modernen Javascript-Frontends nicht zu vernachlässigen. Daher ist es umso ärgerlicher, dass im aktuellen Setup von PWAStudio, bzw. der Venia-Storefront, kein SSR vorgesehen/möglich ist. Problematisch sind hierbei zwei Aspekte: die aktuelle Serverlösung (UPWARD) und die React-Applikation selbst.

UPWARD-Server

Der UPWARD-Server bietet aktuell keine Möglichkeit, eine React-Applikation vor der Ausgabe an den Client serverseitig zu rendern. Hier ist also Eigeninitiative gefragt. Ein Ansatz kann hier folgender sein: es gibt zusätzlich zum Standalone-Betrieb die Möglichkeit, den UPWARD-Server als Middleware einzusetzen. Das eröffnet die Möglichkeit, die Ausgabe des UPWARD-Servers recht elegant nachträglich zu manipulieren. Hierzu könnte man eine eigene Middleware entwickeln, die sich um das Rendering der Applikation kümmert und das fertige HTML an der entsprechenden Stelle in die Ausgabe der UPWARD-Middleware einfügt. Vorteil dieser Variante: der UPWARD-Server muss nicht selbst erweitert werden, was Updates um einiges einfacher macht.
Eine weitere Möglichkeit sind Prerendering Services, die die React-Applikation vorrendern und dann an Crawler wie z.B. den Googlebot ausgeben.

Applikation

Es werden an mehreren Stellen neue React-Features wie React.lazy und Suspense verwendet, die zum jetzigen Zeitpunkt nur clientseitig unterstützt werden, ein Serverside-Rendering ist hier nicht möglich. Des Weiteren wird teilweise in elementaren Komponenten auf das globale window Objekt zugegriffen, das in einer Serverumgebung natürlich nicht vorhanden ist. Aktuell ist es also nicht möglich, die Applikation serverseitig zu rendern, ohne tiefgreifende Anpassungen vorzunehmen.

Fazit

Die ersten Erfahrungen mit PWA-Studio sind gemischt: Man bekommt als Entwickler Tools an die Hand, auf Basis derer man schnell mit der Entwicklung einer eigenen PWA Storefront für Magento beginnen kann. Das Setup ist recht unkompliziert, man kann zügig beginnen, seine Anpassungen vorzunehmen. Das ist gleichzeitig auch der negative Punkt: man muss sehr viele Anpassungen vornehmen, um eine Storefront für den Produktivbetrieb zu entwickeln. Auch das bisher fehlende Serverside Rendering ist eine herbe Enttäuschung, unverständlich dass Magento hierauf nicht gleich von Beginn an geachtet hat.