AOK – Modernisierung des Kundenportals
Modulare Architektur mit Web Components – konsistente UX in einer heterogenen Systemlandschaft.
Projekt
Kundenportal & generisches Postfach
Wiederverwendbare Module
Ziele
Einheitliche UX, höheres Tempo
Geringere Integrationkosten
Technologien
Die Herausforderung
Die AOK stand vor einer komplexen Modernisierungsaufgabe: Das bestehende Kundenportal sollte um ein generisches Postfach‑System erweitert werden, das nahtlos in verschiedene Anwendungen integriert werden kann. Die Herausforderung lag in der heterogenen Systemlandschaft – verschiedene Technologie‑Stacks, unterschiedliche Design‑Systeme und divergierende Entwicklungszyklen.
Die Anforderungen waren anspruchsvoll und teilweise widersprüchlich:
- ⚠Einheitliche UX: Konsistentes Look‑and‑Feel über alle Anwendungen hinweg, unabhängig vom Host‑System
- ⚠Technologie‑Agnostik: Integration in bestehende Systeme (PHP, .NET, Java) ohne Konflikte
- ⚠Isolierte Entwicklung: Unabhängige Release‑Zyklen ohne gegenseitige Abhängigkeiten
- ⚠Skalierbare Architektur: Einfache Erweiterung um neue Module und Funktionen
Das Kernproblem: Traditionelle Monolith‑ oder Mikroservice‑Ansätze hätten entweder zu starke Kopplung oder zu hohe Komplexität bedeutet. Wir brauchten eine Lösung, die die Vorteile beider Welten vereint – modulare Architektur mit einfacher Integration.
Die Lösung
Mein Ansatz basierte auf Web Components – einer nativen Browser‑Technologie, die echte Kapselung und Framework‑Unabhängigkeit bietet. Angular Elements ermöglichte es, moderne Angular‑Komponenten als standardkonforme Custom Elements zu verpacken, die in jeder Umgebung funktionieren.
Architektur‑Prinzipien
Shadow DOM Isolierung
Jede Komponente läuft in ihrer eigenen Shadow DOM‑Kapsel. CSS‑Styles und JavaScript‑Logik sind vollständig isoliert von der Host‑Anwendung. Das verhindert Konflikte und garantiert konsistentes Verhalten, unabhängig von der Umgebung.
- • Style Encapsulation: CSS‑Regeln können nicht von außen überschrieben werden
- • Script Isolation: JavaScript‑Variablen und Funktionen sind gekapselt
- • Event Bubbling: Kontrollierte Event‑Kommunikation mit der Host‑Anwendung
- • Slot‑System: Flexible Content‑Projektion für verschiedene Use‑Cases
Saubere API‑Contracts
Jede Komponente definiert klare Schnittstellen über HTML‑Attribute (Input) und Custom Events (Output). Versionierung und Backward‑Compatibility werden durch semantische Versioning und Feature‑Detection gewährleistet.
- • Attribute‑basierte Konfiguration: Einfache Integration ohne JavaScript‑Kenntnisse
- • Event‑driven Communication: Lose Kopplung zwischen Komponenten und Host
- • Semantic Versioning: Klare Upgrade‑Pfade und Breaking‑Change‑Management
- • Feature Detection: Graceful Degradation bei fehlenden Features
Modularer Development‑Workflow
Jede Komponente wird als eigenständiges NPM‑Paket entwickelt und versioniert. Ein zentrales Design‑System sorgt für Konsistenz, während individuelle Teams unabhängig an ihren Modulen arbeiten können.
- • Monorepo‑Struktur: Shared Dependencies mit isolierten Packages
- • Automated Testing: Unit‑, Integration‑ und E2E‑Tests für jede Komponente
- • CI/CD Pipeline: Automatische Builds, Tests und Deployments
- • Storybook Integration: Living Documentation und Component‑Playground
Technische Umsetzung
Die Implementierung erfolgte in iterativen Sprints mit kontinuierlichem Feedback der Fachbereiche:
Angular Elements Setup
Herausforderung: Angular‑Komponenten als native Web Components verpacken.
- • Custom Elements Polyfills für ältere Browser
- • Bundle‑Optimierung für minimale Dateigröße
- • Tree‑Shaking für ungenutzte Angular‑Features
- • Lazy Loading für bessere Performance
Design System Integration
Herausforderung: Konsistente Styles über alle Komponenten hinweg.
- • CSS Custom Properties für Theme‑Variablen
- • SCSS‑Mixins für wiederverwendbare Styles
- • Responsive Design mit Container Queries
- • Accessibility‑Standards (WCAG 2.1 AA)
State Management
Herausforderung: Daten‑Synchronisation zwischen isolierten Komponenten.
- • Event‑basierte Kommunikation über Custom Events
- • Shared Services für globalen State
- • LocalStorage für persistente Daten
- • RxJS für reaktive Datenströme
Integration & Deployment
Herausforderung: Nahtlose Integration in bestehende Systeme.
- • CDN‑basierte Auslieferung für einfache Integration
- • Versionierte URLs für Backward‑Compatibility
- • Feature‑Flags für schrittweise Rollouts
- • Monitoring und Error‑Tracking
Die Ergebnisse
Portal modernisieren?
Ich plane modulare Architekturen, die langfristig tragfähig sind.
Projekt besprechen