Hybride Desktop-Apps mit dem Framework Electron

Als Agentur setzen wir auf den Ansatz der hybriden (sprich Cross-Platform) Entwicklung. Mit Hilfe der von uns bereits vorgestellten Technologien, wie Cordova, PhoneGap und Ionic lassen sich mobile Apps für die bekanntesten mobilen Betriebssysteme mit Webtechnologien entwickeln. Diesen Ansatz hat auch Team rund um das Projekt GitHub aufgegriffen. Jedoch portieren sie die Idee von Web- und Mobile-Apps zu richtigen Desktop-Anwendungen. Aus ihrer Idee ist am Ende ein mächtiges, aber noch sehr junges, Framework mit dem Namen Electron entstanden.

Das Electron Framework kombiniert JavaScript, HTML und CSS zur Gestaltung der Benutzeroberfläche mit nativen Funktionalitäten, die mit Hilfe von Node.js erstellt oder angesprochen werden können. Das dieses Konzept sehr gut funktioniert hat das Team selbst mit ihrem sehr beliebten Text-Editor Atom unter Beweis gestellt. Dieser erfreut sich immer größerer Beliebtheit bei Programmierern und kommt unter anderem auch bei uns zum Einsatz. Über die einfachen Schnittstellen von Node.js können eigene Plugins mühelos umgesetzt und integriert werden.

Einrichtung

Electron wird wie ein normales Node-Modul über die Paketverwaltung NPM installiert. Daher sind Node.js und NPM Voraussetzung für die Einrichtung.
npm install electron-prebuilt

Die erste Anwendung
Danach kann das eigene Projekt in einem Verzeichnis angelegt werden. Die einfachste Form einer Electron-App besteht aus drei Dateien.

package.json –
- Informationen über das Projekt,
- definiert zusätzliche Abhängigkeiten zu anderen Node-Module
- legt Einstiegspunkt in die Anwendung fest
main.js – Hauptdatei, verwaltet die Anwendungsfenster, reagiert auf System-Ereignisse
index.html – Benutzeroberfläche als Webseite

Eine sehr einfache package.json sieht dann wie folgt aus:

{
  "name"    : "MeineTolleElectronApp",
  "version" : "0.0.1",
  "main"    : "main.js"
}

Der Schlüssel main stellt die Verbindung zum Einstiegspunkt der Anwendung dar. Natürlich kann daher auch die Hauptdatei main.js umbenannt und in der package.json angegeben werden.

Der Standartinhalte der main.js übernimmt das initiale Erstellen des Anwendungsfensters, das Reagieren auf das Schließen des Hauptfensters.

var app = require('app');  // Zugriff auf die Anwendung
var BrowserWindow = require('browser-window');  // Erzeugt native Browser-Fenster

// Sendet Fehlerberichte an Electron
require('crash-reporter').start();

// Hauptbrowserfenster
var mainWindow = null;

// App beenden, wenn alle Fenster geschlossen wurden.
app.on('window-all-closed', function() {
  // Falls nicht Mac OSX
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Initialisierung durch Electron ist abgeschlossen --> Browser-Fenster können erzeugt werden
app.on('ready', function() {
  // Erstellt Hauptfenster
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // Lade die Startseite --> index.html
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Öffnet die Entwicklerwerkzeuge
  mainWindow.openDevTools();

  // Browserfenster wird geschlossen
  mainWindow.on('closed', function() {
    // Lösche Referenz zum Browserfenster
    mainWindow = null;
  });
});

Das Browserfenster lädt nach dem Erstellen unsere index.html. Hier können nach belieben weitere Frontend-Frameworks eingebunden und genutzt werden.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hallo Welt!</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    Benutzte Node.js Version: <script>document.write(process.version)</script>
    Electron Version: <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

Über ein Terminal bzw. Kommandozeile kann dann die Anwendung über den Befehl electron . aufgerufen werden. Der ‘.’ steht hier für den Pfad zum Projekt. Befindet ihr euch bereits dort, dann reicht der Punkt vollkommen aus. Ist Electron bei euch nicht global installiert, müsst ihr noch den Pfad zum Modal angeben (./node_modules/.bin/electron .). Das Resultat sieht dann folgendermaßen aus.

Distribution

Um eure tolle Anwendung anderen bereitzustellen, müsste ihr einfach euer Projekt in den Resources-Ordner von Electron kopieren und in app umbenennen.

Mac – electron/Electron.app/Contents/Resources/app/ –> main.js, package.json, index.html
Windows, Linux – electron/resources/app/ –> main.js, package.json, index.html

Wenn ihr jetzt die Electron-App ausführt (electron.exe, Electron.app bzw. electron), sollte eure Anwendung starten.
Ihr könnt die Anwendung auch in ein spezielles Archiv verpacken und dann in den Resources-Ordner.
Eine genauere Anleitung findet ihr HIER.

Als kleines Hilfsmittel existiert auch ein Build-Tool für eigene Apps mit dem Namen Electron-Packager.

Das Build-Tool von FLYACTS

Wir bei FLYACTS haben uns natürlich auch schon ein wenig genauer mit Electron auseinandergesetzt. Dabei ist ein kleines Build-Tool für unsere Anwendungen entstanden. Dazu benutzen wir vor allem die GitLab-API, um unsere Projekte abzurufen und zu verarbeiten. Als Frontend Technologien kamen AngularJS und Bootstrap zum Einsatz. Es folgen ein paar kleine Einblicke.