Zum Hauptteil springen

Was ist neu in Electron 0.37

· Die Lesezeit beträgt 4 min
zeke
zeke

Electron 0.37 wurde vor kurzem veröffentlicht und beinhaltet ein großes Upgrade von Chrome 47 zu Chrome 49 und auch mehrere neue Kern-APIs. Dieses neuste Release bringt alle neuen Features von Chrome 48 und Chrome 49 mit. Dies beinhaltet CSS custom Properties, erweiterte ES6-Unterstützung, KeyboardEvent-Verbesserungen, Promise-Verbesserungen und viele andere neue Features, welche jetzt in deiner Electron-App zur Verfügung stehen.

Was ist neu​

CSS Custom Properties​

Wenn Sie preprocessed Sprachen wie Sass und Less verwendet haben, sind Sie wahrscheinlich mit _Variablen_vertraut, mit denen Sie wiederverwendbare Werte für Dinge wie Farbschemata und Layouts definieren können. Variablen helfen dabei, Ihre Stylesheets DRY und wartbarer zu halten.

CSS custom properties ähneln preprocessed Variablen, da sie wiederverwendbar sind, aber sie haben auch eine einzigartige Qualität, die sie noch mächtiger und flexibler macht: sie können mit JavaScript manipuliert werden. Diese subtile, aber leistungsstarke Funktion ermöglicht dynamische Änderungen an visuellen Schnittstellen und profitiert gleichzeitig von der CSS-Hardwarebeschleunigung und der reduzierten Code-Duplizierung zwischen Ihrem Frontend-Code und den Stylesheets.

Weitere Informationen zu CSS custom properties finden Sie im MDN Artikel und in der Google Chrome Demo.

CSS-Variablen in Aktion​

Gehen wir durch ein einfaches variables Beispiel, das live in deiner App angepasst werden kann.

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

Der Variablenwert kann direkt in JavaScript abgerufen und geändert werden:

// Holt den Variablenwert ' #A5ECFA'
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// Variablenwert auf 'orange' setzen
document.body.style.setProperty('--awesome-color', 'orange');

Die Variablenwerte können auch aus dem Styles Abschnitt der Entwicklungstools bearbeitet werden, um schnelle Rückmeldungen und Optimierungen zu erhalten:

CSS Eigenschaften im Stile Tab

KeyboardEvent.code Eigenschaft​

Chrome 48 hat die neue code Eigenschaft für KeyboardEvent Ereignisse hinzugefügt, die die physikalische Taste, unabhängig vom Betriebssystem-Tastaturlayout, die gedrückt wurde, angibt.

Dies sollte die Implementierung benutzerdefinierter Tastaturkürzel in Ihrer Electron-App über Maschinen und Konfigurationen hinweg genauer und konsistenter machen.

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} wurde gedrückt.`);
});

Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.

Promise Rejection Events​

Chrome 49 hat zwei neue window Events hinzugefügt, die es Ihnen erlauben, benachrichtigt zu werden, wenn eine abgelehnte Promise nicht verarbeitet wird.

window.addEventListener('unhandledrejection', function (event) {
  console.log('A rejected promise was unhandled', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
  console.log('A rejected promise was handled', event.promise, event.reason);
});

Schauen Sie sich dieses Beispiel an, um es in Aktion zu sehen.

ES2015 Updates in V8​

Die Version von V8 jetzt in Electron beinhaltet 91% von ES2015. Hier sind ein paar interessante Ergänzungen, die Sie out of the Box verwenden können – ohne Flags oder pre-compilers:

Standardparameter​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

Destructuring assignment​

Mit Chrome 49 wurde die destructuring assignment hinzugefügt, um die Zuweisung von Variablen und Funktionsparametern zu vereinfachen.

Dies macht Electron sauberer und kompakter, um es jetzt zuzuweisen:

Browserprozess benötigt​
const { app, BrowserWindow, Menu } = require('electron');
Renderer-Prozess benötigt​
const { dialog, Tray } = require('electron').remote;
Andere Beispiele​
// Destructuring an array and skipping the second element
const [first, , last] = findAll();

// Destructuring function parameters
function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`);
}

let user = {
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
};
whois(user); // "jdoe is John"

// Destructuring an object
let { name, avatar } = getUser();

Neue Electron-APIs​

Einige der neuen Electron-APIs sind unten, Sie können jede neue API in den Versionshinweisen für Electron Releases sehen.

show und hide Events auf BrowserWindow​

Diese Ereignisse werden emittiert, wenn das Fenster entweder angezeigt oder ausgeblendet wird.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Fenster wurde angezeigt');
});
window.on('hide', function () {
  console.log('Fenster wurde versteckt');
});

platform-theme-changed auf app für OS X​

Dieses Event wird emittiert, wenn der Dunkle Modus des Systems aktiviert ist.

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Plattform Thema geändert. Im dunklen Modus? ${app.isDarkMode()}`);
});

app.isDarkMode() für OS X​

Diese Methode gibt true zurück, wenn sich das System im Dunklen Modus befindet, andernfalls false.

scroll-touch-begin und scroll-touch-end Ereignisse im BrowserWindow für OS X​

Diese Ereignisse werden emittiert, wenn die scroll wheel event Phase begonnen hat oder beendet ist.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
  console.log('Scroll touch gestartet');
});
window.on('scroll-touch-end', function () {
  console.log('Scroll touch geendet');
});