Skip to main content

Electron 1.0 即将到来的 API 变更

· 7 min read

自从 Electron 诞生之初,也就是它还叫 Atom-Shell 的时候,我们就一直在尝试为 Chromium 的内容模块和原生 GUI 组件提供一个良好的跨平台 JavaScript API。这些 API 的起步非常自然,随着时间的推移,我们已经对最初的设计进行了多次改进。

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


现在 Electron 正在准备 1.0 版本的发布,我们希望借此机会通过解决最后一些令人烦恼的 API 细节来进行调整。下面描述的更改已包含在 0.35.x 中,旧的 API 会显示弃用警告,以便你为未来的 1.0 版本做好更新准备。Electron 1.0 在几个月内才会发布,所以在这些更改变为不兼容之前,你还有一些时间。

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

弃用警告

🌐 Deprecation warnings

默认情况下,如果你使用已弃用的 API,将会显示警告。要关闭它们,你可以将 process.noDeprecation 设置为 true。要跟踪已弃用 API 使用的来源,你可以将 process.throwDeprecation 设置为 true 来抛出异常而不是打印警告,或者将 process.traceDeprecation 设置为 true 来打印弃用的跟踪信息。

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

使用内置模块的新方法

🌐 New way of using built-in modules

内置模块现在被归类到一个模块中,而不是分成独立的模块,因此你可以像 与其他模块不冲突 一样使用它们:

🌐 Built-in modules are now grouped into one module, instead of being separated into independent modules, so you can use them without conflicts with other modules:

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

为了向后兼容,旧的 require('app') 方式仍然受到支持,但你也可以将其关闭:

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

使用 remote 模块的更简单方法

🌐 An easier way to use the remote module

由于使用内置模块的方式发生了变化,我们已经使在渲染进程中使用主进程侧模块变得更容易。现在你只需访问 remote 的属性即可使用它们:

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

拆分 ipc 模块

🌐 Splitting the ipc module

ipc 模块在主进程和渲染进程中都有存在,并且每一方的 API 都不同,这对新用户来说相当困惑。我们已将该模块在主进程中重命名为 ipcMain,在渲染进程中重命名为 ipcRenderer,以避免混淆:

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

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

对于 ipcRenderer 模块,在接收消息时新增了一个 event 对象,以匹配 ipcMain 模块中处理消息的方式:

🌐 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 选项

🌐 Standardizing BrowserWindow options

BrowserWindow 选项基于其他 API 的选项有不同的风格,并且由于名称中的 -,在 JavaScript 中使用起来有些困难。它们现在已统一为传统的 JavaScript 名称:

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

遵循 DOM 的 API 命名约定

🌐 Following DOM's conventions for API names

Electron 中的 API 名称过去偏向于对所有 API 名称使用驼峰命名法,例如 UrlURL,但 DOM 有其自身的命名规范,它们更倾向于 URLUrl,同时使用 Id 而不是 ID。我们已进行了以下 API 重命名以匹配 DOM 的风格:

🌐 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

由于这些更改,当你在应用中使用 Electron v0.35.0 时,你会注意到很多已弃用的警告。一个简单的解决方法是将所有 Url 实例替换为 URL

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

Tray的事件名称更改

🌐 Changes to Tray's event names

Tray 事件名称的风格与其他模块有些不同,因此已进行重命名以与其他模块保持一致。

🌐 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

Electron 的 Mac 应用商店和 Windows 自动更新程序

· 3 min read

最近,Electron 增加了两个令人兴奋的功能:兼容 Mac 应用商店的版本和内置的 Windows 自动更新器。

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


Mac App Store 支持

🌐 Mac App Store Support

截至 v0.34.0,每个 Electron 版本都包含一个与 Mac App Store 兼容的构建版本。以前,使用 Electron 构建的应用无法符合苹果 Mac App Store 的要求。这些要求大多与使用私有 API 有关。为了将 Electron 沙箱化以符合这些要求,需要移除两个模块:

🌐 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

此外,在检测 DNS 更改、视频捕获和辅助功能方面,一些行为也发生了变化。你可以在文档中阅读有关这些更改以及向 Mac App Store 提交你的应用的更多信息。可以在Electron 发布页面找到这些分发版本,前缀为 mas-

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

相关的拉取请求: electron/electron#3108, electron/electron#2920

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

Windows 自动更新程序

🌐 Windows Auto Updater

在 Electron v0.34.1 中,auto-updater 模块得到了改进,以便与 Squirrel.Windows 一起使用。这意味着 Electron 提供了在 OS X 和 Windows 上轻松自动更新应用的方法。你可以在文档中阅读更多关于在 Windows 上为应用配置自动更新 的信息。

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

相关拉取请求:electron/electron#1984

🌐 Related Pull Request: electron/electron#1984

Electron 的新功能

· 7 min read

最近 Electron 上有一些有趣的更新和讨论,以下是总结。

🌐 There have been some interesting updates and talks given on Electron recently, here's a roundup.


来源

🌐 Source

v0.32.0 为止,Electron 已经更新至与 Chrome 45 同步。其他更新包括...

🌐 Electron is now up to date with Chrome 45 as of v0.32.0. Other updates include...

更完善的文档

🌐 Better Documentation

new docs

我们已经重新整理并标准化了文档,使其看起来更美观、阅读起来更顺畅。文档还有社区贡献的翻译版本,例如日语和韩语。

🌐 We have restructured and standardized the documentation to look better and read better. There are also community-contributed translations of the documentation, like Japanese and Korean.

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

🌐 Related pull requests: electron/electron#2028, electron/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。

🌐 Since v0.33.0 Electron ships with Node.js 4.1.0.

相关的拉取请求: electron/electron#2817

🌐 Related pull request: electron/electron#2817.

node-pre-gyp

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

🌐 Modules relying on node-pre-gyp can now be compiled against Electron when building from source.

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

🌐 Related pull request: mapbox/node-pre-gyp#175.

ARM 支持

🌐 ARM Support

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

🌐 Electron now provides builds for Linux on ARMv7. It runs on popular platforms like Chromebook and Raspberry Pi 2.

相关问题: atom/libchromiumcontent#138electron/electron#2094electron/electron#366

🌐 Related issues: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Yosemite 风格的无框窗口

🌐 Yosemite-style Frameless Window

frameless window

@jaanus 的一个补丁已被合并,该补丁与其他内置的 OS X 应用一样,允许在 OS X Yosemite 及更高版本上创建带有系统交通灯的无框窗口。

🌐 A patch by @jaanus has been merged that, like the other built-in OS X apps, allows creating frameless windows with system traffic lights integrated on OS X Yosemite and later.

相关的拉取请求: electron/electron#2776

🌐 Related pull request: electron/electron#2776.

Google 编程夏令营打印支持

🌐 Google Summer of Code Printing Support

在 Google 夏季编码活动之后,我们合并了 @hokein 的补丁,以改进打印支持,并增加将页面打印成 PDF 文件的功能。

🌐 After the Google Summer of Code we have merged patches by @hokein to improve printing support, and add the ability to print the page into PDF files.

相关问题: electron/electron#2677electron/electron#1935electron/electron#1532electron/electron#805electron/electron#1669electron/electron#1835

🌐 Related issues: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom

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

🌐 Atom has now upgraded to Electron v0.30.6 running Chrome 44. An upgrade to v0.33.0 is in progress on atom/atom#8779.

讨论

🌐 Talks

GitHub 用户 Amy PalamountainNordic.js 的一次演讲中对 Electron 做了精彩的介绍。她还创建了 electron-accelerator 库。

🌐 GitHubber Amy Palamountain gave a great introduction to Electron in a talk at Nordic.js. She also created the electron-accelerator library.

使用 Electron 构建原生应用,作者:Amy Palomountain

🌐 Building native applications with Electron by Amy Palomountain

Ben Ogle,同样在 Atom 团队,曾在 YAPC Asia 做过关于 Electron 的演讲:

使用 Web 技术构建桌面应用,作者:Ben Ogle

🌐 Building Desktop Apps with Web Technologies by Ben Ogle

Atom 团队成员 Kevin Sawicki 和其他人最近在 Bay Area Electron 用户组 的聚会上就 Electron 进行了演讲。视频 已经发布,这里有几个:

🌐 Atom team member Kevin Sawicki and others gave talks on Electron at the Bay Are Electron User Group meetup recently. The videos have been posted, here are a couple:

Kevin Sawicki 撰写的 Electron 历史

🌐 The History of Electron by Kevin Sawicki

Ben Gotow 撰写的《让 Web 应用感觉原生》

🌐 Making a web app feel native by Ben Gotow

GitHub总部的Electron聚会

· 2 min read

加入我们,9月29日在 GitHub 总部参加由 Atom 团队成员 @jlord@kevinsawicki 主办的 Electron 聚会。现场将有讲座、零食和交流时间,大家可以一起互动,认识正在使用 Electron 做酷事情的人。我们还将留出一些时间给有兴趣的朋友做闪电演讲。希望在那里见到你!

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


谈话

  • Jonathan RossFrancois Laberge 来自 Jibo 将分享他们如何使用 Electron 为机器人制作动画。
  • Jessica Lord 将讨论如何在 Electron 上构建教学工具 Git-it
  • Tom Moor 将讨论在 Electron 上使用 speak.io 构建视频和屏幕共享的利与弊。
  • Ben Gotow 将预览 N1: Nylas 邮件客户端 并讲解在 Electron 上开发它。

细节

🌐 Details

  • 地点: GitHub 总部,美国加利福尼亚州旧金山布兰南街 275 号,邮编 94107
  • **日期:**2015年9月29日,星期二
  • 时间: 下午6点 - 9点
  • 请回复出席: ti.to/github-events/electron-meetup

electron-meetup-office-2

Electron 文档

· 8 min read

本周我们为 Electron 的文档在 electronjs.org 上找到了一个归宿。你可以访问 /docs/latest 获取最新的文档集合。我们也会保留旧版本的文档,因此你可以访问 /docs/vX.XX.X 查看与你使用的版本对应的文档。

🌐 This week we've given Electron's documentation a home on electronjs.org. You can visit /docs/latest for the latest set of docs. We'll keep versions of older docs, too, so you're able to visit /docs/vX.XX.X for the docs that correlate to the version you're using.


你可以访问 /docs 查看可用的版本,或访问 /docs/all 在同一页面上查看文档的最新版本(对 cmd + f 搜索很有用)。

🌐 You can visit /docs to see what versions are available or /docs/all to see the latest version of docs all on one page (nice for cmd + f searches).

如果你希望为文档内容做出贡献,可以在 Electron 仓库 中进行,我们的文档就是从那里获取的。我们会在每个次要版本发布时获取文档,并将其添加到使用 Jekyll 制作的 Electron 网站仓库 中。

🌐 If you'd like to contribute to the docs content, you can do so in the Electron repository, where the docs are fetched from. We fetch them for each minor release and add them to the Electron site repository, which is made with Jekyll.

如果你想了解更多关于我们如何将文档从一个仓库拉到另一个仓库的信息,请继续阅读下面的内容。否则,请享用这些文档

🌐 If you're interested in learning more about how we pull the docs from one repository to another continue reading below. Otherwise, enjoy the docs!

技术细节

🌐 The Technical Bits

我们会在 Electron 核心仓库中按原样保留文档。这意味着 electron/electron 将始终拥有最新版本的文档。当发布新的 Electron 版本时,我们会将它们复制到 Electron 网站仓库 electron/electronjs.org 上。

🌐 We're preserving the documentation within the Electron core repository as is. This means that electron/electron will always have the latest version of the docs. When new versions of Electron are released, we duplicate them over on the Electron website repository, electron/electronjs.org.

script/docs

为了获取文档,我们运行一个带有命令行接口 script/docs vX.XX.X脚本,可以选择使用或不使用 --latest 选项(取决于你导入的版本是否为最新版本)。我们的 获取文档的脚本 使用了一些有趣的 Node 模块:

🌐 To fetch the docs we run a script with a command line interface of script/docs vX.XX.X with or without the --latest option (depending on if the version you're importing is the latest version). Our script for fetching docs uses a few interesting Node modules:

测试 帮助我们确认所有零部件都按预期到位。

Jekyll

Electron 网站是一个 Jekyll 网站,我们在文档中使用 Collections 功能,结构如下:

🌐 The Electron website is a Jekyll site and we make use of the Collections feature for the docs with a structure like this:

electron.atom.io
└── _docs
├── latest
├── v0.27.0
├── v0.26.0
├── so on
└── so forth

前言

🌐 Front matter

为了让 Jekyll 渲染每个页面,它至少需要空的 front matter。我们打算在所有页面上使用 front matter,所以在我们浏览 /docs 目录时,会检查文件是否是 README.md 文件(如果是,它会接收到一种 front matter 配置),或者是否是任何其他扩展名为 Markdown 的文件(如果是,它会接收到稍微不同的 front matter)。

🌐 For Jekyll to render each page it needs at least empty front matter. We're going to make use of front matter on all of our pages so while we're streaming out the /docs directory we check to see if a file is the README.md file (in which case it receives one front matter configuration) or if it is any other file with a markdown extension (in which case it receives slightly different front matter).

每个页面都包含以下一组前置变量:

🌐 Each page receives this set of front matter variables:

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md 会额外获得 permalink,这样它的 URL 就有一个共同的根 index.html,而不是一个尴尬的 /readme/

🌐 The README.md gets an additional permalink so that has a URL has a common root of index.html rather than an awkward /readme/.

permalink: /docs/v0.27.0/index.html

配置和重定向

🌐 Config and Redirects

在站点的 _config.yml 文件中,每次在获取文档时使用 --latest 标志时,都会设置一个变量 latest_version。我们还会添加一个包含已添加到站点的所有版本的列表,以及我们希望用于整个文档集合的永久链接。

🌐 In the site's _config.yml file a variable latest_version is set every time the --latest flag is used when fetching docs. We also add a list of all the versions that have been added to the site as well as the permalink we'd like for the entire docs collection.

latest_version: v0.27.0
available_versions:
- v0.27.0
collections:
docs: { output: true, permalink: '/docs/:path/' }

我们网站根目录下的文件 latest.md 除了这段前置内容外是空的,这段前置内容允许用户通过访问这个网址 electron.atom.io/docs/latest 来查看最新版本文档的索引(也就是 README),而不必特别使用最新的版本号(当然你也可以这样做)。

🌐 The file latest.md in our site root is empty except for this front matter which allows users to see the index (aka README) of the latest version of docs by visiting this URL, electron.atom.io/docs/latest, rather than using the latest version number specifically (though you can do that, too).

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

布局

🌐 Layouts

docs.html 布局模板中,我们使用条件语句来显示或隐藏页眉和面包屑中的信息。

🌐 In the docs.html layout template we use conditionals to either show or hide information in the header and breadcrumb.

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
{{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

要创建一个显示可用版本的页面,我们只需遍历位于站点根目录中文件 versions.md 中的配置列表即可。同时,我们还为该页面设置了一个固定链接:/docs/

🌐 To create a page showing the versions that are available we just loop through the list in our config on a file, versions.md, in the site's root. Also we give this page a permalink: /docs/

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

希望你喜欢这些技术内容!如果你想了解更多关于使用 Jekyll 构建文档网站的信息,可以看看 GitHub 的文档团队是如何在 Jekyll 上发布 GitHub 的文档 的。

🌐 Hope you enjoyed these technical bits! If you're interested in more information on using Jekyll for documentation sites, checkout how GitHub's docs team publishes GitHub's docs on Jekyll.

Atom Shell 现在是 Electron

· 3 min read

Atom Shell 现在叫做 Electron。你可以在它的新主页 electronjs.org 了解更多关于 Electron 的信息以及人们用它构建的项目。

🌐 Atom Shell is now called Electron. You can learn more about Electron and what people are building with it at its new home electronjs.org.


electron

Electron 是我们最初为 Atom 编辑器 构建的跨平台应用框架,用于处理 Chromium/Node.js 事件循环集成和本地 API。

🌐 Electron is the cross-platform application shell we originally built for the Atom editor to handle the Chromium/Node.js event loop integration and native APIs.

当我们开始时,我们的目标不仅仅是支持文本编辑器的需求。我们还希望创建一个简单明了的框架,让人们能够使用网络技术来构建具有所有原生功能的跨平台桌面应用。

🌐 When we got started, our goal wasn't just to support the needs of a text editor. We also wanted to create a straightforward framework that would allow people to use web technologies to build cross-platform desktop apps with all of the native trimmings.

在短短两年的时间里,Electron 发展迅速。它现在包括自动应用更新、Windows 安装程序、崩溃报告、通知以及其他有用的原生应用功能——所有这些都可以通过 JavaScript API 访问。而且我们还有更多计划。我们打算从 Atom 中提取更多库,使使用 Web 技术构建原生应用变得尽可能简单。

🌐 In two years, Electron has grown immensely. It now includes automatic app updates, Windows installers, crash reporting, notifications, and other useful native app features — all exposed through JavaScript APIs. And we have more in the works. We plan to extract even more libraries from Atom to make building a native app with web technologies as easy as possible.

到目前为止,个人开发者、早期创业公司和大型公司都在使用 Electron 构建应用。他们创建了各种各样的应用——包括聊天应用、数据库浏览器、地图设计工具、协作设计工具以及移动原型应用。

🌐 So far, individual developers, early-stage startups, and large companies have built apps on Electron. They've created a huge range of apps — including chat apps, database explorers, map designers, collaborative design tools, and mobile prototyping apps.

查看新的 electronjs.org,了解更多人们用 Electron 构建的应用,或者浏览 文档,了解你还能制作哪些其他东西。

🌐 Check out the new electronjs.org to see more of the apps people have built on Electron or take a look at the docs to learn more about what else you can make.

如果你已经开始使用,我们非常希望与你聊聊你在 Electron 上开发的应用。请发送邮件至 info@electronjs.org 告诉我们更多信息。你还可以关注新的 @ElectronJS 推特账号,以保持与项目的联系。

🌐 If you've already gotten started, we'd love to chat with you about the apps you're building on Electron. Email info@electronjs.org to tell us more. You can also follow the new @ElectronJS Twitter account to stay connected with the project.

💙 🔌