Was ist neu?

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

Das Cross-Plattform Framework Electron steht in Version 3.0 bereit. Neben wichtigen Updates der Chromium-, Node- und V8-Komponenten weist die Major-Version auch neue Features auf, um plattformübergreifende Desktop-Anwendungen mit JavaScript zu bauen.

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:

JavaScript Days 2020

Einstieg in Vue: Teil 1

mit Maximilian Lang und Krzysztof Piechowicz (adesso SE)

Wie man zu TypeScript migriert

mit Golo Roden (the native web)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -