Zurück zu allen Artikeln

Wie man das  “Head” in Headless in Angriff nimmt

DEPT 2204 3 scaled
Dirk Blößl
Dirk Blößl
Technical Director
Länge
5 Min. Lesezeit
Datum
10 November 2022
DEPT 2204 3 scaled

Mit der Einführung von Headless haben die Projekte von DEPT® im Vergleich zu den vorherigen Jahren einen enormen Wandel erfahren. Auf der einen Seite sehen wir, dass die Unternehmen mehr Freiheit bei der Entwicklung von Websites haben, auf der anderen Seite verlieren die Content Manager:innen an Autonomie, wenn es darum geht, diese Websites zu füllen. Nichtsdestotrotz konnten sich die zuständigen Content Manager:innen durch diesen Shift ein Stückchen Freiheit, unter anderem durch Page Builder oder andere Frameworks, zurückholen. 

Ein headless Intermezzo

Bevor wir uns damit befassen, ein kurzes Intermezzo. Denn was genau ist nochmal “Headless”? Bei einer herkömmlichen E-Commerce-Lösung oder einem CMS befinden sich sowohl Frontend (Design) als auch Backend (Content) in einem einzigen System. Ein Headless-Setup trennt Frontend und Backend voneinander. Das CMS enthält nur Content, der auf verschiedenen Plattformen platziert werden kann. Das Backend ist in erster Linie eine API. Auf diese Weise können Blogs über das Backend auf die Website gestellt werden, aber auch (zum Beispiel) auf mobile Apps. Nicht zuletzt deshalb hat sich Headless mittlerweile zur Best-Practice der E-Commerce-Systeme und Digital Experience Platforms (DXP) entwickelt. Führende Anbieter wie Salesforce, Adobe und Optimizely gehen ebenfalls den Headless-Weg, und wenn Sie als innovativ angesehen werden wollen, haben Sie keine andere Wahl, als zu folgen.

Weniger Kontrolle über die User Experience

Das Aufkommen von Headless bedeutet, dass die Business Logik, die früher im Backend angesiedelt war, nun mehr und mehr im Frontend zu finden ist. Es hat ein Shift von Content-Manager:innen und Merchandiser:innen, die innerhalb eines CMS oder einer E-Commerce-Plattform die Kontrolle hatten, zu Developer:innen stattgefunden. Wenn Sie als Content-Manager:in etwas an einer Website ändern wollen, müssen Sie dies in vielen Fällen über eine:n Frontend-Developer:in tun. Für ein durchschnittliches Plattform-Implementierungsprojekt hat dies folglich die Nachfrage nach Frontend-Developer:innen erhöht. Es ist daher nicht verwunderlich, dass Unternehmen mit der Tatsache zu kämpfen haben, dass sie bei Frontend-Einrichtungen weniger Kontrolle über die User Experience haben. Eine Erkenntnis, die vor allem für mittelständische und große Unternehmen schmerzlich sein kann.

Zur Rettung

Viele Unternehmen befinden sich in einer Sackgasse, weil ihre Content-Teams weniger Kontrolle innerhalb des CMS haben und Vorschaufunktionen fehlen. Dafür brauchen sie ja schließlich Developer:innen. Zum Glück gibt es einige Anbieter, die diese Nische geschickt ausfüllen. Deren Lösungen beinhalten die Verwendung von Komponenten und die Anwendung von Server Drive UI: eine Technik, die die Kontrolle über das Frontend mehr in das Backend (CMS) bringt. Zu den Lösungen gehören:

Frontastic 
Frontastic kombiniert die Geschwindigkeit und Flexibilität von Headless mit der Einfachheit eines sogenannten Website-Builders. Über einen Page-Builder, der aus Drag & Drop-Komponenten besteht, ermöglicht Frontastic Unternehmensteams, ohne die Komplexität von Codes zu arbeiten. Darüber hinaus bietet es die Möglichkeit, Vorlagen zu erstellen, Weiterleitungen hinzuzufügen, die URL-Struktur zu verwalten, SEO zu optimieren und vieles mehr. Kurz gesagt, Frontastic bietet im Vergleich zu anderen Frontend-Frameworks eine Vielzahl von Funktionen.

Salesforce Commerce Cloud PWA Kit
Das Commerce Cloud PWA Kit ist eine Art Storefront-Technologie für Headless, die die Salesforce Commerce APIs und React.js nutzt. Diese Progressive Web App ermöglicht einen reibungslosen Übergang Ihres Online-Shops zu einer Headless-Commerce-Architektur. Das PWA-Kit läuft auf der Managed Runtime von Salesforce mit einer Betriebszeit von 99,9 % und lässt sich leicht an eine Vielzahl von Marken und Unternehmen anpassen. Darüber hinaus wird das Kit gemäß einer laufenden Roadmap entwickelt, um weitere Salesforce-Funktionen zu integrieren.

Deity 
Genau wie das Commerce Cloud PWA Kit ist Deity eine API-first Headless E-Commerce-Plattform, die auf React.js basiert. Mit Deity erhalten Sie eine Single Page App (SPA), aber dank dynamischer URL-Änderungen und zusätzlichem serverseitigem Rendering fühlt sich das Navigieren über den Browser natürlich an. Außerdem verfügt Deity über Konnektoren zu Magento 2, zu WordPress für CMS- und Blog-Funktionalitäten und zu Algolia für die Katalogsuche. Weitere Vorteile sind der vollständig funktionale Checkout über Paypal und Kreditkartenzahlungen über Adyen.

Vue storefront
Vue-Storefront konzentriert sich weniger auf Page-Builder-Systeme und mehr auf Headless und Beschleunigung. Aus diesem Grund ist es ganz dem Headless E-Commerce gewidmet. Basierend auf Vue.js funktioniert Vue-Storefront als Progressive Web App mit Funktionalitäten, die die E-Commerce Client Experience verbessern. Zum Beispiel liefert die Plattform ein paar Standard-Komponenten, so dass Unternehmen nicht bei Null anfangen müssen, um eine Website zu erstellen und sich auf das konzentrieren können, was sie von ihrer Konkurrenz unterscheidet.

Bei den oben beschriebenen Lösungen (und noch mehr Frameworks, die wir nicht erwähnt haben!) ist sicher auch etwas für Sie dabei. Neugierig, was am besten funktioniert? Kontaktieren Sie uns gerne. 

View all insights

Fragen?

Technical Director

Dirk Blößl

Mehr erfahren

Personalisieren Sie Ihre Experience

Wir verwenden funktionale Cookies, damit die Website richtig läuft, analytische Cookies, um Ihr Verhalten zu messen, und Marketing-Cookies für die Personalisierung von Anzeigen und Inhalten. Wir sammeln Daten darüber, wie Sie unsere Website nutzen, um die Nutzung unserer Website zu vereinfachen, sowie um die Kommunikation in der Werbung, auf unserer Website oder in den Apps anzupassen oder zu personalisieren. Die durch Marketing-Cookies gesammelten Daten werden auch an Dritte weitergegeben. Wenn Sie auf "OK" klicken, stimmen Sie dem zu. Möchten Sie weitere Informationen? Lesen Sie unsere Cookie-Richtlinie.