Frontends in einer Headless-Welt

Headless-Systeme sind die Grundlage vieler moderner Commerce-Architekturen. Sie bieten den Vorteil, unterschiedliche Systeme einfach miteinander einfach zu verknüpfen und vor allem verschiedene Touchpoints mit unterschiedlichen Frontends aus einer Plattform heraus zu bedienen.

Wie lässt sich nun aber genau ein solcher Touchpoint insbesondere im Webshop (früher häufig Webshop genannt) realisieren? Welche Lösungen und Produkte gibt es hierfür und welche Vor- und Nachteile haben diese. Im Folgenden gebe ich einen Überblick über Lösungen und Produkte.

Ziel dieser Lösungen ist es immer, wiederkehrenden Entwicklungsaufwand zu reduzieren, insbesondere für häufig wiederkehrende Frontend-Herausforderungen. Dies kann dabei in Bezug auf den Entwicklungsprozess, Wiederkehrende Darstellungen oder und Funktionen als auch in Bezug auf Querschnittsanforderungen wie etwa Performance oder Editierbarkeit erfolgen.

Component-Frameworks

Die moderne Ausgangsbasis für die Realisierung von Web-Frontends stellen üblicherweise so genannte Komponenten-Frameworks dar. Sie erlauben es, in der Entwicklung die Kombination aus Gestaltung und Interaktionslogik in Form sogenannter Komponenten zu kapseln. Sie bieten ein einheitliches Abstraktionsmodell, um Entwicklung zu beschleunigen und zu standardisieren. Die häufigsten Vertreter hiervon sind etwa React oder Vue (gesprochen View).

Ergänzend stehen für diese Komponenten-Frameworks meist vorgefertigte Komponenten für Standardaufgaben (wie Bildergalerien, etc.) zu Verfügung, die in ihrer Gestaltung dann weiter an die individuellen Wünsche angepasst werden. Zunehmend bieten auch Anbieter von spezialisierten Microservices vorgefertigte Komponenten an, um die Integration ihrer Microservices in Frontends zu vereinfachen. So bietet etwa Algolia als Anbieter einer hochperformanten Suche eigene React-Komponenten zur schnellen Realisierung einer vollständigen Suchintegration inkl. Filter, Autocomplete, etc. an.

Grundsätzlich stellen die Component-Frameworks aber lediglich einen Entwicklungsrahmen für moderne Frontendentwicklung zur Verfügung und sind damit in modernen Frontends eigentlich immer als Basistechnologie gesetzt. Sie werden als Open Source Bibliotheken mit kostenfreier Lizenz zur Verfügung gestellt. Der eigentliche Betrieb ist von ihnen nicht abgedeckt.

Sie bieten jedoch noch keine direkten E-Commerce-Funktionalitäten. Die im folgenden genannten Lösungen setzen aber jeweils auf Component-Frameworks auf.

E-Commerce-Frontend-Frameworks

Der nächste Schritt an Standardisierung bzw. Wiederverwendung kann durch den Einsatz von E-Commerce-Frontend-Frameworks erfolgen.

Diese denken den Ansatz der Component-Frameworks einen Schritt weiter und fokussieren mit Standard-Bausteinen auf wiederkehrende E-Commerce-Darstellungen und Interaktionen wie Produktdetailseiten, Warenkörbe, Checkouts, etc.

Ebenso werden meist Standardintegrationen in gängige Shop-Backends, insbesondere aus dem Headless-Bereich angeboten.

Gerade die Realisierung eines Frontends, welches sehr nah am klassischen B2C-Shop liegt, lässt sich hierdurch deutlich beschleunigen. Andersherum gilt, je weiter die Nutzerführung von diesem abweicht, desto geringer werden die Vorteile bzw. muss teilweise "gegen" das Framework gearbeitet werden, was wiederum zu unnötigen Aufwänden führen kann.

Pionier dieses Lösungsansatzes ist sicherlich Vue Storefront, welches auf Basis des Vue-Component-Frameworks eine vollständige B2C-Storefront zur Verfügung stellt. Auch für React gibt es mittlerweile mit Next.js Commerce eine entsprechende Lösung.

Diese Frameworks werden üblicherweise ebenfalls als kostenfreie Open-Source-Lizenz angeboten. Konnektoren zu E-Commerce-Backends sind teilweise kostenpflichtig. Ergänzend bieten die Hersteller einen optionalen Betrieb als Software-As-A-Service (SaaS) Lösung an, welche einen, auf das jeweilige Framework optimierten Cloud-Betrieb beinhaltet. Alternativ können die Frameworks aber auch in der eigenen Cloud-basierte Infrastruktur betrieben werden.

Frontend-As-A-Service/Composable Frontend

Noch einen Schritt weiter gehen sogenannte Frontend-As-A-Service Plattformen oder Composable Frontends. Pionier hierfür ist sicherlich Frontastic.

Ausgehend von einem Component-Framework bieten sie eine vollständige Betriebs-und Pflegeinfrastruktur für Frontends.

Ebenfalls wird ein grundlegendes Gerüst an Standard-Komponenten bereitgestellt, die dann für die Realisierung der endgültigen Storefront entsprechend erweitert werden müssen.

Im Gegensatz zu den oben genannten reinen Frontend-Frameworks erlauben sie auch ein redaktionelles Zusammenstellen der Seiten aus individuellen Komponenten. Daher können auch Shop-Manager die Anordnung und Konfiguration etwa von Landingpages, etc. relativ frei gestalten während die eigentliche Inhaltspflege weiterhin über ein separates Content-Management-System erfolgt.

Der Betrieb wird in Form eines SaaS-Modells zur Verfügung gestellt, so dass hier keine eigene Betriebsumgebung bereitstellt werden muss. Als Ergebnis ergibt sich daraus allerdings immer eine kostenpflichtige Lizenzierung, eine kostenfreie Open-Source-Version ist normalerweise nicht gegeben.

Microfrontends

Ein neuer Trend in der Frontend-Umsetzung stellen sogenannte Microfrontends dar. Diese erlauben eine modulare Entwicklung unterschiedlicher Frontend-Bestandteile durch unabhängige Teams und übertragen das Konzept des Microservices ins Frontend.

Fertige Produkte und Lösungen existieren hier jedoch zum aktuellen Stand noch nicht, gerade für sehr umfangreiche Projekte mit unterschiedlichen beteiligten Parteien in der Umsetzung lohnt es sich jedoch, das Thema weiter im Auge zu behalten.

Fazit

War man in der Realisierung von Frontends für Headless-Architekturen vor einigen Jahren noch relativ auf sich allein gestellt, bietet der Markt inzwischen eine Vielzahl von Lösungen an. Der Einsatz eines Component-Frameworks wie React oder Vue ist hier zum Quasi-Standard geworden.

Je nach Grad der Individualisierung und bzw. Abweichung von einem Standard-Shop bietet sich der Einsatz eines E-Commerce-Frontend-Frameworks an.

Gerade für ein sehr aktives Online-Marketing mit individueller Ausgestaltung von Kampagnen-Landingpages oder individueller Platzierung von Kampagnen in Kategorieseiten stellen Composable Frontend-Produkte eine attraktive Lösung dar.

Parallel dazu sind die Betriebsoptionen zu betrachten. Integrierte SaaS-Optionen lagern viele Betriebsfragestellungen wie etwa Performance, Sizing oder auch Konfiguration an den Produktanbieter aus, so dass sich während der Implementierung auf die eigentliche Lösungsintegration fokussiert werden kann. Hier sind dann in Bezug auf Internationale Auslieferung, CDN-Unterstützung, etc. dann die Anforderungen entsprechend zu prüfen.

Übersicht