HTML5 ist überall - im Web, Mobile und natürlich auch auf den Desktop. Die große Stärke an HTML5 ist nicht nur, dass diese Plattform übergreifend unterstützt wird, sondern dass es immer mehr Features aus der Desktop-Welt bietet. Dennoch erfordert die Entwicklung von Desktop Anwendungen auf Basis von HTML & JavaScript neue Frameworks und Sprachen. Das Open Source Projekt Electron.NET verbindet ihr bekanntes C# & ASP.NET Core KnowHow mit den Möglichkeiten von Electron. In Kombination von C# und HTML5 können hoch performante Desktop Geschäftsanwendung für Windows, Mac und Linux entwickelt werden. Sie steigen mit den Grundlagen von Electron.NET ein und werden dann mit den wichtigsten Tools und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Platform Entwickler mit .NET auf.

1. Electron.NET
Cross-Platform Desktop Software mit
ASP.NET Core
Gregor Biswanger | Freier Berater, Trainer und Autor
about.me/gregor.biswanger

2. Über mich
▪ Freier Berater, Trainer und Autor
▪ Schwerpunkte: Softwarearchitektur, Web und
Cross-Plattform Entwicklung mit JavaScript
▪ Technologieberater für die Intel Developer Zone
▪ Internationaler Sprecher auf Konferenzen und
User Groups
▪ Freier Autor für heise.de, dotnetpro,
WindowsDeveloper und viele weitere
Fachmagazine
▪ Video-Trainer bei video2brain und Microsoft
Gregor Biswanger
Microsoft MVP, Intel Black Belt &
Intel Software Innovator
cross-platform-blog.de
about.me/gregor.biswanger

3. Unser Reiseplan
▪ Was ist Electron?
▪ Was ist Electron.NET?
▪ „Meine erste Electron.NET App“
▪ Debuggen
▪ Die Electron.NET Architektur
▪ Die Kommunikation zwischen Prozessen
▪ Builden

4. Einstieg in
Electron
Cross-Platform Desktop Apps

5. Electron
▪ Open-Source auf GitHub von GitHub
▪ Der Name war erst „Atom Shell“
▪ Es ermöglicht die Ausführung von Desktop-
Anwendungen mithilfe des Webbrowsers
Chromium und des Node.js-Frameworks
▪ Läuft auf Windows, Mac und Linux
▪ Vorteile:
▪ Wir sind nicht mehr in der Sandbox
▪ Einfache Bereitstellung ohne notwendige
Frameworks Installation (z.B. Java oder .NET)
▪ Einfache Update-Strategien
▪ Läuft ideal offline
Download
npm install electron

6. Apps Built on Electron

8. Oktober 2017 war die Geburtsstunde von Electron.NET!

9. Electron.NET
▪ Open-Source auf GitHub
▪ Es ermöglicht die Ausführung von Desktop-
Anwendungen mithilfe von Electron und ASP.NET Core
▪ Läuft auf Windows, Mac und Linux
▪ Systemvoraussetzung:
▪ Die gleichen von .NET Core 2
▪ Node.js ab Version 8
▪ Vorteile:
▪ Electron-API mit C# Support
▪ Wir sind nicht mehr in der Sandbox
▪ Einfache Bereitstellung ohne notwendige Frameworks
Installation (z.B. Java oder .NET)
▪ Einfache Update-Strategien
▪ Läuft ideal offline
GitHub
github.com/ElectronNET/Electron.NET

10. Bestandteile von Electron.NET
Electron.NET API Electron.NET CLI
▪ Hängt sich an den Prozess von
Electron
▪ Zugriff auf die Electron API via C#
▪ Führt die .NET-Anwendung als
Electron-APP aus
▪ Erzeugt Ausführbare Assemblies für
die unterschiedlichen Plattformen

11. Meine erste
Electron.NET App
Die ersten Schritte

12. Meine erste Electron.NET App in 3 Schritten
1. Neues ASP.NET Core Projekt anlegen
▪ Empfohlen wird eine Singe-Page App-
Architektur mit Angular oder React
2. Electron.NET API über NuGet Installieren
▪ PM> Install-Package ElectronNET.API
3. Die UseElectron WebHostBuilder-Extension
einbinden
public static IWebHost BuildWebHost(string[] args)
{
return WebHost.CreateDefaultBuilder(args)
.UseElectron(args)
.UseStartup<Startup>()
.Build();
}
Program.cs

13. Aber bitte mit Fenster!
▪ Electron.NET wird als Prozess
im Hintergrund ausgeführt
▪ Wenn die Anwendung nicht als
Hintergrund-Prozess geplant
wird, sollte beim Starten ein
Hauptfenster erzeugt werden
mit dem
Electron.WindowManager
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
// Open the Electron-Window here
Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}
Startup.cs

14. Electron.NET CLI Installation
▪ Electron.NET CLI über die
Projektdatei per XML registrieren
▪ Aktuell leider nur über diesen
Weg möglich 
▪ Anschließend in der Console
innerhalb vom Projekt folgendes
Ausführen:
▪ dotnet restore
▪ Die Electron.NET CLI steht dann
über mit folgenden Command zur
Verfügung:
▪ dotnet electronize
..
<ItemGroup>
<DotNetCliToolReference Include="ElectronNET.CLI" Version="*" />
</ItemGroup>
..
Projektname.csproj-Datei

15. Electron.NET Projekt initialisieren
▪ Die Electron.NET CLI benötigt für das
Ausführen und das Erzeugen eine
eigene Konfigurationsdatei
▪ electron.manifest.json
▪ Diese wird erzeugt mit:
▪ dotnet electronize init

16. Electron.NET App starten
▪ In der Console innerhalb vom Web-
Projekt folgendes eingeben:
▪ dotnet electronize start
▪ Wichtig! Der erste Start dauert etwas.
Das liegt daran, das Electron und
einige weitere Pakete installiert
werden

17. Electron.NET bietet einen Hybrid-Support
▪ Wenn die Anwendung ebenfalls
über einen Web-Server
bereitgestellt wird, muss der
Zugriff auf die Electron.NET API
abgefangen werden
▪ Dazu bietet Electron.NET eine
eigene Abfrage an mit:
▪ HybridSupport.IsElectronActive
Startup.cs
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
...
// Open the Electron-Window here
if(HybridSupport.IsElectronActive)
{
Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}
}

18. Debuggen Die ersten Schritte

19. Electron.NET App Debuggen
▪ Für das Debuggen gibt es zwei
Möglichkeiten:
1. Das Ausführen der App über
die Electron.NET CLI, dann mit
Visual Studio sich auf den
laufenden Prozess hängen
2. Die Chrome Developer Tools
nutzen für das direkte
Debuggen der View
▪ [Strg] + [Shift] + [ i ]
Oder

20. Die Electron.NET-
Architektur
Die Anatomie

21. Plattform (Betriebssystem)
Native App (Electron-Executable)
Node.js (Backend – Main Process)
Electron.NET Architektur
RendererProcess
Chromium (Browser)
API
(Node.js Modules)
require
Sensoren (Hardware)
.NET Core /
ASP.NET Core
(Main Process)
HTML5 und CSS (Frontend)

22. Electron Architektur

23. Main Process (Hauptprozess)
▪ Haupteinstiegspunkt der App
▪ Laufzeitumgebung Node.js
▪ Wichtig! Electron bringt immer eine eigenständige
Node-Version mit sich
▪ Kontrolliert das Leben der App
▪ Es verwaltet auch native Elemente wie Menü,
Menüleiste, Dock, Tray usw.
▪ Der Hauptprozess ist verantwortlich für die
Erstellung jedes neuen Renderers in der App
▪ Bei Electron.NET startet dieser zusätzlich die .NET
Core Anwendung

24. Renderer Process
▪ Der Render-Prozess ist ein Browser-Fenster
▪ Laufzeitumgebung Chromium ohne Sandbox
▪ Komplett eigener Prozess
▪ Es können mehrere Renderer Processe (Fenster)
erzeugt und unabhängig ausgeführt werden
▪ Kann direkt Node.js-Module einbinden und
Ausführen (Node.js-API Support)
▪ Wird vom Main Process über das BrowserWindow-
Objekt erzeugt und Verwaltet

25. Die index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
We are using node <span id="nodeVersion"></span>,
chrome <span id="chromeVersion"></span>,
and Electron <span id="electronVersion"></span>.
<script>
document.getElementById('nodeVersion').textContent = process.versions.node;
document.getElementById('chromeVersion').textContent = process.versions.chrome;
document.getElementById('electronVersion').textContent = process.versions.electron;
</script>
</body>
</html>

26. Kommunikation von
Main Process und
Renderer Process
Die ersten Schritte

27. Inter-process Communication (IPC)
Main Renderer
ipcRenderer.send('start');Electron.IpcMain.on('start', fn);
Electron.IpcMain.send('finish', true); ipcRenderer.on('finish', fn);

28. Die index.html (Renderer Process) – Ab Zeile 75
<h3 id="cpuHeader"></h3>
<button id="cpuBtn">Show CPU activity</button>
<script>
(function () {
const { ipcRenderer } = require("electron");
document.getElementById("cpuBtn").addEventListener("click", () => {
ipcRenderer.send("getCpuActivity", 'my possible args');
});
ipcRenderer.on('cpuActivityReply', (event, arg) => {
document.getElementById('cpuHeader').innerHTML = arg + "%";
});
}());
</script>

29. Die HomeController.cs (Main Process)
public IActionResult Index()
{
if (HybridSupport.IsElectronActive)
{
Electron.IpcMain.On("getCpuActivity", async (args) =>
{
while (true)
{
var processes = await Electron.App.GetAppMetricsAsync();
var firstCpuPercentUsage = processes.First().Cpu.PercentCPUUsage;
var mainWindow = Electron.WindowManager.BrowserWindows.First();
Electron.IpcMain.Send(mainWindow, "cpuActivityReply", firstCpuPercentUsage);
Thread.Sleep(1000);
}
});
}
return View();
}

30. Builden Verpacken und Ausliefern

31. Builden
▪ Mit „electronize build“ wird für das aktuell laufende
Betriebssystem eine Ausführbare Datei im Bin-Ordner erzeugt
▪ electronize build /target win Windows (*.exe)
▪ electronize build /target osx Mac (*.app)
▪ electronize build /target linux Linux (No-extension binary)

32. Die Electron.NET API Demos-App
▪ Zeigt die wichtigsten
Electron.NET API Beispiele
▪ Bei einer Hybrid-App
▪ ASP.NET Core MVC
▪ https://github.com/ElectronNET/
electron.net-api-demos

34. https://github.com/ElectronNET/Electron.NET

35. http://about.me/Gregor.Biswanger
Ich freue mich auf Feedback!
Vielen Dank!