Frontend für Headless Commerce
Welche Ansätze für Headless Frontends gibt es? Wir geben einen Überblick über Frameworks, PWA von Shop-Anbietern und Composable Commerce Plattformen.
Headless Commerce: So findest Du die perfekte Frontend-Technologie.
Wer seine E-Commerce-Plattform auf Basis einer MACH-Architektur realisieren möchte, benötigt ein von den Backend-Systemen losgelöstes Frontend. Neben der Eigenentwicklung einer PWA (Progressive Web App) oder SPA (Single Page App), stehen mittlerweile verschiedene Frontend-Lösungen am Markt zur Verfügung.
Ob PWA-Blueprint des Shopsystem-Anbieters, vorgefertigte Lösungen bekannter JavaScript-Frameworks oder komplette DX-Suiten: Wir geben einen Überblick über die verschiedenen Lösungen am Markt.
PWA auf Basis führender JavaScript Frameworks
Auf dem Markt der JavaScript Frontend-Frameworks gibt es eine Vielzahl von Sprachen und Dialekten, die zur Entwicklung moderner Web-Applikationen genutzt werden. Zu den drei großen JavaScript-Frameworks zählen React, Vue.js und Angular. Weitere kleinere Sprachen wie Svelte, Preact oder Ember finden sich eher in der Nische.
Aus diesem Grund haben wir uns auf PWA Best Practices mit den führenden JavaScript-Technologien React und Vue.js fokussiert. Für Angular bietet aktuell nur SAP eine kommerzielle Lösung, die wir im Kapitel der Propritären PWAs beleuchten.
Spannend ist dabei die regelmäßige Bewertung der Technologien im Rahmen der Umfrage „State of JavaScript“, in der Entwicklerinnen und Entwickler seit 2016 ihre Erfahrungen mit den verschiedenen JavaScript-Frameworks teilen. Neben der Bekanntheit und Nutzung, werden auch die Erfahrungen und die Zufriedenheit bewertet:
PWA Blue Prints auf Basis von React und Vue.js
Ausgehend von den führenden Frameworks eignen sich folgende PWA Blue Prints als mögliche Voraussetzung für eine technische Umsetzung:
Vue Storefront
Vue Storefront basiert – wie der Name deutlich macht – auf Vue.js und wurde im Mai 2018 in der Version 1.0.0 vorgestellt. Damit zählt die Open-Source-Lösung zu den Pionieren im Bereich der PWA-Konzepte für E-Commerce. Seit Juni 2021 ist die Version 1.12.3 verfügbar, die weiterhin unter der MIT-Lizenz als Open-Source bezogen werden kann. Zudem bietet Vue Storefront mittlerweile auch eine Enterprise-Variante an, die eine weitergehende Integration mit Drittsystemen bietet und auf einer dedizierten Cloud-Infrastruktur betrieben wird. Vue Storefront nutzt die Google Cloud Services für den Betrieb und als Content-Delivery-Network (CDN).
Im Rahmen der Open-Source-Nutzung bietet Vue Storefront Standardintegrationen unter anderem für Magento (Adobe Commerce), Shopify und Sylius an. Mit der Enterprise-Version stehen eine Vielzahl weiterer Integrationen u.a. zu commercetools, SAP Commerce, Big Commerce und Elasticpath sowie zu Content-Management-Systemen (u.a. Contentful, Contentstack, Bloomreach) sowie Payment- und Suchtechnologien bereit.
Vue Storefront wird nach Angaben des Anbieters bereits von über 2.000 Online-Shops genutzt. Zu den bekanntesten Referenzen zählen Zadig & Voltaire, Bardotte oder Foodl. Das Unternehmen hinter Vue Storefront wurde zuletzt im Februar 2022 im Rahmen einer Series A mit 17,4 Millionen. US-Dollar finanziert. Zu den Investoren gehören Earlybird Venture Capital and Paua Ventures.
Fakten zu Vue Storefront:
- Open-Source-Technologie basierend auf Vue.js undTypeScript
- API Orchestration Layer mit Standardintegrationen u.a. für Magento, Shopify, Shopware, SAP Commerce und commercetools (teilweise nur für Enterprise-Kunden)
- Eigenes Storefront UI als Grundlage für das Design (auch als Figma-Datei vorhanden)
- Infrastruktur auf Basis von Google CloudServices als Teil der Enterprise-Lösung verfügbar
Next.js Commerce Template
Der Infrastrukturanbieter Vercel bietet mit dem Next.js Commerce Starter Kit eine PWA mit Beispielintegrationen zu zahlreichen Headless E-Commerce-Systemen von Shopify über Big Commerce bis hin zu Salesforce Commerce Cloud.
Das Template basiert auf React und enthält Komponenten wie filterbare Produktlisten, Produktdetailseite und einen Warenkorb. Der Checkout-Prozess ist nicht Bestandteil der PWA; hier kann auf fertige Komponenten des E-Commerce-Systems (z.B. Shopify Checkout, commercetools Checkout) zurückgegriffen oder eine eigene Checkout-Lösung entwickelt werden.
Mit der passenden Plattform-Infrastruktur bietet Vercel eine Cloud-Lösung samt CI/CD Pipelines, Entwicklungs- und Preview-Umgebung sowie Edge-Functions für die Abbildung von eigenen Microservices. So kann das Headless Frontend für die geplante E-Commerce-Lösung SEO-konform in der Cloud entwickelt, betrieben und performant ausgeliefert werden.
Vercel ist ein globaler Cloud-Anbieter, der erst in 2021 in einer Series D Finanzierung 150 Millionen US-Dollar bei einer Bewertung von 2,5 Milliarden US-Dollar aufgenommen hat. Zu den Investoren gehören namhafte Geldgeber wie Accel, Salesforce Ventures und Tiger Global.
Fakten zu Next.js Commerce Template:
- E-Commerce Template auf Basis von React mit allen relevanten Grundfunktionen zur Produktdarstellung, Filterung undDarstellung
- Beispielhafte Anbindung an zahlreiche E-Commerce-Systeme
- Integration und Betrieb auf Basis der Cloud-Infrastruktur von Vercel möglich
- Verschiedene Pre-Rendering-Ansätze sind bereits implementiert (Static Generation und Server-Side Rendering)
ReactStorefront.io
Als Pendant zu VueStorefront könnte man ReactStorefront bezeichnen. Die Lösung basiert auf React und next.js. Sie bildet die Basis für die Entwicklung einer PWA für E-Commerce-Frontends und erlaubt prinzipiell die Anbindung verschiedener Shopsysteme. Zur Zeit stehen bereits fertige Konnektoren als Add-Ons zur Verfügung: Ob Magento über GraphQL, Salesforce Commerce Cloud über die CCAPI REST-Schnittstelle oder Shopify über REST und GraphQL – die ersten Anbindungen sind bereits vorhanden. Die Entwicklung weiterer Konnektoren ist bereits ausgeschrieben, aber noch ist offen, wann diese verfügbar sein werden.
Ein Blick in das Repository von ReactStorefront zeigt regelmäßige Updates und auch die Dokumentation ist mittlerweile bei Version 8.13.x angekommen. Das Projekt wird sukzessive weiterentwickelt, auch wenn keine finanzkräftigen Investoren hinter der React Storefront Foundation stehen. Diese wurde von einer Gruppe von E-Commerce-Agenturen und Entwicklern gegründet, die namentlich aber nicht in Erscheinung treten.
Fakten zu ReactStorefront.io:
- Einfaches E-Commerce-Template als PWA basierend auf React und Next.js
- Relevante Funktionen wie Server Side Rendering und Prefetching sind bereits implementiert
- Das Design des Frontends basiert auf Googles Material UI
- Bereitstellung als Open Source unter der Apache 2.0 Lizenz
Proprietäre PWA
Zahlreiche Hersteller von E-Commerce-Software haben mittlerweile eigene Frontend-Technologien entwickelt oder bieten PWA-Konzepte als Basis für die technische Umsetzung an.
SAP Commerce Cloud Composable Storefront
Im Rahmen der Weiterentwicklung von SAP Hybris zur SAP Commerce Cloud, hat sich SAP für die Entwicklung eines eigenen Headless Frontends entschieden. Unter dem Namen Spartacus gestartet, steht es seit der Version 5.0 als SAP Commerce Cloud Composable Frontend auf Basis von Angular als JavaScript-Framework für die REST-APIs der Commerce Cloud zur Verfügung.
Der Quellcode von Spartacus wird als Open-Source unter der Apache Software License Version 2 angeboten und bietet eine Standardimplementierung in Richtung der SAP REST-Endpunkte für die E-Commerce- und B2B-Funktionen der SAP Commerce Cloud.
Der Fokus des SAP Commerce Cloud Composable Frontend liegt auf den B2B-Funktionen von SAP: Insbesondere Anbindungen für komplexe Bestellprozesse, Produktkonfigurationen und Bundles sind bereits implementiert. Darüber hinaus können Integrationen für SAP Digital Payments, SAP Customer Data Cloud oder SAP S/4 HANA Order Management eingesetzt werden. Die Funktionen umfassen viele weitere B2B-Features wie Kunden-Accounts, Freigabeprozesse oder Stückpreislisten.
Technologisch basiert das Frontend auf dem JavaScript-Framework Angular, das ab Version 14.x empfohlen wird. Zudem kommen Node.js und Yarn zum Einsatz. Integrationen zu anderen E-Commerce-Plattformen werden nicht angeboten.
Fakten zu SAP Commerce Cloud Composable:
- Sehr umfangreiches Frontend mit Fokus auf B2B-Anwendungsfälle
- Integriert mit der SAP Commerce Cloud und anderen SAP-Lösungen
- Entwickelt auf Basis von Angular JS
- Teil der SAP Commerce Cloud Lizenzierung sowie als Open-Source Variante für den On-Premise-Betrieb verfügbar
Mobify für Salesforce Commerce Cloud
Mit der Übernahme von Mobify durch Salesforce im Jahr 2020 hat der CRM-Anbieter eine Headless-Technologie übernommen und diese in die Salesforce Commerce Cloud integriert. Die PWA von Mobify nutzt React und wird mit Node.js und Express.js betrieben. Die Library bietet Zugriff auf über 70 UI-Komponenten. Neben der Anbindung an Salesforce Commerce Cloud ist auch eine Anbindung von SAP Hybris (mittlerweile SAP Commerce Cloud) und anderen E-Commerce-Systemen per REST API möglich.
Fakten zu Mobify:
- Nur noch als Teil der Salesforce Commerce Cloud und damit nicht mehr als eigenständiges Produkt verfügbar
- Fertige Integrationen zu Salesforce Commerce Cloud sowie SAP Hybris stehen laut Dokumentation bereit
- Frontend auf Basis von React mit über 70 verschiedenen Komponenten
Shopware PWA
Shopware befindet sich beim Thema PWA aktuell in einer Findungsphase: Im Rahmen der Einführung von Shopware 6 wurden auch die APIs zur Anbindung von Frontends über einen Headless-Ansatz vorgestellt. Im Zuge dessen stellte Shopware eine in Kooperation mit Vue Storefront entwickelte PWA vor, die zur Umsetzung von Headless-Ansätzen dient.
Im Dezember 2022 entschied man sich bei Shopware das Thema erneut aufzugreifen und veröffentlichte einen technologieunabhängigen Ansatz unter dem Titel Shopware Composable Frontends. Das Ziel von Shopware war es, nicht nur die E-Commerce-Funktionen von Shopware über APIs bereitzustellen, sondern auch die die Daten aus dem Content-Management nutzbar zu machen. Shopware stellt zudem ein Demo-Projekt mit Vue.js und Nuxt3, das als Entwicklungsgrundlage verwendet werden kann.
Fakten zu Shopware PWA:
- Umfangreiche API für den Betrieb von Composable-Commerce-Ansätzen über Shopware mit dem Fokus auf Shopware Cloud
- Best Practice auf Basis von Vue.js und Nuxt
- Zugriff auf API-Endpunkte für E-Commerce und CMS von Shopware 6
Hydrogen für Shopify
Shopify, bisher für seine propritäre Template-Sprache namens Liquid bekannt, stellt ebenfalls eine umfangreiche Sammlung an Storefront-APIs bereit. Diese wurden mit Hydrogen um ein eigenes Headless-Konzept auf Basis von React erweitert. Neben Hydrogen als Frontend-Bibliothek, stellt Shopify auch Oxygen als Hosting-Infrastruktur zur Verfügung. Die entwickelten PWAs können direkt in der Cloud-Infrastruktur von Shopify veröffentlicht und dort betrieben werden.
Fakten zu Shopify Hydrogen:
- Frontend Blue Print auf Basis von React
- Standardintegrationen über die Shopify Store APIs
- Optionale Erweiterung um eigene Hosting-Infrastruktur von Shopify
Composable Frontend
Im Vergleich zu den PWA-Konstrukten der bisher genannten Anbieter, geht der Ansatz von Composable Frontend noch einen Schritt weiter: So liefern beispielsweise commercetools oder Uniform nicht nur ein PWA-Konzept für die Darstellung, sondern auch eine Middleware und ein entsprechendes Cockpit für die Verwaltung. Damit lassen sich unterschiedliche Headless-Systeme – von E-Commerce bis CMS –leicht über strukturierte API-Zugriffe anbinden . Teilweise geht der Leistungsumfang darüber hinaus und umfasst auch die Infrastruktur für das Hosting der PWA.
commercetools Frontend
Mit der Übernahme von Frontastic hat sich commercetools eine eigene Frontend-Technologie ins Portfolio geholt: Unter dem Namen commercetools Frontend bietet commercetools seither – nicht nur, aber vor allem – seinen eigenen Kunden eine Lösung, um neben commercetools auch andere Headless-Technologien im Frontend zusammenzuführen.
Technische Grundlage dafür bilden React und node.js, betrieben wird das commercetools Frontend in einer Google Cloud Infrastruktur. Im Funktionsumfang enthalten sind die Möglichkeiten, verschiedene Umgebungen (Live/Staging/usw.) zu administrieren, kleine Content-Elemente wie Texte oder Medien zu verwalten und über das Site Management Templates für die Ausspielung von Inhalten in Kategorien zu kombinieren. Komplexere Online-Shops können so einfach administriert und aus wiederverwendbaren Komponenten zusammengestellt werden.
Ebenfalls enthalten sind Funktionen wie Warenkorb, Checkout und Kundenlogin, die an die Anforderungen des jeweiligen Kundenprojektes angepasst werden können. Sollte eine bestimmte Funktion oder ein Microservice nicht verfügbar sein, kann eine passende Lösung entwickelt werden, die über die 600 möglichen API-Endpunkte mit commercetools angebunden werden kann.
Fakten zu commercetools Frontend:
- Administrationsmöglichkeit für Headless Frontend
- Standardanbindung zu commercetools, Contentful und weitere MACH-Technologien
- Über 600 API-Endpunkte für die Integration von Microservices
- Infrastruktur auf Basis von Google Cloud
- React-PWA als Blue Print für die Frontend-Entwicklung
Uniform.dev
Als technologieagnostische Plattform bietet Uniform einen äußerst flexiblen Ansatz, um Headless Frontends in einer MACH-Architektur zu betrieben: Die Lösung bietet die meisten Standardanbindungen an E-Commerce- und CMS-Lösungen sowie andere MACH-Technologien am Markt. Von commercetools über Adobe bis hin zu Shopify und SAP können alle führenden E-Commerce-Systeme an Uniform angebunden werden.
Im Frontend erlaubt Uniform sowohl den Einsatz von React als auch Vue.js für die Entwicklung der entsprechenden PWA-Komponenten. Ein Best Practice auf Basis von React ist Bestandteil von Uniform.
Der größte Mehrwert – und damit auch der Unterschied zu den anderen Technologien am Markt – liegt im Backend: Uniform stellt eine Admin-Cockpit inklusive Canvas für die Zusammenstellung und Konfiguration von Komponenten zur Verfügung, erlaubt deren regelbasierte Personalisierung und die Abbildung von A/B-Tests.
Ein eigenes Caching erlaubt es zudem, die Last auf den API-Endpunkten im Backend zu reduzieren und damit die Performance des Frontends zu erhöhen. Für die Auslieferung kann zwischen verschiedenen Cloud-Anbietern wie u.a. AWS, Netlify oder Vercel gewählt werden.
Fakten zu Uniform.dev:
- Technologieunabhängige Plattform für Composable Architekturen
- Über 40 fertige Integrationen zu führenden Headless-Technologien von CMS, über E-Commerce bis Analytics
- Integrierter Preview Canvas zur Komposition von Inhalten
- Freie Wahl der Frontend-Technologie für die Entwicklung (React oder Vue.js)
Makaira Frontend-Plattform
Der deutsche Anbieter Makaira bietet für die in DACH verbreiteten E-Commerce-Systeme OXID und Shopware aber auch für Shopify, Magento und Plentymarkets eine Frontend-Lösung an, die einen etwas anderen Weg geht. Das System vereint ein CMS mit eigener Pattern Library für redaktionelle Aufgaben mit Funktionen für die Site-Administration und Navigation sowie einer eigenen Suchtechnologie. Dafür werden die Daten aus den Backend-Systemen in Makaira zwischengespeichert und indiziert, so dass eigene Filter- und Suchlogiken für die Darstellung angewendet werden können.
Über APIs liefert Makaira die Daten an React Storefront, welches wahlweise mit einem eigenen Checkout oder den Checkout-Prozessen der Shopsysteme kombiniert werden kann.
Im Backend stellt Makaira sowohl CMS-Funktionen als auch Marketing-Features wie A/B-Testing, Re-Ranking der Suchergebnisse oder konfigurierbare ML-Funktionen zur Optimierung des Suchindex bereit.
Fakten zu Makaira:
- Beispiel Storefront auf Basis von NextJS / React
- Integrierte CMS und Suchfunktionen
- Standardintegrationen zu OXID und Shopware vorhanden
Spryker Composable Storefront
Mit seiner Idee eines Composable Storefronts möchte auch Spryker in Zukunft auf den Headless-Zug aufspringen und stellt das Konzept bereits auf einer eigenen Landingpage vor. Nach der Ankündigung einer Partnerschaft mit Vue Storefront im Jahr 2021 liegt der eigene Ansatz für ein PWA-Konzept allerdings auf Eis. Bisher sind noch keine Details zur Frontend-Technologie veröffentlicht.
Starte Dein Composable Commerce Projekt mit kernpunkt
Unser Überblick zeigt: Wer auf eine Headless-Architektur setzt, hat zuerst die Qual der Wahl. Die meisten Technologieanbieter für E-Commerce liefern bereits eigene Frontend-Konzepte und PWA-Beispiele mit. Zudem gibt es mehrere zukunftssichere und gut finanzierte Anbieter wie commercetools, Vue Storefront oder Uniform, welche die Herausforderungen über ausgereifte Produkte lösen.
Aber letztlich bleibt die Entscheidung auch eine technische: Abhängig von den Fähigkeiten und Präferenzen des Entwicklungsteams sollte die Wahl des JavaScript-Frameworks zwischen React und Vue, gegebenenfalls auch Angular, getroffen werden.
Wir setzen bei kernpunkt – je nach Anforderungen und Zielen des jeweiligen Projekts – auf die passende Technologie und beraten Dich gerne bei der Entscheidung für die richtige Frontend-Architektur.
Sprich uns direkt an und wir begleiten Dich bei Deinem E-Commerce-Projekt. In einem unverbindlichen Erstgespräch klären wir gemeinsam mit Dir die Rahmenbedingungen Deiner Projektanfrage und zeigen Dir die nächsten Schritte auf.
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 bei kernpunkt gemeinsam mit unseren MACH-Partnern Akeneo, Algolia, commercetools, Contentful, fulfillmenttools, Mirakl, Storyblok, Talon.One und Voucherify moderne, flexible und skalierbare Lösungen für E-Commerce und digitales Marketing erfolgreich und zukunftssicher um.
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?
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
4 Tipps zur Auswahl und Evaluation von SaaS-Headless-Software
SaaS-Systeme mit Headless-Schnittstellen bieten flexible Lösungen für Digitalprojekte. In diesem Artikel erfährst Du, welche vier Aspekte bei der Auswahl und Evaluation solcher Systeme entscheidend sind.
