Ich unterscheide hier bewusst zwischen „Headless“ und Magento PWA. Warum? Jeder erwähnt PWA weil es ein absolutes Buzzword ist, aber meint nicht unbedingt das, wofür diese Abkürzung steht.
PWA steht für „Progressive Web App“ und steht für eine Sammlung von Technologien und Best Practices, mit denen man Web-Applikationen mit einem ähnlichen Look & Feel wie eine native Desktop-/Mobile-App bauen kann. Es handelt sich um eine Mischung von Features in HTML, JS, CSS und Browser-APIs, die je nach Bedarf eines Online-Angebot eingesetzt werden können. Die Browser der UserInnen müssen diese Features unterstützen. Das tun nicht alle Browser. In solchen Fällen muss man Fallbacks einbauen oder damit leben, dass manche BenutzerInnen eine schlechtere User Experience haben.
Viele gehen nicht auf das komplette Feature-Set ein, sondern nur auf einen – zugegebenermaßen wichtigen – Teil der PWAs: in der Regel werden hier Frontend und Backend wesentlich stärker getrennt. Das macht schlanke, moderne und auch sehr individuelle Frontends wesentlich einfacher und kostengünstiger realisierbar als bisher.
Stand von Progressive Web Apps im Jahr 2020
Der Artikel Progressive Web Apps in 2020 fasst anschaulich zusammen, wie weit die Unterstützung von PWAs in unterschiedlichen Systemen im Jahr 2020 ist.
Magento PWA Studio
Für die Entwicklung einer PWA bietet Magento das PWA Studio an. Das ist ein Tool-Set, mit dem man ein Shop-Oberfläche bauen kann, die im Hintergund mit Magento 2 kommuniziert. Am 21. Februar 2019 wurde PWA Studio 2.0.0 veröffentlicht. Das ist die erste Version, für die Magento eine stabile API garantiert und somit als Grundlage empfiehlt, um mit dem Bauen von PWA-Shops zu beginnen. Seitdem gibt es laufende Updates.
Theoretisch kann man mit PWA Studio ein x-beliebiges Frontend bauen, das komplett von dem losgelöst ist, was man aus der Magento-Welt kennt. Als Orientierung bietet Magento aber selbst ein „Proof of concept„, also eine Beispiel-Implementierung, mit dem Namen Venia. Venia ist also ein Beispiel-Theme für eine PWA, so wie es Luma für einen Standard-M2-Shop ist. Die offizielle Demo für Venia findet man auf venia.magento.com.
Einen Einblick in die weitere Entwicklung gibt die PWA Studio Roadmap. Dort gibt es allerdings schon länger keine Aktivität.
Das PWA Studio Code Sample Repository macht EntwicklerInnen über kleine Code-Happen mit den Konzepten und der API von PWA Studio vertraut. Auch hier gibt es aber schon länger keine Änderungen.
Laut Mark Shust im September 2023 wurden inzwischen die internen Ressourcen von PWA Studio zu App Builder verlagert.
PWA Studio Basics für EntwicklerInnen
Magento hat ein Tutorial PWA Studio Fundamentals erstellt, in dem unter anderem diese Punkte vorgestellt werden:
- Projekt-Setup
- Projekt-Struktur
- Eine statische Route hinzufügen
- Den Site-Footer verändern
- Component Props verwenden
- CSS-Module
Weitere werden folgen.
Tipps und Erfahrungen zur Umsetzung von PWA Studio Projekten
Ein Blog-Eintrag von Lars Röttig dokumentiert seine Einschätzung zu Magento PWA Studio Ende Februar 2020. Andreas Emer veröffentlichte einen weiteren Erfahrungsbericht im März 2020.
Jordan Eisenburger schrieb im März 2020 eine Machbarkeitsstudie für PWA Studio 5.0.1. Darin gab er seine Einschätzung ab, wie HändlerInnen mit In-House-EntwicklerInnen oder Agenturen an eine Implementierung herangehen können, wo die Vor- und Nachteile aktuell liegen. Leider ist die Studie inzwischen offline.
Ein weiterer Artikel, der hilft das Setup von PWA Studio zu verstehen, ist „Do you need Node on the server to run Magento PWA Studio“ von Jisse Reitsma.
SEO-Aspekte (Server Side Rendering, SSR)
Ein großes Thema bei PWA-Lösungen ist die Auswirkung auf SEO, vor allem im Bereich „Server Side Rendering“ (SSR).
Magento geht im Posting „Server-Side vs Client-Side Rendering and Changing SEO Practices“ auf den aktuellen Stand bei Magento PWA Studio ein.
Listen von Shops mit Magento PWA Studio
Zwei Websites sammeln Listen von Shops, die bereits mit PWA Studio umgesetzt worden sind:
- pwacart.com
- pwastudio-stats.com
UPWARD
Für PWA Studio hat Magento eine Spezifikation namens UPWARD erarbeitet und sie in NodeJS und PHP implementiert. Sie beschreibt, wie ein Server eine PWA unterstützt und ausliefert. UPWARD wurde im Kontext von Magento 2 und PWA Studio geschrieben, soll aber software- und technologie-unabhängig sein. Ausführlicher erklärt das Javier Villanueva in „Magento PWA Studio: What is UPWARD?„.
Server Side Rendering mit SeoSnap
Die niederländische Agentur Experius veröffentlichte mit SeoSnap eine Open-Source-Lösung die es erlaubt PWA Studio basierte Webshops mit Server Side Rendering (SSR) zu sehen. Das ist wichtig für gute SEO.
Nützliche Extensions
Lars Röttig, der als Maintainer sehr aktiv an der Entwicklung von PWA Studio mitarbeitet, hat ein Node-Package namens „PWA Studio extension generator“ gebaut. Das Package ist ein so genanntes „Scaffolding-Tool“. Das heißt, mit dem Extension Generator kann man durch Beantwortung ein paar einfacher Fragen das Grundgerüst für PWA Studio Extensions bauen.
Was passiert mit dem Standard-Frontend (z.B. Luma), wenn PWA Studio veröffentlicht ist?
Das wurde zum ersten Mal bei der Konferenz Meet Magento New York 2018 („MM18NYC“) auf bzw. auf Twitter lebhaft diskutiert. Konkret stellt sich die Frage: was bedeutet PWA Studio als neuer Standard für HändlerInnen und IntegratorInnen, die bereits Shops und Themes mit Magento <= 2.4.x gebaut haben?
Einige Aussagen aus dieser Zeit dazu:
- Wenn PWA Studio vollständig einsetzbar ist, wird das JavaScript-Framework Knockout.js in Magento „deprecated“, also als „nicht mehr Best Practice“ markiert und für die zukünftige Entfernung vorgesehen (Ben Marks, Magento Evangelist, 2.11.2018).
- Das betrifft aber nur das Frontend, nicht das Backend – dort werden Knockout.js, UI components wohl noch weiter eine Rolle spielen (Vinai Kopp, 3.11.2018).
- Die aktuelle Art Frontend-Themes zu entwickeln, wie zum Beispiel das Luma-Theme, wird aber nicht gleich mit PWA Studio deprecated. Das passiert frühestens in einem Jahr, und es wird für zumindest drei Jahre unterstützt, bevor es entfernt wird (Anton Kril, Director of Architecture bei Magento, 3.11.2018).
- Deprecation bedeutet in dem Fall: die entsprechenden APIs werden als „@deprecated“ markiert und mit Links zu den PWA-APIs versehen (Anton Kril, 3.11.2018).
- Die Reihenfolge der Schritte wird wie folgt sein (Anton Kril, 3.11.2018):
- Verfügbarkeit von PWA Studio
- Vollständiges PWA Storefront möglich/verfügbar
- Deprecation des Luma/Blank-Themes
- Entfernung des Luma/Blank-Themes
- Die existierende Lösung (also wie Luma/Blank-Theme) wird zumindest zwei Jahre per Magento 2.3 unterstützt. Magento 2.4 ist noch nicht einmal geplant, deswegen ist es verfrüht, über die Entfernung der aktuellen Lösung zu sprechen (Matthew Zimmerman, Senior Director Engineering bei Magento, 3.11.2018).
- Es macht außerdem Sinn, auf das Release von des Venia-Themes zu warten, weil der Implementierungspfad für eine PWA dann wesentlich einfacher wird (Matthew Zimmerman, 3.11.2018).
- Wenn das Blank- oder Luma-Theme vollständig aus der Code-Basis entfernt werden, könnte das zu einem Problem für Shops werden, deren Theme auf ebendiesen Standard-Themes aufbaut (anstatt vollkommen eigenständig zu sein (Joost van Veen, 3.11.2018).
- Kompatibilität wird bis zumindest 2021 beibehalten (Jason Woosley, Vice President Commerce Product & Platform bei Adobe, auf der MageConf, 3.11.2018).
Zwei Jahre später, im Juli 2020, hat sich die Situation noch nicht grundlegend geändert. Magento 2.4.0 ist erschienen, aber noch ist PWA Studio nicht feature-complete.
Willem Wigman fragte deswegen auf Twitter:
Is there a rough timeline how long Luma will be supported as soon as PWA is ‘done’ later this year?
And/or, what does deprecation exactly mean at that point?
Willem Wigman auf Twitter
Will frontend be isolated and then marked deprecated? At what point would code be removed, and what parts?
Die Antwort von Eric Erway, zu dem Zeitpunkt Product Management für Magento Commerce:
We are not planning to deprecate Luma until PWA is complete and the ecosystem is ready. Part of our mission is to make that decision easier for everyone when Venia becomes the preferred choice.
Eric Erway auf Twitter
Fast ein Jahr später, Ende April 2021, fragte TJ Gamble im Zuge einer Präsentation zu Composable Commerce und der Aussage „Luma is going away“:
Was there a timeline on Luma going away?
TJ Gamble auf Twitter
Worauf wieder Eric Erway antwortete, inzwischen im Product Management von Adobe Commerce:
No timeline yet. Our goal is to protect LUMA until it’s no longer needed — but that date gets closer with every release. Completion of GraphQL, Venia, and adoption are major factors based on feedback.
Eric Erway auf Twitter
Für HändlerInnen und IntegratorInnen im August 2021 bedeutet das: wenn Sie jetzt einen neuen Shop bauen, entscheiden Sie sich aufgrund des verfügbaren Budgets, der geplanten Features und der geplanten Lebenszeit des Shops, ob Sie auf eine der PWA-Lösungen setzen möchten (siehe auch unten), auf ein traditionelles Frontend oder eine Lösung mit Hyvä.
Mit einer PWA-Lösung sind sind Sie im Shop-Bereich „Early Adopter“. Das kann zukünftig einen Vorsprung an Technologie und Erfahrung bedeuten, aktuell aber auch Mehrkosten. Das traditionelle Frontend lässt sich inzwischen etwas flotter implementieren, da die Dienstleister inzwischen einige Jahre Erfahrung sammeln konnten. Zugleich kann es sein, dass Sie in etlichen Jahren Pläne beginnen müssen, auf ein neues Frontend umzustellen (außer es gibt dann die Möglichkeit, ein „veraltetes“ Frontend betreiben). Als Alternative bleibt Hyvä, das zwar ein kostenpflichtiges Produkt ist und von ein einem Community-Team vorangetrieben wird, aber eine technisch moderne Basis hat und ein sehr performantes Frontend ermöglicht.
Alternativen zu Magento PWA Studio
Neben der offiziellen Implementierung von Magento, „PWA Studio“, gibt es einige weitere PWA- bzw. Headless-Lösungen, die mit Magento 2 kompatibel sind.
Dazu zählen:
- Deity Falcon
- Front Commerce
- ScandiPWA
- Vue Storefront – jedoch vorerst nur mit der „alten“ Version, sozusagen Vue Storefront 1.x, noch nicht mit „Vue Storefront Next“ das von Grund auf neu geschrieben wird, siehe auch Jisse Reitsma in seinem Blog-Beitrag (Stand: Mai 2021).
Im Web gibt es ein sehr informatives Google Docs Sheet, das die Eckdaten dieser Systeme gegenüberstellt.
Beispiele für PWA Webshops
Sander Mangel hat eine Liste von PWA E-Commerce Lösungen zusammen getragen. Viele von ihnen verwenden Magento.
Adobe Experience Manager (AEM) Extension für PWA Studio
In einer Blog-Post-Serie erklärt das Adobe-Team, wie man mittels einer neuen Extension Inhalte des Adobe Experience Managers in PWA-Studio-Headless-Shops pflegen kann.
