Vom Offline Handel auf einen aktuellen Web Stack

*English version to be found here

Wie bringt man einen stationären Offline-Handel mit Fokus auf und Prozessen aus dem Vertrieb auf einen aktuellen Web Stack?

Nicht heute, aber morgen... und mit viel Überzeugungsarbeit!

Ihr kennt das sicher: Ihr erzählt eurem Bruder oder der Tante von eurer neuesten Website, die technologisch am neuesten Stand ist und man erntet ein Lächeln, das höfliches Unverständnis zeigt. Wenn diese Website dann nicht "nur" eine Website eines Fotografen ist, sondern ein Online-Shop mit 19 Instanzen und in 11 Ländern, dann schmerzt dieses Lächeln umso mehr! Responsive Design, Mobile First, Progressive Enhancement, SPA, React, Webpack, Component based development, SSR... ja, wir sprechen eine andere Sprache.

Introduction: Proof of concept

Ende 2017 war der Zeitpunkt gekommen, wo sich ein paar Developer der xxxldigital Abteilung zusammen getan haben, um unserem riesigen Mutterschiff zu zeigen, wo die Reise in die Zukunft hingehen muss. Nach kurzer, aber intensiver Recherche haben wir uns für React statt Angular entschieden. Natürlich basieren viele Annahmen, die wir getroffen haben, auf persönlichen Erfahrungen. Zum Zeitpunkt der Entscheidung war React gerade ein aufsteigender Stern knapp hinter Angular. Der Trend ließ sich jedoch ganz klar erkennen. So entschieden wir uns für React! Wir erbaten uns zwei Sprints (= 4 Wochen), um einen POC umzusetzen und bekamen ihn! Anscheinend war die Notwendigkeit unserer Vision bis zu den wichtigsten Entscheidungsträgern vorgedrungen und auf offene Ohren gestoßen.

Starker Spannungsbogen

Der Startschuss kam mit Februar 2018. Nachdem ein Online-Shop wichtigen Umsatz produziert, stand es außer Frage, dass man so geschäftskritische Änderungen erst im Feldversuch testen musste. Hier kam uns zu Gute, dass neben echten Online-Shops auch sogenannte Warendemos Teil unseres Unternehmensauftritts waren: Wie bei einem Online-Katalog konnte man das Sortiment online erkunden, aber nichts kaufen. www.xxxlutz.se war als unser Spielplatz auserkoren worden.

Jetzt musste vieles gleichzeitig passieren. Wir mussten:

• ein neues Designs erstellen, die aktuellen Standards genügen (Responsive Design, Mobile First, ...)

• aus dem Design ein neues Designsystem mit Styleguide ableiten (Hydra)

• dem "neuen" Frontend einen Namen geben (Poseidon)

• den Frontend Stack (React, Jest, Cypress, ...) aufbauen

• eine cloudbasierte Infrastruktur mit Pipeline und Deployment etablieren

• SSR, BFF und viele andere Microservices schreiben

Mid-Season Finale

Im Oktober 2018 hatten wir es geschafft. Die neue Warendemo ging online! Es war ein voller Erfolg. Nun hieß es aber, fast alle anderen Teams unserer E-Commerce Abteilung mit auf den Weg zu bringen. Wir koordinierten Schulungen und Workshops um unsere Streitmacht auf einen gemeinsamen Wissenstand zu heben und das nächste Ziel zu erreichen: Die Produkte müssen online bestellbar werden, damit wir die anderen 18 Online-Shops und Warendemos so schnell wie möglich auf den neuen Stack bringen können.

Cliffhanger (Ausblick)

Wenn du wissen willst, wie es im Jahr 2019 weiterging und wo wir 2020 hin wollen, solltest du unseren nächsten Blog-Post nicht verpassen!

Das Rennen ist natürlich nicht vorbei! Im Gegenteil, denn die Entwicklung von neuen Microservices und Frontend-Features, Erweiterung der skalierbaren Infrastruktur mit Kubernetes und Kyma, Testautomatisierung mit Jest- und GUI-Tests, Marketing-Features und A/B-Testing, SEO und Performance Improvements hören natürlich nie auf!!

Wir suchen dich

Aktuell suchen wir Entwickler, Product Owner und Cloud Engineer, die uns bei der Reise in die Zukunft zur Seite stehen und unterstützen wollen.

Author: Michael Huber, Teamlead E-com Development