RWE Trading: Der Weg von einer Legacy-Plattform zu moderner Technologie

Ein Deep Dive in ein aktuelles Mandat: Die technische Transformation eines JavaScript-Monolithen im Enterprise-Umfeld. Wie durch eine strikte "Standards First"-Strategie, die Einführung von TypeScript und Vite sowie die Konsolidierung der UI-Architektur eine zukunftsfähige Basis für den Kunden geschaffen wurde.
Client Work Daily Insights React Software Architecture Type Script
Dec 13, 2025

Die Ausgangslage: Technische Schulden im Hochfrequenz-Umfeld

Im Energiehandel bei RWE Trading sind Präzision und Geschwindigkeit die entscheidende Währung. Die internen Applikationen müssen mit dem Markttempo mithalten können. Mein jüngstes Mandat als Freelance Senior Engineer/Architekt umfasste die Modernisierung einer geschäftskritischen Single Page Application (SPA), die über Jahre organisch gewachsen war.

Die Herausforderung war klassisch für ein langlebiges Enterprise-Projekt: Ein auf create-react-app (CRA) basierender Monolith, geschrieben in losem JavaScript. Ein initiales Audit offenbarte veraltete Abhängigkeiten mit über 200 "severe" Sicherheitslücken laut npm audit.

Die Entwicklererfahrung (DX) beim Kunden litt massiv:

Build-Zeiten von mehreren Minuten.
Träges Hot Module Replacement (HMR).
Inkonsistente UI-Implementierungen - so fanden sich beispielsweise vier unterschiedliche Ansätze für Data Grids in einer einzigen App.

Ein kompletter Rewrite "auf der grünen Wiese" war aufgrund des laufenden Betriebs keine Option. Es brauchte eine chirurgische Migrationsstrategie, die radikale Verbesserungen in Performance, Sicherheit und Wartbarkeit liefert, ohne die Stabilität zu gefährden.

Die Strategie: Fundament vor Feature

Um dieses komplexe Vorhaben zu strukturieren, definierte ich einen disziplinierten, sequenziellen Ansatz. Statt wild neue Technologien einzuführen, behandelten wir die Migration wie eine bauliche Sanierung: Erst das Fundament stabilisieren und modernisieren, dann die Struktur (Sprache) härten, zuletzt die Fassade (UI) vereinheitlichen.

Gemeinsam mit dem Entwicklungsteam vor Ort setzten wir folgenden Plan um:

Phase 1: Das Fundament - Standards und Tooling

Bevor Produktivcode im großen Stil geändert wurde, mussten die Spielregeln und Werkzeuge neu definiert werden.

1.1 Paketmanagement: Von npm zu pnpm

Um Installationszeiten zu beschleunigen und Disk Space effizienter zu nutzen (besonders wichtig in CI/CD Pipelines), migrierten wir von npm auf pnpm.

bash

# Installation und Migration der Lockfiles
npm install -g pnpm
pnpm import # Erstellt pnpm-lock.yaml aus package-lock.json

# Aufräumen und Neuinstallation
rm -rf node_modules package-lock.json
pnpm install

1.2 Architektur-Zielbild & Linting

Wir etablierten klare Richtlinien basierend auf Domain-Driven Design (DDD). Die strikte Trennung von Domänenlogik (Features), wiederverwendbaren UI-Komponenten und Shared Cores wurde als Standard eingeführt. Unterstützt wurde dies durch ein strenges, neu aufgesetztes Set an ESLint- und Prettier-Regeln.

1.3 Die Vite-Revolution (CRA Ablösung)

Die Migration der Build-Infrastruktur von Webpack (react-scripts) zu Vite war der erste große technische Hebel für die DX.

Auszug package.json (Diff):

diff

  "dependencies": {
-   "react-scripts": "5.0.1",
    ...
  },
  "devDependencies": {
+   "@vitejs/plugin-react-swc": "^3.5.0",
+   "vite": "^5.0.0",
    ...
  },
  "scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
+   "dev": "vite",
+   "build": "vite build",
    ...
  }

Das Ergebnis: Die Startzeiten des Dev-Servers sanken von Minuten auf Millisekunden. Die Feedback-Schleife für das Team wurde sofort revolutioniert.

Phase 2: Der Kern - Sprache und Ökosystem

Mit stehendem Tooling begann die Arbeit am eigentlichen Code.

2.1 JavaScript zu TypeScript

Der wohl wichtigste Schritt für langfristige Stabilität war die iterative Migration der gesamten Codebasis auf TypeScript. Typensicherheit ist in komplexen Handelsanwendungen dieses Kalibers eine Notwendigkeit, kein Luxus.

bash

# Hinzufügen der notwendigen TS-Abhängigkeiten
pnpm add -D typescript @types/react @types/react-dom @types/node

Wir migrierten Datei für Datei, beginnend bei den Core-Utilities und Models, hoch zu den UI-Komponenten.

2.2 Modernisierung des Kern-Stacks & Altlasten

Wir hoben alle Hauptbibliotheken (React, Redux Toolkit, React Router, MUI) auf ihre aktuellen Major-Versionen, um moderne APIs (Hooks) und Performance-Features zu nutzen. Gleichzeitig entfernten wir schwergewichtige Altlasten.

Auszug package.json (Bereinigung):

diff

  "dependencies": {
-   "moment": "^2.29.1", // Drop: Veraltet und zu groß
-   "redux": "^4.1.x",   // Drop: Ersetzt durch modernes Redux Toolkit oder Zustand
+   "date-fns": "^3.0.0", // Modern, modular, tree-shakeable
+   "@reduxjs/toolkit": "^2.0.0",
    ...
  }

Durch diese Schritte konnten die über 200 kritischen Sicherheitslücken mit einem Schlag eliminiert werden.

Phase 3: Konsolidierung und UI-Architektur

Im letzten Schritt widmete sich das Projekt der Vereinheitlichung der Benutzeroberfläche.

3.1 Data Grid Konsolidierung (TanStack Table)

Das Wartungschaos von vier verschiedenen Tabellen-Implementierungen (Mix aus alten MUI-Tables und Custom-Lösungen) wurde beendet. Wir konsolidierten die gesamte Applikation auf eine "Headless UI" Lösung.

Auszug package.json (Konsolidierung):

diff

  "dependencies": {
-   "mui-datatables": "3.7.1" // Drop: deprecated,
-   "@material-table/core": "2.3.37", // Drop: deprecated,
-   "mui-datagrid-x": // Erster Migrationsschritt. Im Anschluss Drop für Tanstack
+   "@tanstack/react-table": "^8.0.0", // Eine Lösung für alles
    ...
  }

Der Vorteil: Volle Kontrolle über das Rendering und maximale Performance bei großen Datensätzen, da TanStack Table nur die Logik liefert und wir das UI mit unseren MUI-Komponenten rendern.

3.2 Component Wrapping & Storybook

Um die Corporate Identity konsequent durchzusetzen, wurden rohe Material UI Komponenten in eigene, domänenspezifische Wrapper verpackt (z.B. ein spezifischer RWETradingButton).

Zur Dokumentation und isolierten Entwicklung dieser neuen "Source of Truth" führten wir Storybook ein.

bash

# Initialisierung von Storybook im neuen Vite/TS Kontext
pnpm dlx storybook@latest init

Das Ergebnis: Eine zukunftsfähige Plattform

Die Transformation war intensiv, aber das Ergebnis, das dem Kunden übergeben wurde, spricht für sich. Das Team bei RWE Trading verfügt nun über eine Plattform mit:

Höchster Sicherheit: Ein sauberes pnpm audit ohne kritische Lücken.
Exzellenter DX: Blitzschnelle Vite-Builds, HMR im Millisekundenbereich und volle Typensicherheit.
Klarer Architektur: Eine durch DDD strukturierte Codebasis mit einer konsolidierten UI-Bibliothek und dokumentierten Komponenten.