Revision 519: Modernisierung einer Legacy Frontend-Codebase

Gast Florian Dreier (Github) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends! Unser Sponsor Diese Folge wird gesponsert von REWE digital. Seit 2014 digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so richtig. Mit knapp 500 agilen Expert:innen setzt man auf eigenverantwortliches Arbeiten, Teamautonomie, modernste Technologien, individuelle Weiterentwicklung und Innovation an jeder Ecke. So leistet man wertvolle Pionierarbeit für einen der größten Handels- und Touristikkonzerne Europas. Neugierig geworden? Dann schaut jetzt auf rewe-digital.com, LinkedIn, Twitter oder YouTube vorbei und hört in REWE digitals eigenen Tech-Podcast Codes und schmerzlos rein! Schaunotizen [00:02:00] Modernisierung einer Legacy-Frontend-Codebase Florians Arbeitgeber war mit einem alten Frontend auf Basis von Googles Closure-Tools gesegnet, das modernisiert werden wollte. Zunächst listen wir die zahlreichen Gründe für das Ersetzen des alten Stacks auf (schlechte DX, Inkompatibilität zum restlichen JS-Ökosystem) und sprechen dann über die Vorarbeiten für die Umstellung. Wichtig dabei: Buy-In auf allen Ebenen ereichen, POCs zusammenhacken und nicht einfach alles neu schreiben. Für die Überführung der Closure-Module in ES-Module wurde ein Konverter programmiert, die TypeScript-Migration mithilfe des Closure-TS-Coverters halbautomatisch und Schritt für Schritt durchgeführt. Natürlich kommen wir nicht umhin, die Entscheidung für React in Anbetracht der zahllosen Alternativen zu hinterfragen, ebenso die Entscheidung für Vite anstelle von Webpack, diskutieren die Ob und Wie von Feature-Entwicklung während des Umbaus und fragen uns natürlich auch, wie es zu verhindern ist, dass der aktuelle Code schlimmes Legacy 2.0 wird. Am Ende fasst Florian die positiven Ergebnisse des Umbaus zusammen und gibt Abschließende Empfehlungen für vergleichbare Migrationsprojekte.