staples_1_hero

PWA + Pimcore

Staples: Ein einheitliches PWA-Frontend für mehrere Legacy-Backends

Staples, ein weltweit tätiger Einzelhändler für Bürobedarf, startete seine erste E-Commerce-Website im Jahr 2001. Im Laufe der Jahre erwarb das Unternehmen weltweit weitere Unternehmen mit ihren bestehenden E-Commerce-Systemen, mit denen sie weiterhin Online-Dienste anboten. Heute steht Staples vor der Herausforderung, seine Online-Präsenz über alle Berührungspunkte hinweg zu vereinheitlichen, und hat beschlossen, moderne progressive Webanwendungen zu testen.

staples_2

Die Bereitstellung globaler Online-Dienste, die auf mehreren Backend-Systemen basieren, ist keine leichte Aufgabe, und Staples war sich darüber bewusst.

Als zweitgrößter Online-Händler der Welt, gleich hinter Amazon.com, muss Staples die tägliche Wartung jedes einzelnen E-Commerce-Systems gewährleisten.

Das bringt eine Menge Herausforderungen mit sich. Für die Entwicklungsteams, die mit den hochgradig angepassten, in .NET und JAVA geschriebenen Systemen arbeiten müssen, und auch für die Endbenutzer ist dies ein großer Kampf.

Hinzu kommt, dass Staples in über 40 Ländern der Welt eigene Einheiten und passende E-Commerce-Systeme besitzt und eine einheitliche Markenidentität in allen Ländern gewährleisten möchte.

Obwohl diese Situation den Zustand vieler etablierter E-Commerce-Systeme widerspiegelt, war die Antwort auf eine solche Herausforderung nicht einfach.

01

Warum wurden wir um Hilfe gebeten?

Umgang mit veralteten Backends

staples_3

Das E-Commerce-Team wusste, dass die Umstellung aller Backend-Systeme in einem so großen Umfang anspruchsvoll und zeitaufwändig sein würde.

Stattdessen entschied man sich, eine einheitliche Benutzeroberfläche (UI) für zwei im Staples-Technologie-Stack verfügbare Backends zu entwickeln.

Zunächst erwog das Unternehmen die Entwicklung einer mobilen nativen App, eines neuen Frontends und verschiedener Headless-Lösungen. Schließlich wurde klar, dass eine progressive Web-App (PWA), die die Funktionen einer Webseite und einer mobilen App in sich vereint, die beste Option sein würde.

Zu diesem Zeitpunkt wandte sich Staples an Divante, die Vue Storefront entwickelten, eine PWA für den E-Commerce.

1614262155277

"Wir waren auf der Suche nach einem Partner, der uns nicht nur durch die steile Lernkurve mit PWAs führt, sondern auch eine enge Beziehung zu uns aufbaut, um den E-Commerce-Bereich von Staples umzugestalten."

Luiza Warno, Head of Applications bei Staples Solutions

02

Wie sind wir den technischen Teil angegangen?

Durchführung eines Proof of Concept

staples_4
Icon

Staples und Divante begannen ihre Zusammenarbeit mit Workshops, die beiden Parteien halfen, die Gesamtsituation zu verstehen und über die endgültige Technologie zu entscheiden. 

Die Idee war, eine gemeinsame Benutzeroberfläche auf Basis von Vue Storefront in der Azure Cloud zu implementieren und diese mit zwei E-Commerce-Backends, Genesis und Netshop, zu integrieren.

Mit diesem Experiment hoffte Staples, folgende Fragen beantworten zu können:

  • Wie können wir in kurzer Zeit eine Benutzeroberfläche in der Azure Cloud erstellen, und was ist dafür notwendig?
  • Wie können wir einfach und schnell eine neue API für mindestens zwei Online-Shops erstellen und ihr Frontend vom Backend mit einem Headless-Ansatz trennen?
  • Welche DevOps-Praktiken sollten angewandt werden?
  • Wie funktionieren PWAs in der Praxis?
  • Wie können wir mit dem Vue.js-Framework arbeiten? Ist es einfach zu bedienen und skalierbar?

icon

API und Azure Cloud vorbereiten

Die bestehenden monolithischen Systeme aus dem Jahr 2001 mussten auf Microservices umgestellt werden. Staples erreichte dies, indem es neue API-Konzepte entwarf und sie für Genesis- und Netshop-basierte Backends entwickelte.

Gleichzeitig wurde die Azure Cloud eingeführt, um später den Proof of Concept (PoC) zu erstellen, zu testen und bereitzustellen. Diese Cloud erwies sich als hochverfügbar und kosteneffizient. Darüber hinaus ermöglicht sie die Skalierbarkeit für künftige Entwicklungen.

icon

Entwerfen einer einheitlichen Benutzeroberfläche als PWA

Parallel dazu konzentrierte sich Divante auf die Entwicklung eines neuen, einheitlichen Frontends, das später über eine API mit den Backends verbunden werden konnte. Mit dem neuen Frontend gelang es dem Designteam, die Benutzeroberfläche für alle Backends zu standardisieren und in eine einzige, leicht zu wartende Codebasis zu überführen. 

Das neue Staples-Frontend wurde als Progressive Web App konzipiert, so dass es dem Endbenutzer neben den Standard-Webfunktionen auch alle typischen PWA-Funktionen bietet. Dazu gehören schnelle Leistung, Offline-Modus, Speichern einer Webseite als App mit einem Symbol auf dem Startbildschirm und Push-Benachrichtigungen. Dadurch wurde das mobile Erlebnis deutlich verbessert. Die PWA-Technologie ist so konzipiert, dass sie sich an alle Geräte, von Smartphones bis zu Desktops, anpasst und wie eine mobile App funktioniert.

icon

Eine agile Arbeitsweise

Beide Teams arbeiteten nach dem Plan-Do-Check-Act-Ansatz, der eine einzigartige Gelegenheit bot, alles im vorgegebenen Zeitrahmen zu passen und noch mehr zu liefern. Dank dieses Ansatzes lieferte das Team einige zusätzliche Funktionen, wie Offline-Bestellungen und das Scannen von Produktbarcodes. Bei der Entwicklung des Produkts hatten wir drei wichtige agile Grundsätze im Hinterkopf: Kunden zuerst, Menschen statt Prozesse und ein funktionierendes Produkt.

”Dank der Zusammenarbeit mit Divante haben wir unsere Arbeitsweise verbessert und unsere DevOps-Praktiken noch weiter ausgereift.” Marcin Kaźmierczyk, Head of E-Commerce Development bei Staples Solutions.

 

03

Was haben wir erreicht?

Positive Ergebnisse des PoC

An dem gesamten Experiment waren sieben internationale Teams beteiligt, die über ganz Europa verteilt in den Niederlanden, Schweden, dem Vereinigten Königreich und Polen arbeiteten. Etwa 30 Personen arbeiteten drei Monate lang zusammen.

In dieser Zeit gelang es den kooperierenden Teams, eine völlig neue Arbeitsumgebung unter Verwendung des Microservices-Ansatzes einzurichten und ein neues PWA-Frontend zu entwickeln und zu testen. Das Endprodukt lieferte wirklich großartige Funktionen wie Barcode-Scanning, Offline-Bestellung und einen einzigen Zugangspunkt für Geschäfts- und Online-Kunden.

Mit einem angemessenen Budget war Staples in der Lage, vier neue Technologien - Azure Cloud, PWAs, eine neue API und Vue.JS - in Bezug auf ihre Lernkurve, die einfache Nutzung und die Skalierung auf den weltweit verfügbaren Systemen zu validieren.

Darüber hinaus hat die Durchführung eines PoC bewiesen, dass es möglich ist, eine einheitliche und verbesserte Benutzeroberfläche auf dem Frontend zu lancieren, ohne die ERP-Integrationen zu ändern oder die B2B- und B2C-Geschäftslogik zu beeinflussen. 

Aus technologischer Sicht war der PoC dank des Headless Front Ends ein voller Erfolg, was für die Investition in eine moderne Architektur spricht.

 

“Ich hatte das Vergnügen, die neue UI-Initiative zu leiten. Der Schlüsselfaktor für den Erfolg war definitiv das Team. Es war sehr kreativ, anpassungsfähig und hat sich sowohl für Divante als auch für Staples Solutions begeistert. In kurzer Zeit haben wir greifbare Ergebnisse in der Anwendung und der Infrastruktur erzielt, indem wir agile Werte und DevOps Best Practices berücksichtigt haben. Abgesehen davon hatten wir alle Spaß." Dominika Sadkowska, Senior IT Project Manager at Staples Solutions.

Benötigst Du Hilfe bei der digitalen Transformation?

Wir würden uns freuen, von Deinem Projekt zu hören. Unser Team wird sich so schnell wie möglich mit Dir in Verbindung setzen.

Kontaktiere uns
Placeholder