Javascript ist die Script-Sprache hinter fast allen Webanwendungen und inzwischen durch nodejs auch als Backend-Sprache fest etabliert. Electron nutzt dieses Tool und ermöglicht es, auf nodejs und chromium basierend mit Javascript Plattform unabhängige Desktop-Anwendungen zu bauen (alle Plattformen auf denen node und chromium laufen).
Als Grundgerüst nutzt eine Electron Anwendung HTML und CSS zur Darstellung und Javascript für die Programmlogik – also handelt es sich im einfachsten Fall um nichts anderes als eine Webanwendung, gekapselt in eine Desktopanwendung.

Prominentes Beispiel für eine electron Anwendung ist der Editor Atom von gitub, für den das Framework Electron ursprünglich geschaffen wurde. Inzwischen existieren zahlreiche Anwendungen, Beispiele finden sich hier

In diesem kleinen Tutorial geht es darum, ein einfaches Programm zu erstellen, das als „Sandkasten“ für das Javascript–Spiele–Framework craftyjs dient.

Craftyjs ist eine kleine Javascript-Bibliothek, die grundlegende Mechaniken für die Spieleprogrammierung bereitstellt. Die Dokumentation ist überschaubar, ebenso wie die API, allerdings in manchen Fällen kommt man um Probieren und die Websuche nicht herum, wenn man eine bestimmte Funktion sucht.

Electron installieren

Um electron auf die Festplatte zu bekommen muss nodejs mit npm installiert sein. Unter Ubuntu installiert man die Programme im Terminal über folgenden Befehl:

sudo apt install nodejs npm

Damit ist alles bereit um Electron zu direkt installieren. Da wir aber nicht alles von vorne bauen müssen, nutzen wir die von der Projektseite selbst bereitgestellte Quick-start Vorlage. Diese lässt sich direkt von Github herunterladen oder besser via git auf die eigene Festplatte clonen.

Sofern git noch nicht installiert ist, holen wir das über diesen Befehl nach:

sudo apt install git

Nun kann die Quick-start Vorlage in den Ordner unserer Wahl installiert werden, bei mir unter ~/dev/electron/ über die Anweisung:

# Das Quick-Start Repository klonen 
$ git clone https://github.com/electron/electron-quick-start 
# Das Repository öffnen 
$ cd electron-quick-start 
# Die Abhängigkeiten installieren und ausführen 
# hier wird electron installiert und auch gleich ausgeführt
$ npm install && npm start

Die originalen Anweisungen finden Sie direkt auf der Electron Startseite.

Das erste Ausführen zeigt in etwa dieses Bild:

Damit läuft unser erstes einfaches Electron Programm.

Hinter dem Menüpunkt „View“ verstecken sich wichtige Werkzeuge: „Refresh“ – damit wird die Anwendung neu geladen und „Toggle Developer Tools“ – darüber erreichen wir die Entwickler Werkzeuge, die in Chromium über F12 zu erreichen sind.