Headless-Architektur: Ein kurzer, illustrierter Leitfaden von Divante

Bei all dem Headless Know-how, das wir in den letzten Wochen vermittelt haben, fragen viele oft nach der Architektur selbst. Tatsächlich kann ein grafisches Beispiel diese besser beschreiben als ein wortreicher Artikel. Hier sind ein paar Bilder und Entwürfe, die wir im Rahmen dieser Headless-Serie erstellt haben. 

Die kürzeste Einführung, um zu verstehen, was Du Dir ansiehst

Nur zum Verständnis, um die folgenden Entwürfe besser verstehen zu können: eine Headless-Architektur bedeutet eine klare Trennung zwischen der Storefront und der Backend-Plattform. Es handelt sich um zwei separate und unabhängige Anwendungen, die Informationen über eine API austauschen.

Wenn Du mehr darüber wissen möchtest, was Headless-Architektur bedeutet und wie sie sich auf Dein System auswirken kann, lies' unseren ausführlichen Artikel darüber was Headless E-Commerce ist. Er wird wahrscheinlich die meisten Deiner Fragen beantworten.

Zwei Beispiele einer Headless-Architektur

Architektur um commercetools herumgebaut

commercetools ist eine hervorragende E-Commerce-Plattform. Unser eBook mit dem Titel "commercetools - Composable Commerce, Reference Architecture" enthält einige interessante Entwürfe für eine Headless-Architektur. 

Wirf' einen Blick auf das unten stehende Beispiel. Es zeigt, wie Du die Headless E-Commerce-Engine von commercetools als Kern Deines E-Commerce nutzen und Composable Services und benutzerdefinierte Anwendungen um sie herum aufbauen kannst.

Die Headless-Architektur wird hier durch das commercetools Backend und das Vue Storefront Frontend veranschaulicht.

Wenn Du eine genauere Beschreibung der Vorgänge suchst, lies' bitte “commercetools – Composable Commerce, Reference Architecture.”

Die serverlose Infrastruktur für commercetools und Vue Storefront

Hier ist ein weiterer Bauplan. Dies ist eine Referenz für die potenzielle serverlose Anwendung, die auf commercetools und Vue Storefront basiert.

Die Hauptbühne hier präsentiert entkoppelte Progressive Web App (PWA) Fronten und die Headless E-Commerce Engine von commercetools. Die Vorderseite ist für Kunden. Die Rückseite ist für Administratoren.

Dieses Paar wird durch eine Reihe von Microservices für verschiedene Funktionen ergänzt, die sich hinter einem API-Gateway und Merchant-Center-Applikationen befinden. Sie werden von DynamoDB und S3 Storage unterstützt, um die Daten zu speichern.

Das Ganze wird durch AWS App Sync oder eiem Apollo GraphQL Server zusammengehalten. commercetools verbindet sich auch mit Microservices über sogenannte Message Queues wie Amazon Simple Notification Service und Simple Queue Service.

Spryker:getrenntes Frontend und API

Hier ist ein weiterer interessanter Ansatz für Headless. Spryker ist eine der vier wichtigsten eCommerce-Plattformen, die im “Headless Toolkit” von Divante erwähnt werden.Hier sind ein paar Bilder zur Veranschaulichung der Architektur.

Grundstruktur von Spryker

Zunächst einmal enthält die Hauptstruktur von Spryker zwei große Komponenten:

• Yves: Ein leichtgewichtiges, skalierbares Frontend, mit dem Du das Einkaufserlebnis für Deine Nutzer individuell gestalten kannst.
• Zed: Ein solides Backend zur Verarbeitung der Geschäftslogik.

Du kannst die API hier als separate Kachel sehen. Es ist ein interessantes Beispiel, weil das auf Yves und Zed aufgebaute Setup nicht wirklich headless ist. Spryker ist eine hybride Lösung. Du kannst REST API verwenden, um Vue Storefront zu verbinden, zum Beispiel, um eine echte Trennung von Frontend und Backend zu erreichen.

Was kannst Du mit dieser API tun?

Hier ist ein weiterer Blick auf die Architektur, die die API von Spryker hervorhebt. Sie ermöglicht die Verbindung mit mehreren Touchpoints, wie Desktop oder Mobile, und die Integration mit externen Marktplätzen, wie Amazon.

Letztendlich ist es die API, die die Lösungen in verschiedenen Kontexten nützlich macht. Spryker ist ein gutes Beispiel für eine modulare Plattform, die Du ändern und erweitern kannst, um die von Dir benötigten Funktionen abzudecken.

Verschiedene Wege zu einer Headless-Architektur

Wenn Du Dir die obigen Beispiele genauer ansiehst, wirst Du feststellen, dass sich commercetools und Spryker in ihrer Herangehensweise an die Headless-Architektur unterscheiden.

• commercetools ist eine Plattform, die als reine API-Lösung entwickelt wurde. Das macht sie per Definition headless.
• Spryker fügte irgendwann während der Entwicklung eine API hinzu, um einen Headless-Ansatz zu unterstützen..

Letztendlich sind Plattformen, die mit API-only- oder API-first-Ansätzen aufgebaut sind, für Headless-Lösungen besser geeignet, weil:

1. Alle ihre Funktionen sind über API verfügbar.
2. API ist in der Regel leistungsfähiger.
3. APIs erhalten eine breitere Unterstützung, einschließlich REST API und GraphQL.
4. Die Struktur der API ist besser durchdacht und frei von Beschränkungen, die entstehen, wenn wir nachträglich API-Funktionen hinzufügen.
5. Diese Lösungen haben in der Regel eine bessere API-Versionspolitik und Abwärtskompatibilität.
   
   • commercetools erstellt keine neuen Versionen der API. Bestehenden API-Schnittstellen werden nicht geändert oder gelöscht. Jede Änderung wird durch die Erstellung einer neuen Schnittstelle eingeführt. Dadurch bleibt das Headless Front End immer kompatibel.
   • Spryker bietet eine klassische semantische Versionierung, so dass wir bei Upgrades möglicherweise das Frontend anpassen müssen.

Das Beispiel von Spryker zeigt, dass Du auch dann, wenn Du derzeit an keiner headless Lösung arbeitest, diese Funktionalität später hinzufügen kannst. Es hängt alles von Deinen geschäftlichen Anforderungen ab.

Wenn Du auf der Suche nach der besten Option für Deinen E-Commerce bist, wende Dich an unser Team bei Divante. Unser Spezialgebiet ist es, E-Commerce-Unternehmen zu helfen, ihre Ziele zu erreichen, indem sie die beste Technologie nutzen.

Mehr Informationen über Headless

Wir sehen viel Potenzial in Headless, und viele eCommerce-Unternehmen tun das auch. Es ist eine der Top-Trends im E-Commerce für 2021. 

Wir arbeiten nicht nur hart an der Entwicklung von Technologien, die diesen Ansatz unterstützen, sondern auch an der Schaffung einer Wissensbasis für Unternehmer und Unternehmen. Wir zeigen, wie man dies angehen kann, um den größtmöglichen Nutzen aus der headless Umstellung zu ziehen. 

Wenn Du mehr erfahren möchtest, lies' unser über 130 Seiten langes Meisterwerk über Lösungen, die die Zukunft des E-Commerce darstellen.