Migration von WPF-Desktop Anwendungen zu Single Page Web-Apps

Das Ziel ist eine umfassende werkzeugunterstützte Softwaremigration von WPF-Anwendungen zu Web-Applikationen. In diesem Abschnitt skizzieren wir das mögliche Vorgehen. Zum Einsatz kommt das Framework Wisej.NET [1]. Es ist hilfreich, sich den typischen Aufbau (Architektur) einer WPF-Applikation anzusehen. Von Microsoft empfohlen und vielfältig in der Praxis eingesetzt ist das Model View ViewModel (MVVM)-Pattern. Die Nutzung des MVVM-Patterns sorgt für eine klare Trennung zwischen der Darstellung einer Benutzeroberfläche (UI) und der Logik der Benutzerinteraktion, welche die Daten manipuliert. Dies wird erreicht, indem die UI-Entwicklung (View) von der Geschäftslogik (Model) durch das ViewModel entkoppelt wird (Abb. 1).

Model
Das Model repräsentiert die Daten und die Geschäftslogik der Anwendung. Es ist verantwortlich für den Zugriff auf die Datenquelle (z.B. Datenbanken, Web-Services) und deren Manipulation. Das Model enthält keine Informationen über die Benutzeroberfläche und interagiert nicht direkt mit der View. Es kann jedoch Benachrichtigungen über Datenänderungen senden, meist durch Implementierung von Patterns wie Observer.

View
Die View ist die Benutzeroberfläche der Anwendung. Diese enthält die UI-Elemente (z.B. TextBox, Button, Label, DataGrid), welche die Daten anzeigen und mit denen der Benutzer interagiert. Die View ist ausschließlich für die Darstellung der Benutzeroberfläche zuständig und sollte keine direkten Datenmanipulationen oder Geschäftslogik enthalten. Es erfolgt eine Interaktion mit dem ViewModel, um Daten darzustellen oder Benutzereingaben weiterzuleiten. Typischerweise verwendet die View Datenbindung (Data Binding), um sich mit dem ViewModel zu synchronisieren und automatisch aktualisiert zu werden, wenn sich Daten im ViewModel ändern.

ViewModel
Das ViewModel ist eine Abstraktion der View und fungiert als Bindeglied zwischen dem Model und der View. Es empfängt Daten vom Model, die es verarbeitet, so dass diese einfach von der View dargestellt werden können. Das ViewModel beinhaltet die Präsentationslogik, die benötigt wird, um die Elemente der View zu steuern, aber es weiß nichts über die spezifischen Details der Views, was bedeutet, dass es keine direkte Referenz auf die UI-Komponenten hat. Es nutzt Konzepte wie Befehle (Commands) und Datenbindung, um Aktionen auszulösen, die von der UI initiiert werden und um Änderungen in der View zu reflektieren.

Bei der Softwaremigration einer WPF-Anwendung zu einer Web-Applikation sollten diese Anwendungsschichten grundsätzlich erhalten bleiben. Dazu kommt das Web-Framework Wisej.NET [2] zum Einsatz. Es ist .NET basiert und bietet eine umfangreiche Unterstützung für die Umsetzung von Rich Internet Applications, die sich durch eine desktopähnliche Benutzererfahrung auszeichnen. Wisej.NET kommt mit einer umfassenden Bibliothek von vordefinierten Steuerelementen, die speziell für die Anforderungen von Unternehmensanwendungen entwickelt wurden. Das UI wird komplett im Designer von Visual Studio erstellt. Die ursprüngliche Anwendungslogik der .NET-Applikation (in diesem Fall einer WPF-Anwendung) wird vom Client auf den Server verlagert. Auf der Serverseite werden die .NET Steuerelemente verwendet. Wisej.NET-Widgets bilden die serverseitigen verwendeten Komponenten für das User Interface eins zu eins im Browser ab. Es handelt sich um JavaScript-Klassen auf der Grundlage der Bibliothek qooxdoo [3], welche durch Wisej.NET erweitert werden. Das User Interface wird durch das entsprechende JavaScript-Widget gerendert. Für eine hohe Reaktionsfähigkeit sorgt ein optimierter Datenaustausch zwischen Client und Server. Dazu wird das SPA-Konzept realisiert, eine HTML-Seite wird geladen und dann werden die einzelnen Objekte manipuliert, um einen geänderten Anwendungsinhalt anzuzeigen. Dies geschieht optimiert mit Hilfe der Fast-DOM Technik. Im Übrigen können sowohl Anwendungen mit dem klassischen .NET-Framework (bis Version .NET-Framework 4.8) als auch mit Applikationen auf der Basis von .NET (ehemals .NET Core) für die Migration verwendet werden.

Während Wisej.NET eine nahezu automatisierte Migration von WinForms-Anwendungen ermöglicht, ist bei der Migration von WPF-Anwendungen etwas mehr Aufwand notwendig. Wisej.NET bildet die Standard UI-Controls von WinForms nahezu 1:1 als JavaScript-Controls nach. Eigenschaften, Verhalten und Events sind dabei identisch. Daher ist der Migrationsaufwand hier stark reduziert. Bei WPF-Anwendungen wird das UI deklarativ mittels XAML-Code erstellt. Es ist daher für die Migration zur Web-Applikation neu zu erstellen. Für jedes UI-Control aus der WPF-Anwendung ist eine adäquate Alternative in Form eines Wisej.NET-Controls zu ermitteln. Das Erstellen der Benutzeroberfläche wird dabei durch den Einsatz des grafischen Designers in Visual Studio erleichtert, d.h. das gesamte UI kann intuitiv erstellt werden.

Wisej.NET bietet für jedes Element eine Möglichkeit der Datenbindung. Diese Funktion wird genutzt, um die Architektur der bestehenden WPF-Applikation auf der Basis des MVVM-Konzeptes beizubehalten. Dazu wird die Implementierung der Datenbindung von XAML-Code (View) in den C#-Code (View) der neuen Applikation verschoben. Die anderen Schichten der Anwendung, d.h. die ViewModel- und Model-Dateien können unverändert übernommen werden. Tabelle 1 listet die notwendigen Maßnahmen bei der Migration einer WPF-Anwendung zu einer Wisej.NET basierten Web-Applikation im Detail auf.

Anhand eines einfachen Beispiels wird die Vorgehensweise demonstriert. Ausgangspunkt ist die übliche Situation in einer WPF-Applikation. Das User Interface wurde mittels XAML-Code und einem grafischen Designer in Visual Studio erstellt (Abb. 2).

Es lassen sich die typischen Merkmale einer solchen WPF-Applikation ausmachen:

Die Migration basiert auf den folgenden Merkmalen bzw. Schritten:

• Das neu gestaltete UI verwendet die modernen UI-Controls, beispielsweise ein DataGrid. Diese UI-Controls sind JavaScript-Controls, welche über CSS an moderne Themen (Theming) angepasst werden. Dazu kann man beispielsweise die Themen Bootstrap oder Material Design wählen und auf diese Weise die gesamte Applikation mit einem frischen Look & Feel versehen.
• Wisej.NET bietet unterschiedliche Layout-Container, welche eine einfache responsive Gestaltung der Web-App ermöglichen. Das sorgt für eine korrekte Darstellung auf unterschiedlichen Bildschirmgrößen und -auflösungen.
• Die Datenbindung erfolgt in der Web-App auf einfache Art und Weise in den Code-Behind-Dateien. Hier werden die betreffenden Eigenschaften der UI-Elemente an die Eigenschaften des ViewModels gebunden. Für die Collection-Eigenschaft des Beispiels sieht das wie folgt aus:

  dataGridView1.DataSource = viewModel.Persons;

Es wird die DataSource-Eigenschaft des DataGrid-Controls an die Eigenschaft Persons (Datentyp: ObservableCollection<Person>) im ViewModel gebunden. Damit werden die Daten zwischen dem ViewModel und der View (UI, DataGrid) synchronisiert.

• Im ViewModel werden für die Benutzerinteraktionen die Commands modifiziert. In der ursprünglichen WPF-Version der Anwendung gab es beispielsweise den folgenden typischen Quellcode für ein Command, welcher ein Objekt der Klasse Person zur Liste der Personen (Persons) ergänzt:

// Command definieren
public RelayCommand AddItem { get; set; }

// Command im Konstruktor der Klasse initialisieren
public PersonViewModel()
{
    	AddItem = new RelayCommand(AddItemCommandExecute);       
    	…


}

// Execute-Methode (ausführbare Methode) des Commands
private void AddItemCommandExecute()
{
    Person p = new Person() { Id=persons.Count, FirstName = "Ben", Name = "Müller" };
    Persons.Add(p);
}

Die Klasse RelayCommand stammt dabei beispielsweise aus einem Framework zur einfachen Umsetzung des MVVM-Patterns oder ist in einer selbst erstellten Basisklasse definiert. Diese Basisklasse stellt die Funktionalität für ein Command zur Verfügung. Dieser Quellcode muss nur minimal für die Web-Version angepasst werden:

// Command definieren
public Command AddItemCommand { get; set; }

// Command initialisieren und Ausführungsmethode zuweisen
AddItemCommand = new Command(
execute: args =>
{
    Person p = new Person() { Id = persons.Count, FirstName = "Ben", Name = "Müller" };
    Persons.Add(p);
});

Die neue Basisklasse Command stammt aus dem Framework Wisej.NET und sorgt dafür, dass die Eigenschaften der Web-Komponenten an den Quellcode gebunden werden können. Das bestehende Command aus der WPF-Applikation muss also lediglich in Bezug auf den Datentyp angepasst werden. Weitere Änderungen sind nicht notwendig.

Mit Hilfe dieser geringen Anpassungen im Quellcode und der Gestaltung des User Interfaces kann eine Desktop-Applikation auf der Basis des Grafik-Frameworks Windows Presentation Foundation technisch zu einer modernen Web-Applikation migriert werden. Die Funktionen der Anwendung bleiben erhalten. Im nächsten Schritt können weitere Anpassungen und Modernisierungen der Applikation vorgenommen werden.