Zum Hauptteil springen

August 2016: Neue Apps

· Die Lesezeit beträgt 3 min

Hier sind die neuen Electron-Apps, die im August der Website hinzugefügt wurden.


Die Seite wurde mit neuen -Apps und Meetups durch Pull-Requests aus der Community aktualisiert. Sie können das Repository beobachten, um Benachrichtigungen über neue Erweiterungen zu erhalten oder wenn Sie nicht an allen der Änderungen der Seite interessiert sind, abonnieren Sie den Blog RSS-Feed.

Wenn Sie eine Electron-App erstellt haben oder ein Meeting veranstalten, erstellen Sie einen Pull-Request, um sie zur Seite hinzuzufügen und es wird die nächste Roundup.

Neue Apps

Code RPGifyRPG-Codierungsanwendung
PamFaxEine plattformübergreifende App zum Senden und Empfangen von Faxen
BlankUpMarkdown-Editor mit Übersichtlichkeit +1
RamboxKostenlose, Open-Source Nachrichten- und E-Mail-Anwendung, die verbreitete Web-Anwendungen in einer Oberfläche vereinigt
GordieDie beste App für ihre Kartensammlungen
Ionic CreatorErstelle erstaunliche mobile Apps, schneller
TwitchAlertsBehalten Sie Ihre Zuschauer mit schönen Warnungen und Benachrichtigungen zufrieden
MuseeksEin einfacher, sauberer und plattformübergreifender Musikplayer
SeaPigEin Konverter von Markdown zu HTML
GroupMeInoffizielle GroupMe App
MoeditorIhr Allzweck-Markdown-Editor
SoundnodeSoundnode App ist Soundcloud für den Desktop
QMUI WebQMUI Web Desktop ist eine Anwendung zur Verwaltung von Projekten, die auf dem QMUI Web Framework basiert
SvgsusOrganisieren, bereinigen und transformieren Sie Ihre SVGs
RammeInoffizielle Instagram-Desktop-App
InsomniaREST-API-Client
CorreoEine Menü-/Taskbar Gmail App für Windows, MacOS und Linux
KongDashDesktop-Client für Kong Admin API
Translation EditorEditor für Übersetzungsdateien für INTL ICU-Nachrichten (siehe formatjsio)
5EClient5EPlay CSGO Client
Theme JuiceLokale WordPress-Entwicklung leicht gemacht

Werkzeuge für Barrierefreiheit

· Die Lesezeit beträgt 2 min

Allgemein zugängliche Anwendungen zu erstellen ist wichtig, und wir sind glücklich Ihnen neue Funktionen in Devtron und Spectron vorstellen zu können, die Entwicklern die Möglichkeit geben bessere Apps für jedermann zu erstellen.


Barrierefreiheit betreffend sind Electron-Apps und Websites vergleichbar, da beide letztlich auf HTML basieren. Dessen ungeachtet können Sie mit Electron-Apps keine Online-Ressourcen nutzen um die Barrierefreiheit zu prüfen, weil Ihre App keine URL hat, auf die der Prüfer zugreifen könnte.

Diese neuen Funktionen bringen diese Prüfwerkzeuge in deine Electron-Anwendung. Diese neuen Funktionen bringen diese Audit-Tools in Ihre Electron-App. Lesen Sie weiter und erhalten Sie eine Übersicht der Werkzeuge oder werfen Sie einen Blick in die Barrierefreiheit Dokumentation für weitere Informationen.

Spectron

Mit dem Test-Framework Spectron kannst du jetzt jedes Fenster und jeden <webview>-Tag in deiner Anwendung überprüfen. Ein Beispiel:

app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error(audit.message);
}
});

Erfahren Sie mehr über dieses Feature in der Spectron Dokumentation.

Devtron

In Devtron gibt es eine neue Registerkarte "Zugänglichkeit", die es dir ermöglicht, eine Seite in deiner Anwendung zu überprüfen, die Ergebnisse zu sortieren und zu filtern.

Screenshot von Devtron

Beide dieser Werkzeuge nutzen die Accessibility Developer Tools von Google für Chrome. Erfahren Sie mehr über die Richtlinien der Überprüfung der Barrierefreiheit, die diese Bibliothek nutzt, im Wiki des Repositorys.

Wenn Ihnen weitere gute Barrierefreiheit-Tools für Electron bekannt sind, fügen sie diese mittels einem Pull-Request zur Dokumentation für Barrierefreiheit hinzu.

npm install electron

· Die Lesezeit beträgt 3 min

As of Electron version 1.3.1, you can npm install electron --save-dev to install the latest precompiled version of Electron in your app.


npm install electron

The prebuilt Electron binary

If you've ever worked on an Electron app before, you've likely come across the electron-prebuilt npm package. This package is an indispensable part of nearly every Electron project. When installed, it detects your operating system and downloads a prebuilt binary that is compiled to work on your system's architecture.

The new name

The Electron installation process was often a stumbling block for new developers. Many brave people tried to get started developing an Electron by app by running npm install electron instead of npm install electron-prebuilt, only to discover (often after much confusion) that it was not the electron they were looking for.

This was because there was an existing electron project on npm, created before GitHub's Electron project existed. To help make Electron development easier and more intuitive for new developers, we reached out to the owner of the existing electron npm package to ask if he'd be willing to let us use the name. Luckily he was a fan of our project, and agreed to help us repurpose the name.

Prebuilt lives on

As of version 1.3.1, we have begun publishing electron and electron-prebuilt packages to npm in tandem. The two packages are identical. We chose to continue publishing the package under both names for a while so as not to inconvenience the thousands of developers who are currently using electron-prebuilt in their projects. We recommend updating your package.json files to use the new electron dependency, but we will continue releasing new versions of electron-prebuilt until the end of 2016.

The electron-userland/electron-prebuilt repository will remain the canonical home of the electron npm package.

Many thanks

We owe a special thanks to @mafintosh, @maxogden, and many other contributors for creating and maintaining electron-prebuilt, and for their tireless service to the JavaScript, Node.js, and Electron communities.

And thanks to @logicalparadox for allowing us to take over the electron package on npm.

Updating your projects

We've worked with the community to update popular packages that are affected by this change. Packages like electron-packager, electron-rebuild, and electron-builder have already been updated to work with the new name while continuing to support the old name.

If you encounter any problems installing this new package, please let us know by opening an issue on the electron-userland/electron-prebuilt repository.

For any other issues with Electron, please use the electron/electron repository.

Electron Internals: Using Node as a Library

· Die Lesezeit beträgt 4 min

This is the second post in an ongoing series explaining the internals of Electron. Schaue dir den ersten Beitrag über die Integration von Ereignis-Schleifen an, falls du es noch nicht getan hast.

Most people use Node for server-side applications, but because of Node's rich API set and thriving community, it is also a great fit for an embedded library. This post explains how Node is used as a library in Electron.


Build system

Sowohl Knoten als auch Electron verwenden GYP als Build-Systeme. If you want to embed Node inside your app, you have to use it as your build system too.

New to GYP? Lies diese Anleitung bevor du in diesem Beitrag weitermachst.

Node's flags

Der Knoten. yp Datei im Quellcode-Verzeichnis von Node beschreibt, wie Knoten gebaut wird, zusammen mit vielen GYP Variablen steuern, welche Teile von Knoten aktiviert sind und ob bestimmte Konfigurationen geöffnet werden sollen.

To change the build flags, you need to set the variables in the .gypi file of your project. The configure script in Node can generate some common configurations for you, for example running ./configure --shared will generate a config.gypi with variables instructing Node to be built as a shared library.

Electron does not use the configure script since it has its own build scripts. Die Konfigurationen für den Knoten sind in der common.gypi Datei im Wurzel-Quellcode-Verzeichnis definiert.

In Electron, Node is being linked as a shared library by setting the GYP variable node_shared to true, so Node's build type will be changed from executable to shared_library, and the source code containing the Node's main entry point will not be compiled.

Since Electron uses the V8 library shipped with Chromium, the V8 library included in Node's source code is not used. This is done by setting both node_use_v8_platform and node_use_bundled_v8 to false.

Shared library or static library

When linking with Node, there are two options: you can either build Node as a static library and include it in the final executable, or you can build it as a shared library and ship it alongside the final executable.

In Electron, Node was built as a static library for a long time. This made the build simple, enabled the best compiler optimizations, and allowed Electron to be distributed without an extra node.dll file.

Dies änderte sich jedoch nach dem Wechsel von Chrome auf BoringSSL. BoringSSL ist ein Fork von OpenSSL das mehrere ungenutzte APIs entfernt und viele vorhandene Schnittstellen ändert. Because Node still uses OpenSSL, the compiler would generate numerous linking errors due to conflicting symbols if they were linked together.

Electron konnte BoringSSL im Knoten nicht verwenden oder OpenSSL in Chromium, verwenden damit die einzige Option war, auf den Knoten als freigegebene Bibliothek zu wechseln, und die BoringSSL und OpenSSL Symbole in den einzelnen Komponenten verbergen.

This change brought Electron some positive side effects. Before this change, you could not rename the executable file of Electron on Windows if you used native modules because the name of the executable was hard coded in the import library. After Node was built as a shared library, this limitation was gone because all native modules were linked to node.dll, whose name didn't need to be changed.

Supporting native modules

Native Module in Knotenarbeit, indem Sie eine Eintragsfunktion für Knoten definieren, und durchsuchen Sie dann die Symbole von V8 und libuv von Node. This is a bit troublesome for embedders because by default the symbols of V8 and libuv are hidden when building Node as a library and native modules will fail to load because they cannot find the symbols.

So in order to make native modules work, the V8 and libuv symbols were exposed in Electron. For V8 this is done by forcing all symbols in Chromium's configuration file to be exposed. Für libuv wird erreicht, indem die BUILDING_UV_SHARED=1 Definition gesetzt wird.

Starting Node in your app

After all the work of building and linking with Node, the final step is to run Node in your app.

Node doesn't provide many public APIs for embedding itself into other apps. Normalerweise können Sie einfach node::Start und node::Init aufrufen, um eine neue Knoten-Instanz zu starten. However, if you are building a complex app based on Node, you have to use APIs like node::CreateEnvironment to precisely control every step.

In Electron, Node is started in two modes: the standalone mode that runs in the main process, which is similar to official Node binaries, and the embedded mode which inserts Node APIs into web pages. The details of this will be explained in a future post.

July 2016: New Apps and Meetups

· Die Lesezeit beträgt 2 min

We're starting a monthly roundup to highlight activity in the Electron community. Each roundup will feature things like new apps, upcoming meetups, tools, videos, etc.


This site is updated with new apps and meetups through pull requests from the community. Sie können das Repository beobachten, um Benachrichtigungen über neue Erweiterungen zu erhalten oder wenn Sie nicht an allen der Änderungen der Seite interessiert sind, abonnieren Sie den Blog RSS-Feed.

Wenn Sie eine Electron-App erstellt haben oder ein Meeting veranstalten, erstellen Sie einen Pull-Request, um sie zur Seite hinzuzufügen und es wird die nächste Roundup.

Neue Apps

DemioA Webinar platform built for inbound sales and marketing
ElectorrentA remote client app for uTorrent server
PhoneGapThe open source framework that gets you building amazing mobile apps using web technology
WordMarkA lightweight blog publishing editor for Markdown writers
UbAuthApp to help developers create access tokens for Uber applications with OAuth 2.0
HyperTermHTML/JS/CSS terminal
MarpMarkdown presentation writer
Glyphr StudioA free, web based font designer, focusing on font design for hobbyists
BitCryptA simple file encryption application for Windows Encrypt your bits
TrymBeautiful small app for macOS to help you view, optimize and convert SVG icons
BookerText editor with the power of Markdown
PhonePresenterThe smartest presentation clicker
YoutThe new way to watch your playlists from YouTube on desktop

New Meetups

Electron Open Source Desktop FrameworkLondon, UK

Electron Internals: Message Loop Integration

· Die Lesezeit beträgt 3 min

This is the first post of a series that explains the internals of Electron. This post introduces how Node's event loop is integrated with Chromium in Electron.


Es gab viele Versuche, Knoten für GUI-Programmierung zu verwenden, wie node-gui für GTK+ Bindungen und node-qt für QT Bindings. But none of them work in production because GUI toolkits have their own message loops while Node uses libuv for its own event loop, and the main thread can only run one loop at the same time. So the common trick to run GUI message loop in Node is to pump the message loop in a timer with very small interval, which makes GUI interface response slow and occupies lots of CPU resources.

During the development of Electron we met the same problem, though in a reversed way: we had to integrate Node's event loop into Chromium's message loop.

The main process and renderer process

Before we dive into the details of message loop integration, I'll first explain the multi-process architecture of Chromium.

In Electron gibt es zwei Arten von Prozessen: den Hauptprozess und den Renderer Prozess (dies ist eigentlich sehr vereinfacht, für eine vollständige Ansicht siehe Multiprozess-Architektur). The main process is responsible for GUI work like creating windows, while the renderer process only deals with running and rendering web pages.

Electron allows using JavaScript to control both the main process and renderer process, which means we have to integrate Node into both processes.

Replacing Chromium's message loop with libuv

My first try was reimplementing Chromium's message loop with libuv.

It was easy for the renderer process, since its message loop only listened to file descriptors and timers, and I only needed to implement the interface with libuv.

However it was significantly more difficult for the main process. Each platform has its own kind of GUI message loops. macOS Chromium uses NSRunLoop, whereas Linux uses glib. I tried lots of hacks to extract the underlying file descriptors out of the native GUI message loops, and then fed them to libuv for iteration, but I still met edge cases that did not work.

So finally I added a timer to poll the GUI message loop in a small interval. As a result the process took a constant CPU usage, and certain operations had long delays.

Polling Node's event loop in a separate thread

As libuv matured, it was then possible to take another approach.

The concept of backend fd was introduced into libuv, which is a file descriptor (or handle) that libuv polls for its event loop. So by polling the backend fd it is possible to get notified when there is a new event in libuv.

So in Electron I created a separate thread to poll the backend fd, and since I was using the system calls for polling instead of libuv APIs, it was thread safe. And whenever there was a new event in libuv's event loop, a message would be posted to Chromium's message loop, and the events of libuv would then be processed in the main thread.

In this way I avoided patching Chromium and Node, and the same code was used in both the main and renderer processes.

The code

You can find the implemention of the message loop integration in the node_bindings files under electron/atom/common/. It can be easily reused for projects that want to integrate Node.

Update: Implementation moved to electron/shell/common/node_bindings.cc.

Elektron-Podcasts

· Eine Minute Lesezeit

Suchen Sie nach einer Einführung in Electron? Zwei neue Podcasts wurden gerade veröffentlicht, die einen guten Überblick darüber geben, was es ist, warum es gebaut wurde und wie es verwendet wird.


Jetzt raus:

Hanselminutes: Erstelle plattformübergreifender Electron-Apps

Ist Electron "just Chrome in a frame" oder ist es so viel mehr? Jessica setzt Scott auf den richtigen Weg und erklärt genau, wo die Electron-Plattform in Ihre Entwicklungswelt passt.


JavaScript Air: Electron Apps

Electron entwickelt sich immer mehr zu einer relevanten und populären Methode, um Multi-Plattform Desktop-Anwendungen mit Web-Technologien zu erstellen. Lassen Sie uns in diese fantastische Technologie eintauchen und sehen, wie wir sie nutzen können, um unsere eigene Erfahrung und die Erfahrung unserer Benutzer auf dem Desktop zu verbessern.


Wenn Sie auf der Suche nach einer Einführung in Electron sind, hören Sie den Ersten. Der zweite geht ins Detail über das Erstellen von Apps, mit tollen Tipps von Nylas's Evan Morikawa.

Wir arbeiten derzeit an zwei weiteren Podcasts, die nächsten Monat erscheinen sollen. Behalte ein Auge auf den @ElectronJS Twitter-Account für Updates.

Electron 1.0

· Die Lesezeit beträgt 4 min

In den letzten zwei Jahren hat Electron Entwicklern dabei geholfen, plattformübergreifende Desktop-Apps mit HTML, CSS und JavaScript zu erstellen. Now we're excited to share a major milestone for our framework and for the community that created it. Die Version von Electron 1.0 ist ab sofort bei electronjs.org verfügbar.


Electron 1.0

Electron 1.0 represents a major milestone in API stability and maturity. This release allows you to build apps that act and feel truly native on Windows, Mac, and Linux. Building Electron apps is easier than ever with new docs, new tools, and a new app to walk you through the Electron APIs.

Wenn Sie bereit sind, Ihre allererste Electron-App zu erstellen, hier ist eine Schnellstart-Anleitung um Ihnen beim Start zu helfen.

We are excited to see what you build next with Electron.

Electron's Path

Wir haben Electron freigegeben, als wir vor etwas mehr als zwei Jahren Atom starteten. Electron, then known as Atom Shell, was the framework we'd built Atom on top of. In those days, Atom was the driving force behind the features and functionalities that Electron provided as we pushed to get the initial Atom release out.

Das Fahren von Electron ist eine wachsende Gemeinschaft von Entwicklern und Firmen, die alles aus E-Mail, Chatbauen, und Git Apps bis SQL Analytics Tools, Torrent-Clients, und Roboter.

In these last two years we've seen both companies and open source projects choose Electron as the foundation for their apps. Just in the past year, Electron has been downloaded over 1.2 million times. Machen Sie eine Tour durch einige der erstaunlichen Electron-Apps und fügen Sie Ihre eigene hinzu, wenn sie noch nicht vorhanden ist.

Electron downloads

Electron API Demos

Along with the 1.0 release, we're releasing a new app to help you explore the Electron APIs and learn more about how to make your Electron app feel native. Zusammen mit dem 1. freisetzen, wir veröffentlichen eine neue App, um dir zu helfen, die Electron-APIs zu erkunden und mehr darüber zu erfahren, wie du deine Electron-App einheimisch machen kannst.

Electron API Demos

Devtron

We've also added a new extension to help you debug your Electron apps. Devtron ist eine Open-Source-Erweiterung für die Chrome Developer Tools , die Ihnen helfen sollen, zu prüfen, debuggen und Ihre Electron-App beheben.

Devtron

Features

  • Require graph that helps you visualize your app's internal and external library dependencies in both the main and renderer processes
  • IPC monitor that tracks and displays the messages sent and received between the processes in your app
  • Event inspector that shows you the events and listeners that are registered in your app on the core Electron APIs such as the window, app, and processes
  • App Linter that checks your apps for common mistakes and missing functionality

Spectron

Schließlich veröffentlichen wir eine neue Version von Spectron, dem Integration Test-Framework für Electron-Apps.

Spectron

Spectron 3.0 has comprehensive support for the entire Electron API allowing you to more quickly write tests that verify your application's behavior in various scenarios and environments. Spectron basiert auf ChromeDriver und WebDriverIO so dass es auch volle APIs für die Seitennavigation hat, Benutzer Eingabe und JavaScript-Ausführung.

Community

Electron 1.0 is the result of a community effort by hundreds of developers. Outside of the core framework, there have been hundreds of libraries and tools released to make building, packaging, and deploying Electron apps easier.

Es gibt jetzt eine neue Community Seite, die viele der fantastischen zu entwickelnden Elektrowerkzeuge, Apps, Bibliotheken und Frameworks auflistet. Sie können sich auch die Electron und Electron Userland Organisationen ansehen, um einige dieser fantastischen Projekte zu sehen.

New to Electron? Watch the Electron 1.0 intro video:

Was ist neu in Electron 0.37

· Die Lesezeit beträgt 4 min

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');
});

Use V8 and Chromium Features in Electron

· Die Lesezeit beträgt 2 min

Building an Electron application means you only need to create one codebase and design for one browser, which is pretty handy. But because Electron stays up to date with Node.js and Chromium as they release, you also get to make use of the great features they ship with. In some cases this eliminates dependencies you might have previously needed to include in a web app.


There are many features and we'll cover some here as examples, but if you're interested in learning about all features you can keep an eye on the Google Chromium blog and Node.js changelogs. You can see what versions of Node.js, Chromium and V8 Electron is using at electronjs.org/#electron-versions.

ES6 Support through V8

Electron combines Chromium's rendering library with Node.js. The two share the same JavaScript engine, V8. Many ECMAScript 2015 (ES6) features are already built into V8 which means you can use them in your Electron application without any compilers.

Below are a few examples but you can also get classes (in strict mode), block scoping, promises, typed arrays and more. Check out this list for more information on ES6 features in V8.

Arrow Functions

findTime () => {
console.log(new Date())
}

String Interpolation

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

New Target

Octocat() => {
if (!new.target) throw "Not new";
console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

Array Includes

// Returns true
[1, 2].includes(2);

Rest Parameters

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
console.log(args.length);
};

Chromium Features

Thanks to all the hard work Google and contributors put into Chromium, when you build Electron apps you can also use cool things like (but not limited to):

Follow along with the Google Chromium blog to learn about features as new versions ship and again, you can check the version of Chromium that Electron uses here.

What are you excited about?

Tweet to us @ElectronJS with your favorite features built into V8 or Chromium.