Headless Commerce
Welche Vorteile bietet Headless Commerce und wann macht der Einsatz eines losgelösten Frontends Sinn?
Kopflos, aber nicht ohne Konzept
Die Erwartungen der Kunden verändern sich mit der Verbesserung von Endgeräten und Technologien hin zu immer individuelleren und maßgeschneiderten Nutzererfahrungen.
So wollen Kunden zum einen, dass E-Commerce-Angebote mit der technologischen Entwicklung von Infrastrukturen und Endgeräten mithalten: Die Performance, sprich das Laden und der Aufbau von E-Commerce-Angeboten – muss quasi in Echtzeit erfolgen. Zum anderen setzen führende E-Commerce-Plattformen den Benchmark in Puncto Usability, Produktinszenierung und Funktionalität. Ob ausgefeilte Such- und Filterfunktionen, ansprechende Landingpage oder interaktive Produktfinder – der Online-Shop von heute muss in verschiedenen Belangen auf der Höhe sein.
Hierbei gewinnt das Thema Headless Commerce aufgrund der besseren Anpassbarkeit, Geschwindigkeit und der Kontrollmöglichkeiten immer mehr an Bedeutung. Deshalb wollen wir in diesem Beitrag einen genaueren Blick auf das Thema werden:
Frontends in einer Headless-Welt
Wie baue ich mein Frontends in einer Headless-Commerce-Welt - E-Commerce mit Composable Frontends, Frontend-As-A-Service oder Component-Frameworks
Headless im B2B-E-Commerce
Monolithische E-Commerce-Lösungen sind mittlerweile mit dieser Komplexität überfordert und hindern so Unternehmen daran, auch im B2B mit Innovation und User Experience zu punkten. Kann ein Headless-Ansatz mit einer Trennung von Front- und Backend hier Abhilfe schaffen?
Das Konzept hinter Headless Commerce
Headless Commerce ist zunächst einmal die Idee, das Frontend im E-Commerce - also die verschiedenen digitalen Touchpoints - von der Backend-Infrastruktur – also der Logik und Datenhaltung - zu entkoppeln. Dies ermöglicht es Unternehmen, Inhalte und Funktionen auf verschiedenen Plattformen, Kanälen und Touchpoints zu kombinieren, zu aggregieren und zu veröffentlichen.
Eine Headless-Commerce-Architektur verbindet die Präsentationsschicht über eine API mit verschiedenen Backend-Diensten. Der Kopf, also das, was die Besucher sehen, ist dabei das Frontend, APIs sind der Hals und der Körper stellt beispielsweise den Produktkatalog, die Warenkorb-Funktionalität oder den Bezahlprozess dar.
Da das Frontend nur über die APIs kommuniziert, können verschiedene Frontends an die entsprechenden Schnittstellen angebunden werden. Dies kann zum Beispiel eine App sein, die nativ für iOS oder Android entwickelt wurde. Auch eine PWA (Progressive Web App) ist eine Möglichkeit, eine Frontend – in diesem Fall über einen Browser – bereitzustellen. Weitere mögliche Touchpoints könnten ein POS-System, eine IoT-Lösung oder andere Dritt-Software, wie ein Marktplatz oder eine Social Media-Plattform sein, die ebenfalls auf die APIs zugreifen.
Die eigentliche Logik, also beispielsweise das Prüfen der Verfügbarkeit, das Berechnen einer Warenkorbsumme oder die Validierung von Produktkonfigurationen erfolgt in den Backend-Systemen. Diese funktionieren losgelöst voneinander und sind meist auf Skalierbarkeit und Performance auslegt. So kann das Frontend, welches nur einmalig auf das entsprechende Endgerät des Nutzers geladen werden muss, in Echtzeit mit den Backend-Schnittstellen kommunizieren. Dies erlaubt eine deutlich bessere Performance und extrem kurze Reaktionszeiten, wenn z.B. eine Produktvariante ausgewählt wird.
Die wichtigsten Punkte:
- Headless trennt Frontend und Backend in der Entwicklung
- APIs bilden die Basis für die Kommunikation zwischen Frontend und Backend
- Verschiedene Touchpoints können über die APIs angebunden werden
- Logik wird über das Backend abgebildet
- Backend-Systeme sind spezialisiert und in der Regel sehr performant
Durch die klare Trennung von Frontend und Backend sowie die Nutzung von standardisierten APIs und Datenaustauschformaten wie REST oder GraphQL, wird die E-Commerce-Plattform in logische Komponenten getrennt. Dies bringt für Nutzer aber auch aus Entwicklungssicht mehrere Vorteile:
Entkoppelte Entwicklung und Testing
Headless-Systeme sind entkoppelt; daher können Unternehmen experimentieren, ohne sich Gedanken über die Verlangsamung ihrer Online-Shops zu machen. Eine neue User Experience, beispielsweise die Veränderungen auf einer Produktdetailseite, kann realisiert werden, ohne dass das Kernsystem angefasst werden muss. Auch können Veränderungen über A/B Tests einfach parallel betrieben werden, da in die eigentliche Logik und auch die Datenstruktur nicht eingegriffen wird.
Personalisierung
Die Personalisierung von Inhalten, Produktangeboten, Preisen oder anderen Informationen, kann über einen headless Ansatz ebenfalls besser gelöst werden. Inhalte können an demografischen Gegebenheiten (Geschlecht, geografischer Standort, Alter usw.) sowie die Information und Interaktion der Nutzer, während sie sich auf der Website aufhalten, angepasst werden. Durch die Anbindung eines Identity Management oder einer zentralen User Datenbank, können Personalisierung auf Basis der Login-Daten erfolgen. Hierfür kommt beispielsweise eine Digital Experience Platform (DXP) zum Einsatz, die auf Basis verschiedener Parameter die verschiedenen API aggregiert und die entsprechenden Daten personalisiert.
Performance und User Experience
Das Kundenerlebnis, auch als User Experience bezeichnet, setzt sich aus verschiedenen Faktoren zusammen. Ein wesentlicher Faktor ist die Performance, also die Geschwindigkeit, wie Seiteninhalte geladen oder eine Webseite auf Interaktionen (z.B. Setzen von Filtern in einer Liste) reagiert.
Bei einem Headless-Ansatz kommuniziert das Frontend mit einem Backend, welches nur die relevanten Daten liefert. Wird zum Beispiel auf den “Zum Warenkorb hinzufügen” Button geklickt oder eine neue Kategorie aufgerufen, so liefert das Backend die entsprechenden Daten in einer strukturierten Form zurück. Diese Daten – in der Regel werden diese als XML bereitgestellt – werden dann durch das Frontend intepretiert und dargestellt. Ändert sich die Menge der Produkte im Warenkorb oder der berechnete Gesamtpreis, so müssen auch nur diese Daten aktualisiert und nicht die gesamte Webseite neugeladen werden.
Dieser Ansatz sorgt für eine sehr hohe Ladegeschwindigkeit und Veränderungen ohne Zeitverzögerung. Insbesondere das Neuladen einer Webseite bei Änderungen entfällt, was sich wiederum in der User Experience positiv bemerkbar macht.
Effizienz in der Entwicklung
Headless Architekturen entkoppeln Visualisierung und Logik, so dass verschiedene Entwicklungsteams besser an einem gemeinsamen Produkt arbeiten können: Während die Teams sowohl am Front-End- als auch am Back-End-Code arbeiten, kam zudem parallel bereits Content gepflegt und Produktdaten strukturiert werden.
Eine entkoppelte Architektur ermöglicht es Unternehmen, schneller Änderungen am Frontend vorzunehmen, ohne das Backend zu beeinträchtigen und vice versa. Aufgrund der Offenheit der Architektur können neue Funktionen und Integrationen in wesentlich kürzerer Zeit implementiert werden. Neue Funktionen können als Microservices getrennt vom Kernsystem bereitgestellt und im Frontend implementiert werden.
Die Anzeigeschicht kommuniziert mit der Anwendungsschicht über APIs, da es sich um getrennte Systeme handelt. Mit dieser Methode kann dank einer Headless-Architektur eine Daten-Cache-Schicht erstellen werden, die zwischen der Präsentations- und der Anwendungsschicht liegt. Die Cache-Schicht kann alle Anfragen nach Produktkatalogen oder statischen Inhalten zwischenspeichern. Im Vergleich zu einer Full-Stack-Anwendung werden die Daten wesentlich so schneller geladen, und das System kann viel mehr Datenverkehr bewältigen.
Flexibilität
Headless E-Commerce ermöglicht endlose Flexibilität und Anpassung durch die Trennung von Front-End und Back-End, so dass für viele Aufgaben nur Frontend-Entwickler erforderlich sind, um die gewünschten Änderungen vorzunehmen. Mit einem entkoppelten Frontend sind daher Änderungen, egal ob komplexe Anpassungen wie die Erstellung eines individuellen Checkout-Prozesses oder so einfache Erweiterungen wie das Hinzufügen eines zusätzlichen Feldes zu einem Kundenkonto, mit deutlich weniger Aufwand möglich.
Natürlich gibt es auch Einschränkungen und Nachteile beim Aufbau einer Headless-Architektur, insbesondere wenn man eine entsprechende Lösung mit Out-of-the-Box Produkten vergleicht:
Ressourcen für die Front-End-Entwicklung
Da die Headless-Commerce-Systeme zunächst kein eigenes Frontend mitbringen, müssen Ressourcen für Entwicklung eingeplant werden. Unternehmen benötigen IT- und Entwicklungsunterstützung, um sicherzustellen, dass die APIs effektiv mit den Back-End-System kommunizieren. Nach der Implementierung der Plattform sind die Mitarbeiter dann jedoch in der Lage, Inhalte auf den Webseiten oder im Shop zu ändern, ohne dass sie die Unterstützung der Entwicklungsteams benötigen.
Abstraktion von Inhalten
Das Bearbeiten von Inhalten in einer direkten Vorschau-Umgebung, allgemein unter dem Begriff WYSIWYG (What you see is what you get) bekannt, ist im Headless-Kontext nicht so einfach möglich. Die Verwaltung von Inhalten erfolgt vollständig losgelöst vom Design, da Webseiteninhalte oder Produktdaten auf eine Wiederverwendbarkeit in verschiedenen Kanälen ausgelegt sind. Dies erfordert von Redakteuren und Marketingmitarbeitern ein höheres Abstraktionsvermögen.
In der komplexen, digitalen Welt von heute führt ab einer gewissen Größe kaum noch ein Weg an einer Headless-Architektur vorbei: Sobald mehrere digitale Kanäle bespielt werden sollen, Inhalte und Produktdaten in unterschiedlichen Touchpoints ausgespielt werden müssen oder Time-to-Market in der Entwicklung neuer Funktionen wichtig ist, macht Headless Commerce Sinn.
Insbesondere in der Entwicklung und Implementierung neuer Funktionen kann bei einem Headless-Konzept auf eine Vielzahl von APIs externer Systeme zurückgegriffen werden: Ob Suche, Personalisierung, Payment oder Validierung von Daten – eine Headless-Architektur erlaubt es, die Schnittstellen externen Webservices deutlich einfacher zu implementieren und zu nutzen.
Digital Commerce Hype Report #2
Mit dem Digital Commerce Hype Report haben wir ein Format entwickelt, das E-Commerce-Verantwortliche mit geringem Zeitaufwand einen informativen Überblick über spannende relevante Technologien für den digitalen Handel verschafft.
Ausgabe #2 gibt einen Überblick über sechs neue, innovative E-Commerce- & Shop-Technologien.
Dein zertifizierter MACH-Partner
Wir sind von MACH überzeugt: Microservices, API-First, Cloud und Headless sind für uns die Grundlagen erfolgreicher Digitalprojekte. Als zertifiziertes Mitglied der MACH Alliance setzen wir gemeinsam mit unseren MACH-Partnern commercetools, Contentful und Algolia moderne, flexible und skalierbare Lösungen für E-Commerce und digitales Marketing erfolgreich und zukunftssicher um.
Evaluation von SaaS-Headless-Software
Komplexe Digitalisierungsinitiativen erfordern das Zusammenspiel verschiedener Softwarekomponenten. Die Zeiten, in denen diese sämtlich individuell für ein konkretes Projekt entwickelt werden, sind glücklicherweise lange vorbei. Ebenso unwahrscheinlich ist es jedoch, die eine ganzheitliche Lösung zu finden, die sämtliche geplanten Themenbereiche innerhalb eines Systems.
