© Denys Koltovskyi/Shutterstock.com
Cross-Plattform-Desktopsoftware mit ASP.NET Core

Electron.NET - das Oberflächen-API


Das klassische .NET Framework wurde von Microsoft komplett neu entwickelt. Das Ergebnis heißt jetzt .NET Core. Das besondere an der Wiedergeburt ist, dass es auf allen gängigen Plattformen wie Windows, Mac und Linux läuft. Nur bietet Microsoft hierbei keine GUI-Lösung. Der Nachfolger der WPF, die UWP, läuft nun mal nur auf Windows 10. Eine Einschränkung, die das Potenzial von .NET Core nicht ausschöpft. Inspiriert vom Open-Source-Framework Electron, war das die Geburtsstunde von Electron.NET.

Das GitHub-Team hat nicht nur eine tolle Open-Source-Plattform ins Leben gerufen, sondern auch eigene interessante Open-Source-Projekte. Eines davon ist Electron. Ursprünglich hieß es Atom Shell und diente als Cross-Platform-Desktoplösung für ihre hauseigene Entwicklungsumgebung Atom. Diese sollte auf Windows, Mac und Linux laufen. Die innovative Architektur und Performance steigerten die Beliebtheit von Electron. Microsoft selbst setzt darauf und nutzt es für die neue Entwicklungsumgebung Visual Studio Code. Ebenfalls beteiligen sich Microsoft und viele andere große Firmen an der Weiterentwicklung von Electron. Kurz zusammengefasst: Electron ist eine solide und ausgereifte Technologie für Cross-Platform-Desktoplösungen.

Von Electron zu Electron.NET

Die Laufzeitumgebung von Electron ist Node.js. Somit werden die Prozesse hauptsächlich in JavaScript geschrieben – ein Problem für den leidenschaftlichen .NET-Entwickler. Das erkannten die beiden Autoren, und das war die Geburtsstunde von Electron.NET, das jetzt kostenlos und Open Source zur Verfügung steht [1]. Dabei erfindet Electron.NET das Rad nicht neu, sondern baut auf dem soliden Electron auf. Das bringt einige Vorteile mit sich, wie zahlreich vorhandene API-Funktionen, Stabilität und eine große Community.

Die Anatomie

Aus Architektursicht hostet eine fertige Electron-Anwendung das ASP.NET-Core-Projekt. Über das Electron.NET API von Electron.NET kann dann auf das Standard-Electron-API [2] zugegriffen werden. Dieses beinhaltet zahlreiche Funktionen für den Zugriff auf plattformspezifische Funktionen, wie zum Beispiel das Auslösen von Benachrichtigungen (Push Notifications), Anzeige eines Tray-Icons, Zugriff auf den Zwischenspeicher und vieles mehr. Funktionen für das Management des Lebenszyklus der Anwendung sind ebenfalls zahlreich vorhanden. Der .NET-Entwickler hingegen spürt überhaupt nichts aus dieser JavaScript-Welt. Er kann wie gewohnt mit C# arbeiten und dennoch auf die ganze Vielfalt von Electron zugreifen.

Hallo Electron.NET-Welt!

Gehen wir gemeinsam auf die Reise und erkunden Schritt für Schritt die Möglichkeiten von Electron. NET. Die Systemvoraussetzungen entsprechen denen, die .NET Core 2 vorgibt [3]. So wird eine Installation von .NET Core 2 SDK und mindestens Node.js v8.6.0 benötigt. Die Entwicklungsumgebung ist Visual Studio 2017. Aus den Projektvorlagen wählen wir eine ASP. NET Core Web Application. Der Name lautet hierbei „HalloElectronNET“ (Abb. 1).

biswanger_electron_1.tif_fmt1.jpgAbb. 1: Ein neues ASP.NET-Core-Projekt anlegen

Der nächste Dialog bietet die Auswahl der unterschiedlichen Architekturstile. Hierbei ist relevant, ob eine Server-side-App oder Client-side-App zum Einsatz kommen soll. Im Prinzip unterstützt Electron.NET beides. Regulär wird für eine Electron-App eine Client-side-App, auch Single Page Application, bevorzugt. Das liegt daran, dass die Anwendung bei einer Server-side-App ein kurzes Flackern erhält, wenn zwischen den unterschiedlichen Seiten navigiert wird. Der Effekt kommt daher, dass der Server nochmal die komplette Webseite neu lädt. Für Client-side-Apps gibt es auch zwei Frameworks, die sich stark etabliert haben: Angular und React. Diese beiden werden ebenfalls im Dialog angeboten. Bei einem realen Projekt sollte man sich dann für eines der beiden entscheiden. Gehen wir davon aus, dass Sie bereits eine ASP.NET-Core-MVC-Webseite haben, dann unterstützt Electron.NET auch einen Hybridsupport. Wählen wir daher Web-Application (Model-View-Controller) aus. Wichtig: Achten Sie ebenfalls darauf, dass im Dialog oben .NET Core in Version 2 ausgewählt ist (Abb. 2).

biswanger_electron_2.tif_fmt1.jpgAbb. 2: MVC-Projektvorlage auswählen mit .NET Core 2

Das Electron.NET API einbinden

Für die Unterstützung von nativen Electron-API-Befehlen und den Zugriff darauf wird die Electron.NET API Library benötigt. Diese wird über NuGet zur Verfügung gestellt, die Installation erfolgt daher wie gewohnt mit dem NuGet Package Manager: PM> Install-Package ElectronNET.API

Nach dem Einbinden der Electron.NET API Library muss der vorhandene Webhoster in der Program.cs-Datei mit einer UseElectron WebHostBuilder-Extension erweitert werden (Listing 1).

Listing 1: Electron.NET in der „Program.cs“-Datei aktivieren

using ElectronNET.API; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; namespace HalloElectronNET { public class Program { public static void Main(string[] args) { BuildWebHost(args).Run(); } public static IWebHost BuildWebHost(string[] args) => WebHost.CreateDefaultBuilder(args) .UseStartup<Startup>() .UseElectron(args) .Build(); } }

Im eigenen Desktopfenster anzeigen

Die ASP.NET-Core-Anwendun...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang