Desktop Apps mit JavaScript/Electron

2017-01-31-offline-formulare

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 https://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:

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:

#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.

Noch keine Bewertungen.
Bitte warten...

Kommentare

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

    (*) Pflichtfeld

    Bewirb dich bei uns!

    LimeSoda.
    Digitalagentur in Wien.

    Bewirb dich jetzt!
    Andi

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

    Jetzt zum LimeSoda-Newsletter anmelden