Plattformunabhängige Desktop App mit JavaScript? Kein Problem! Electron (früher „Atom Shell“) existiert schon etwas länger und hat sich mehr oder weniger gegen NW.js (früher „node-webkit“) durchgesetzt. Mittlerweile sind einige Electron Apps im Umlauf, zumindest Atom oder Slack sollten bekannt sein. Eine umfangreiche Liste gibt es hier:
https://www.electronjs.org/apps
Was ist Electron?
Electron = Node.js + Chromium + C++
In der Regel kommt man nur mit den ersten beiden Teilen (Node.js + Chromium) in Berührung. Grundsätzlich beinhaltet Electron einen Chromium Browser, der es uns ermöglicht HTML/CSS/JavaScript zu verwenden. Eine Codebasis funktioniert damit unter Windows, Mac OSX und Linux – wie Cordova oder React Native für mobile Plattformen. Ein grosser Vorteil gegenüber der Web Enwicklung: Man muss nur EINEN Browser (Chromium) unterstützen :)
Die verwendete Node.js Version ist in der Regel die Aktuellste (7.4.0 zum Datum dieses Artikels), man programmiert also unter modernsten Voraussetzungen. Wichtig ist allerdings dass hier wirklich Node.js verwendet wird, und nicht clientseitiges JavaScript. Ein require-Statement muss also zum Beispiel nicht erst durch Browserify oder Webpack laufen. Das Node Green Projekt listet alle features der aktuellen Node.js Versionen: https://node.green/ – Falls das nicht reicht ist der vollständige ES6 Support (mit Babel) ebenfalls möglich, ein einfaches Beispiel inklusive React findet sich hier: https://github.com/b52/electron-es6-react
Eine Electron App ist auf den ersten Blick nicht als solche zu erkennen, selbst Push Notifications sind kein Problem. Zugriff auf das Dateisystem oder sonstige Hardware selbstverständlich ebenfalls. Mittlerweile gibt es auch eine beachtliche Anzahl an frei verfügbaren Electron Modulen, vom simplen Speichern von Benutzereinstellungen bis zu Videostreaming ist alles dabei. Eine eher unübersichtliche Liste vorhandener Module bietet npm per Wildcard Suche:
npm search electron*
Die erste Electron App
Für einen schnellen Start in die wunderbare Electron-Welt gibt es ein praktisches Basisprojekt, welches recht einfach installiert werden kann:
git clone github.com/electron/electron-quick-start cd electron-quick-start npm install npm start
Mit dem letzten Befehl („npm start“) wird „electron .“ ausgeführt und die erste Electron App startet:
Der Source ist gut dokumentiert, es lohnt sich also einen Blick in die überschaubare Datei main.js zu werfen. Per „View – Toggle Developer Tools“ können die Dev Tools geöffnet werden – sehr praktisch zur Fehlersuche. Wichtig:
Natürlich ist da jetzt noch ein Standard-Icon und ein umfangreiches Menü. Das lässt sich ändern/entfernen, es ist ausserdem möglich eine Installationsdatei für die jeweiligen Systeme bereitzustellen. Ein Enduser wird wohl kaum „npm install“ und „npm start“ ausführen wollen. Auch hier kann man auf die endlose Anzahl an fertigen npm-Modulen zurückgreifen. electron-packager erstell per Kommandozeile fertige Pakete für Windows, Linux und Mac OSX:
#build for windows electron-packager . --platform=win32 #build for all platforms electron-packager . --all
electron-packager ist Teil des umfangreicheren Tools electron-forge, womit Electron-Projekte sogar erzeugt werden können. Support für ES6/ES7 via Babel ist ebenfalls inkludiert.
Passende Projekte
