Staples

 

Einheitliches PWA-Frontend für mehrere ältere Backends von Staples

 

Our website has cookies.  See info

Deny Allow

Staples, ein weltweit agierender Händler für Bürobedarf, startete 2001 seine erste E-Commerce-Website. Im Laufe der Jahre erwarb das Unternehmen global weitere Unternehmen sowie deren bestehende E-Commerce-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 Back-End-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 E-Commerce-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 E-Commerce-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 E-Commerce-Systeme widerspiegelt, war die Antwort auf eine solche Herausforderung nicht einfach.

WAS SIE BRAUCHTEN

Der richtige Umgang mit alten Backends

Das E-Commerce-Team wusste, dass das Ändern aller Backend-Systeme in einem derart großen Umfang enorm aufwändig und langwierig sein würde. Stattdessen haben sie beschlossen, eine einheitliche Benutzeroberfläche (UI) für zwei im Staples-Technologie-Stack verfügbare Backends zu erstellen.

Zunächst dachte das Unternehmen über die Entwicklung einer nativen Mobile-App, eines neuen Frontends und verschiedener Headless-Lösungen nach. Am Ende wurde jedoch klar, dass die beste Option eine fortschrittliche Web-App ist, welche die Funktionen einer Webseite und einer Mobile-App vereint. 

Zu dieser Zeit wandte sich Staples an Divante, Entwickler der Vue Storefront, einer PWA-Storefront für E-Commerce.

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

 

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 endgültige Technologie auszuwählen. Die Idee war, eine gemeinsame Benutzeroberfläche basierend auf Vue Storefront in Azure Cloud zu implementieren und mit zwei E-Commerce-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?

    How to create, easily and quickly, a new API for at least two online stores and to separate their frontend from the backend (headless approach)?
  • 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?

IN DIESEM PROJEKT VERWENDETE TECHNOLOGIEN UND LÖSUNGEN

Progressive Web Apps
Microservices für E-Commerce
Moderne JS-Entwicklung

Vorbereitung von API und Azure Cloud

 

Die bestehenden monolithischen Systeme mit den ältesten Maschinen aus dem Jahr 2001 mussten auf Microservices umgestellt werden. Dies gelang Staples, indem neue API-Konzepte entworfen und für Genesis- und Netshop-basierte Backends entwickelt wurden.

Gleichzeitig wurde Azure Cloud gelauncht, auf welcher der Proof of Concept später erstellt, getestet und angewendet wurde. Diese Cloud erwies sich als hochverfü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.

 

Agile Arbeitsweise

Both teams worked with the plan-do-check-act approach which provided  a unique opportunity to fit into the given time-frame and deliver even more. Thanks to that approach, the team delivered some extra features like offline ordering and product barcode scanning. While developing the product, we had we had three main Agile principles in mind: Customers first, people not process and working product.

Bei der Entwicklung des Produkts hatten wir drei wichtige Agile-Prinzipien im Auge: Zuerst der Kunde; kein Prozess, sondern Menschen und ein funktionierendes 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.

 

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, ein neues PWA-Frontend zu entwerfen und es zu testen. Das Endprodukt bot großartige Funktionen wie Barcode-Scannen, 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.

 

Sprechen Sie mit unseren E-Commerce-Experten!

WAS KÖNNEN WIR FÜR SIE TUN?

hello@divante.co
+48 577 032 500

Wrocław | Berlin | Singapore | New York | Amsterdam