Warum Modernisierung wichtig ist

In industriellen und unternehmensweiten Umgebungen steuern Legacy-HMIs und Desktop-basierte Benutzeroberflächen nach wie vor viele geschäftskritische Prozesse. Diese Systeme arbeiten oft zuverlässig, doch ihre technischen Grundlagen stammen aus Jahrzehnten zurück – was sie zunehmend schwer zu warten, zu erweitern und an die heutigen Nutzererwartungen anzupassen macht.

UX-Verbesserungen stoßen in solchen Systemen oft an eine harte Grenze – nicht wegen mangelndem Design-Talent, sondern weil die zugrundeliegenden Technologien keine modernen Interaktionsmodelle, responsiven Layouts oder geräteübergreifende Nutzbarkeit unterstützen. Das Web-Ökosystem entwickelt sich derweil rasant weiter und bringt hochmoderne Frameworks, Design-Systeme und Integrationsstandards hervor, die definieren, was Nutzer heute als natürliche Erfahrung betrachten.

Durch den Einsatz moderner Web-Technologien – von reaktiven Frameworks und Micro-Frontends bis hin zu eingebetteten Browser-Engines – können Unternehmen die heutigen Nutzererwartungen an barrierefreie, kollaborative und visuell konsistente Anwendungen auf allen Geräten erfüllen. Diese Technologien ebnen einen schrittweisen Weg von Legacy-Systemen hin zu einer modernen Grundlage, sodass Teams Oberflächen und Funktionen weiterentwickeln können, ohne den laufenden Betrieb zu unterbrechen. Das Ergebnis ist eine Nutzererfahrung, die zeitgemäß, kohärent und zukunftssicher wirkt – bei gleichzeitiger Bewahrung der bewährten Zuverlässigkeit bestehender Software.

Die Legacy-Landschaft verstehen

Bevor der richtige Modernisierungspfad gewählt werden kann, muss verstanden werden, was modernisiert werden soll. Viele industrielle und unternehmensweite Systeme basieren heute auf WPF, WinForms und monolithischen .NET-Backends – oder auf Legacy-Webanwendungen, die auf älteren Frameworks wie ASP.NET WebForms, jQuery-lastigen Frontends oder serverseitigen Rendering-Architekturen aufsetzen. Diese Lösungen haben jahrelang zuverlässig funktioniert und tragen oft wertvolle Geschäftslogik, die tief mit Hardware oder Backend-Systemen verzahnt ist – was jede strukturelle Änderung riskant erscheinen lässt.

In industriellen Desktop-Umgebungen hat unser Unternehmen über die Jahre umfassende UX-Konzepte und maßgeschneiderte WPF-UI-Komponentenbibliotheken entwickelt, die direkt in Kundenanwendungen integriert werden konnten. Dieser Ansatz ermöglichte es Kunden, ihre Benutzeroberflächen zu verbessern und zu standardisieren – mit mehr Konsistenz, besserer Wartbarkeit und einer insgesamt höheren Nutzererfahrung, ohne die bestehende Architektur verlassen zu müssen.

Dennoch stehen Hardwareabhängigkeiten, eingeschränkte UI-Frameworks und veraltete Interaktionsmodelle sowohl bei Desktop-Monolithen als auch bei Web-Monolithen modernen UX-Erwartungen im Weg. Die Herausforderung ist nicht nur technischer, sondern strategischer Natur. In den meisten Fällen erlaubt die Geschäftskontinuität schlicht keinen vollständigen Neustart – monatelang oder jahrelang die Entwicklung einzufrieren, um von Grund auf neu zu beginnen, ist keine Option. Der Betrieb muss weitergehen, Nutzer müssen unterstützt werden, und Systeme müssen laufen.

Deshalb muss Modernisierung in Bewegung stattfinden – wie das Verlegen neuer Schienen, während der Zug noch fährt. Das Ziel ist es, das bestehende System Schritt für Schritt weiterzuentwickeln, moderne Technologien zu integrieren, ohne das Bewährte zu beschädigen, und die richtige Balance zwischen Stabilität und Innovation zu finden.

Den richtigen Modernisierungspfad wählen – Moderne Web-Technologien in Legacy-Anwendungen einbetten

Es gibt viele Wege zur Modernisierung von Legacy-Software – vom Backend-Refactoring über die Einführung von Micro-Frontends, Cloud-APIs bis hin zu vollständigen System-Neuentwicklungen. In den meisten realen Szenarien ist jedoch der effektivste und am wenigsten störende Weg, das Bestehende zu erweitern, anstatt es von heute auf morgen zu ersetzen.

Handelt es sich beim bestehenden System um eine Desktop-Anwendung (z. B. eine ältere .NET WPF- oder WinForms-App), besteht der praktische Ansatz darin, eine moderne Webanwendung in die Legacy-Hülle einzubetten. So können neue Features als webbasierte Module – Angular, React oder Blazor – entwickelt und direkt innerhalb der bestehenden Oberfläche angezeigt werden. Der Desktop-Host und der eingebettete Browser können über verschiedene Mechanismen kommunizieren, etwa Inter-Process Communication (IPC), gemeinsame lokale APIs oder JavaScript-.NET-Bridges, was einen reibungslosen Datenaustausch zwischen den beiden Schichten ermöglicht.

Handelt es sich beim bestehenden System bereits um eine Webanwendung, gilt dasselbe Prinzip – allerdings könnte das richtige Werkzeug ein anderes sein: Micro-Frontends. Sie ermöglichen es Teams, neue Web-Module neben den alten einzuführen und Screens sowie Features schrittweise zu migrieren, ohne die Gesamtanwendung zu beschädigen.

Technisch gesehen ermöglichen mehrere Rendering-Engines die Integration von Web-Inhalten in Desktop-Software.

Für bestehende native Anwendungen ist das Chromium Embedded Framework (CEF) die häufigste Wahl – typischerweise über sprachspezifische Bindings wie CefSharp für .NET, JCEF für Java, cefpython3 für Python, die native CEF-API für C++ und andere. Diese Lösungen erlauben es Entwicklern, moderne Web-Module direkt in Legacy-Hüllen einzubetten, während sie die volle Kontrolle über die Hosting-Umgebung behalten.

Bei einem neuen Desktop-Projekt von Grund auf bieten Optionen wie Electron oder native WebView-Controls (Edge WebView2 unter Windows, WebKit unter macOS/Linux) einen anderen Ansatz – eine vollständige Desktop-Erfahrung, die primär auf Web-Technologien aufbaut.

Die richtige Wahl hängt davon ab, wie eng die Web-Schicht integriert werden soll, wie viel der bestehenden Codebasis erhalten bleiben soll und welche Plattformen die Anwendung unterstützen muss. Das Prinzip bleibt jedoch dasselbe: Moderne Web-Technologie Schritt für Schritt in das Legacy-System einbetten, den Betrieb am Laufen halten, während das Produkt sich weiterentwickelt.

Der nahtlose Weg zur modernen UX

Die Kernidee

Modernisierung muss nicht Neuaufbau bedeuten. Die Kernidee ist simpel: Ein modernes Web-Frontend wird in die bestehende Desktop-Anwendung eingebettet. So können Teams Angular- oder React-Module schrittweise einführen und einzelne Screens oder Features nach und nach ersetzen. Aus Nutzersicht fühlt sich der Übergang nahtlos an – dieselbe Anwendung verfügt plötzlich über moderne Animationen, responsive Layouts und aktuelle Interaktionsmuster, während alle bestehenden Workflows erhalten bleiben.

Der Nutzer sieht nicht „zwei Systeme“ – nur eine sich weiterentwickelnde Oberfläche.

How It Works in Practice 

Wie es in der Praxis funktioniert

Im Hintergrund verwaltet die Legacy-Host-Anwendung weiterhin die zentrale Geschäftslogik, während das moderne Web-Frontend Visualisierung und Nutzerinteraktion übernimmt.

• Die Desktop-Schicht (z. B. WPF oder WinForms) führt weiterhin Domänenlogik, Backend-Kommunikation und Geräteintegration aus.
• Die eingebettete Chromium-Instanz (via CefSharp) rendert Angular- oder React-Komponenten lokal.
• Beide Seiten tauschen Daten über eine JavaScript-.NET-Bridge aus und gewährleisten so schnelle, sichere Kommunikation.

Diese hybride Struktur ermöglicht es Entwicklungsteams, moderne UI-Features unabhängig hinzuzufügen, zu testen und auszurollen – ohne die bestehende Codebasis zu berühren.

Vorteile

• Nahtloser UX-Übergang – Nutzer bleiben mit der Umgebung vertraut, während sich die Oberfläche weiterentwickelt.
• Geringes Risiko – Legacy-Module bleiben während der Modernisierung funktionsfähig.
• Wiederverwendbarkeit – Die neuen Web-Module können später in browserbasierten Dashboards oder PWAs wiederverwendet werden.
• Parallele Entwicklung – Teams können an neuen Angular/React-Features arbeiten, ohne Legacy-Code anzufassen.

Die Nutzerperspektive – Eine vertraute App, nur besser

Aus Nutzersicht ändert sich nichts Dramatisches – und genau das ist der Punkt.

Die Nutzer öffnen weiterhin dieselbe Desktop-Anwendung, die sie seit Jahren verwenden. Navigation, Menüs und Workflows verhalten sich wie gewohnt – kein neues Tool zum Erlernen, keine Nachschulung, keine Reibung.

Aber irgendetwas fühlt sich anders an.

Screens laden schneller, Animationen machen Interaktionen flüssiger, und Datenaktualisierungen erscheinen in Echtzeit. Subtile Übergänge, responsive Layouts und interaktive Dashboards vermitteln eine moderne Flüssigkeit, die Nutzer von Web- und Mobile-Erfahrungen kennen.

Hinter den Kulissen kommen diese Verbesserungen von eingebetteten Web-Komponenten – entwickelt mit Frameworks wie Angular oder React und direkt in der Desktop-App gerendert. Sie ermöglichen reichhaltigere Visualisierungen:

• Dynamische Diagramme und visuelle Analysen
• Echtzeit-Dashboards
• Sanfte Übergänge und Micro-Animationen
• Layouts, die sich an verschiedene Bildschirmgrößen und Auflösungen anpassen

Das Beste daran: Die Modernisierung geschieht schrittweise. Je mehr Module das neue Design-System übernehmen, desto mehr fühlt sich die gesamte Anwendung wie eine moderne Web-App an ohne ihre native Umgebung je verlassen zu haben.

Das Ergebnis: Ein vertrautes Werkzeug, das sich plötzlich schneller, frischer und angenehmer anfühlt, ohne den Arbeitsalltag zu unterbrechen.

Die Geschäftsperspektive – Kontinuität mit Zukunft

Aus unternehmerischer Sicht bietet dieser Ansatz das Beste aus beiden Welten: Fortschritt ohne Unterbrechung.

Das bestehende System bleibt vollständig betriebsfähig, während die Modernisierung schrittweise parallel voranschreitet. Die Produktion stoppt nicht, Teams unterbrechen nicht, und Nutzer bleiben während des gesamten Übergangs produktiv.

Da alte und neue Schichten sicher koexistieren, läuft der Modernisierungsaufwand mit kontrolliertem Risiko ab. Kritische Funktionen laufen weiterhin auf dem stabilen Legacy-Kern, während neue Features Schritt für Schritt eingeführt und getestet werden. Das bedeutet: kein Big-Bang-Release, kein Ausfall, kein Verlust der Geschäftskontinuität.

Die Investition ist skalierbar. Organisationen können einen Screen, ein Feature oder einen Workflow nach dem anderen modernisieren und dabei den technischen Fortschritt mit Budgetzyklen und strategischen Prioritäten abstimmen. Jeder inkrementelle Schritt liefert sichtbaren Mehrwert – verbesserte Nutzbarkeit, Performance oder Wartbarkeit – während das Gesamtsystem stabil bleibt.

Und sobald UI-Module mit Web-Technologien entwickelt wurden, bilden sie ein zukunftsfähiges Fundament. Dieselben Komponenten können später im Browser, auf Tablets oder in Electron- oder Photino-Hüllen laufen – und geben Unternehmen die Freiheit, auf neue Plattformen zu expandieren, ohne einen weiteren vollständigen Neuaufbau.

Das Ergebnis: Modernisierung ist kein Projekt, sondern ein nachhaltiger Prozess – eine Brücke zwischen der Zuverlässigkeit von heute und den Möglichkeiten von morgen.

Web-UIs in Legacy-WPF-Anwendungen einbetten

In vielen industriellen oder unternehmensweiten Umgebungen ist ein vollständiger Neuaufbau einer großen Desktop-Anwendung schlicht keine Option. Das System muss online bleiben, Produktionslinien müssen weiterlaufen, und Ausfallzeiten kosten mehr als technische Schulden. Genau hier wird die Einbettung einer modernen Web-Oberfläche in eine bestehende Desktop-Hülle zu einem praktischen und eleganten Modernisierungspfad.

Chromium Embedded Framework und CefSharp

Im Herzen dieses Ansatzes liegt das Chromium Embedded Framework (CEF) – ein Open-Source-Projekt, das Entwicklern ermöglicht, die Chromium-Browser-Engine (dieselbe, die in Google Chrome verwendet wird) als leichtgewichtige, einbettbare Komponente in anderen Anwendungen zu nutzen. CEF stellt APIs für das Rendering von HTML, CSS und JavaScript-Inhalten sowie für die bidirektionale Kommunikation zwischen nativem Code und dem Browser-Prozess bereit.

Für .NET-Entwickler fungiert CefSharp als Managed Wrapper um CEF. Es stellt ein natives WPF- oder WinForms-Control (ChromiumWebBrowser) bereit, das nahtlos in jede bestehende .NET-Oberfläche eingebettet werden kann. CefSharp übernimmt die Low-Level-Kommunikation zwischen der .NET-Laufzeitumgebung und dem Chromium-Prozess und bietet komfortable APIs für Navigation, JavaScript-Ausführung, Message-Routing und Ressourcenladung.

Hosting der Webanwendung

Es gibt zwei Hauptstrategien für das Hosting von Web-Inhalten im eingebetteten Browser:

• Lokales (gebündeltes) Hosting – Die SPA (React, Angular, Vue usw.) wird zusammen mit den Anwendungs-Binaries gebaut und verteilt. Die generierten HTML-, JS- und CSS-Dateien werden im Installationsverzeichnis der Anwendung abgelegt und über ein lokales file://-Schema oder ein benutzerdefiniertes Schema geladen. Dieser Ansatz gewährleistet Offline-Betrieb, was für industrielle HMIs und Feldgeräte kritisch ist.
• Remote-Hosting – Die Web-App wird auf einem Webserver (intern oder cloudbasiert) bereitgestellt, und CefSharp lädt sie über eine Standard-HTTPS-URL. Dies ermöglicht kontinuierliche Aktualisierungen der Web-Schicht ohne erneutes Deployment der Desktop-Hülle – ideal für Enterprise-Dashboards oder Service-Tools, die mit Unternehmensnetzwerken verbunden sind.

CefSharp in WPF einbetten

Aus WPF-Sicht ist die Integration unkompliziert. Das CefSharp ChromiumWebBrowser-Control wird innerhalb eines bestehenden WPF-Fensters oder User-Controls platziert – wie jedes andere UI-Element auch. Entwickler können dann zu einer URL (lokal oder remote) navigieren und Event-Handler für Seitenladen, Fehlerbehandlung oder benutzerdefiniertes Message-Routing anhängen.

Im Hintergrund führt CefSharp einen separaten Chromium-Unterprozess für Rendering und Script-Ausführung aus. Diese Isolierung verbessert die Stabilität – stürzt die Web-Ansicht ab, bleibt die Host-Anwendung am Leben. Sie ermöglicht auch eine feinkörnige Kontrolle über GPU-Beschleunigung, Sandboxing und Cache-Verzeichnisse über die CefSettings-Konfiguration bei der Initialisierung.

Bei der Integration von CefSharp in ein großes Legacy-System ist die zentrale Designfrage, wie Lifecycle und Inter-Process Communication (IPC) zwischen .NET und JavaScript effizient verwaltet werden – sodass sich die eingebettete SPA als natürlicher Teil der Anwendung verhält und nicht als fremdes Widget.

Kommunikation zwischen .NET und JavaScript

CefSharp stellt mehrere Mechanismen für die bidirektionale Kommunikation zwischen dem .NET-Host und dem JavaScript-Kontext im Browser bereit:

• JavaScript-Binding: .NET-Objekte können registriert und der JS-Laufzeitumgebung zugänglich gemacht werden. JavaScript-Code kann diese Methoden dann wie lokale aufrufen. Beispielsweise könnte das JS-Frontend window.appBridge.getMachineStatus() aufrufen, was intern eine .NET-Methode aufruft, die Daten von der Backend-Service-Schicht zurückgibt.
• JavaScript-Auswertung: Die .NET-Seite kann JS-Code direkt über Methoden wie EvaluateScriptAsync ausführen, um Frontend-Aktionen auszulösen, Daten zu senden oder das DOM zu manipulieren. Dies wird oft für UI-Synchronisierung oder Ereignisbenachrichtigungen vom Desktop an den Web-Teil verwendet.
• Message-Router (IPC-Bridge): Für strukturierteren Datenfluss umfasst CefSharp ein Message-Routing-System, das JSON-basierten Nachrichtenaustausch ermöglicht. Dies erlaubt den Aufbau einer konsistenten IPC-Schicht mit definierten Request/Response-Mustern oder Event-Streams. Viele Teams abstrahieren dies in ein leichtgewichtiges Messaging-Protokoll, sodass beide Seiten sich unabhängig weiterentwickeln können.

Diese IPC-Bridge verwandelt die CefSharp-Integration von einem Experiment in eine wartbare Architektur. Sie erlaubt der Legacy-C#-Codebasis, weiterhin Kernoperationen auszuführen – Datenverarbeitung, Hardware-Kommunikation, Datenbankzugriff – während sich die Web-Schicht auf Präsentation, Animation und UX-Evolution konzentriert.

Vorteile und Einschränkungen

Der größte Vorteil dieses Ansatzes ist schrittweise Modernisierung mit minimalem Risiko. Teams können ihre stabile und validierte .NET-Backend-Logik beibehalten, neue React- oder Angular-Komponenten inkrementell integrieren und Verbesserungen kontinuierlich ausliefern – ohne Produktionsumgebungen zu unterbrechen.

Weitere Vorteile:

• Wiederverwendung von Backend- und Geschäftslogik, die bereits getestet und bewährt ist.
• Moderne Web-UX mit Responsive Design, Animationen und wiederverwendbaren Komponenten.
• Schrittweiser Migrationspfad hin zu einem vollständig webbasierten oder plattformübergreifenden System.

Es gibt jedoch auch wichtige Einschränkungen:

• Speicher-Overhead: Chromium ist eine vollständige Browser-Engine und verursacht messbaren Mehraufwand im Vergleich zu nativen XAML-Komponenten.
• Styling-Konsistenz: Die Abstimmung von Schriften, Farben und DPI-Skalierung zwischen WPF und HTML erfordert Design-Koordination.

Trotz dieser Kompromisse bleibt die Einbettung einer Browser-Engine via CefSharp eine der praktischsten Modernisierungstechniken für WPF- und WinForms-Ökosysteme – insbesondere wenn Zeit, Risiko oder Hardwarebeschränkungen einen vollständigen Neuaufbau verhindern.

Jenseits von CefSharp – Weitere Modernisierungspfade

Während die Einbettung moderner Web-Komponenten über CefSharp eine ideale Lösung für die Erweiterung bestehender Desktop-Anwendungen ist, ist es nicht der einzige Weg zu einer nachhaltigen modernen UX.

Je nach Zielplattform, Performance-Anforderungen und Hardware-Umgebung gibt es weitere praktikable Optionen – jede folgt derselben Kernphilosophie.

Photino.NET – Schlank by Design

Für eingebettete oder industrielle Geräte, bei denen Speicher und Rechenleistung begrenzt sind, bietet Photino.NET eine kompaktere Alternative. Es läuft auf der nativen WebView-Engine des Systems (Edge WebView2 unter Windows, WebKit unter Linux/macOS) und benötigt weder Node.js noch die vollständige Chromium-Laufzeitumgebung.

Das macht es besonders geeignet für Maschinenoberflächen, Controller und Kiosk-Systeme, bei denen jedes Megabyte zählt. Photino-Anwendungen behalten dieselbe Struktur wie CefSharp-basierte – ein .NET-Backend und ein webbasiertes Frontend – aber mit deutlich geringerem Footprint und schnellerer Startzeit. Ideal für industrielle Systeme, die moderne Visualisierungen ohne den Overhead einer vollständigen Desktop-Browser-Engine benötigen.

Electron – Vollständige plattformübergreifende Erfahrung

Wenn das Ziel die Verteilung einer vollständig unabhängigen, plattformübergreifenden Anwendung ist, bleibt Electron eine starke Wahl. Es bündelt eine vollständige Chromium- und Node.js-Laufzeitumgebung und ermöglicht es Entwicklern, Web-Technologien (HTML, CSS, JS, Angular, React, Vue) zu nutzen und native Desktop-Erfahrungen unter Windows, macOS und Linux aus einer einzigen Codebasis zu liefern.

Electron ist besonders attraktiv, wenn:

• Die Legacy-App nicht wiederverwendet werden kann,
• Offline-Unterstützung unerlässlich ist,
• Oder der Einsatz auf mehreren Betriebssystemen erforderlich ist.

Sein Ökosystem bietet außerdem ausgereifte Tools für Auto-Updates, Packaging und die Integration nativer OS-Features wie Benachrichtigungen, Menüs und Dateidialoge.

Ein gemeinsames Kernprinzip

Trotz ihrer Unterschiede teilen CefSharp, Photino.NET und Electron ein wesentliches Prinzip:

Logik von Präsentation trennen und die UX Schritt für Schritt weiterentwickeln.

Jeder Ansatz ermöglicht es Teams, das schwere Backend vom modernen Frontend zu entkoppeln und so Flexibilität für zukünftige Plattformen zu gewährleisten – ob Desktop, Browser oder Mobil.

Modernisierung bedeutet nicht, das Alte zu ersetzen; es geht darum, Brücken zu bauen, die Evolution kontinuierlich, sicher und skalierbar machen.

Das neue UX-Kontinuum

Das Ergebnis ist ein durchgängiges UX-Ökosystem, in dem dieselbe Anwendungslogik und dieselben Datenflüsse mehrere Kontexte antreiben:

• Das Maschinen-HMI auf einem eingebetteten Windows-Gerät.
• Das übergeordnete Dashboard auf dem Desktop eines Ingenieurs.
• Die Remote-Übersicht auf dem iPad oder Smartphone eines Managers.

Nutzer wechseln nicht mehr zwischen separaten Tools – stattdessen erleben sie eine konsistente Oberfläche, die von einem 7-Zoll-Panel bis hin zu einem 27-Zoll-Monitor skaliert.

Für Software-Teams bedeutet dieser Ansatz eine einzige Codebasis, eine modulare Deployment-Strategie und eine einheitliche Sicherheitsschicht – die Kernprinzipien nachhaltiger Modernisierung.

Fazit – Verschiedene Wege, ein Ziel: Nachhaltige moderne UX

Es gibt keinen einzigen Weg zur Modernisierung – aber das Ziel ist dasselbe: eine konsistente, zukunftssichere Nutzererfahrung, die auf wiederverwendbarer Architektur und modernen Web-Technologien basiert.

• CefSharp überbrückt Alt und Neu und bettet Web-UIs in bestehende WPF-Systeme ein, ohne bewährte .NET-Backends zu gefährden.
• Electron erweitert diesen Ansatz zu einer universellen, portablen Laufzeitumgebung für plattformübergreifende Desktop-Apps, die Web- und Native-Erfahrungen vereint.
• NET bringt moderne UX auf eingebettete und industrielle Geräte und bietet dieselben Web-Fähigkeiten mit minimalem Footprint und nativer .NET-Performance.

Mit Blick auf die Zukunft fügen Micro-Frontends eine weitere Flexibilitätsebene hinzu – sie ermöglichen modulare, unabhängig deployte UI-Komponenten, die über Hosts und Plattformen hinweg koexistieren können.

Ob auf einem Maschinenpanel, einem Desktop oder einem Tablet – diese Ansätze führen zu einer gemeinsamen Vision:
Nachhaltige, anpassungsfähige und wirklich moderne UX – einmal entwickelt, überall lauffähig.