Business-IT
18.04.2019
Shop-Technik
1. Teil: „Headless Shops - in jedem Kanal ein anderes Gesicht“

Headless Shops - in jedem Kanal ein anderes Gesicht

PortraitsPortraitsPortraits
Sergey Nivens / shutterstock.com
Bei Shop-Systemen geht der Trend zu flexiblen Systemarchitekturen. Bei einer Headless-Architektur zum Beispiel sind Front- und Backend sogar strickt voneinander getrennt und einzig über APIs verbunden.
Wenn Shop-Software-Hersteller einen Blick auf die IT-Landschaft der ­Zukunft werfen, taucht immer häufiger der Begriff „Headless Commerce“ oder „Headless Shop“ auf. Dahinter verbirgt sich eine neue Architektur der IT-Systeme, mit der Shops flexibler und schneller an Entwicklungen anpassbar und damit zukunftssicherer werden sollen.
Klassische Shop-Systeme verfügen über ein Backend und ein Frontend. Das ­Backend ist der Systemteil, der im Hintergrund die für den Betrieb einer Website oder eines Shops nötige technische Infrastruktur bereitstellt. Dazu gehören Server, Datenbanken und Software zur Prozesssteuerung, etwa die Auftragsabwicklung. Das Frontend ist das, womit der ­Besucher eines Shops interagiert, also das im Web nutzbare Gesicht des Shops.
Bei einer Headless-Architektur sind ­Backend und Frontend eines Shop-Systems strikt voneinander getrennt. „Das komplette Shop-Frontend ist nur über Schnittstellen an das Shop-System angebunden. Einfach gesprochen: Das, was der Kunde sieht, kommt nicht aus dem Shop-System, sondern aus
einem offenen Frontend-System“, erklärt Niels Anhalt, Geschäftsbereichsleiter Digital Products & Services bei der Digitalagentur Nexum. Der ­große Vorteil: Die getrennten Systemteile können unabhängig voneinander verändert und weiterentwickelt werden.
Ein Beispiel: Wird die Produktdarstellung im Frontend optimiert, bleiben die Prozesse im Backend davon völlig unberührt. Dadurch können technologische Neuerungen modular, also auch flexibler und schneller, umgesetzt werden. Das System sei „wie zwei Legosteine, die nur über die Noppen, nämlich die API-Schnitt­stelle, miteinander verbunden sind, dabei aber auch als einzelne Elemente funktionieren“, so Anhalt.
Das hat den zweiten großen Vorteil, dass an ein Backend-System verschiedene Frontend-­Systeme gleichzeitig angeschlossen werden können. „Mit einer Headless-Shop-Software-Architektur sind Händler auch auf weitere Zukunfts­trends im E-Commerce vorbereitet“, sagt Thomas Gottheil, Mitgründer und Geschäftsführer des Shop-Frontend-Anbieters Frontastic. Zu diesen Trends gehören Anwendungen für Sprachassistenten, aber auch die Anbindung von Shop-Funktionen an einen Kühlschrank, einen Dash-Button oder auch den Bordcomputer im Auto. Technologische Weiterentwicklungen aus Bereichen wie Voice Commerce, Internet of Things, Connected Cars oder auch digitaler PoS sollen damit sehr viel leichter umsetzbar sein.
2. Teil: „Javascript im Frontend“

Javascript im Frontend

  • Beispiel: Der Shop Interdiscount.ch läuft seit August 2018 auf einer Headless-Architekur.
    Quelle:
    com! professional / Screenshot
Als Shop-Frontend kommen oft Javascript-Programme zum Einsatz, die auf Javascript-Frameworks wie Angular oder React beruhen. Diese Programme werden nicht auf dem Server des Shop-­Betreibers ausgeführt, der eine komplette Website an den Browser ausliefern würde, sondern direkt im Browser. Das sorgt für eine je nach Endgerät optimierte Darstellung und für außerordentlich schnelle Ladezeiten.
Ein solches Javascript-Programm ist etwa eine Progressive Web App (PWA). Sie ergänzt eine Website um die Vorzüge einer nativen App. So sind die PWAs voll Mobile-tauglich - und das auch offline und ohne Installation auf dem Smartphone. Zudem lassen sie sich wie ­eine App auf dem Home-Bildschirm verankern, ermöglichen Push-Benachrichtigungen und den Zugriff auf Smartphone-Features wie die Kamera.
Die Entwicklung von PWAs steht zwar noch am Anfang, vor allem weil noch nicht sämtliche Browser-Varianten alle Funktionalitäten ermöglichen. Dennoch werden PWAs von Marktbeobachtern als die Technologie gehandelt, die responsive Websites und native Apps langsam, aber sicher ablösen wird.

Headless braucht Know-how

Ausgangspunkt von Headless-Lösungen waren vor etwa zwei Jahren Content-­Management-Systeme. Dort sind entsprechende Ansätze entstanden, weil es zunehmend nötig war, Inhalte nicht nur vor­formatiert über Webseiten auszugeben, sondern eben auch mobil, in Apps oder in Social Media. Mit der Ausweitung des Handels auf unterschiedliche Verkaufskanäle wird der Ansatz nun auch für den ­E-Commerce und Omnichannel-Handel relevant. Und es ist zu erwarten, dass dieser Trend sich auch auf andere Bereiche ausdehnen wird. „Ich gehe davon aus, dass künftig jedes System, das am Markt bestehen will, den Headless-Ansatz unterstützen muss“, sagt Nexum-Manager Anhalt. Das gilt beispielsweise für Customer-Relationship-Management-Systeme.
­Allerdings erfordert eine solche Software-Architektur Know-how: „Wer einen Headless Shop plant, braucht unbedingt eine ­eigene IT-Abteilung im Haus“, ist Frederik Thomas überzeugt. Er ist der IT-Verantwortliche der Shops Interdiscount.ch und Microspot.ch und hat beide Shops auf Headless umgestellt. Knapp 20 Java-Entwickler hat er dafür in seiner Abteilung. Nur so lassen sich seiner Meinung nach die Chancen zur schnellen Umsetzung neuer Features richtig nutzen. Eine der großen Herausforderungen der Headless-Architektur sind nämlich die Schnittstellen. „Wenn die nicht sauber funktionieren, geht gar nichts“, so Thomas. Außerdem müsse vorab klar definiert werden, welche Funktionen dem Back­end und welche dem Frontend zugeordnet werden. Und auch das Testing sei aufwendiger. Thomas ist sehr zufrieden mit dem ­neuen Ansatz, auch wenn der Umbau noch nicht abgeschlossen ist. Eine Eigenentwicklung auf Basis der Shop-Software Hybris soll noch das Backend ersetzen, und er denkt über ein Headless CMS und die Entwicklung einer PWA nach.
3. Teil: „Im Gespräch mit Frederik Thomas, CIO der Interdiscunt AG“

Im Gespräch mit Frederik Thomas, CIO der Interdiscunt AG

  • Frederik Thomas: CIO der Interdiscount AG
    Quelle:
    Interdiscount
Im August 2018 hat der Schweizer Heim­elektronik-Händler Inter­discount seinen Online-Shop gemeinsam mit der Agentur Nexum auf eine Headless-Architektur umgestellt.
com! professional: Warum haben Sie sich für einen Umstieg auf eine Headless-Lösung entschieden?
Frederik Thomas: Für eine Headless-Architektur sprachen die deutlich bessere Skalierbarkeit des Systems, die Flexibilität und die höhere Geschwindigkeit bei der Markteinführung neuer Features. Durch die Trennung des Shop-Frontends vom Backend können wir das Frontend sehr viel leichter optimieren, zum Beispiel unsere Recommendation Engine oder die Webanalyse. Außerdem hat sich die Ladezeit des Shops drastisch verkürzt. Wir haben sogar überlegt, den Shop künstlich zu bremsen, weil der Shopper kaum realisieren kann, dass sich die nächste Seite tatsächlich auf­gebaut hat, weil es so schnell geht. Mit Blick auf eine gute Usability haben wir es aber gelassen.
com! professional: Welche Backend-Technologie verwenden Sie?
Thomas: Die von Hybris, das vorher schon bei uns im Einsatz war. Allerdings haben wir nicht einfach das alte System „geköpft“, das hätte zu viele Probleme gemacht. Wir ­haben die Integration der Lösung für den Headless-Ansatz neu entwickelt. Letztlich ist aber auch das nur ein Zwischenschritt: Wir werden uns sukzessive von Hybris verabschieden und unsere IT im Lauf der kommenden zwölf Monate auf eine selbst entwickelte Microservice-­Architektur umstellen.
com! professional: Warum?
Thomas: Hybris ist für uns nicht flexibel und skalierbar ­genug. Es liefert vieles, was wir nicht brauchen. Aufwand und Nutzen stehen für uns in keinem guten Verhältnis.
com! professional: Eine Stärke von Headless-Systemen ist die Möglichkeit, viele unterschiedliche Frontends anzubinden. Welche Kanäle bespielen Sie mit Hilfe der neuen Struktur?
Thomas: Für uns stehen unsere 180 Filialen derzeit im Mittelpunkt. Dort wollen wir künftig Onmichannel aktiv leben, ­indem wir die Verkäufer mit Tablets ausstatten, über die sie von der Beratung über die Bestellung bis zum Bezahlen alles abwickeln können. Nach der Umstellung könnte zudem eine Progressive Web App unsere responsive Website ersetzen.

mehr zum Thema