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. 你可以查看库以获取新添加内容的通知，或如果你对_所有_更新不感兴趣，关注博客的RSS订阅。

如果您已经制作了一个 Electron 应用程序或主办了一次会议，提交一个 拉取请求 添加到站点，它将被包括进下一次统计。

新应用​

	Demio	A Webinar platform built for inbound sales and marketing
	Electorrent	A remote client app for uTorrent server
	PhoneGap	The open source framework that gets you building amazing mobile apps using web technology
	WordMark	A lightweight blog publishing editor for Markdown writers
	UbAuth	App to help developers create access tokens for Uber applications with OAuth 2.0
	HyperTerm	HTML/JS/CSS terminal
	Marp	Markdown presentation writer
	Glyphr Studio	A free, web based font designer, focusing on font design for hobbyists
	BitCrypt	A simple file encryption application for Windows Encrypt your bits
	Trym	Beautiful small app for macOS to help you view, optimize and convert SVG icons
	Booker	Text editor with the power of Markdown
	PhonePresenter	The smartest presentation clicker
	Yout	The new way to watch your playlists from YouTube on desktop

New Meetups​

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.

像 node-gui for GTK+ bindings, and node-qt for QT bindings. 但其中没有一个在生产中工作，因为图形界面工具包有自己的消息 循环，而诺德则在自己的事件循环中使用 libuv ， 并且主线程只能同时运行 个循环。 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.

Electron 有两种类型的进程：主进程和渲染器 进程(这实际上是非常简化的, 完整的视图请查看 多进程架构。 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​

您可以在 electron/atom/common/ 目录下node_bindings 文件中找到消息循环集成的实现方式。 It can be easily reused for projects that want to integrate Node.

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

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.

在过去的两年中，Electron帮助开发者使用HTML，CSS和JavaScript构建跨平台 桌面应用程序。 现在我们很高兴与我们的框架和创建它的社区分享一个重要的 里程碑。 Electron 1.0 的版本 现在可从 electrjs.org 获得。

Electron 1.0代表了API稳定性和成熟度的重要里程碑。 此版本允许您构建在 Windows、 Mac 和 Linux 上有真正原生运行体验的应用程序。 使用新文档、 新工具以及引导您完成 Electron API 的新应用程序，构建 Electron 应用程序比以往任何时候都容易。

如果您已经准备好构建您的第一个Electron应用程序，这里有一个 快速启动指南 来帮助您启动程序。

我们很期待看到您接下来使用Electron构建的项目。

Electron的道路​

我们在两年多前启动了 Atom 时发布了Electron。 当时被称为Atom Shell的Electron，是我们在其上构建Atom的框架。 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.

现在驾车的 Electron 是一个不断增长的开发者社区和公司构建 来自 email的所有东西， 聊天和 Git 应用 到 SQL 分析工具, 种子客户端和 机器人。

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. 参加一些惊人的 Electron 应用程序的 的游览 ，如果它还不存在，请自己添加。

Electron API 演示​

随着 1.0 版本的发布，我们将发布一个新的应用以帮助您探索Electron API ，并详细了解如何让您的 Electron 应用程序感觉原生。 Electron API Demos 应用程序包含代码片段以帮助 你启动你的应用程序，并且提示如何有效地使用 Electron API。

Devtron​

我们还添加了一个新的扩展程序，以帮助您调试Electron 应用程序。 Devtron 是一个开放源码扩展到 Chrome 开发者工具 旨在帮助您查看， 调试和疑难解答您的 Electron 应用。

功能​

• Require graph ，以帮助你可视化主进程和渲染器进程中应用的内部和外部库依赖项
• IPC monitor ，用于跟踪和显示应用中进程之间发送和接收的消息
• 事件检查器 ，向您显示 在应用程序的核心 Electron API（如窗口、应用程序和进程）上注册的事件和侦听器
• App Linter that checks your apps for common mistakes and missing functionality

Spectron​

最后，我们正在发布一个新版本的 Spectron，Electron 应用程序的集成 测试框架。

Spectron 3.0全面支持整个Electron API，使您可以 更快地编写测试，以验证应用程序在各种 场景和环境下的行为。 Spectron基于 ChromeDriver 和 WebDriverIO 因此它还具有用于页面导航，用户 输入和JavaScript执行的完整API。

社区​

Electron 1.0是数百名开发人员社区努力的结果。 在核心框架之外，已经有数百个库和工具 被发布，以使构建、包装和部署Electron应用程序更容易。

现在有一个新的 社区 页面列出了正在开发的许多超棒的 Electron 工具、应用、库和框架。 您也可以 查看 Electron 和 Electron Userland 组织来查看一些这些奇妙的项目。

Electron新手？ 观看 Electron 1.0 简介视频：

Electron 0.37 was recently released and included a major upgrade from Chrome 47 to Chrome 49 and also several new core APIs. This latest release brings in all the new features shipped in Chrome 48 and Chrome 49. This includes CSS custom properties, increased ES6 support, KeyboardEvent improvements, Promise improvements, and many other new features now available in your Electron app.

What's New​

CSS Custom Properties​

If you've used preprocessed languages like Sass and Less, you're probably familiar with variables, which allow you to define reusable values for things like color schemes and layouts. Variables help keep your stylesheets DRY and more maintainable.

CSS custom properties are similar to preprocessed variables in that they are reusable, but they also have a unique quality that makes them even more powerful and flexible: they can be manipulated with JavaScript. This subtle but powerful feature allows for dynamic changes to visual interfaces while still benefitting from CSS's hardware acceleration, and reduced code duplication between your frontend code and stylesheets.

For more info on CSS custom properties, see the MDN article and the Google Chrome demo.

CSS Variables In Action​

Let's walk through a simple variable example that can be tweaked live in your app.

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

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

The variable value can be retrieved and changed directly in JavaScript:

// Get the variable value ' #A5ECFA'
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// Set the variable value to 'orange'
document.body.style.setProperty('--awesome-color', 'orange');

The variable values can be also edited from the Styles section of the development tools for quick feedback and tweaks:

KeyboardEvent.code Property​

Chrome 48 added the new code property available on KeyboardEvent events that will be the physical key pressed independent of the operating system keyboard layout.

This should make implementing custom keyboard shortcuts in your Electron app more accurate and consistent across machines and configurations.

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

Check out this example to see it in action.

Promise Rejection Events​

Chrome 49 added two new window events that allow you to be notified when an rejected Promise goes unhandled.

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

Check out this example to see it in action.

ES2015 Updates in V8​

The version of V8 now in Electron incorporates 91% of ES2015. Here are a few interesting additions you can use out of the box—without flags or pre-compilers:

Default parameters​

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

multiply(5); // 5

解构赋值​

Chrome 49 added destructuring assignment to make assigning variables and function parameters much easier.

This makes Electron requires cleaner and more compact to assign now:

Browser Process Requires​

const { app, BrowserWindow, Menu } = require('electron');

Renderer Process Requires​

const { dialog, Tray } = require('electron').remote;

Other Examples​

// 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();

New Electron APIs​

A few of the new Electron APIs are below, you can see each new API in the release notes for Electron releases.

show and hide events on BrowserWindow​

These events are emitted when the window is either shown or hidden.

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

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Window was shown');
});
window.on('hide', function () {
  console.log('Window was hidden');
});

platform-theme-changed on app for OS X​

This event is emitted when the system’s Dark Mode theme is toggled.

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

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

app.isDarkMode() for OS X​

This method returns true if the system is in Dark Mode, and false otherwise.

scroll-touch-begin and scroll-touch-end events to BrowserWindow for OS X​

These events are emitted when the scroll wheel event phase has begun or has ended.

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

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

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):

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API Streaming

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.

Since the beginning of Electron, starting way back when it used to be called Atom-Shell, we have been experimenting with providing a nice cross-platform JavaScript API for Chromium's content module and native GUI components. The APIs started very organically, and over time we have made several changes to improve the initial designs.

Now with Electron gearing up for a 1.0 release, we'd like to take the opportunity for change by addressing the last niggling API details. The changes described below are included in 0.35.x, with the old APIs reporting deprecation warnings so you can get up to date for the future 1.0 release. An Electron 1.0 won't be out for a few months so you have some time before these changes become breaking.

弃用警告​

By default, warnings will show if you are using deprecated APIs. To turn them off you can set process.noDeprecation to true. To track the sources of deprecated API usages, you can set process.throwDeprecation to true to throw exceptions instead of printing warnings, or set process.traceDeprecation to true to print the traces of the deprecations.

使用内置模块的新方式​

内置模块现在分成一个模块，而不是分成独立模块， 这样您就可以使用它们 而不会与其他模块 相冲突：

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

The old way of require('app') is still supported for backward compatibility, but you can also turn if off:

require('electron').hideInternalModules();
require('app'); // throws error.

An easier way to use the remote module​

Because of the way using built-in modules has changed, we have made it easier to use main-process-side modules in renderer process. You can now just access remote's attributes to use them:

// New way.
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

Instead of using a long require chain:

// Old way.
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

Splitting the ipc module​

The ipc module existed on both the main process and renderer process and the API was different on each side, which is quite confusing for new users. We have renamed the module to ipcMain in the main process, and ipcRenderer in the renderer process to avoid confusion:

// 在主进程中.
var ipcMain = require('electron').ipcMain;

// In renderer process.
var ipcRenderer = require('electron').ipcRenderer;

And for the ipcRenderer module, an extra event object has been added when receiving messages, to match how messages are handled in ipcMain modules:

ipcRenderer.on('message', function (event) {
  console.log(event);
});

BrowserWindow 的标准化​

The BrowserWindow options had different styles based on the options of other APIs, and were a bit hard to use in JavaScript because of the - in the names. They are now standardized to the traditional JavaScript names:

new BrowserWindow({ minWidth: 800, minHeight: 600 });

Following DOM's conventions for API names​

The API names in Electron used to prefer camelCase for all API names, like Url to URL, but the DOM has its own conventions, and they prefer URL to Url, while using Id instead of ID. We have done the following API renames to match the DOM's styles:

• Url 更名为 URL
• Csp 更名为 CSP

You will notice lots of deprecations when using Electron v0.35.0 for your app because of these changes. An easy way to fix them is to replace all instances of Url with URL.

Changes to Tray's event names​

The style of Tray event names was a bit different from other modules so a rename has been done to make it match the others.

• clicked 更名为 click
• double-clicked 更名为 double-click
• right-clicked 更名为 right-click

Recently Electron added two exciting features: a Mac App Store compatible build and a built-in Windows auto updater.

Mac App Store Support​

As of v0.34.0 each Electron release includes a build compatible with the Mac App Store. Previously an application built on Electron would not comply with Apple's requirements for the Mac App Store. Most of these requirements are related to the use of private APIs. In order to sandbox Electron in such a way that it complies with the requirements two modules needed to be removed:

• crash-reporter
• auto-updater

Additionally some behaviors have changed with respect to detecting DNS changes, video capture and accessibility features. You can read more about the changes and submitting your app to the Mac App store in the documentation. The distributions can be found on the Electron releases page, prefixed with mas-.

Related Pull Requests: electron/electron#3108, electron/electron#2920

Windows Auto Updater​

In Electron v0.34.1 the auto-updater module was improved in order to work with Squirrel.Windows. This means that Electron ships with easy ways for auto updating your app on both OS X and Windows. You can read more on setting up your app for auto updating on Windows in the documentation.

Related Pull Request: electron/electron#1984

Electron近期收到了一些有趣的更新和趣谈，摘要如下：

源​

Electron 现在已经更新了 Chrome 45，截止为 v0.32.0。 其他更新包含...

更好的帮助文档​

为了让文档看起来、读起来更舒适，我们标准化了文档记录，并对其结构进行了调整。 同时，对如日语和韩语等语言内容，还有社区贡献的文档翻译。

相关的拉取请求： electron/electron#2028electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649.

Node.js 4.1.0​

自从v0.33.0版本开始，Electron附带Node.js 4.1.0。

相关的拉取请求： electron/electrony#2817

node-pre-gyp​

依赖 node-pre-gyp 的模块现在可以在源代码构建时针对Electron编译。

相关的拉取请求： mapbox/node-pre-gyp#175

ARM支持​

Electron现在在ARMv7上为Linux提供构建。 它可以在Chromebook和Raspberry Pi 2等流行平台上运行。

相关问题： atom/libchromiumcontent#138, electron/electronic #2094, electron/electronic #366

MacOS X 10.10 “Yosemite” 式的无边框窗口​

一个由@jaanus提供的、已被合并的补丁允许Electron像其他内置的原生OS X程序一样创建包含在OS X “Yosemite” 后系统集成的红绿灯式按钮的无边框窗口。

相关的拉取请求： electron/electrony#2776

谷歌 Summer of Code 项目：打印支持​

谷歌Summer of Code项目后，我们合并了 @hokein 的补丁，以改进打印支持。 并添加打印页面到 PDF 文件的能力。

相关问题： electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom​

Atom现在已经升级到Electron v0.30.6 运行Chrome 44。 到v0.33.0的升级在atom/atom#8779上进行。

Talks​

GitHub用户Amy Palamountain在Nordic.js上为Electron做了很好的介绍。 她还创建了 electron-accelerator 库。

Amy Palomountain：用 Electron 构建本地应用程序​

也在Atom团队中的Ben Ogle在YAPC Asia上作了一段关于Electron的演讲：

Ben Ogle：使用互联网技术构建桌面应用​

Atom团队成员Kevin Sawicki等人在湾区Electron用户组近期的会面上作了关于Electron的演讲。 这些视频已被发布，这里有一些：

Kevin Sawicki：Electron的历史​

Ben Gotow：让网页应用感觉是原生的​

Join us September 29th at GitHub's HQ for an Electron meetup hosted by Atom team members @jlord and @kevinsawicki. There will be talks, food to snack on, and time to hangout and meet others doing cool things with Electron. We'll also have a bit of time to do lightning talks for those interested. Hope to see you there!

Talks

• Jonathan Ross and Francois Laberge from Jibo will share how they use Electron to animate a robot.
• Jessica Lord will talk about building a teaching tool, Git-it, on Electron.
• Tom Moor will talk about the pros and cons of building video and screen sharing on Electron with speak.io.
• Ben Gotow will preview N1: The Nylas Mail Client and talk about developing it on Electron.

详细信息​

• Location: GitHub HQ, 275 Brannan Street, San Francisco, CA, 94107
• Date: Tuesday, September 29th, 2015
• Time: 6pm - 9pm
• RSVP: ti.to/github-events/electron-meetup