BLAZOR

Wer bisher .NET Desktop-Applikationen für Windows, MacOS und Linux entwickeln wollte, musste zumindest den UI-Layer auf die jeweilige Zielplattform portieren. Das war bei sehr simplen Oberflächen noch mit relativ überschaubarem Aufwand möglich. Doch UI-Toolkits wie WPF, Cocoa und GTK sind in ihrer Architektur und ihren Möglichkeiten derart grundverschieden, dass es nur in sehr wenigen Fällen sinnvoll war, eine komplexere Anwendung für jedes dieser UI-Toolkits separat zu implementieren.

Über diese Art von Cross-Plattform-Desktop-Entwicklung habe ich bereits vor zwei Jahren einen Blogpost geschrieben, als wir unseren eigenen Zeiterfassungs-Client mithilfe von Xamarin umgesetzt hatten. Da die Benutzeroberfläche des Clients minimalistischer war, als das Interieur einer Gummizelle, hielt sich der Aufwand der UI-Anpassung enorm in Grenzen.

Steigende Ansprüche

Doch Ansprüche steigen – auch die eigenen. So kam von Seiten des Projektmanagements der Wunsch auf, neben dem Erfassen von Projektarbeitszeiten, auch das Stempeln auf einzelne GitLab-Issues zu ermöglichen und die Verbesserung der allgemeinen Bedienbarkeit war allen im Team ein Anliegen. Im Zuge dessen war es dann auch an der Zeit, endlich ein durchdachtes Design für den Client zu entwickeln.

Die Anforderungen waren kompromisslos und zeigten deutlich auf, dass UX- und UI-Design weit mehr sind, als das hübsche Aussehen einer Anwendung. Vor allem für das Developer-Team war es wichtig, dass der Client blitzschnell funktioniert. Umstempeln, die Issue-Suche, Kommentare schreiben und editieren – nichts davon sollte länger als drei Sekunden dauern und alles davon sollte ohne Maus und global im gesamten Betriebssystem funktionieren, dabei aber auch eine zum jeweiligen OS passende User-Experience bieten.

Als unsere Designerin Corina schließlich die ersten Entwürfe präsentierte, blieben uns Entwicklern gleich zweimal die Münder offen stehen. Erstens angesichts des funktionalen Bedienkonzeptes und des optisch ansprechenden Designs und gleich darauf beim Gedanken an die Umsetzung.

Uns wurde schnell klar, dass wir mit unseren bestehenden UI-Toolkits diese Qualität nicht in einem angemessenen Zeitrahmen auf Windows-, Mac- und Linux-Bildschirme würden zaubern können.

Doch als hätte Hollywood unsere Entwicklungsgeschichte geschrieben, kam die Lösung genau zur richtigen Zeit und in Form einer neuen, noch experimentellen Technologie: Blazor.

Deus ex Machina

Kurz gesagt: Blazor ist ein neues .NET Web-Framework von Microsoft, mit dem interaktive, webbasierte Oberflächen mittels C#, HTML und CSS umgesetzt werden können. Die ganze Logik und das UI-Rendering finden entweder im Browser mittels Web-Assembly statt, oder auf dem Server, von dem die UI-Deltas mittels Websocket Connection auf den Client übertragen werden.

Bereits im Frühjahr des letzten Jahres hatten wir Gelegenheit, uns das Framework im Rahmen eines Prototyps anzusehen. Zwar waren wir damals nicht ganz sicher, ob Blazor aus dem experimentellen Stadium rauskommen würde, doch die Hoffnung war da und wurde glücklicherweise nicht enttäuscht. Mittlerweile ist klar, dass Blazor eine große Zukunft hat, und als offizielles Projekt im .NET-Universum weiterentwickelt wird.

Plattformübergreifende Umsetzung mit Blazor

Für unseren Time-Tracking-Client beschlossen wir, Blazor mit Electron zu kombinieren, um so das ehrgeizige Projekt in einer angemessenen Zeitspanne für alle drei Plattformen umzusetzen: Was für ein Trip!

Es gibt nur wenig Dinge, die bei Developern ein solches Endorphin-, Serotonin- und Dopaminhoch auslösen, wie ein perfekter Sprint. Und wir hatten gleich mehrere davon. Nach nur wenigen Wochen intensiver Entwicklung war unser Cross-Plattform-Time-Tracking-Client fertig und das Ergebnis kann sich – zumindest unserer Meinung nach – mehr als sehen lassen.

Die kurze Entwicklungszeit ist den vielen Vorteilen zu verdanken, die der Einsatz von Blazor mit sich bringt. Wir konnten unser C#/.NET-Know-how weiterverwenden und mussten für die Entwicklung nicht auf Javascript setzen. Wir hatten schließlich schon eine C#/.NET-Lösung auf der wir einfach aufbauen konnten.

The perks of using Blazor

Leichtere Implementierung
Anstelle von drei unterschiedlichen, individuellen Implementierungen braucht das UI nur mehr eine einzige, die einheitlich mittels C#, HTML und CSS umgesetzt wird.

Bestehendes Know-how nutzen
Bestehendes Web-Know-how (HTML, CSS und Frameworks) kann genutzt werden.

Selber Look auf allen Plattformen
HTML und CSS ermöglichen dasselbe Pixel-perfect UI auf allen Plattformen, ohne dabei Abstriche in der Funktionalität zu machen.

App-Logik weiter nutzen
Die bestehende C#-App-Logik (Core Layer) kann mit minimalen Anpassungen in ein neues Projekt übernommen und in vollem Umfang weiter genutzt werden.

Continuous Deployment
Das Nutzen des vorhandenen Electron-Ecosystems erlaubt es, die App mittels Continuous Deployment und Auto-Updates in einem Electron Container zu verteilen

Einfache Wartung und Erweiterung
Einfachere, schnellere, langfristige Wartbarkeit und Möglichkeiten für zusätzliche Features

Die Zukunft von Blazor

Blazor ist eine noch recht junge Technologie, die sich aber rasant weiterentwickelt und enormes Potenzial hat. Daher hat sich innerhalb kürzester Zeit eine umfangreiche und lebhafte Community gebildet, welche Dokumentation, Libraries und UI-Komponenten implementiert. Sogar große UI-Component-Hersteller wie Telerik, DevExpress und Syncfusion bieten bereits erste Blazor-Komponenten an.
Unsere Erfahrung mit der Blazor-Electron-Kombination war jedenfalls hervorragend und wir würden es für plattformübergreifende Desktop-Apps jederzeit wieder verwenden.

Das ist erst der Anfang

Für den großen Auftritt im Browser ist es derzeit allerdings noch etwas zu früh, da die Web-Assembly-Umsetzung von Blazor noch nicht so ausgereift ist, dass man es schon für Produktiv-Apps im World-Wide-Web verwenden sollte. Für interne Line-Of-Business-Apps eignet sich der „Server Side“-Modus allerdings hervorragend. Dieser kommt ganz ohne Web-Assembly aus und streamt das UI-Delta mittels SignalR-Websocket-Connection zum Browser. Die ganze Business- und UI-Logik findet dabei auf dem Server statt, womit der volle Umfang von .NET Core verwendet werden kann. Das ist auch der Modus, den wir bei unserer App innerhalb des Electron-Containers verwenden. Insbesondere wegen der praktisch nicht vorhandenen Latenz funktioniert das perfekt.

Die Zukunft sieht sehr vielversprechend aus. Wir gehen davon aus, dass Blazor in spätestens ein bis zwei Jahren auch für erste produktive, webbasierte Apps mit Web-Assembly eingesetzt werden kann. Wir werden die weitere Entwicklung jedenfalls gespannt verfolgen.