JavaScript-Anwendungen für den Desktop: Electron 3.0 ist da

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: