Mit Electron auf den Desktop
Mit Electron lassen sich Desktop-Anwendungen mittels gängiger Webtechnologien wie JavaScript, HTML und CSS entwickeln. Dafür greift das Framework auf Chromium, Node.js und die JavaScript-Engine V8 zurück, um die Client- und Server-Seite in einer Applikation zu vereinen. Im Gegensatz zu reinen Webanwendungen können mit Electron zudem Systemfunktionen des jeweiligen Betriebssystems genutzt werden.
Ein einheitliches API ermöglicht die Portierung der Anwendung auf unterschiedliche Zielumgebungen – Stichwort Cross-Plattform-Entwicklung. Electron-Anwendungen können ohne wesentliche Änderungen unter MacOS, Windows und Linux betrieben werden.
Neu in Electron 3
Electron 3 vereint eine Reihe von API-Änderungen, Bugfixes und Feature-Erweiterungen, die seit dem Release von Electron 2 im Mai 2018 umgesetzt wurden. Seit Electron 2 folgt das Projekt der semantischen Versionierung. Neue Major-Versionen sollen dadurch öfter erscheinen und sich im Wesentlichen an wichtigen Chromium Updates orientieren.
So besteht die wichtigste Neuerung in Electron 3 auch in den Updates verschiedener Schlüsselkomponenten der Toolchain. In Electron 3 wird nun Chrome v66.0.3359.181, Node v10.2.0 und V8 v6.6.346.23 unterstützt.
Auf der Seite der Feature-Erweiterungen ermöglicht es die neue Methode isPackaged()
, zwischen Entwicklung und Betrieb zu unterscheiden. Zwei neue, experimentelle APIs für die Erstellung von Textfeldern und Buttons wurden hinzugefügt, die über das Bulld Flag enable_view_api
aktiviert werden können. Zudem wurden verschiedene Komponenten einem Refactoring unterzogen, was auch diverse nicht rückwärtskompatible API-Veränderungen mit sich bringt:
Deprecated | In Electron 3 ersetzt durch |
---|---|
app.getAppMemoryInfo() | app.getAppMetrics() |
const metrics = app.getAppMetrics()const { memory } = metrics[0] // | |
let optionsA = { webPreferences: { blinkFeatures: “ } }let windowA = new BrowserWindow(optionsA) | let optionsB = { webPreferences: { enableBlinkFeatures: “ } }let windowB = new BrowserWindow(optionsB) |
window.on(‚app-command‘, (e, cmd) => { if (cmd === ‚media-play_pause‘) { // do something }}) | window.on(‚app-command‘, (e, cmd) => { if (cmd === ‚media-play-pause‘) { // do something }}) |
clipboard.readRtf() | clipboard.readRTF() |
clipboard.writeRtf() | clipboard.writeRTF() |
clipboard.readHtml() | clipboard.readHTML() |
clipboard.writeHtml() | clipboard.writeHTML() |
nativeImage.createFromBuffer(buffer, 1.0) | nativeImage.createFromBuffer(buffer, { scaleFactor: 1.0}) |
const info = process.getProcessMemoryInfo() | |
screen.getMenuBarHeight() | screen.getPrimaryDisplay().workArea |
ses.setCertificateVerifyProc(function (hostname, certificate, callback) { callback(true)}) | ses.setCertificateVerifyProc(function (request, callback) { callback(0)}) |
tray.setHighlightMode(true) | tray.setHighlightMode(‚on‘) |
tray.setHighlightMode(false) | tray.setHighlightMode(‚off‘) |
webContents.openDevTools({ detach: true }) | webContents.openDevTools({ mode: ‚detach‘ }) |
webFrame.registerURLSchemeAsSecure(‚app‘) | protocol.registerStandardSchemes([‚app‘], { secure: true }) |
webFrame.registerURLSchemeAsPrivileged(‚app‘, { secure: true }) | protocol.registerStandardSchemes([‚app‘], { secure: true }) |
Für eine vollständige Liste der Neuerungen, Bugfixes und API-Bereinigungen in Electron 3 empfiehlt sich ein Blick in die Electron 3 Release Notes.
Mehr über Electron
Wer mehr über Electron erfahren möchte, findet hier auf entwickler nützliche Tutorials zur Einführung. Electron im Zusammenspiel mit Vue.js nimmt Stephan Rauh genauer unter die Lupe:
Tutorial: So bringt Ihr Vue.js auf den Desktop – mit Electron!
Wie man von einer PWA zur Dektopanwendung gelangt, beschreibt Patrick Schnell in seinem Artikel:
Mit Electron von der PWA zur Desktopanwendung
Wie Cross-Plattform-Entwicklung mit Angular, Cordova und Electron funktioniert, erklärt Fabian Gosebrink in folgendem Video-Interview:
TypeScript is fun
Learn TypeScript by building a browser game together with trainer David Müllerchen.
Node.js
Unlock the full potential of the server-side JavaScript platform in the workshop with Sebastian Springer.