neotec
Legacy-Modernisierung

Ihr Frontend ist gewachsen – jetzt wird es wartbar.

AngularJS, WinForms, .NET Framework oder ein Wildwuchs aus autarken HTML/JS-Seiten? Wir migrieren auf Angular 21 und .NET 10 – inkrementell, parallelbetriebsfähig, ohne Ihre bewährte API anzutasten.

30-Minuten-Architekturgespräch

Unsere Leistungen

Interaktiv

Migrations-Check: Wo stehen Sie?

Wählen Sie Ihren aktuellen Stack – wir zeigen Ihnen sofort den passenden Weg und das Vorgehen.

AusgangslageAngularJS 1.x – Scopes, $digest, veraltete Libraries, keine offizielle Pflege mehr
ZielAngular 17–21 mit Signals & Standalone Components
  1. Komponenten- & Routing-Inventar
  2. Atomic-Design-Komponentenbibliothek aufbauen
  3. Route für Route migrieren – Alt & Neu laufen parallel
  4. Tests + CI-Gates je Feature
Diesen Pfad besprechen
AusgangslageWinForms, WPF oder Silverlight – Desktop-only, kein Web, kein Mobile
ZielAngular / PWA mit .NET-Backend
  1. UI- & Maskeninventar, Datenflüsse kartieren
  2. Web-Shell + Core-Services + Auth aufsetzen
  3. Screen für Screen auf Web/PWA heben
  4. Store-/PWA-Rollout, Alt-Client ablösen
Diesen Pfad besprechen
Ausgangslage.NET Framework 4.x – veraltete Pakete, kein Cross-Platform, träge Releases
Ziel.NET 10 mit ASP.NET Core & EF Core
  1. Abhängigkeits- & API-Audit
  2. Projekt auf SDK-Style und .NET 10 heben
  3. Datenzugriff auf EF Core migrieren
  4. Container- & CI-Pipeline, sauberer Deploy
Diesen Pfad besprechen
AusgangslageGewachsenes HTML/JS-Frontend (jQuery-Ära) – Design-Wildwuchs, schwer wartbar
ZielAngular 21 + Atomic Design – bestehende C#-API bleibt
  1. Seiten- & Komponenten-Inventar
  2. Atomic-Design-System als neue Basis
  3. Inkrementell migrieren, C#-API unverändert anbinden
  4. Cutover ohne Backend-Risiko
Diesen Pfad besprechen
AusgangslageKlassische Skripte – VB, PL/SQL, Mumps – schwer testbar, Wissensinseln
ZielModerne, testbare Domain-Services
  1. Fachlogik extrahieren & dokumentieren
  2. Domain-Services mit Tests neu bauen
  3. Schrittweise Ablösung hinter stabilen Schnittstellen
  4. Monitoring + Übergabe ans Team
Diesen Pfad besprechen
Wozu

Was Modernisierung bringt

Kein Selbstzweck – messbare Vorteile für Geschäft und Entwicklung.

Fürs Geschäft

  • Schnellere Auslieferung durch wiederverwendbare UI-Bausteine
  • Weniger Regressionen dank Tests und typisierten APIs
  • Konsistente UX über ein gemeinsames Design-System

Für die Entwicklung

  • Komponentenbasierte Architektur mit klaren Grenzen (Core / Shared / Features)
  • Routing, Formulare, SSR-Optionen und modernes Tooling
  • Testbarkeit statt DOM-Gebastel
Ablauf

In vier Phasen zum Ziel

Inkrementell migrieren – aber das Zielsystem von Anfang an durchdacht. Ihr Altsystem bleibt live, bis Parität bewiesen ist.

  1. Phase 0 · Discovery (1–2 Wochen) – UI-Inventar und Route-Map, Atomic-Taxonomie und Namenskonventionen, Quality-Gates definieren.
  2. Phase 1 · Foundation (ca. 1 Woche) – Angular-Scaffolding und CI, Core-Services, API-Clients und Auth-Shell, erste Atoms und Design-Tokens.
  3. Phase 2 · Vertical Slices (3–6 Wochen) – Route für Route migrieren, Organismen für wiederkehrende Bereiche, Paritäts-Checkliste je Feature. Legacy läuft parallel weiter.
  4. Phase 3 · Hardening (1–2 Wochen) – toten Legacy-Code entfernen, Performance-Tuning und Bundle-Budgets, Doku und Onboarding.
KI-gestützt

So beschleunigt KI die Migration

Der Grund, warum Modernisierung bei uns in Tagen statt Wochen vorankommt.

Wir übersetzen Legacy-Code nicht von Hand Zeile für Zeile. AI-gestützte Coding-Workflows übernehmen die Fleißarbeit – unsere Entwickler verantworten Architektur und Qualität. Der Ablauf je Slice:

  1. Screens und geteilte UI inventarisieren, einen ersten Vertical Slice wählen
  2. Angular-Gerüst, Ordnerstruktur und Lint-/Test-Setup aufsetzen
  3. Atoms → Molecules → Organisms extrahieren (Storybook optional)
  4. Eine Route nach der anderen migrieren – das Altsystem läuft weiter
  5. Tests und CI-Gates ergänzen, bevor der Umfang wächst

KI-generierter Code wird wie jeder Pull-Request geprüft: eingegrenzte Prompts, verpflichtende Tests, Diff-Review. Schnell heißt nicht ungeprüft.

Qualität

Was Regressionen verhindert

Eine grüne Pipeline ist bei uns der Standardweg zum Merge – nicht die Ausnahme.

Automatische Checks

  • Lint und Formatierung (pre-commit)
  • Unit-Tests für migrierte Komponenten
  • e2e-Smoke-Test je kritischem Flow
  • Bundle-Budget und Lighthouse-Schwellwert je Release

Review-Checkliste

  • Barrierefreiheit (Tastatur, Labels, Kontrast)
  • Typisierte API-Verträge und saubere Fehlerzustände
  • Keine direkten DOM-Hacks ohne Begründung
  • Einhaltung von Design-Tokens und Komponenten-Regeln
Systematik

Wie aus Legacy-UI ein Komponenten-System wird

Wiederholbare Regeln entscheiden, was Atom, Molecule oder Organism wird.

  • Button / Input / Icon → Atom — keine Feature-Logik, nur Style-Tokens und Barrierefreiheit
  • Suchbox (Label + Input + Hinweis) → Molecule — komponierte Atoms, meldet Wertänderungen
  • Header (Logo + Nav + User-Menü) → Organism — komponierte Molecules, emittiert Events
  • Layout-Grid → Template — nur Layout, nimmt Slots und Kind-Komponenten auf
  • Detail-Route → Page — holt Daten, verdrahtet Templates und Services

Goldene Regel: Datenbeschaffung und Seiteneffekte nach oben in den Baum, UI-Komponenten bleiben bewusst logikarm und leicht testbar.

Referenz

Frontend-Modernisierung in der Praxis

Wie wir ein über Jahre gewachsenes Frontend homogenisiert und wartbar gemacht haben.

Referenz

Frontend-Modernisierung · Konzern im Energiesektor

Ein über Jahre gewachsenes Frontend aus autarken HTML- und JavaScript-Seiten – jede Seite mit eigenem Design und eigener Logik. Wir haben es auf Angular 21 mit einem Atomic-Design-Komponentensystem neu aufgebaut und an die bestehende C#-API angebunden. Aus Design-Wildwuchs wurde ein konsistentes, wiederverwendbares Komponenten-System – ohne Big-Bang und ohne Eingriff ins Backend.

  • Vorher: autarke HTML/JS-Seiten mit Design-Wildwuchs
  • Nachher: ein Atomic-Design-Komponentensystem
  • Bestehende C#-API unverändert angebunden
Migrations-Assessment anfragen
Migrationspfade

Von wo wir Sie abholen

Typische Ausgangsstacks – und wohin wir migrieren.

  • Autarke HTML/JS-Frontends (jQuery-Ära) → Angular 21 + Atomic Design
  • AngularJS 1.x → Angular 17–21 mit Signals & Standalone Components
  • WinForms / WPF / Silverlight → Angular / PWA
  • .NET Framework → .NET 10 mit ASP.NET Core & EF Core
  • Klassische Skripte (VB, PL/SQL, Mumps) → moderne, testbare Domain-Services
Ergebnis

Woran wir Fertigstellung messen

Unser Qualitätsanspruch an eine abgeschlossene Migration.

  • Alle kritischen Routen laufen in Angular – Legacy entfernt oder isoliert
  • Die Atomic-UI-Library deckt den Großteil der geteilten UI ab und ist dokumentiert
  • CI-Gates grün: Lint, Unit, e2e-Smoke – Releases sind wiederholbar
  • Performance hält die vereinbarten Budgets (Bundle-Größe, Lighthouse)
  • Das Team liefert neue Features, ohne Legacy anzufassen
Häufige Fragen

Was Sie zu Recht fragen

Läuft mein System während der Migration weiter?

Ja. Wir arbeiten inkrementell im Parallelbetrieb – Ihr Altsystem bleibt live, bis der neue Stack Route für Route Parität erreicht.

Muss mein Backend mit umgebaut werden?

Nein. Wie bei unserem Projekt für einen Konzern im Energiesektor binden wir Ihre bestehende C#-API unverändert an – Frontend-Modernisierung ohne Backend-Risiko.

Wie stellt ihr die Qualität von KI-generiertem Code sicher?

Eingegrenzte Prompts, verpflichtende Tests und Diff-Review wie bei jedem Pull-Request. KI beschleunigt die Fleißarbeit – die Verantwortung für Architektur und Qualität bleibt bei unseren Entwicklern.

Was, wenn Sie später nicht mehr an Bord sind?

Wir schulen Ihr Team auf den neuen Stack, damit es nach uns eigenständig weiterarbeitet.

Kontakt

Migrations-Assessment anfragen

Schicken Sie uns kurz Ihren Stack – wir melden uns mit einer ersten Einschätzung.

Anfrage senden

Kurz Ihr Anliegen – wir antworten persönlich.

Bereit für die Modernisierung?

Schicken Sie uns Ihren Stack – wir melden uns mit einer ersten Einschätzung und einem Migrationsplan.

Migrations-Assessment anfragen

Produkte ansehen