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

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

8.
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

9.
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

10.
Meine erste
Electron.NET App
Die ersten Schritte

11.
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

12.
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

13.
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

14.
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

15.
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

16.
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());
}
}

17.
Debuggen Die ersten Schritte

18.
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

19.
Die Electron.NET-
Architektur
Die Anatomie

20.
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)

21.
Electron Architektur

22.
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

23.
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

24.
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>

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

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

27.
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>

28.
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();
}

29.
Builden Verpacken und Ausliefern

30.
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)

31.
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

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

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