Frontend-Ablösung bei laufendem Betrieb

Ausgangslage

Eine interne Storefront für Mitarbeitende lief auf AngularJS 1.7, also einem Framework ohne Herstellerunterstützung. Ein Neubau am Stück war ausgeschlossen, die Anwendung war im täglichen Einsatz und sollte parallel neue Funktionen bekommen. Dahinter lagen eine GraphQL-API und mehrere gewachsene REST-Dienste für Produkte, Warenkorb, Aktionscodes und Treuepunkte, jeder mit eigenem Authentifizierungsverfahren.

Lösung

Die Ablösung lief über zwei Jahre und drehte auf halbem Weg die Richtung um. Zuerst wurde React 18 in AngularJS eingebettet und Funktion für Funktion übernommen, während im Altsystem weiterhin neue Features entstanden. Als der React-Anteil überwog, haben wir das Verhältnis invertiert: Von da an lief AngularJS eingebettet in React.

Die zwei Dauerthemen über die gesamte Laufzeit waren die Event-Bridge zwischen beiden Frameworks und die Schnittstellen. Die Bridge wuchs mit jeder übernommenen Funktion mit, weil jede neue Interaktion zwischen alter und neuer Welt einen Weg brauchte, über den Zustand und Ereignisse verlässlich in beide Richtungen laufen. Auf der Schnittstellenseite ging es um Authentifizierung gegen mehrere Verfahren, um Normalisierung sehr unterschiedlicher Antwortformen auf ein gemeinsames Modell und um Fehlerbehandlung je Quelle. Vorher nahm ein einzelner ausgefallener Service die gesamte Oberfläche mit, White Screen. Danach bleibt die Anwendung bedienbar und sagt der Person, welcher Bereich gerade nicht verfügbar ist und welche Funktion deshalb fehlt.

Ein eigenes Kapitel war das Routing, weil beide Frameworks auf denselben Navigationsvorgang reagierten und Aufrufe dadurch doppelt oder dreifach ausgelöst wurden, mit entsprechend vielen überflüssigen Requests. Das ließ sich einmal sauber lösen und in ein eigenes Modul ziehen, das anschließend überall verwendet wurde.

Ergebnis

Der Umstieg lief ohne Stichtag und ohne Feature-Freeze, die Anwendung war während des gesamten Umbaus produktiv im Einsatz.