LimeSoda Blog ☰ Zeige Kategorien

Desktop Apps mit JavaScript/Electron

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: http://electron.atom.io/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: http://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:

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:

Mit dem letzten Befehl („npm start“) wird „electron .“ ausgeführt und die erste Electron App startet:

electron_basic

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:

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.

Kommentare

Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

(*) Pflichtfeld

Bewirb dich bei uns!

LimeSoda.
Digitalagentur in Wien.

Bewirb dich jetzt!
Andreas Teufel

Verpasse nicht den nächsten Blog-Post von Andreas!

Jetzt zum LimeSoda-Newsletter anmelden