© istockphoto.com/bgblue
Mit Electron Webtechnologien auf den Desktop bringen

Spielplatz Desktop


JavaScript auf dem Desktop – eine der wenigen Hürden, die sich Entwicklern noch in den Weg zu stellen scheinen. Doch auch hierfür gibt es passende Lösungen. Eine von ihnen, Electron, wollen wir uns in diesem Artikel etwas näher ansehen.

JavaScript kommt primär im Rahmen von Webapplikationen zum Einsatz – und hier vor allem im Front­end. Dank Node.js ist die Skriptsprache aber auch von den Servern nicht mehr wegzudenken; sei es nun auf der Kommandozeile, um die Applikation zu bauen, als Unterstützung für die Echtzeitkommunikation über WebSockets oder als Basis für komplette Backends von Applikationen. Durch Frameworks wie Cordova sind auch unsere Mobilgeräte nicht mehr vor JavaScript-Apps sicher. Fehlt nur noch eine solide Plattform für Desktopapplikationen. Mit Electron, das Sie im Zuge dieses Artikels näher kennenlernen, erhalten Sie ein Werkzeug, das Ihnen die Entwicklung vollwertiger Desktopapplikationen mit Webtechnologien erlaubt.

Der Ursprung des Electron-Projekts geht auf den Atom-Editor zurück. Dieser von GitHub entwickelte Texteditor überzeugt durch seinen modularen Aufbau, der es jedem Anwender erlaubt, das Programm beliebig zu erweitern und neue Features per Plug-in zu integrieren. Neben der Tatsache, dass Atom einfach zu erweitern und zu modifizieren sein sollte, war den Entwicklern natürlich auch wichtig, dass er auf allen gängigen Systemen installiert werden konnte. Die Wahl für die Basis des Editors fiel mit JavaScript, HTML und CSS auf eine sehr weit verbreitete Kombination von Technologien. Um diese Technologien auf den Desktop zu bringen, kommen Node.js und Chromium zum Einsatz; ebenfalls ein recht etabliertes Paar von Plattformen in der Webwelt, nur in etwas abgewandelten Rollen – aber dazu später mehr.

Die Entwicklungsplattform stellte sich als so stabil und vielseitig heraus, dass sich die Entwickler entschlossen, die Atom-Shell als eigenständiges Open-Source-Projekt unter dem Namen „Electron“ weiterzuführen. Mittlerweile wird Electron [1] auch von namhaften Unternehmen wie Microsoft, Facebook, Slack oder Docker eingesetzt. Es kann also keine schlechte Idee sein, einen Blick auf Electron und seine Möglichkeiten zu werfen.

Electron

Was macht eine Desktopapplikation, die mit Electron entwickelt wurde, überhaupt aus? Zunächst steht eine solche Applikation für sich allein, ist also grundsätzlich offlinefähig und benötigt keine Serverkomponente. Außerdem können Sie eine Electron-Applikation mit ein paar kleinen Modifikationen auf verschiedenen Systemen installieren. Zu den unterstützten Betriebssystemen gehören Windows ab Version 7, Mac OS X in der Version 10.9 und höher, und natürlich wird auch Linux unterstützt. Hier wird vor allem auf Ubuntu (ab Version 12.04), Fedora (ab Version 21) und Debian (ab Version 8) gesetzt. Obwohl die Anzeige einer Electron-Applikation im Browser stattfindet, haben Sie die Möglichkeit, das Aussehen des Fensters zu bestimmen, und können im Zuge dessen auch die native Menüstruktur von Applikationen Ihres Systems nachbilden. Zusätzlich können Sie Ihren Benutzern über das Notification-API des Betriebssystems Nachrichten senden. Electron verfügt über einen Auto-Updater, der dafür sorgt, dass Ihre Applikation immer in der aktuellsten Version vorliegt. Diese und noch einige weitere Features lernen Sie in den folgenden Abschnitten kennen und sehen damit, wie mächtig und flexibel Electron ist.

Alternativen

Electron ist jedoch nicht die einzige Lösung, die versucht, eine Basis für Desktopapplikationen mit JavaScript zu schaffen. Der wichtigste Konkurrent trägt den Namen NW.js [2] und war früher als node-webkit bekannt. Der Name wurde allerdings im Zuge der Abspaltung von io.js von Node.js geändert, da das Projekt auf io.js als Basis setzte. Grundsätzlich verfolgen Electron und NW.js das gleiche Ziel: Sie dienen zur Entwicklung von Desktopapplikationen auf Basis von Webtechnologien und geben dem Entwickler die Möglichkeit, auf das System zuzugreifen. Jedoch verfolgen beide unterschiedliche Ansätze, um dieses Ziel zu erreichen.

Bei NW.js ist der Ausgangspunkt der Applikation eine HTML-Seite. Die gesamte Applikation ist also browserbasiert. Im Gegensatz dazu wird der Browser bei Electron lediglich als Anzeigemittel verwendet. Der eigentliche Einstieg in die Applikation erfolgt über eine JavaScript-Applikation. Über den genauen Aufbau und das Zusammenspiel der einzelnen Komponenten erfahren Sie später noch mehr.

Sowohl NW.js als auch Electron basieren auf Chro­mium. Das ist das Open-Source-Projekt hinter dem Chrome-­Browser von Google. Electron weist allerdings eine Optimierung auf, indem nicht das gesamte Chro­mium-Paket, sondern lediglich libchromiumcontent integriert wird. Diese Bibliothek beinhaltet das Contentmodul von Chromium, mit dem das Rendern einer Webseite mit Grafikbeschleunigung möglich ist. Alle weiteren Browserfeatures, wie beispielsweise Extensions, sind nicht enthalten. Mit diesem Modul wird der Ressourcenaufwand für den Build-Prozess wesentlich reduziert.

Der Unterschied zwischen NW.js und Electron wird noch mehr deutlich, wenn Sie einen Blick auf die Node. js-­Integration werfen. Der Einstieg in NW.js ist der Browser. Das bedeutet, dass für die Integration der Quellcode von Chromium angepasst werden muss. Electron macht lediglich Modifikationen an den node_bindings erforderlich, um Chromium und Node.js zusammenzuführen, was auch wieder die Komplexität der Lösung reduziert.

Ein weiterer, recht interessanter Unterschied zwischen NW.js und Electron ist die Behandlung von unterschiedlichen Kontexten. In NW.js hat jedes Browserfenster seine eigene Node.js-Instanz, die von den übrigen keine Kenntnis hat. Electron geht auch hier einen anderen Weg und hat dadurch eine Änderung in Node.js 0.12 verursacht, die es ermöglicht, in einem Prozess mehrere parallele Node.js-Instanzen auszuführen. Das führt dazu, dass Electron ressourcenschonender arbeiten kann.

Electron und NW.js versuchen das gleiche Problem auf unterschiedliche Arten zu lösen. Der deutlichste Unterschied ist am Einstieg in die Applikation zu spüren. Das führt dazu, dass NW.js seine Komponenten um den Browserprozess gruppiert und Electron eher um den Node.js-Prozess im Kern und die Browserprozesse nur zur Darstellung verwendet.

Installation

Damit Sie den Aufbau von Electron besser verstehen, sollten Sie über eine funktionierende Installation verfügen, in der Sie die verschiedenen Konzepte selbst nachvollziehen können. Für die Arbeit mit Electron müssen Sie auf Ihrem System Node.js installiert haben. Doch bevor Sie mit der eigentlichen Arbeit beginnen, schaffen Sie zunächst die Grundlage für Ihr Projekt, indem Sie ein Verzeichnis erstellen und in diesem das Kommando npm init ausführen. Der Node Package Manager führt Sie anschließend durch einen interaktiven Prozess, an dessen Ende Sie über eine gültige package.json-Datei für Ihr Projekt verfügen.

Die Entwickler von Electron haben die Einstiegshürde so weit wie möglich gesenkt, indem sie für...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang