Aller au contenu principal

Septembre 2016 : Nouvelles applications

· 3 mins de lecture

Voici les nouvelles applications et conférences d'Electron qui ont été ajoutées au site en septembre.


This site is updated with new apps and meetups through pull requests from the community. Vous pouvez surveiller le dépôt pour être informé des nouveaux ajouts ou, si vous n'êtes pas intéressé par toutes les modifications du site, vous pouvez vous abonner au fil RSS du blog.

Si vous avez créé une application Electron ou si vous organisez une réunion, faites une requête pour l'ajouter au site et elle fera partie du prochain regroupement.

Nouvelles discussions

En septembre, GitHub a tenu sa conférence GitHub Universe présentée comme l'événement pour les personnes qui construisent l'avenir des logiciels. Il y a eu quelques présentations intéressantes d'Electron lors de l'événement.

Also, if you happen to be in Paris on December 5, Zeke will be giving an Electron talk at dotJS 2016.

Nouvelles applications

PexelsSearch for completely free photos and copy them into your clipboard
TimestampA better macOS menu bar clock with a customizable date/time display and a calendar
HarmonyMusic player compatible with Spotify, Soundcloud, Play Music and your local files
uPhoneWebRTC Desktop Phone
SealTalkInstant-messaging App powered by RongCloud IM Cloud Service and IM SDK
InfinityAn easy way to make presentation
Cycligent Git ToolStraightforward, graphic GUI for your Git projects
FocoStay focused and boost productivity with Foco
StrawberryWin Diners for Life Know and serve them better with the all-in-one restaurant software suite.
MixmaxSee every action on your emails in real-time Compose anywhere.
Firebase AdminA Firebase data management tool
ANoteA Simple Friendly Markdown Note
TempsA simple but smart menubar weather app
AmiumA work collaboration product that brings conversation to your files
SoubeSimple music player
(Un)coloredNext generation desktop rich content editor that saves documents with themes HTML & Markdown compatible. For Windows, OS X & Linux.
quickcalcMenubar Calculator
Forestpin AnalyticsFinancial data analytics tool for businesses
LingREST Client
ShortextsShortcuts for texts you copy frequently, folders and emojis
Front-End BoxSet of front-end-code generators

Les documents de l'API d’Electron en tant que données structurées

· 4 mins de lecture

Nous annonçons aujourd’hui, quelques améliorations de la documentation d’Electron. Chaque nouvelle version inclut désormais un fichier JSON décrivant en détail toutes les API publiques d’Electron. Nous avons créé ce fichier pour permettre aux développeurs d’utiliser la documentation de l’API d’Electron de manière plus intéressante.


Aperçu du schéma

Chaque API est un objet avec des propriétés telles que nom, description, type, etc. Les classes telles que BrowserWindow et Menu ont des propriétés supplémentaires décrivant leurs méthodes d’instance, propriétés d’instance, événements d’instance, etc.

Voici un extrait du schéma décrivant la classe BrowserWindow:

{
nom: 'BrowserWindow', description
: 'Créer et contrôler les fenêtres du navigateur.', processus
: {
main: true,
renderer: false
}, type
: 'Class',
instanceName: 'win',
slug: 'browser-window',
websiteUrl: 'https://electronjs.org/docs/api/browser-window',
repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
staticMethods: [...],
instanceMethods: [...],
instanceProperties: [...],
instanceEvents: [...]
}

Et cet autre exemple exemple de description dune méthode, ici, la méthode d'instance apis.BrowserWindow.instanceMethods.setMaximumSize:

{
name: 'setMaximumSize',
signature: '(width, height)',
description: 'Sets the maximum size of window to width and height.',
parameters: [{
name: 'width',
type: 'Integer'
}, {
name: 'height',
type: 'Integer'
}]
}

Utilisation de ces nouvelles données

Pour faciliter l'utilisation de ces données structurées dans leurs projets par les développeurs, nous avons créé electron-docs-api, un petit package npm publié automatiquement chaque fois qu'il y a une nouvelle version d'Electron .

npm install electron-api-docs --save

Pour une appréciation rapide, essayez le module dans votre REPL Node.js :

npm i -g trymodule && trymodule electron-api-docs=apis

Comment les données sont collectées

La documentation API d'Electron adhère à Electron Coding Style et au Electron Styleguide et donc son contenu peut être analysé par programme.

Le electron-docs-linter est une nouvelle dépendance de développement du dépôt electron/electron. C'est un outil en ligne de commande qui effectue un lint de tous les fichiers markdown et applique les règles du styleguide. Si des erreurs sont trouvées, elles sont listées et le processus de publication est interrompu. Si les docs de l'API sont valides, le fichier electron-json.api est créé et téléchargé sur GitHub pour être inclus dans la version d'Electron.

Javascript standard et Markdown standard

Plus tôt dans l'année, la base de code d'Electron a été mise à jour pour utiliser le linter standard pour tout JavaScript. Le README de Standard résume le raisonnement derrière ce choix :

L'adoption d'un style standard donne plus dl'importance à la clarté du code et des conventions communautaires que le style personnel. Cela n'est peut être pas judicieux pour 100 % des projets et des cultures de développement, toutefois l'open source peut être un environnement hostile pour les débutants. La mise en place d’attentes claires et automatisées des contributeurs rend un projet plus sain.

Nous avons également récemment créé markdown-standard pour vérifier que tous les snippets de code JavaScript de notre documentation sont valides et cohérents avec le style de la base de code elle-même.

Ensemble, ces outils nous aident à utiliser l'intégration continue (CI) pour trouver automatiquement des erreurs dans les pull requests. Cela réduit le fardeau imposé aux humains qui effectuent la revue du code et nous donne plus de confiance quant à l’exactitude de notre documentation.

Un effort de la communauté

La documentation d’Electron s’améliore constamment, et nous devons remercier notre formidable communauté open-source pour cela. Au moment d’écrire ces lignes, près de 300 personnes ont contribué aux documents.

Nous sommes heureux de voir ce que les gens font avec ces nouvelles données structurées. Utilisations possibles:

Electron Internals: Weak References

· 6 mins de lecture

As a language with garbage collection, JavaScript frees users from managing resources manually. But because Electron hosts this environment, it has to be very careful avoiding both memory and resources leaks.

This post introduces the concept of weak references and how they are used to manage resources in Electron.


Weak references

In JavaScript, whenever you assign an object to a variable, you are adding a reference to the object. As long as there is a reference to the object, it will always be kept in memory. Once all references to the object are gone, i.e. there are no longer variables storing the object, the JavaScript engine will recoup the memory on next garbage collection.

A weak reference is a reference to an object that allows you to get the object without effecting whether it will be garbage collected or not. You will also get notified when the object is garbage collected. It then becomes possible to manage resources with JavaScript.

Using the NativeImage class in Electron as an example, every time you call the nativeImage.create() API, a NativeImage instance is returned and it is storing the image data in C++. Once you are done with the instance and the JavaScript engine (V8) has garbage collected the object, code in C++ will be called to free the image data in memory, so there is no need for users manage this manually.

Un autre exemple est le problème de disparition de fenêtre, qui montre visuellement comment la fenêtre est des ordures collectées quand toutes les références à lui sont terminées.

Testing weak references in Electron

There is no way to directly test weak references in raw JavaScript since the language doesn't have a way to assign weak references. The only API in JavaScript related to weak references is WeakMap, but since it only creates weak-reference keys, it is impossible to know when an object has been garbage collected.

In versions of Electron prior to v0.37.8, you can use the internal v8Util.setDestructor API to test weak references, which adds a weak reference to the passed object and calls the callback when the object is garbage collected:

// Le code ci-dessous ne peut s'exécuter que sur Electron < v0.37.8.
var v8Util = process.atomBinding('v8_util');

var object = {};
v8Util.setDestructor(object, function () {
console.log('The object is garbage collected');
});

// Remove all references to the object.
object = undefined;
// Manually starts a GC.
gc();
// Console prints "The object is garbage collected".

Note that you have to start Electron with the --js-flags="--expose_gc" command switch to expose the internal gc function.

The API was removed in later versions because V8 actually does not allow running JavaScript code in the destructor and in later versions doing so would cause random crashes.

Weak references in the remote module

Apart from managing native resources with C++, Electron also needs weak references to manage JavaScript resources. Un exemple est le module distantd'Electron, , qui est un module d'appel à distance (RPC) qui permet d'utiliser des objets dans le processus principal à partir des processus de rendu.

One key challenge with the remote module is to avoid memory leaks. When users acquire a remote object in the renderer process, the remote module must guarantee the object continues to live in the main process until the references in the renderer process are gone. Additionally, it also has to make sure the object can be garbage collected when there are no longer any reference to it in renderer processes.

For example, without proper implementation, following code would cause memory leaks quickly:

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

for (let i = 0; i < 10000; ++i) {
remote.nativeImage.createEmpty();
}

The resource management in the remote module is simple. Whenever an object is requested, a message is sent to the main process and Electron will store the object in a map and assign an ID for it, then send the ID back to the renderer process. In the renderer process, the remote module will receive the ID and wrap it with a proxy object and when the proxy object is garbage collected, a message will be sent to the main process to free the object.

Using remote.require API as an example, a simplified implementation looks like this:

remote.require = function (name) {
// Tell the main process to return the metadata of the module.
const meta = ipcRenderer.sendSync('REQUIRE', name);
// Create a proxy object.
const object = metaToValue(meta);
// Tell the main process to free the object when the proxy object is garbage
// collected.
v8Util.setDestructor(object, function () {
ipcRenderer.send('FREE', meta.id);
});
return object;
};

Dans le processus principal :

const map = {};
const id = 0;

ipcMain.on('REQUIRE', function (event, name) {
const object = require(name);
// Add a reference to the object.
map[++id] = object;
// Convert the object to metadata.
event.returnValue = valueToMeta(id, object);
});

ipcMain.on('FREE', function (event, id) {
delete map[id];
});

Maps with weak values

With the previous simple implementation, every call in the remote module will return a new remote object from the main process, and each remote object represents a reference to the object in the main process.

The design itself is fine, but the problem is when there are multiple calls to receive the same object, multiple proxy objects will be created and for complicated objects this can add huge pressure on memory usage and garbage collection.

For example, the following code:

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

for (let i = 0; i < 10000; ++i) {
remote.getCurrentWindow();
}

It first uses a lot of memory creating proxy objects and then occupies the CPU (Central Processing Unit) for garbage collecting them and sending IPC messages.

An obvious optimization is to cache the remote objects: when there is already a remote object with the same ID, the previous remote object will be returned instead of creating a new one.

This is not possible with the API in JavaScript core. Using the normal map to cache objects will prevent V8 from garbage collecting the objects, while the WeakMap class can only use objects as weak keys.

To solve this, a map type with values as weak references is added, which is perfect for caching objects with IDs. Now the remote.require looks like this:

const remoteObjectCache = v8Util.createIDWeakMap()

remote.require = function (name) {
// Tell the main process to return the meta data of the module.
...
if (remoteObjectCache.has(meta.id))
return remoteObjectCache.get(meta.id)
// Create a proxy object.
...
remoteObjectCache.set(meta.id, object)
return object
}

Notez que le remoteObjectCache conserve des objets comme des références faibles, il n’est donc pas nécessaire de supprimer la clé lorsque l’objet est collecté par le garbage collector.

Native code

For people interested in the C++ code of weak references in Electron, it can be found in following files:

The setDestructor API:

The createIDWeakMap API:

Août 2016 : Nouvelles applications

· 3 mins de lecture

Voici les nouvelles applications Electron qui ont été ajoutées sur le site en août.


The site is updated with new apps and meetups through pull requests from the community. Vous pouvez surveiller le dépôt pour être informé des nouveaux ajouts ou, si vous n'êtes pas intéressé par toutes les modifications du site, vous pouvez vous abonner au fil RSS du blog.

Si vous avez créé une application Electron ou si vous organisez une réunion, faites une requête pour l'ajouter au site et elle fera partie du prochain regroupement.

Nouvelles applications

Code RPGifyRPG style coding application
PamFaxA cross-platform app for sending and receiving faxes
BlankUpMarkdown editor witch clarity +1
RamboxFree and Open Source messaging and emailing app that combines common web applications into one
GordieThe best app for your card collections
Ionic CreatorBuild amazing mobile apps, faster
TwitchAlertsKeep your viewers happy with beautiful alerts and notifications
MuseeksA simple, clean and cross-platform music player
SeaPigA converter from markdown to html
GroupMeUnofficial GroupMe App
MoeditorYour all-purpose markdown editor
SoundnodeSoundnode App is the Soundcloud for desktop
QMUI WebQMUI Web Desktop is an application for managing projects based on QMUI Web Framework
SvgsusOrganize, clean and transform your SVGs
RammeUnofficial Instagram Desktop App
InsomniaREST API Client
CorreoA menubar/taskbar Gmail App for Windows, macOS and Linux
KongDashDesktop client for Kong Admin API
Translation EditorTranslation files editor for INTL ICU messages (see formatjsio)
5EClient5EPlay CSGO Client
Theme JuiceLocal WordPress development made easy

Outils d'accessibilité

· 2 mins de lecture

La réalisation d'applications accessibles est importante et nous sommes heureux d'introduire de nouvelles fonctionnalités pour Devtron et Spectron qui donnent aux développeurs la possibilité de rendre leurs applications meilleures pour tous.


Les problèmes d’accessibilité dans les app Electron sont similaires à ceux des sites Web parce qu’ils sont tous deux en HTML. Avec les app Electron, toutefois, vous ne pouvez pas utilisez les ressources en ligne pour les vérifications de l'accessibilité parce que votre application n'est pas une URL.

Ces nouvelles fonctionnalités apportent ces outils d'audit à votre application Electron. Vous pouvez choisir d'ajouter des audits à vos tests avec Spectron ou les utiliser dans DevTools avec Devtron. Lire la suite pour un résumé des outils ou regardez notre documentation sur l'accessibilité pour plus d’informations.

Spectron

Dans l’infrastructure de test Spectron, vous pouvez maintenant auditer chaque fenêtre et balise <webview> de votre application. Par exemple :

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

Vous pouvez en savoir plus sur cette fonctionnalité dans la documentation de Spectron.

Devtron

Dans Devtron il y a un nouvel onglet accessibilité qui vous de vérifier une page dans votre application puis de trier et de filtrer les résultats.

capture d’écran devtron

Ces deux outils utilisent la bibliothèque Outils d'accessibilité pour les développeurs faite par Google pour Chrome. Vous pouvez en apprendre davantage sur les règles d’audit accessibilité que cette bibliothèque utilise sur ce wiki du référentiel.

Si vous connaissez d’autres bons outils d'accessibilité pour Electrons, ajoutez-les à la documentation de l’accessibilité avec une pull request.

npm install electron

· 3 mins de lecture

Depuis la version 1.3.1 d'Electron, vous pouvez utiliser npm install electron --save-dev pour installer la dernière version précompilée d'Electron dans votre application.


npm install electron

Le binaire Electron précompilé

Si vous avez déjà travaillé sur une application Electron, vous avez probablement rencontré le paquet npm de electron-prebuilt. Ce paquet est une partie indispensable de presque tous les projets Electron. Une fois installé, il détecte votre système d'exploitation et télécharge un binaire précompilé qui est compilé pour fonctionner sur l'architecture de votre système.

Le nouveau nom

Le processus d'installation d'Electron était souvent une pierre d'achoppement pour les nouveaux développeurs. Beaucoup de braves gens ont essayé de commencer à développer un Electron par application en exécutant npm install electron au lieu de npm install electron-prebuilt, seulement pour découvrir (souvent après beaucoup de confusion) que ce n'était pas les electron qu'ils recherchaient.

C'était parce qu'il y avait un projet electron existant sur npm, créé avant le projet Electron de GitHub. Pour aider à rendre le développement d'Electron plus facile et plus intuitif pour les nouveaux développeurs, nous avons contacté le propriétaire du paquet npm existant electron pour lui demander s'il accepterait de nous laisser utiliser le nom. Heureusement, il a été fan de notre projet et a accepté de nous aider à réutiliser le nom.

Vues préconstruites sur

Depuis la version 1.3.1, nous avons commencé à publier les paquets electron et electron-prebuilt sur npm en tandem. Les deux paquets sont identiques. Nous avons choisi de continuer à publier le paquet sous les deux noms pendant un certain temps afin de ne pas gêner les milliers de développeurs qui utilisent actuellement electron-prebuilt dans leurs projets. Nous vous recommandons de mettre à jour vos fichiers package.json pour utiliser la nouvelle dépendance d'electron, mais nous continuerons à publier de nouvelles versions de electron-prebuilt jusqu'à la fin de 2016.

Le dépôt electron-userland/electron-prebuilt restera la maison canonique du paquet npm electron.

Merci beaucoup

Nous devons un merci spécial à @mafintosh, @maxogden, et beaucoup d'autres contributeurs pour la création et la maintenance de electron-prebuilt, et pour leur service infatigable au JavaScript, Node.js, et communautés Electron.

Et merci à @logicalparadox de nous avoir permis à de prendre le paquet electron sur npm.

Mise à jour de vos projets

Nous avons travaillé avec la communauté pour mettre à jour les paquets populaires qui sont affectés par ce changement. Les paquets comme electron-packager, electron-rebuild, et electron-builder ont déjà été mis à jour pour fonctionner avec le nouveau nom tout en continuant à supporter l'ancien nom.

Si vous rencontrez des problèmes pour installer ce nouveau paquet, veuillez nous le faire savoir en ouvrant une issue sur le dépôt electron-userland/electron-prebuilt.

Pour tout autre problème avec Electron, veuillez utiliser le dépôt electron/electron.

Au coeur d'Electron : Utilisation de Node en tant que Bibliothèque

· 4 mins de lecture

Ceci est le deuxième article d’une série en cours expliquant le fonctionnement interne d'Electron. Consultez le premier post sur l'intégration de la boucle d'événement si vous ne l'avez pas déjà fait.

La plupart des gens utilisent Node pour les applications côté serveur, mais en raison de l’ensemble d’API riche de Node et de sa communauté florissante, il convient également parfaitement à une bibliothèque intégrée. Cet article explique comment Node est utilisé comme bibliothèque dans Electron.


Système de génération

Node et Electron utilisent GYP comme systèmes de génération. Si vous souhaitez intégrer Node dans votre application, vous devez également l’utiliser comme système de génération.

Vous ne connaissez pas GYP? Lisez ce guide avant de continuer dans cet article.

Node's flags

Le nœud yp dans le répertoire de code source de Node décrit comment Node est construit, avec beaucoup de GYP variables qui contrôlent quelles parties de Node sont activées et si pour ouvrir certaines configurations.

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. Les configurations pour Node sont définies dans le fichier common.gypi dans le répertoire du code source d'Electron.

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.

Cependant, cela a changé après que Chrome ait basculé pour utiliser BoringSSL. BoringSSL est un fork de OpenSSL qui supprime plusieurs API inutilisées et modifie de nombreuses interfaces existantes. Because Node still uses OpenSSL, the compiler would generate numerous linking errors due to conflicting symbols if they were linked together.

Electron n'a pas pu utiliser BoringSSL dans le nœud, ou utiliser OpenSSL dans Chromium, la seule option était donc de basculer vers la construction d'un noeud en tant que bibliothèque partagée, et cachent les symboles BoringSSL et OpenSSL dans les composantes de chacune.

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

Modules natifs dans le travail de Noeude en définissant une fonction d'entrée pour le chargement de Noeud, puis la recherche des symboles de V8 et libuv à partir de 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. Pour libuv, il est réalisé en définissant la définition BUILDING_UV_SHARED=1 définition.

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. Habituellement, vous pouvez juste appeler node::Start et node::Init pour démarrer une nouvelle instance de Node. 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.

Juillet 2016 : Nouvelles applications et Meetups

· 2 mins de lecture

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. Vous pouvez surveiller le dépôt pour être informé des nouveaux ajouts ou, si vous n'êtes pas intéressé par toutes les modifications du site, vous pouvez vous abonner au fil RSS du blog.

Si vous avez créé une application Electron ou si vous organisez une réunion, faites une requête pour l'ajouter au site et elle fera partie du prochain regroupement.

Nouvelles applications

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

Au coeur d'Electron: Intégration de la boucle de Messages

· 4 mins de lecture

C'est le premier article d'une série qui explique le fonctionnement interne d'Electron. Cet article présente comment la boucle d’événements de Node est intégrée dans Electron avec Chromium.


Il y a eu de nombreuses tentatives d'utiliser Node pour la programmation GUI, comme node-gui pour les liaisons avec GTK+ et node-qt pour les liaisons avec QT. Mais aucune d'entre elle ne fonctionne en production parce que les kits d'outils d'interface graphique ont leurs propres boucles de message tandis que Node utilise libuv pour sa propre boucle d'événement, et le thread principal ne peut exécuter qu'une seule boucle en même temps. Ainsi, l’astuce courante pour exécuter la boucle de message GUI dans Node consiste à activer la boucle de message par l'intermédiaire d'un timer avec un très petit intervalle, ce qui ralentit la réponse de l’interface graphique et occupe beaucoup de ressources CPU.

Lors du développement d'Electron, nous avons rencontré le même problème, bien que de manière inversée : nous devions intégrer la boucle d'événements de Node dans la boucle message de Chromium.

Le processus principal et le processus de rendu

Avant de plonger dans les détails de l'intégration de la boucle de messages, je vais d'abord expliquer l'architecture multi-processus de Chromium.

Dans Electron, il y a deux types de processus : le processus principal et le processus de rendu (ceci est en fait extrêmement simplifié, pour une vue complète, voir Architecture multi-processus). Le processus principal est responsable de l'interface utilisateur comme la création de fenêtres, tandis que le processus de rendu ne s'occupe que de l'exécution et du rendu des pages Web.

Electron permet d'utiliser JavaScript pour contrôler à la fois le processus principal et le processus de rendu, ce qui signifie que nous devons intégrer Node dans les deux processus.

Remplacement de la boucle de message de Chromium par libuv

Ma première tentative fut de ré implémenter la boucle de message de Chromium avec libuv.

C'était facile pour le processus de rendu car sa boucle de message n'écoutait que les descripteurs de fichiers et les timers et je n'avais besoin que d'implémenter l'interface avec libuv.

Cependant, c’était beaucoup plus difficile pour le processus principal. Chaque plate-forme a son propre type de boucles de messages GUI. macOS Chromium utilise NSRunLoop, alors que Linux utilise glib. J'ai essayé de nombreux hacks pour extraire les descripteurs de fichiers sous-jacents des boucles de messages de l'interface native, et puis les fournir à libuv pour itération, mais j'ai toujours rencontré des cas particuliers qui ne fonctionnaient pas.

J'ai donc finalement ajouté un timer pour interroger la boucle du message de l'interface dans un petit intervalle. Comme un résultat le processus a une utilisation constante du processeur, et certaines opérations ont de longs retards.

Scrutation de la boucle d’événements de Node dans un thread distinct

Comme libuv a mûri, il a été possible d’adopter une autre approche.

Le concept de fd backend a été introduit dans libuv, qui est un descripteur de fichier (ou un manipulateur) que libuv interroge pour sa boucle d'événements. Donc, en interrogeant le backend fd, il est possible d’être averti lorsqu’il y a un nouvel événement dans libuv.

Donc, dans Electron, j'ai créé un thread séparé pour interroger le backend fd, et puisque j'utilise les appels du système pour scruter au lieu des API libuv, c'est thread safe sûr. Et chaque fois qu'il y a un nouvel événement dans la boucle d'événement de libuv, un message est posté dans la boucle de message de Chromium, et les événements de libuv sont alors traités dans le thread principal.

De cette façon, j'ai évité de patcher Chromium et Node, et le même code a été utilisé dans à la fois les processus principal et de rendu.

Le code

Vous pouvez trouver l'implémentation de l'intégration de la boucle message dans les fichiers node_bindings sous electron/atom/common/. Il peut être facilement réutilisé pour les projets souhaitant intégrer Node.

Update: l'Implementation a été déplacée dans electron/shell/common/node_bindings.cc.

Electron Podcasts

· Une min de lecture

Looking for an introduction to Electron? Two new podcasts have just been released that give a great overview of what it is, why it was built, and how it is being used.


Out now:

Hanselminutes: Creating cross-platform Electron apps

Is Electron "just Chrome in a frame" or is it so much more? Jessica sets Scott on the right path and explains exactly where the Electron platform fits into your development world.


JavaScript Air: Electron Apps

Electron is becoming more and more of a relevant and popular way of building multi-platform desktop apps with web technologies. Let's get a dive into this awesome tech and see how we can use it to enhance our own experience and our user's experience on the desktop.


If you're looking for an introduction to Electron, give the first a listen. The second goes into more detail about building apps with great tips from Nylas's Evan Morikawa.

We are currently working on two more podcasts that should come out next month, keep an eye on the @ElectronJS Twitter account for updates.