Skip to main content

2016年8月:新应用

· 4 min read

以下是 8 月份添加到网站的全新 Electron 应用。

🌐 Here are the new Electron apps that were added to the site in August.


该网站通过社区的拉取请求更新新的应用聚会。你可以关注该代码库以获取新内容的通知,或者如果你对网站的所有更改不感兴趣,可以订阅博客 RSS 源

🌐 The site is updated with new apps and meetups through pull requests from the community. You can watch the repository to get notifications of new additions or if you're not interested in all of the site's changes, subscribe to the blog RSS feed.

如果你制作了一个 Electron 应用或主持了一个聚会,请提交一个 拉取请求 将其添加到网站,这样它就会出现在下一个汇总中。

🌐 If you've made an Electron app or host a meetup, make a pull request to add it to the site and it will make the next roundup.

新应用

🌐 New Apps

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

无障碍工具

· 3 min read

创建可访问的应用非常重要,我们很高兴向 DevtronSpectron 推出新功能,让开发者有机会为所有人改进他们的应用。

🌐 Making accessible applications is important and we're happy to introduce new functionality to Devtron and Spectron that gives developers the opportunity to make their apps better for everyone.


Electron 应用的无障碍问题与网站类似,因为它们最终都是 HTML。然而,对于 Electron 应用,你无法使用在线资源进行无障碍审核,因为你的应用没有可以指向审核员的 URL。

🌐 Accessibility concerns in Electron applications are similar to those of websites because they're both ultimately HTML. With Electron apps, however, you can't use the online resources for accessibility audits because your app doesn't have a URL to point the auditor to.

这些新功能将审计工具带到了你的 Electron 应用中。你可以选择在使用 Spectron 的测试中添加审计,或者在 DevTools 中使用 Devtron。阅读下文了解工具的概要,或查看我们的无障碍文档获取更多信息。

🌐 These new features bring those auditing tools to your Electron app. You can choose to add audits to your tests with Spectron or use them within DevTools with Devtron. Read on for a summary of the tools or checkout our accessibility documentation for more information.

Spectron

在测试框架 Spectron 中,你现在可以审核应用中的每个窗口和 <webview> 标签。例如:

🌐 In the testing framework Spectron, you can now audit each window and <webview> tag in your application. For example:

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

你可以在 Spectron 的文档 中阅读有关此功能的更多信息。

🌐 You can read more about this feature in Spectron's documentation.

Devtron

Devtron 中有一个新的辅助功能选项卡,可让你审核页面在你的应用中,对结果进行排序和筛选。

🌐 In Devtron there is a new accessibility tab which will allow you to audit a page in your app, sort and filter the results.

devtron screenshot

这两种工具都使用了 Google 为 Chrome 构建的 Accessibility Developer Tools 库。你可以在该 仓库的 wiki 上了解该库使用的可访问性审核规则。

🌐 Both of these tools are using the Accessibility Developer Tools library built by Google for Chrome. You can learn more about the accessibility audit rules this library uses on that repository's wiki.

如果你知道其他适用于 Electron 的出色无障碍工具,请通过提交拉取请求将它们添加到 无障碍文档 中。

🌐 If you know of other great accessibility tools for Electron, add them to the accessibility documentation with a pull request.

安装 Electron (npm install electron)

· 5 min read

从 Electron 版本 1.3.1 开始,你可以使用 npm install electron --save-dev 在你的应用中安装最新的预编译版本的 Electron。

🌐 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

预构建的 Electron 二进制文件

🌐 The prebuilt Electron binary

如果你以前用过 Electron 应用,你可能已经接触过 electron-prebuilt npm 包。这个包几乎是每个 Electron 项目不可或缺的一部分。安装后,它会检测你的操作系统,并下载一个为你的系统架构编译的预构建二进制文件。

🌐 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

Electron 的安装进程常常是新开发者的绊脚石。许多勇敢的人尝试通过运行 npm install electron 而不是 npm install electron-prebuilt 来开始开发 Electron 应用,结果发现(通常是在经历了很多困惑之后)这并不是他们想要的 electron

🌐 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.

这是因为在 GitHub 的 Electron 项目存在之前,npm 上已经有一个现存的 electron 项目。为了帮助新开发者更轻松、更直观地开发 Electron,我们联系了现有 electron npm 包的拥有者,询问他是否愿意让我们使用这个名字。幸运的是,他是我们项目的粉丝,并同意帮助我们重新利用这个名字。

🌐 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

从版本 1.3.1 开始,我们已经开始将 electronelectron-prebuilt 软件包同时发布到 npm。这两个软件包是相同的。我们选择在一段时间内继续以两个名字发布该软件包,以免给目前在其项目中使用 electron-prebuilt 的数千名开发者带来不便。我们建议将你的 package.json 文件更新为使用新的 electron 依赖,但我们将在 2016 年底之前继续发布 electron-prebuilt 的新版本。

🌐 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.

electron-userland/electron-prebuilt 仓库将继续作为 electron npm 包的官方存储库。

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

非常感谢

🌐 Many thanks

我们特别感谢 @mafintosh@maxogden 以及许多其他 贡献者 创建和维护 electron-prebuilt,以及他们对 JavaScript、Node.js 和 Electron 社区的不懈贡献。

🌐 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.

感谢 @logicalparadox 允许我们接管 npm 上的 electron 包。

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

更新你的项目

🌐 Updating your projects

我们已与社区合作,更新受此更改影响的热门软件包。像 electron-packagerelectron-rebuildelectron-builder 这样的软件包已经更新,以支持新名称,同时继续支持旧名称。

🌐 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.

如果在安装此新软件包时遇到任何问题,请通过在 electron-userland/electron-prebuilt 仓库中提交问题告知我们。

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

对于 Electron 的其他问题,请使用 electron/electron 仓库。

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

Electron 内部原理:将 Node 作为库使用

· 9 min read

这是一个正在进行的系列文章中的第二篇,讲解 Electron 的内部原理。如果你还没有看过关于事件循环集成的 第一条帖子,可以先去看看。

🌐 This is the second post in an ongoing series explaining the internals of Electron. Check out the first post about event loop integration if you haven't already.

大多数人使用 Node 开发服务器端应用,但由于 Node 拥有丰富的 API 集合和繁荣的社区,它也非常适合作为嵌入式库使用。本文解释了 Node 是如何在 Electron 中作为库使用的。

🌐 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

Node 和 Electron 都使用 GYP 作为它们的构建系统。如果你想在你的应用中嵌入 Node,你也必须使用它作为你的构建系统。

🌐 Both Node and Electron use GYP as their build systems. If you want to embed Node inside your app, you have to use it as your build system too.

刚接触 GYP?在继续阅读本文之前,请先阅读 本指南

🌐 New to GYP? Read this guide before you continue further in this post.

Node 的标志

🌐 Node's flags

Node 源代码目录中的 node.gyp 文件描述了 Node 是如何构建的,以及大量 GYP 变量,这些变量控制 Node 的哪些部分被启用以及是否打开某些配置。

🌐 The node.gyp file in Node's source code directory describes how Node is built, along with lots of GYP variables controlling which parts of Node are enabled and whether to open certain configurations.

要更改构建标志,你需要在项目的 .gypi 文件中设置变量。Node 中的 configure 脚本可以为你生成一些常见的配置,例如运行 ./configure --shared 将生成一个 config.gypi,其中包含指示 Node 构建为共享库的变量。

🌐 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 不使用 configure 脚本,因为它有自己的构建脚本。Node 的配置在 Electron 根源代码目录下的 common.gypi 文件中定义。

🌐 Electron does not use the configure script since it has its own build scripts. The configurations for Node are defined in the common.gypi file in Electron's root source code directory.

🌐 Link Node with Electron

在 Electron 中,通过将 GYP 变量 node_shared 设置为 true 来将 Node 链接为共享库,因此 Node 的构建类型将从 executable 改为 shared_library,并且包含 Node main 入口点的源代码将不会被编译。

🌐 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.

由于 Electron 使用随 Chromium 提供的 V8 库,因此不会使用 Node 源代码中包含的 V8 库。这是通过将 node_use_v8_platformnode_use_bundled_v8 都设置为 false 来实现的。

🌐 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

在与 Node 链接时,有两种选择:你可以将 Node 构建为静态库并将其包含在最终可执行文件中,或者你可以将其构建为共享库并随最终可执行文件一起发布。

🌐 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.

在 Electron 中,Node 长期以来都是作为静态库构建的。这使得构建进程简单,能够实现最佳的编译器优化,并且允许 Electron 在不附加额外 node.dll 文件的情况下进行分发。

🌐 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.

然而,在 Chrome 转向使用 BoringSSL 之后,这种情况发生了变化。BoringSSL 是 OpenSSL 的一个分支,它移除了一些未使用的 API 并修改了许多现有的接口。由于 Node 仍然使用 OpenSSL,如果将它们链接在一起,编译器将会生成大量由于符号冲突引起的链接错误。

🌐 However, this changed after Chrome switched to use BoringSSL. BoringSSL is a fork of OpenSSL that removes several unused APIs and changes many existing interfaces. Because Node still uses OpenSSL, the compiler would generate numerous linking errors due to conflicting symbols if they were linked together.

Electron 无法在 Node 中使用 BoringSSL,也无法在 Chromium 中使用 OpenSSL,因此唯一的选择是将 Node 构建为共享库,并在每个组件中使用 隐藏 BoringSSL 和 OpenSSL 符号

🌐 Electron couldn't use BoringSSL in Node, or use OpenSSL in Chromium, so the only option was to switch to building Node as a shared library, and hide the BoringSSL and OpenSSL symbols in the components of each.

这一变化为 Electron 带来了一些积极的副作用。在此变化之前,如果你使用本地模块,在 Windows 上是无法重命名 Electron 的可执行文件的,因为可执行文件的名称在导入库中是硬编码的。在 Node 被构建为共享库之后,这一限制就消除了,因为所有本地模块都链接到了 node.dll,其名称无需更改。

🌐 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

Node 中的 原生模块 通过为 Node 定义一个入口函数来加载,然后从 Node 中搜索 V8 和 libuv 的符号。这对于嵌入者来说有点麻烦,因为默认情况下,当将 Node 构建为库时,V8 和 libuv 的符号是隐藏的,本地模块将无法加载,因为它们找不到这些符号。

因此,为了使本地模块能够工作,V8 和 libuv 的符号在 Electron 中被暴露出来。对于 V8,这是通过 强制在 Chromium 的配置文件中公开所有符号 实现的。对于 libuv,则是通过 设置 BUILDING_UV_SHARED=1 定义 实现的。

🌐 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. For libuv, it is achieved by setting the BUILDING_UV_SHARED=1 definition.

在你的应用中启动 Node

🌐 Starting Node in your app

在完成了所有构建和与 Node 的链接工作后,最后一步是在你的应用中运行 Node。

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

Node 并没有提供很多用于嵌入到其他应用的公共 API。通常,你可以直接调用 node::Startnode::Init 来启动一个新的 Node 实例。然而,如果你正在基于 Node 构建一个复杂的应用,你必须使用像 node::CreateEnvironment 这样的 API 来精确控制每一个步骤。

🌐 Node doesn't provide many public APIs for embedding itself into other apps. Usually, you can just call node::Start and node::Init to start a new instance of 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.

在 Electron 中,Node 以两种模式启动:独立模式运行在主进程中,类似于官方的 Node 二进制文件,以及嵌入模式,将 Node API 插入到网页中。具体细节将在未来的文章中说明。

🌐 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.

2016年7月:新应用和聚会

· 3 min read

我们将开始每月汇总,以突出 Electron 社区的活动。每期汇总将包括新应用、即将举行的聚会、工具、视频等内容。

🌐 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.


该网站通过社区的拉取请求更新新的应用聚会。你可以关注仓库以接收新内容的通知,或者如果你对网站的所有更改不感兴趣,可以订阅博客 RSS 订阅

🌐 This site is updated with new apps and meetups through pull requests from the community. You can watch the repository to get notifications of new additions or if you're not interested in all of the site's changes, subscribe to the blog RSS feed.

如果你制作了一个 Electron 应用或主持了一个聚会,请提交一个 拉取请求 将其添加到网站,这样它就会出现在下一个汇总中。

🌐 If you've made an Electron app or host a meetup, make a pull request to add it to the site and it will make the next roundup.

新应用

🌐 New 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 开源桌面框架英国,伦敦

Electron 内部原理:消息循环集成

· 7 min read

这是一个系列文章的第一篇,解释了 Electron 的内部机制。这篇文章介绍了 Node 的事件循环如何与 Electron 中的 Chromium 集成。

🌐 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 编程,比如用于 GTK+ 绑定的 节点图形用户界面,以及用于 QT 绑定的 node-qt。但它们都无法在生产环境中使用,因为 GUI 工具包有自己的消息循环,而 Node 使用 libuv 进行自身的事件循环,并且主线程一次只能运行一个循环。因此,在 Node 中运行 GUI 消息循环的常用方法是用一个很短间隔的定时器来泵送消息循环,但这会导致 GUI 界面响应慢并占用大量 CPU 资源。

🌐 There had been many attempts to use Node for GUI programming, like node-gui for GTK+ bindings, and node-qt for 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.

在开发 Electron 的进程中,我们遇到了相同的问题,只是方式相反:我们必须将 Node 的事件循环集成到 Chromium 的消息循环中。

🌐 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

在我们深入了解消息循环集成的细节之前,我先解释一下 Chromium 的多进程架构。

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

在 Electron 中有两种类型的进程:主进程和渲染进程(这实际上是极度简化的版本,完整信息请参见 多进程架构)。主进程负责 GUI 工作,比如创建窗口,而渲染进程只处理网页的运行和渲染。

🌐 In Electron there are two types of processes: the main process and the renderer process (this is actually extremely simplified, for a complete view please see Multi-process Architecture). The main process is responsible for GUI work like creating windows, while the renderer process only deals with running and rendering web pages.

Electron 允许使用 JavaScript 控制主进程和渲染进程,这意味着我们必须在两个进程中集成 Node。

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

用 libuv 替换 Chromium 的消息循环

🌐 Replacing Chromium's message loop with libuv

我的第一次尝试是使用 libuv 重新实现 Chromium 的消息循环。

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

对于渲染进程来说很容易,因为它的消息循环只监听文件描述符和定时器,而我只需要实现与 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.

然而,对于主进程来说,这要困难得多。每个平台都有自己类型的 GUI 消息循环。macOS 上的 Chromium 使用 NSRunLoop,而 Linux 使用 glib。我尝试过很多方法,从原生 GUI 消息循环中提取底层文件描述符,然后将它们提供给 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.

所以我最终添加了一个定时器,以在小间隔内轮询 GUI 消息循环。结果是该进程占用了恒定的 CPU 使用率,而且某些操作有很长的延迟。

🌐 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.

在单独线程中轮询 Node 的事件循环

🌐 Polling Node's event loop in a separate thread

随着 libuv 的成熟,我们开始采用另一种方法。

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

后台文件描述符的概念被引入到 libuv 中,它是一个文件描述符(或句柄),libuv 会轮询它以进行事件循环。因此,通过轮询后台文件描述符,可以在 libuv 中有新事件时收到通知。

🌐 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.

所以在 Electron 中,我创建了一个单独的线程来轮询后端文件描述符,并且由于我使用的是系统调用进行轮询而不是 libuv 的 API,所以这是线程安全的。每当 libuv 的事件循环中有新事件时,就会向 Chromium 的消息循环发送一条消息,然后 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.

通过这种方式,我避免了修改 Chromium 和 Node,同时相同的代码被用于主进程和渲染进程。

🌐 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 文件中找到消息循环集成的实现。它可以很容易地被希望集成 Node 的项目重用。

🌐 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.

更新:实现已转移到 electron/shell/common/node_bindings.cc

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

Electron 播客

· 2 min read

想了解 Electron 吗?有两期新的播客刚刚发布,它们很好地概述了 Electron 是什么、为什么要开发它以及它是如何被使用的。

🌐 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.


现已推出:

Hanselminutes:创建跨平台的 Electron 应用

🌐 Hanselminutes: Creating cross-platform Electron apps

Electron只是“框架里的Chrome”吗,还是它远不止如此?Jessica为Scott指明了正确的方向,并详细解释了Electron平台在你的开发世界中到底扮演什么角色。


JavaScript Air:Electron 应用

🌐 JavaScript Air: Electron Apps

Electron 正变得越来越受欢迎,成为使用网页技术构建跨平台桌面应用的一种重要方式。让我们深入了解这项出色的技术,看看如何利用它来提升我们自己的体验以及用户在桌面上的使用体验。


如果你想了解 Electron 的入门知识,可以先听第一部分。第二部分则更详细地介绍了如何构建应用,并提供了 Nylas 的 Evan Morikawa 的一些实用技巧。

🌐 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.

我们目前正在制作另外两个播客,预计下个月发布,请关注 @ElectronJS 的推特账号以获取更新。

🌐 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 1.0

· 7 min read

在过去的两年里,Electron 帮助开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用。现在,我们很高兴与大家分享我们的框架及其社区取得的一个重要里程碑。Electron 1.0 现已在 electronjs.org 发布。

🌐 For the last two years, Electron has helped developers build cross platform desktop apps using HTML, CSS, and JavaScript. Now we're excited to share a major milestone for our framework and for the community that created it. The release of Electron 1.0 is now available from electronjs.org.


Electron 1.0

Electron 1.0 代表了 API 稳定性和成熟度的一个重要里程碑。这个版本允许你在 Windows、Mac 和 Linux 上构建真正本地体验的应用。借助新的文档、新工具以及引导你了解 Electron API 的新应用,构建 Electron 应用比以往任何时候都更加容易。

🌐 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.

如果你准备好创建你的第一个 Electron 应用,这里有一个 快速入门指南 可以帮助你入门。

🌐 If you're ready to build your very first Electron app, here's a quick start guide to help you get started.

我们期待看到你接下来使用 Electron 构建的作品。

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

Electron 路径

🌐 Electron's Path

我们在两年多前推出Atom时发布了Electron。Electron,当时被称为Atom Shell,是我们构建Atom的基础框架。那时候,Atom是推动Electron提供各项功能和特性的动力,因为我们在努力发布最初的Atom版本。

🌐 We released Electron when we launched Atom a little over two years ago. 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.

现在,Electron 的使用者社区正在不断壮大,包括开发者和公司,他们正在构建从 电子邮件聊天Git 应用SQL 分析工具种子客户端机器人 的各种项目。

🌐 Now driving Electron is a growing community of developers and companies building everything from email, chat, and Git apps to SQL analytics tools, torrent clients, and robots.

在过去的两年里,我们看到公司和开源项目都选择 Electron 作为其应用的基础。仅在去年,Electron 的下载量就超过了 120 万次。这里列出了一些出色的 Electron 应用,如果其中还没有你自己的应用,也可以添加进去。

🌐 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. Take a tour of some of the amazing Electron apps and add your own if it isn't already there.

Electron downloads

Electron API 演示

🌐 Electron API Demos

随着 1.0 版本的发布,我们也推出了一款新应用,帮助你探索 Electron API,并了解如何让你的 Electron 应用更本地化。Electron API 演示 应用包含代码示例,帮助你启动应用,并提供有效使用 Electron API 的技巧。

🌐 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. The Electron API Demos app contains code snippets to help you get your app started and tips on effectively using the Electron APIs.

Electron API 演示

Devtron

我们还新增了一个扩展,以帮助你调试 Electron 应用。Devtron 是一个开源扩展,用于 Chrome 开发者工具,旨在帮助你检查、调试和排除 Electron 应用的问题。

🌐 We've also added a new extension to help you debug your Electron apps. Devtron is an open-source extension to the Chrome Developer Tools designed to help you inspect, debug, and troubleshoot your Electron app.

Devtron

功能

🌐 Features

  • 需要图表,帮助你可视化应用在主进程和渲染进程中的内部和外部库依赖
  • IPC 监视器,用于跟踪并显示应用中各进程之间发送和接收的消息
  • 事件检查器,显示在你的应用中注册的事件和监听器,这些事件和监听器存在于核心 Electron API 上,例如窗口、应用和进程
  • 应用检测器,检查你的应用是否存在常见错误和缺失的功能

Spectron

最后,我们将发布 Spectron 的新版本,这是用于 Electron 应用的集成测试框架。

🌐 Finally, we're releasing a new version of Spectron, the integration testing framework for Electron apps.

Spectron

Spectron 3.0 对整个 Electron API 提供全面支持,使你能够更快速地编写测试,以验证应用在各种场景和环境中的行为。Spectron 基于 Chrome驱动WebDriverIO,因此它还提供了完整的页面导航、用户输入和 JavaScript 执行的 API。

🌐 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 is based on ChromeDriver and WebDriverIO so it also has full APIs for page navigation, user input, and JavaScript execution.

社区

🌐 Community

Electron 1.0 是数百名开发者共同努力的结果。在核心框架之外,还发布了数百个库和工具,以使构建、打包和部署 Electron 应用更加容易。

🌐 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.

现在有一个新的 社区 页面,列出了许多正在开发的很棒的 Electron 工具、应用、库和框架。你也可以查看 电子Electron 用户层 组织,了解一些这些出色的项目。

🌐 There is now a new community page that lists many of the awesome Electron tools, apps, libraries, and frameworks being developed. You can also check out the Electron and Electron Userland organizations to see some of these fantastic projects.

刚接触 Electron?观看 Electron 1.0 入门视频:

🌐 New to Electron? Watch the Electron 1.0 intro video:

Electron 0.37 有哪些新功能

· 8 min read

Electron 0.37 最近已发布,并进行了重大升级,从 Chrome 47 更新到 Chrome 49,同时还增加了几个新的核心 API。此次最新发布带来了Chrome 48Chrome 49 中的所有新功能。这包括 CSS 自定义属性、增强的 ES6 支持、KeyboardEvent 改进、Promise 改进,以及在你的 Electron 应用中可用的许多其他新功能。

🌐 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 自定义属性

🌐 CSS Custom Properties

如果你使用过像 Sass 和 Less 这样的预处理语言,你可能已经熟悉了 变量,它们允许你为颜色方案和布局等内容定义可重用的值。变量有助于保持样式表的 DRY(不重复自己)性,并使其更易于维护。

🌐 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 自定义属性类似于预处理变量,因为它们是可重复使用的,但它们还有一种独特的特性,使它们更强大、更灵活:可以使用 JavaScript 操作。这个微妙但强大的功能允许对视觉界面进行动态修改,同时仍然享受 CSS 的硬件加速 的好处,并减少前端代码与样式表之间的代码重复。

🌐 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.

有关 CSS 自定义属性的更多信息,请参阅 MDN 文章Google Chrome 演示

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

CSS 变量的实际应用

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

变量值可以直接在 JavaScript 中检索和更改:

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

CSS properties in Styles tab

KeyboardEvent.code 属性

🌐 KeyboardEvent.code Property

Chrome 48 在 KeyboardEvent 事件上新增了 code 属性,该属性将表示实际按下的物理按键,而不受操作系统键盘布局的影响。

🌐 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.

这应该使你在 Electron 应用中实现自定义键盘快捷键在不同机器和配置之间更加准确和一致。

🌐 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 拒绝事件

🌐 Promise Rejection Events

Chrome 49 添加了两个新的 window 事件,允许你在被拒绝的 Promise 未处理时收到通知。

🌐 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.

V8 中的 ES2015 更新

🌐 ES2015 Updates in V8

Electron 中使用的 V8 版本现在支持 91% 的 ES2015。这里有一些有趣的新功能,你可以开箱即用——无需标志或预编译器:

🌐 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

解构赋值

🌐 Destructuring assignment

Chrome 49 添加了解构赋值,使变量和函数参数的赋值更容易。

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

这使得 Electron 的需求分配更加简洁紧凑:

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

新的 Electron API

🌐 New Electron APIs

下面是一些新的 Electron API,你可以在 Electron 发布 的发行说明中查看每个新 API。

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

BrowserWindow 上的 showhide 事件

🌐 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-changedapp 针对 OS X

🌐 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() 用于 OS X

🌐 app.isDarkMode() for OS X

如果系统处于夜间模式,该方法返回 true,否则返回 false

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

scroll-touch-beginscroll-touch-end 事件到 OS X 的 BrowserWindow

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

在 Electron 中使用 V8 和 Chromium 功能

· 4 min read

构建一个 Electron 应用意味着你只需要创建一个代码库并为一个浏览器进行设计,这非常方便。但由于 Electron 会随着 Node.jsChromium 的发布而保持更新,你也可以利用它们提供的优秀功能。在某些情况下,这还能消除你在之前的网页应用中可能需要包含的依赖。

🌐 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.


有很多功能,我们会在这里举一些例子,但如果你想了解所有功能,可以关注 Google Chromium 博客Node.js 更新日志。你可以在 electronjs.org/#electron-versions 查看 Electron 使用的 Node.js、Chromium 和 V8 的版本。

🌐 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.

通过 V8 支持 ES6

🌐 ES6 Support through V8

Electron 将 Chromium 的渲染库与 Node.js 结合在一起。二者共享相同的 JavaScript 引擎 V8。许多 ECMAScript 2015 (ES6) 特性已经内置在 V8 中,这意味着你可以在 Electron 应用中直接使用它们,而无需任何编译器。

🌐 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.

下面是一些例子,但你还可以使用类(严格模式下)、块级作用域、Promise、类型化数组等功能。有关 V8 中 ES6 特性的更多信息,请查看 此列表

🌐 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.

箭头函数

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

字符串插值

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

新目标

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

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

数组包含

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

剩余参数

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

Chromium 功能

🌐 Chromium Features

感谢 Google 和贡献者为 Chromium 付出的辛勤劳动,在你构建 Electron 应用时,你还可以使用以下一些很酷的功能(但不限于):

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

请关注 Google Chromium 博客 了解新版本发布时的功能,另外,你也可以在 这里 查看 Electron 使用的 Chromium 版本。

🌐 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?

通过推特@ElectronJS告诉我们你最喜欢在 V8 或 Chromium 中实现的功能。

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