Cross-Platform Apps mit Electron in HTML, CSS und JavaScript

In diesem Beitrag möchte ich euch einen Einstieg in die Entwicklung von Cross-Platform Apps mit Electron in HTML, CSS und JavaScript geben. Mit Electron könnt ihr Anwendungen für macOS, Windows und Linux erstellen.

Unzählige JavaScript Frameworks scheinen gerade “cool” zu sein. Unklar ist jedoch, welche sich längerfristig durchsetzen werden. Der Einstieg in die JavaScript-Welt im Webumfeld zeichnet sich dadurch aus, dass man anfangs jeden Tag eine weitere Bibliothek findet, die man unbedingt ausprobieren sollte. Um zwei herauszupicken, die durch ihre große Community und in der Anzahl der umgesetzten Projekte herausstechen, möchte ich Angular und React nennen.

Angular vertritt die Aufteilung des Projekts grob in drei Bausteine:

• Komponenten (programmiert in TypeScript / JavaScript)
• HTML-Templates
• CSS-Stylesheets

React ist eine JavaScript-Bibliothek die von Facebook entwickelt wird.  Im Gegensatz zu Angular verfolgt React den Ansatz, HTML wieder in die JavaScript-Komponente hineinzuziehen. Die Entwickler argumentieren dahingehend, dass der Code einer Komponente vollständig in einer Datei stehen sollte. Die Trennung der Aspekte der Anwendung wird durch die Kapselung in Komponenten erzielt (separation of concerns).

Kaum habe ich hier die ersten Tutorials angeschaut und durchgespielt, muss ich für mein neustes Projekt ein weiteres Open-Source-Framework anschauen: Electron

Ich hoffe euch mit diesem Post den Einstieg in Electron durch weiterführende Links leichter zu machen.

In diesem Beitrag werdet ihr lernen, wie ihr eure erste Anwendung mit Electron umsetzen könnt. Ich erkläre die wichtigsten Konzepte und wir werden sehen, wie wir unser Programm als Executable packen und verteilen können.

Cross-Platform Apps mit Electron

Electron erlaubt die Erstellung von Cross-Platform-Apps mit Hilfe von HTML, CSS und JavaScript.  Egal ob macOS, Windows oder Linux – eine mit Electron erstellte App läuft auf allen. Sehr vielversprechend 🙂

Erstaunt war ich, welche mir bekannten Anwendungen damit umgesetzt wurden. Hierzu zählen Slack, Visual Studio Code, Atom und die Desktop-App von WordPress.

Das schöne bei einer Electron-App ist, dass die Vorteile von verschiedenen Welten zusammenfinden. Webentwickler können ihr altbekannten Technologien verwenden ohne sich um die Spezialfälle der unterschiedlichen Betriebssysteme zu kümmern.

Die fertige App wird einfach im Chromium-Browser ausgeführt. Für uns als Entwickler bedeutet das eine deutlich Vereinfachung. Kein suchen nach Workarounds mehr, weil ein Internet Explorer eine bestimmte CSS-Direktive nicht unterstützt!

Die GUI erstellt man wie eine normale Webseite in HTML und CSS. Das Ganze wird mit JavaScript gesteuert. Dazu bekommen wir den Look-and-feel einer Desktop-App. Auch dafür müssen wir nicht zwingend bei Null anfangen. Projekte wie photonkit.com bietet Vorlagen für typische Layouts und GUI-Elemente.

Dabei hat man Zugriff auf die Module die in NodeJS und die Chromium-APIs. Des Weiteren kann man weiterhin Web-Frontends wie Angular oder Bootstrap nutzen.

Im Gegensatz zu typischen Browsern, laufen die Electron-Apps nicht in einer Sandbox. Vielmehr können wir durch die Nutzung von Node.js auf das lokale Dateisystem zugreifen.

Quickstart mit Electron

Genug der Vorrede. Schauen wir uns die ersten Schritte an. Voraussetzung für die kommenden Schritte sind Node.js sowie GIT.

1. Zuerst checken wir das Quickstart-Projekt von Electron mit GIT aus:

   git clone https://github.com/electron/electron-quick-start

2. Danach führen wir

   npm install

   (oder npm i ) aus. Der Node Package Manager (npm) installiert für uns automatisch die benötigten Module, die in der package.json Datei angegeben sind.

3. Mit npm start  starten wir unsere App.

Nun öffnet sich der Chromium-Browser. Unsere App sieht bisher recht übersichtlich aus:

Ein kleiner Typ am Rande. Wenn ihr Webpack nutzt und das Projekt nur bauen wollt:

npm run build

Wenn ihr das Projekt bauen wollt und auf Änderungen automatisch reagiert werden soll:

npm run watch

Ich verzichte an dieser Stelle auf eine Einführung in Webpack und möchte euch die offizielle Webpack Doku ans Herz legen.

Minimalaufbau einer Electron-App

Schauen wir uns den Minimalaufbau einer Electron-App an.

• package.json
• main.js
• index.html

package.json

{
  "name": "first-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Matthias Sommer",
  "dependencies": {},
  "devDependencies": {}
}

Diese Datei spezifiziert zum Beispiel den Namen der App, die Versionsnummer und den Autor.

Mit dem Bezeichner scripts können wir Startskripte definieren. Zum Beispiel eines zum starten der Electron-App mit

npm start

Mit electron . wird die electron Binary im Ordner node_modules\.bin  ausgeführt.

main gibt den zentralen Einstiegspunkt für unsere App an. Wenn wir dieses Feld nicht angeben, versucht Electron standardmäßig index.js zu laden.

Mit dependencies und devDependencies geben wir Abhängigkeiten zu anderen Modulen an. Diese können wir mit

npm install --save-dev

automatisch durch den Node Package Manager herunterladen und installieren lassen. Hierbei wird die package.json automatisch um das installierte Paket erweitert.

Wichtig für uns ist, dass nur die Module die unter dependencies gelistet sind, in der Releaseversion der App inkludiert sein werden.

main.js

Der folgende JavaScript-Code folgt dem Styleguide für ECMAScript6.

Diese JavaScript-Datei erstellt das Browserfenster mainWindow mit new BrowserWindow({width:800, height:600}) und zeigt dort die index.html an.

const electron = require('electron')
const {app, BrowserWindow} = electron
const path = require('path')
const url = require('url')

let mainWindow

function createWindow () {
// https://electron.atom.io/docs/api/browser-window/
  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Zuerst laden wir das electron-Paket in die gleichnamige Variable und extrahieren daraus die app API und die BrowserWindow API.

App steuert den Event Lifecycle unserer Anwendung und stellt den Hauptprozess dar. Dieser Prozess ist für die Erzeugung der Renderprozesse verantwortlich.

BrowserWindow ist ein Prozess für das Rendering eines Fensters. Im Gegensatz zum Hauptprozess kann es davon nicht nur einen, sondern beliebig viele geben. Über diese Prozesse erzeugen und kontrollieren wir die einzelnen Fenster unserer Anwendung.

Schauen wir uns die Funktionen an:

app.on('ready', createWindow)

Sobald die Applikation gestartet ist, wird das Event ‘ready‘ abgesetzt und es soll die Funktion createWindow aufgerufen werden. Diese erzeugt unser Startfenster.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Sobald wir alle Browserfenster geschlossen haben (Event ‘window-all-closed‘), soll die App mit app.quit() beendet werden. Somit macht macOS eine Ausnahme, da hier die Apps nicht vollständig geschlossen werden.

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

Diese Funktion ist macOS-spezifisch. Wenn man das Icon unserer App im mac-Dock anklickt, soll wieder ein neues Fenster angezeigt werden.

Packaging: Ausführbare App für Windows erzeugen

Abschließend für diesen Post möchte ich euch noch kurz zeigen, wie ihr eine ausführbare EXE für Windows erstellen könnt.

Zuerst einmal müssen wir den Electron Packager herunterladen und (global: -g) installieren. Dazu führen wir in der Konsole folgenden Befehl aus:

npm install electron-packager -g

Die Optionen für den Buildprozess werden mittels Flags definiert:

electron-packager . <appName>
--platform=<platform>
--arch=<architecture>
--out=<outputDirectory>
--overwrite
--icon=path/to/icon
--asar

In diesem Fall wollen wir eine 64 bit Executable für Windows im aktuellen Ordner erstellen lassen:

electron-packager . --platform=win32 --arc=64

Die Fehlermeldung “Please specify an Electron version” könnt ihr mit der Option

--electronVersion=1.6.10

beheben.

Schließlich werden alle benötigten Pakete heruntergeladen und die EXE erstellt.

Jetzt könnt ihr einen kleinen Nachteil des Frameworks erkennen. Für diese kleine Anwendung sind bereits 127 MB notwendig!

Abschließend möchte ich noch zwei weiterführende Links an die Hand geben. Hier findet ihr ein Forum sowie Tutorials und die offizielle Dokumentation.