Staples, ein weltweit agierender Händler für Bürobedarf, startete 2001 seine erste eCommerce-Website. Im Laufe der Jahre erwarb das Unternehmen global weitere Unternehmen sowie deren bestehende eCommerce-Systeme, über die weiterhin Online-Dienste bereitgestellt wurden. Heute steht Staples vor der Herausforderung, seine Online-Präsenz über alle Kontaktpunkte hinweg zu vereinheitlichen, und hat beschlossen, moderne Progressive Web Apps zu testen.

 

Globale Onlinedienste auf der Basis mehrerer Backend-Systeme bereitzustellen, ist keine leichte Aufgabe – und Staples wusste das genau. Als zweitgrößter E-Händler der Welt (direkt hinter Amazon.com) muss Staples die tägliche Wartung jedes eCommerce-Systems separat durchführen. Das bringt viele Herausforderungen mit sich und bedeutet eine große Anstrengung für die Entwicklungsteams, die mit den stark angepassten, in .NET und JAVA geschriebenen Systemen arbeiten müssen, aber auch für die Endnutzer.

Darüber hinaus war Staples mit all seinen Unternehmen und dazugehörigen eCommerce-Systemen in über 40 Ländern auf der ganzen Welt mit hohem Aufwand darum bemüht, eine einheitliche Markenidentität zu schaffen.

Obwohl diese Situation den Zustand vieler in die Jahre gekommener eCommerce-Systeme widerspiegelt, war die Antwort auf eine solche Herausforderung nicht einfach.

Pexels
WAS STAPLES BRAUCHTE
 

Der richtige Umgang mit alten Backends

Eine Änderung aller Backend-Systeme in einem derart großen Umfang ist enorm aufwändig und langwierig. Stattdessen wurde beschlossen, eine einheitliche Benutzeroberfläche (UI) für zwei im Staples-Technologie-Stack verfügbare Backends zu erstellen.

Zunächst wurde die Entwicklung einer nativen Mobile-App, eines neuen Frontends und verschiedener Headless-Lösungen evaluiert. Letztendlich stellte sich eine fortschrittliche Web-App, die die Funktionen einer Webseite und einer Mobile-App vereint, als beste Option heraus. 

Zu diesem Zeitpunkt wandte sich Staples an Divante, Entwickler von Vue Storefront, einer PWA-Storefront für den eCommerce.

„Wir haben nach einem Partner gesucht, der uns nicht nur durch die steile Lernkurve mit PWA führt, sondern auch eine enge Bindung zu uns aufbaut, damit wir gemeinsam den eCommerce-Bereich von Staples transformieren können“, so Luiza Warno, Head of Applications bei Staples Solutions.

 

Divante
WAS WIR GEMACHT HABEN
 

Durchführung eines Proof of Concept

Staples und Divante begannen ihre Zusammenarbeit mit Workshops, die beiden Parteien halfen, die Gesamtsituation zu verstehen und die richtige technologische Lösung auszuwählen. Die Idee war, eine einheitliche Benutzeroberfläche basierend auf Vue Storefront in Azure Cloud zu implementieren und mit zwei eCommerce-Backends (Genesis & Netshop) zu integrieren.

Mit diesem Experiment wollte Staples Antworten auf folgende Fragen erhalten:

  • Wie erstellt man innerhalb kurzer Zeit eine Benutzeroberfläche in Azure Cloud und was ist dazu nötig?

  • Wie kann man einfach und schnell eine neue API für mindestens zwei Online-Shops erstellen und deren Frontend vom Backend separieren (Headless-Ansatz)?

  • Welche DevOps-Praktiken sollte man anwenden?

  • Wie funktionieren Progressive Web Apps in der Praxis?

  • Wie kann man mit dem Vue.js-Framework arbeiten? Ist es einfach zu bedienen und skalierbar?

Staples

Verwendete Technologien und Lösungen

Progressive Web Apps

Microservices für eCommerce

Moderne JS-Entwicklung

Vorbereitung von API und Azure Cloud

Die bestehenden monolithischen Systeme auf veralteten Maschinen aus dem Jahr 2001 mussten auf Microservices umgestellt werden. Dafür wurden neue API-Konzepte entworfen und für Genesis- und Netshop-basierte Backends entwickelt.

Gleichzeitig wurde Azure Cloud gelauncht, auf welcher der Proof of Concept später erstellt, getestet und angewendet wurde. Diese Cloud erwies sich als hochgradig verfügbar und kostengünstig und ermöglicht darüber hinaus Skalierbarkeit für zukünftige Entwicklungen.

Entwicklung einer einheitlichen Benutzeroberfläche als PWA

Parallel dazu konzentrierte sich Divante auf den Aufbau eines neuen, einheitlichen Frontends, das später per API mit den Backends verbunden werden konnte. Mit dem neuen Frontend ist es dem Designteam gelungen, die Benutzeroberfläche für alle Backends zu standardisieren und in eine einzige, einfach zu wartende Codebasis zu verwandeln. 

Das neue Staples-Frontend wurde als Progressive Web App konzipiert. Neben den Standard-Web-Funktionen bietet es dem Endnutzer alle typischen PWA-Funktionen wie schnelle Performance, Offline-Modus und das Speichern einer Webseite als App (mit einem Icon auf dem Startbildschirm) sowie Push-Benachrichtigungen und hat die Mobile-Benutzererfahrung erheblich verbessert. Die PWA-Technologie ist so konzipiert, dass sie sich an alle Geräte, von Smartphones bis zu Desktops, anpasst und als Mobile-App funktioniert.

 

A4 (1)

Agile Arbeitsweise

Beide Teams arbeiteten mit dem Plan-Do-Check-Act-Ansatz, der es ermöglichte, das Projekt im vorgegebenen Zeitrahmen zu entwickeln und sogar noch mehr zu liefern. Dank dieses Ansatzes konnte das Team einige zusätzliche Funktionen, wie Offline-Bestellungen und das Scannen von Produkt-Barcodes, liefern. Bei der Entwicklung des Produkts standen drei wichtige Agile-Prinzipien im Mittelpunkt: Customers first, Menschen statt Prozesse und das funktionierende Produkt

„Dank unserer Zusammenarbeit mit Divante haben wir unsere Arbeitsweise verbessert und uns noch stärker für die Ausreifung unserer DevOps-Praktiken eingesetzt“, so Marcin Kaźmierczyk, Head of E-Commerce Development bei Staples Solutions.

 

A4 (2)
DAS SIND DIE ERGEBNISSE 
 

Positive Resultate des PoC

Das gesamte Experiment umfasste sieben internationale Teams in ganz Europa, in den Niederlanden (Amsterdam), Schweden (Borås), Großbritannien (London) und Polen (Wrocław, Gdańsk). 30 Personen, die 3 Monate lang zusammenarbeiteten. In dieser Zeit gelang es den kooperierenden Teams mithilfe des Microservice-Ansatzes, eine völlig neue Arbeitsumgebung einzurichten sowie ein neues PWA-Frontend zu entwerfen und zu testen. Das Endprodukt bietet großartige Funktionen wie Barcode-Scan, Offline-Bestellung und einen einzigen Einstiegspunkt für Geschäfts- und Online-Kunden. Mit einem angemessenen Budget konnte Staples vier neue Technologien (Azure Cloud, PWA, eine neue API und Vue.JS) in Bezug auf die Lernkurve, die einfache Nutzung sowie die Skalierung auf den weltweit verfügbaren Systemen validieren.

„Ich hatte das große Vergnügen, die neue UI-Initiative zu leiten. Der Schlüsselfaktor für den Erfolg war definitiv das Team: sehr kreativ, anpassungsfähig und leidenschaftlich, sowohl auf der Seite von Divante als auch von Staples Solutions. In kurzer Zeit haben wir im Anwendungs- und Infrastrukturbereich greifbare Ergebnisse erzielt und dabei immer agile Prinzipien und Best Practices von DevOps berücksichtigt. Abgesehen davon hatten wir alle Spaß“, so Dominika Sadkowska, Senior IT Project Manager bei Staples Solutions.

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 launchen, ohne dass Änderungen an ERP-Integrationen erforderlich oder Auswirkungen auf die B2B- und B2C-Geschäftslogik zu erwarten sind. 

Aus technologischer Sicht war der Proof of Concept ein voller Erfolg. Alles dank des Headless-Frontends, das beweist, dass es geschäftlich sinnvoll ist, in moderne Architektur zu investieren.

 

1080p - Layout Example

Kontaktiere uns