Headless Commerce:
Was ist das eigentlich?

Einstieg in die Möglichkeiten sowie Vor- und Nachteile von Headless-Architekturen im E-Commerce

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:

Headless in die Zukunft.

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

Die Vorteile von Headless Commerce

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.

Die zentralen Vorteile von Headless-Architekturen:

  • Flexibilität und Freiheit in der Entwicklung und Umsetzung neuer Funktionen
  • Bessere Performance in der Darstellung und Aktualisierung von Inhalten
  • Möglichkeit zur Durchführung von Anpassungen im Frontend ohne Einfluss auf das Backend
  • Nutzung der gleichen APIs für verschiedene Touchpoints

Die Nachteile von Headless Commerce

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.

Das sind die zentralen Nachteile eines Headless-Ansatz:

  • Mehr Ressourcen für die Entwicklung im Vergleich zum Customizing eines Standard-Templates
  • Abstrakte Prozesse in der Pflege von Inhalten erfordern spezielle Fähigkeiten seitens der Redaktion

Fazit und Empfehlung

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.

Dein Ansprechpartner

Matthias
Steinforth
Digital Strategie

Interesse uns kennenzulernen? Dann vereinbare einen Termin:

Mit der richtigen Kombination zur passenden Basis für digital Commerce

Experten-Whitepaper:

The Very Best-of-Breed

Suite oder Best-of-Breed: Mit welchem Ansatz können die Herausforderungen im digital Commerce am besten gemeistert werden? Dieser Frage geht unser Whitepaper zum Thema „Very Best-of-Breed“ nach und stellt die Voraussetzungen für erfolgreiche Best-of-Breed-Plattformen vor. Gemeinsam mit unseren Partnern Commercetools, Contentful, Algolia und Frontastic zeigen wir vier unterschiedliche Architekturen, die über eine Kombination moderner Best-of-Breed Technologien abgebildet werden können.

Whitepaper herunterladen

'Was Neues geplant?

Dann lass uns zusammen Dein Projekt starten.