Full Stack-Webentwicklung ohne Medienbruch
Modernisierung eines kommunalen Finanzsystems
Viele Unternehmen stehen heute vor der gleichen Herausforderung: Gewachsene Desktopanwendungen erfüllen fachlich weiterhin ihren Zweck, stoßen jedoch technologisch an Grenzen. Der Schritt in die Webwelt verspricht mehr Flexibilität, Plattformunabhängigkeit und Zukunftssicherheit – ist aber häufig mit tiefgreifenden Architekturänderungen, neuen Technologien und einem erheblichen Schulungsaufwand verbunden. Dieser Artikel zeigt am Beispiel der Migration von SASKIA.H2R [1], wie sich ein komplexes, seit Jahrzehnten etabliertes Finanzsystem in eine moderne Webanwendung überführen lässt, ohne Medienbrüche in der Entwicklung zu erzeugen und ohne das bestehende C#-Entwicklerteam neu aufstellen zu müssen.
Die Ausgangslage: Desktop-Strukturen beschränken moderne Arbeitsprozesse
Die kommunale Finanzsoftware SASKIA.H2R war ursprünglich als klassische Desktop-Anwendung für Windows konzipiert und wurde in zahlreichen Verwaltungen für personal- und haushaltsnahe Prozesse eingesetzt. Über viele Jahre hinweg wurde die Lösung fachlich kontinuierlich erweitert und an neue Anforderungen angepasst. Technisch blieb sie jedoch stark an die Desktop-Welt gebunden, was sich zunehmend als Herausforderung für Weiterentwicklung und Betrieb erwies.
Zu Projektbeginn präsentierte sich die Anwendung als monolithisches Desktop-System, das lokal auf den Arbeitsplätzen der Sachbearbeiterinnen und Sachbearbeiter installiert war. Benutzeroberfläche, Geschäftslogik und wesentliche Teile der Datenzugriffe waren eng miteinander verzahnt, sodass Änderungen oder Erweiterungen häufig tiefgreifende Eingriffe in die bestehende Struktur erforderten. Diese enge Kopplung erschwerte nicht nur die Wartung, sondern erhöhte auch die Komplexität bei Fehleranalyse und Weiterentwicklung.
Als Desktopanwendung war die Flexibilität der Anwendung stark eingeschränkt. Szenarien wie ortsunabhängiges Arbeiten, Remote-Zugriffe oder der Betrieb über den Browser waren technisch kaum umsetzbar. Damit entsprach die Anwendung immer weniger den organisatorischen und technischen Rahmenbedingungen moderner Verwaltungsarbeit.
Auch das zugrunde liegende User Interface war sichtbar in die Jahre gekommen. Die Benutzeroberfläche war zwar funktional und auf Effizienz im Arbeitsalltag ausgelegt, jedoch stark formulargetrieben und nicht auf heutige Anforderungen wie responsive Layouts, moderne Interaktionskonzepte oder Barrierefreiheit ausgerichtet. Eine Anpassung an unterschiedliche Endgeräte oder neue Usability-Standards war nur mit erheblichem Aufwand möglich.
Schließlich bestand eine hohe Abhängigkeit vom bestehenden Technologie-Stack. Eine vollständige Neuentwicklung auf Basis klassischer Web-Frameworks oder moderner JavaScript SPAs hätte bedeutet, große Teile der über Jahre gewachsenen Fachlogik neu zu implementieren, die Entwicklerteams auf neue Technologien umzuschulen und damit erhebliche Projektrisiken in Kauf zu nehmen. Vor diesem Hintergrund wurde deutlich, dass eine behutsame Modernisierung mit starkem Fokus auf Investitionsschutz und technische Kontinuität erforderlich war, anstatt eines radikalen technologischen Neustarts.
Das bestehende Entwicklerteam konnte nahtlos den technologischen Umstieg begleiten und sofort in die Weiterentwicklung einsteigen. Die Produktivität gegenüber Standard-SPAs war ein wichtiger Grund für die Entscheidung für Wisej.
– Ralf Köhler (robotron, SASKIA)
Technologieentscheidung: Wisej.NET als Full Stack Web-Framework
Als Basis für den Neustart fiel die Wahl auf Wisej.NET [2], ein auf C#/.NET basierendes Web-Framework. Wisej.NET ist bekannt als "All-in-one Application Modernization Solution" und ermöglicht es, Desktop-Anwendungen für das Windows-Betriebssystem in kurzer Zeit zu Web- oder Cloud-Lösungen zu transformieren. Ein zentrales Kriterium für das vorliegende Projekt war, dass das bestehende Entwicklerteam auf seinem .NET-Wissen aufbauen konnte, ohne HTML/JavaScript lernen zu müssen.
Viele herkömmliche Web-Frameworks trennen strikt Frontend (HTML/CSS/JavaScript) und Backend (z.B. C#), was oft eine neue Teamzusammenstellung erfordert. Wisej.NET hingegen bietet eine integrierte Voll-Stack-Entwicklung: Web-UIs werden per grafischem Designer in Visual Studio erstellt, sehr ähnlich wie bei Windows Forms, und können komplett in C# gesteuert werden. Für erfahrene .NET-Entwickler ergibt sich daraus eine sehr flache Lernkurve: Sie arbeiten mit vertrauten Konzepten, z.B. Ereignisse, Steuerelemente, Layouts und müssen keine zusätzliche JavaScript- oder TypeScript-Codebasis pflegen.
Wisej.NET-Architektur und Entwicklung
Wisej.NET realisiert moderne Webanwendungen konsequent nach dem Paradigma klassischer Desktop-Anwendungen, jedoch vollständig im Browser. Technisch handelt es sich um Single-Page-Webanwendungen (SPA), die vollständig im .NET-Ökosystem entwickelt und betrieben werden. Entwickler arbeiten dabei nahezu ausschließlich mit C# und den bekannten .NET-Konzepten, ohne sich tiefgehend mit klassischen Webtechnologien wie JavaScript-Frameworks, Client State Management oder REST APIs auseinandersetzen zu müssen.
Im Kern folgt Wisej.NET einem serverseitigen, zustandsorientierten Architekturmodell
Die komplette Geschäftslogik sowie der UI-Zustand laufen auf dem Server innerhalb einer ASP.NET-Anwendung. Der Browser fungiert primär als Darstellungs- und Interaktionsschicht:
- Die UI-Logik, wie Events, Validierungen, Zustandsänderungen, wird vollständig serverseitig in C# verarbeitet.
- Jede Benutzerinteraktion, z.B. Klicks, Texteingaben, Selektionen, wird an den Server übertragen und dort ausgewertet.
- Der aktuelle Zustand der Oberfläche bleibt konsistent auf dem Server erhalten – ähnlich wie bei Windows Forms oder WPF.
Dieses UI-Modell unterscheidet Wisej.NET grundlegend von klassischen Web-Frameworks wie ASP.NET MVC oder modernen JavaScript SPAs, bei denen Zustandsverwaltung, Routing und Synchronisation zwischen Client und Server explizit implementiert werden müssen. In Wisej.NET entfallen viele dieser Komplexitäten, was insbesondere bei datengetriebenen Business-Anwendungen ein großer Vorteil ist.
Die Kommunikation zwischen Server und Client erfolgt standardmäßig über WebSockets. Sollte diese Technik nicht verfügbar sein, z.B. durch restriktive Firewalls, greift Wisej.NET automatisch auf AJAX-basierte Fallback-Mechanismen zurück. Ein zentrales Architekturmerkmal von Wisej.NET ist das sogenannte Delta-Rendering. Dabei werden nicht komplette Seiten, Views oder UI-Strukturen an den Client übertragen, sondern ausschließlich die Teile der Benutzeroberfläche, die sich tatsächlich geändert haben. Änderungen an Textinhalten, Sichtbarkeiten, Styles oder Datenlisten werden als minimale Zustandsdifferenzen vom Server an den Browser gesendet.
Der Client setzt diese gezielt in der bestehenden Oberfläche um, ohne einen vollständigen Neuaufbau der UI vornehmen zu müssen. Auf diese Weise bleiben die übertragenen Datenmengen sehr gering, was nicht nur die Netzwerklast reduziert, sondern auch eine hohe Reaktionsgeschwindigkeit der Anwendung sicherstellt. Selbst komplexe, datenintensive Oberflächen können dadurch flüssig und nahezu in Echtzeit aktualisiert werden, ohne dass klassische Seitenreloads oder umfangreiche clientseitige Re-Renderings erforderlich sind. Aus Sicht des Entwicklers wirkt dieses Verhalten transparent: Änderungen an Controls erfolgen wie bei einer Desktop-Anwendung, die Synchronisation übernimmt das Framework automatisch.
Wisej.NET stellt einen umfangreichen und praxisnahen Satz vorgefertigter UI-Steuerelemente zur Verfügung, der sich stark an den aus der Desktop-Entwicklung bekannten Controls orientiert. Dazu zählen klassische Standard-Controls wie Buttons, TextBoxen, Listen, Panels und Dialoge ebenso wie komplexere Komponenten, etwa DataGrids, TreeViews, TabControls oder Chart-Elemente für die Visualisierung von Daten. Ergänzt wird dieses Angebot durch spezielle Erweiterungen zur Unterstützung responsiver Layouts sowie zur Optimierung der Bedienung auf Touch-fähigen Endgeräten, sodass die Oberflächen sowohl auf klassischen Desktop-Arbeitsplätzen als auch auf Tablets oder hybriden Geräten sinnvoll nutzbar sind. Zusätzlich gibt es die Möglichkeit, JavaScript Controls von Drittanbietern in dieses Konzept einzubinden.
Die Entwicklung erfolgt primär in Visual Studio und unterstützt dabei zwei etablierte und sich ergänzende Arbeitsweisen. Zum einen steht ein visueller Designer zur Verfügung, in dem UI-Steuerelemente per Drag-and-Drop platziert, angeordnet und konfiguriert werden können. Diese Arbeitsweise erinnert an die Arbeit mit Windows Forms. Zum anderen ermöglicht Wisej.NET eine vollständig deklarative und codebasierte Entwicklung, bei der Eigenschaften, Layouts und die zugehörige Logik direkt im Code beziehungsweise im Code-Behind definiert werden.
Diese Flexibilität erlaubt es Entwicklerteams, je nach Projektphase, persönlicher Präferenz oder Migrationsszenario zwischen visueller Gestaltung und rein programmatischem Ansatz zu wechseln oder beide Methoden sinnvoll zu kombinieren. Dieses Entwicklungsmodell erleichtert insbesondere die Migration bestehender Desktop-Anwendungen, da bekannte Patterns (Event-Handler, Data Binding, UI-Logik im Code-Behind) beibehalten werden können.
Wisej.NET unterstützt klassisches Data Binding, sowohl einfach (z.B. zwischen TextBox und Property) als auch komplex (z.B. zwischen DataGrid und Collection). Änderungen an Datenmodellen spiegeln sich automatisch in der Oberfläche wider, ohne explizite Synchronisationslogik.
Ein weiteres zentrales Merkmal von Wisej.NET ist das ausgereifte Theming- und Styling-System, das die Gestaltung moderner und zugleich konsistenter Benutzeroberflächen unterstützt. Die Anwendung kann durch flexible Layoutcontainer an unterschiedliche Bildschirmgrößen und Endgeräte angepasst werden, wodurch Responsive Design ohne tiefgreifende Änderungen an der Anwendungslogik realisierbar ist.
Darüber hinaus lassen sich Styles dynamisch zur Laufzeit verändern, etwa um unterschiedliche Themes bereitzustellen oder zwischen einem hellen und einem dunklen Darstellungsmodus zu wechseln. Trotz der Nutzung von CSS als technischer Grundlage bleiben diese Themes vollständig in das serverseitige UI-Modell integriert. Stiländerungen werden somit zentral gesteuert und automatisch mit dem aktuellen UI-Zustand synchronisiert, ohne dass zusätzliche clientseitige Logik erforderlich ist. Dadurch lassen sich klassische, formularlastige Desktop-Layouts schrittweise in moderne, browserfähige und responsive Web-Oberflächen überführen, ohne das zugrundeliegende Anwendungsdesign komplett neu zu denken.
Ergebnisse der Migration
Das Migrationsprojekt SASKIA.H2R startete im November 2022. Bereits im Februar 2023 konnte das Team der Migrationsexperten der fecher GmbH [3] in Zusammenarbeit mit dem Team von SASKIA robotron den ersten lauffähigen Prototyp erstellen. Anfängliche Tests mit externen UI-Bibliotheken zeigten, dass diese zwar ansprechend aussahen, aber deutlich langsamer arbeiteten. Deshalb nutzte das Team schließlich die integrierten Wisej.NET-Steuerelemente, insbesondere das DataGrid, was einen Schub in der Performance brachte. Durch diesen Ansatz konnte auf einfache Weise ein performantes Interface realisiert werden, ohne externe Abhängigkeiten.
Ein wichtiges Element war der Wisej.NET Theme Builder: ein separates Werkzeug, mit dem das Aussehen der Anwendung zur Laufzeit zentral gestaltet werden kann. So ließ sich etwa verschachtelte Layoutlogik ändern, ohne jeden Dialog einzeln anzupassen. In einem Fall mussten Hunderte von Feldbeschriftungen über allen Eingabeoberflächen einheitlich nach oben verschoben werden. Dieses Problem hätte konventionell enorme manuelle Arbeit erfordert – dank des Theme Builders konnte es hingegen mit einem Handgriff in allen Formularen gelöst werden.
Dieses Beispiel demonstriert die Flexibilität des Frameworks: Im Anschluss initiierte das Team sogar eine zweimonatige komplette Neugestaltung des UI-Designs. Dank des Theming-Systems ließ sich das neue Design schnell umsetzen, was in weniger anpassungsfähigen Umgebungen kaum möglich gewesen wäre. Der Theme Builder verwaltet Stile, Symbole und Widget-Eigenschaften zentral in einer JSON-Konfigurationsdatei und kann eigenständig von UI-Designern bedient werden.
Das Ergebnis der Migration ist eine moderne Webanwendung, die die bisherige Windows-Desktop-Applikation vollständig ablöst und dabei sämtliche Funktionen des Finanzverfahrens beibehält. Seit Frühjahr 2024 läuft die Software plattformunabhängig im Browser – mit vollem Funktionsumfang und frischem Design. Abbildung 2 zeigt zum Vergleich die alte Windows-Oberfläche und die neue Web-Oberfläche von SASKIA.H2R.
Parallel konnte SASKIA® den bewährten Bedienkomfort erhalten: Die Migration fand in enger Zusammenarbeit mit den Fachentwicklern statt und es blieben zum Beispiel die gewohnten Tastatur-Workflows vollständig erhalten. Zugleich wurde die Oberfläche für künftige Szenarien fit gemacht: Mobile Endgeräte und Linux-Systeme, z.B. Container- oder Cloud-Betrieb, sind über Progressive Web App oder .NET Core Hosting bereits eingeplant.
Die zentralen Ergebnisse des Projekts im Überblick:
- Web-Ablösung der Windows-App: SASKIA.H2R wurde komplett als Webanwendung realisiert, ohne Funktionseinschränkungen.
- Plattformfreiheit: Die Anwendung kann in einem beliebigen Browser oder als Container-App betrieben werden.
- Flache Lernkurve: Die Umstellung erfolgte durch das bestehende C#-Team, das seine Kenntnisse praktisch unverändert weiterverwenden konnte.
- Kein zusätzliches Personal: Trotz der umfangreichen Umstellung musste das Entwicklerteam nicht vergrößert werden.
Fazit
SASKIA.H2R zeigt exemplarisch, dass ein groß angelegtes Desktop-Anwendungs-Portfolio ohne großen Overhead ins Web überführt werden kann. Die Migration erfolgte in überschaubarer Zeit und ohne technische Kompromisse. Die vollständigen Geschäftsprozesse laufen nun im Browser, inklusive aller Verwaltungsschnittstellen. Dabei blieben die Effizienz und Produktivität des bestehenden Entwicklerteams hoch, da es seine bewährte .NET/C#-Entwicklungsumgebung beibehalten konnte.
Ein wesentlicher Punkt war das Entfallen des “Medienbruchs“ zwischen Desktop- und Webentwicklung: Backend- und UI-Logik vereinen sich in einer Technologie, was Implementierung und Wartung vereinfacht. Insgesamt demonstriert das Projekt, dass moderne Web-Frontends für etablierte Client-Server-Systeme mit vertretbarem Aufwand realisierbar sind – ohne neue Teams, Kompromisse bei Funktion oder Performance und mit allen Vorteilen einer zeitgemäßen, browserbasierten Architektur.
- SASKIA Informations-Systeme GmbH – IT-Lösungen für die öffentliche Verwaltung
- Wisej.com – Web Framework für Enterprise Applikationen
- Modernizing Applications – Expertenportal für Software-Modernisierung
