跳转到主要内容

本周项目:Kap

·7分钟阅读

Electron 社区正在快速发展,人们以前所未有的速度创建强大的新应用和工具。为了庆祝这种创作势头,并让社区了解这些新项目,我们决定开始一个每周博客系列,介绍值得关注的 Electron 相关项目。


这篇博文是该系列的第一篇,介绍的是由 geodistributed 自由设计师和开发者团队 Wulkano 构建的开源屏幕录制应用 Kap。 访问 Kap,访问 Wulkano

Kap Screencast

Kap 是什么?

Kap 是一款开源屏幕录制器,主要为设计师和开发者轻松捕捉他们的工作而设计。人们用它来分享动画原型、记录 bug、创建有趣的 GIF 以及介于两者之间的任何内容。

我们看到各种年龄和背景的人们在教育场景、屏幕录像、教程中使用它……不一而足。甚至用于创建生产素材!我们对我们的小型副项目能获得如此好的反响感到非常惊讶。

为什么你们要构建它?

这是一个很好的问题,并不是说市面上没有屏幕录制器!我们觉得替代品要么太复杂、太贵,要么太有限。没有什么能真正满足我们日常的需求。我们也认为,我们用来完成工作的工具是开源的,这样每个人都可以帮助塑造它们,这是很棒的。 构建 Kap 的最终结果和我们没有做的事情一样多。一切都在细节中,一点点改进的积累构成了我们想要使用的工具的轮廓。

然而,也许最重要的是,Kap 成为了一个让我们放下担忧,只为自己和像我们一样的人们愉快地构建东西的地方。创造一个可以让你倾诉、尝试新事物并享受你的手艺的环境非常重要。没有要求,没有压力,没有期望。设计师和开发者是否应该做副业项目?是的。他们应该。

你为什么选择使用 Electron 构建 Kap?

有几个原因

  • Web 技术
  • 团队大部分是 Web 开发者
  • 我们专注于 JavaScript
  • 它为更多人贡献打开了大门
  • Electron 本身就是开源的
  • node_modules 的强大和易于维护的模块化
  • 跨平台可能性

我们认为应用的未来在浏览器中,但我们还没有完全达到。Electron 是迈向未来的重要一步。它不仅使应用程序本身更容易访问,而且也使其代码更容易访问。一个有趣的设想是,想象一个未来,操作系统是一个浏览器,而标签页本质上是 Electron 应用。

此外,作为主要的 Web 开发人员,我们非常喜欢 JavaScript 的同构性,即您可以在客户端、服务器和现在桌面上运行 JS。使用 Web 技术(HTML、CSS 和 JS),许多事情比原生开发更简单:更快的原型制作、更少的代码、flexbox > 自动布局(macOS/iOS)。

在构建 Kap 的过程中,你遇到过哪些挑战?

使用 Electron 提供的屏幕录制资源是我们面临的最大挑战。它们根本不够高效,无法满足我们的要求,在我们看来,这将使项目失败。虽然这并不是 Electron 本身的错,但在原生开发和使用 Web 技术构建桌面应用之间仍然存在差距。

我们花了大量时间试图规避 `getUserMedia` API 糟糕的性能,这是 Chromium 的一个原始问题。当我们开始制作 Kap 时,我们的主要目标之一是完全使用 Web 技术构建整个应用程序。在尝试了所有方法来使其正常工作(最低要求是在 Retina 屏幕上每秒 30 帧)后,我们最终不得不找到另一个解决方案。

我看到仓库里有一些 Swift 代码。那是什么?

由于被迫寻找 `getUserMedia` 的替代方案,我们开始尝试 `ffmpeg`。除了它是最好的音频和视频转换工具之一,它还具有在几乎任何操作系统上录制屏幕的功能,并且我们能够录制清晰的视频,满足我们在 Retina 屏幕上每秒 30 帧的最低要求。问题是?性能是“😩”,CPU 使用率失控了。所以我们回到了原点,讨论了我们的选择,并意识到我们必须做出妥协。这导致了 Aperture,这是我们用 Swift 编写的 macOS 屏幕录制库。访问 Aperture

Electron 应该在哪些方面进行改进?

我们都知道 Electron 应用可能会占用大量内存,但这实际上是 Chromium 的问题。这是它的工作方式的一部分,而且确实取决于你运行的内容,例如 Kap 和 Hyper 通常使用不到 100MB 的内存。

我们看到的一个最大的改进领域是载荷,特别是 Electron 如何分发 Chromium。一种想法是拥有一个共享的 Electron 核心,并让应用程序安装程序检查它是否已存在于系统中。

创建跨平台 Electron 应用可能会有更好的体验。现在存在太多不一致、平台特定 API 和缺失的功能,导致您的代码库充斥着 if-else 语句。例如,vibrancy 仅在 macOS 上受支持,自动更新程序在 macOS 和 Windows 上的工作方式不同,在 Linux 上甚至不受支持。在 Linux 上,透明度是可有可无的,通常是可无。

调用原生系统 API 也应该更容易。Electron 附带了一套非常好的 API,但有时您需要它不提供的功能。创建原生 Node.js 插件是一个选项,但处理起来很痛苦。理想情况下,Electron 会附带一个很好的 FFI API,例如 fastcall。这将使我们能够用 JavaScript 编写 Swift 部分。

您最喜欢 Electron 的哪些方面?

我们最喜欢的一点是,任何了解 Web 开发的人都可以构建和贡献跨平台原生体验。更不用说开发的便利性和乐趣、出色的文档和蓬勃发展的生态系统了。

从前端的角度来看,构建 Kap 的感觉与使用浏览器 API 构建一个简单的网站没有区别。Electron 在使应用程序开发与 Web 开发相似(基本相同)方面做得非常出色。它非常简单,以至于不需要框架或其他类似工具来帮助我们,只需要干净且模块化的 JS 和 CSS。

我们也是构建它团队的忠实粉丝,他们的奉献和支持,以及他们维护的活跃友好的社区。向你们所有人致敬!

Kap 的下一步是什么?

我们的下一步是审查应用程序,为我们的 2.0.0 里程碑做准备,该里程碑包括 React 重写以及对插件的支持,允许开发人员扩展 Kap 的功能!我们邀请大家在我们的 GitHub 仓库 上关注该项目并做出贡献。我们正在倾听,并希望听到尽可能多的您的声音,让我们知道如何才能让 Kap 成为对您来说最好的工具

Wulkano 是什么?

Wulkano 是一个设计工作室和数字集合体,一个远程技术人员团队,他们热爱一起合作完成客户项目和我们自己的项目。我们是一个分布式但紧密的团队,来自不同的地方和背景,在我们的虚拟办公室(恰好是基于 Electron 的 Slack!)分享知识、想法、经验,但最重要的是分享有趣的 GIF 和表情包。

有没有什么 Electron 技巧对其他开发者有用的?

利用并参与到很棒的 社区 中,查看 Awesome Electron,查看 示例,并利用优秀的 文档

Electron 简单示例

·阅读时间 2 分钟

我们最近在 GitHub 总部为 Hackbright Academy 的成员举办了一场 Electron 黑客马拉松。Hackbright Academy 是一家成立于旧金山的女性编程学校。为了帮助参会者更好地开始他们的项目,我们自己的 Kevin Sawicki 创建了一些示例 Electron 应用程序。


如果您是 Electron 开发新手,或者还没有尝试过,这些示例应用程序是一个很好的起点。它们体积小巧,易于阅读,并且代码注释丰富,解释了所有功能的工作原理。

要开始,请克隆此仓库

git clone https://github.com/electron/simple-samples

要运行下面的任何应用程序,请进入应用程序目录,安装依赖项,然后启动

cd activity-monitor
npm install
npm start

活动监视器

显示 CPU 系统、用户和空闲活动时间的甜甜圈图。

Screenshot

哈希

使用不同的算法显示输入文本的哈希值。

screenshot

镜像

以最大化尺寸播放计算机摄像头的视频,如同照镜子一样。包括一个使用 CSS 动画的可选彩虹滤镜效果。

价格

使用 Yahoo Finance API 显示当前石油、黄金和白银的价格。

screenshot

URL

在窗口中加载命令行传递的 URL。

其他资源

我们希望这些应用程序能帮助您开始使用 Electron。以下是一些学习更多信息的资源:

Electron 用户社区

·阅读时长 4 分钟

我们在 Electron 网站上新增了一个 用户区(userland)部分,旨在帮助用户发现构成我们蓬勃发展的开源生态系统的开发者、软件包和应用程序。


github-contributors

用户区的起源

Userland 是软件社区中的人们汇聚在一起分享工具和想法的地方。这个词起源于 Unix 社区,当时指的是运行在内核之外的任何程序,但今天它的含义更广泛。当今天的 JavaScript 社区的人们提到 userland 时,他们通常指的是 npm 包注册表。这是大多数实验和创新的发生地,而 Node 和 JavaScript 语言(就像 Unix 内核一样)则保留了一套相对小且稳定的核心功能。

Node 和 Electron

与 Node 类似,Electron 拥有一套核心 API。这些 API 提供了开发跨平台桌面应用程序所需的基本功能。这种设计理念使 Electron 能够成为一个灵活的工具,而不会对如何使用它进行过多的规定。

用户区是“核心”的对应部分,使用户能够创建和共享扩展 Electron 功能的工具。

数据收集

为了更好地了解我们生态系统的趋势,我们分析了 15,000 个依赖于 `electron` 或 `electron-prebuilt` 的公共 GitHub 存储库的元数据。

我们使用了 GitHub APIlibraries.io API 和 npm 注册表来收集有关依赖项、开发依赖项、依赖者、包作者、仓库贡献者、下载量、fork 量、star 量等信息。

然后,我们使用这些数据生成了以下报告:

过滤结果

诸如 应用程序依赖项星标应用程序 等报告列出了包、应用程序和仓库,它们都有一个文本输入框,可以用来过滤结果。

当您在该输入框中键入时,页面的 URL 会动态更新。这使您可以复制代表特定用户区数据切片的 URL,然后与他人共享。

babel

更多内容敬请期待

这一系列初步报告仅仅是个开始。我们将继续收集有关社区如何构建 Electron 的数据,并将添加新的报告到网站上。

用于收集和显示这些数据的所有工具都是开源的:

如果您对如何改进这些报告有任何想法,请通过在网站仓库中创建一个 issue 或以上提到的任何仓库来告诉我们。

感谢您,Electron 社区,成就了今天的用户区!

证书透明度修复

·3 分钟阅读

Electron 1.4.12 包含一项重要的补丁,修复了 Chrome 的一个上游问题。在此问题中,一些 Symantec、GeoTrust 和 Thawte 的 SSL/TLS 证书会在 libchromiumcontent(Electron 底层的 Chrome 库)构建日期后 10 周被错误地拒绝。受影响的网站使用的证书没有任何问题,更换这些证书也无法解决问题。


在 Electron 1.4.0 — 1.4.11 版本中,使用这些受影响证书的网站的 HTTPS 请求将在特定日期后因网络错误而失败。这会影响使用 Chrome 底层网络 API 发起的 HTTPS 请求,例如 window.fetch、Ajax 请求、Electron 的 net API、BrowserWindow.loadURLwebContents.loadURL<webview> 标签的 src 属性以及其他类似的请求。

将您的应用程序升级到 1.4.12 版本将可以防止这些请求失败的发生。

注意:此问题是在 Chrome 53 中引入的,因此 Electron 1.4.0 之前的版本不受影响。

影响日期

下表列出了每个 Electron 1.4 版本以及使用受影响证书的网站请求开始失败的日期。

Electron 版本影响日期
1.3.x不受影响
1.4.0已失败
1.4.1已失败
1.4.2已失败
1.4.32016 年 12 月 10 日下午 9:00 PST
1.4.42016 年 12 月 10 日下午 9:00 PST
1.4.52016 年 12 月 10 日下午 9:00 PST
1.4.62017 年 1 月 14 日下午 9:00 PST
1.4.72017 年 1 月 14 日下午 9:00 PST
1.4.82017 年 1 月 14 日下午 9:00 PST
1.4.92017 年 1 月 14 日下午 9:00 PST
1.4.102017 年 1 月 14 日下午 9:00 PST
1.4.112017 年 2 月 11 日下午 9:00 PST
1.4.12不受影响

您可以通过将计算机的时钟设置为未来日期,然后尝试从 https://symbeta.symantec.com/welcome/ 加载页面来验证您的应用程序受影响的日期。

更多信息

您可以在以下位置阅读有关此主题、原始问题和修复的更多信息:

2016 年 9 月:新应用

·阅读时长 4 分钟

以下是9月份添加到网站上的新Electron应用程序和讲座。


本网站通过社区的拉取请求更新了新的应用聚会。你可以关注仓库以获取新添加通知,或者如果你不关心网站的所有更改,可以订阅博客 RSS 源

如果您制作了Electron应用程序或举办了会议,请提交拉取请求将其添加到网站,它将包含在下一个汇总中。

新讲座

9月份,GitHub举办了其GitHub Universe大会,该大会被宣传为面向构建软件未来的活动。该活动中有几个有趣的Electron讲座。

另外,如果您在12月5日在巴黎,Zeke将在dotJS 2016大会上做一个Electron讲座

新应用

Pexels搜索完全免费的照片并将其复制到剪贴板
Timestamp更好的macOS菜单栏时钟,具有可自定义的日期/时间显示和日历
Harmony兼容Spotify、Soundcloud、Play Music和本地文件的音乐播放器
uPhoneWebRTC桌面电话
SealTalk由融云IM云服务和IM SDK驱动的即时通讯应用
Infinity一种制作演示文稿的简便方法
Cycligent Git Tool您的Git项目的直观图形化GUI
Foco使用Foco保持专注,提高生产力
Strawberry一站式餐厅软件套件,让您了解并更好地服务您的顾客。
Mixmax实时查看您所有电子邮件的操作,随时随地撰写。
Firebase AdminFirebase数据管理工具
ANote一个简单友好的Markdown笔记
Temps一个简单但智能的菜单栏天气应用程序
Amium一种工作协作产品,将对话带入您的文件
Soube简单的音乐播放器
(Un)colored下一代桌面富内容编辑器,以与HTML和Markdown兼容的主题保存文档。适用于Windows、OS X和Linux。
quickcalc菜单栏计算器
Forestpin Analytics企业财务数据分析工具
LingREST客户端
Shortexts用于您经常复制的文本、文件夹和表情符号的快捷方式
Front-End Box一套前端代码生成器

将 Electron API 文档作为结构化数据

·阅读时长 4 分钟

今天我们宣布对 Electron 文档进行一些改进。每个新版本现在都包含一个 JSON 文件,其中详细描述了 Electron 的所有公共 API。我们创建此文件是为了使开发者能够以有趣的新方式使用 Electron 的 API 文档。


模式概览

每个 API 都是一个对象,具有 name、description、type 等属性。像 BrowserWindowMenu 这样的类具有描述其实例方法、实例属性、实例事件等的附加属性。

这是描述 BrowserWindow 类的模式摘录

{
name: 'BrowserWindow',
description: 'Create and control browser windows.',
process: {
main: true,
renderer: false
},
type: 'Class',
instanceName: 'win',
slug: 'browser-window',
websiteUrl: 'https://electron.js.cn/docs/api/browser-window',
repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
staticMethods: [...],
instanceMethods: [...],
instanceProperties: [...],
instanceEvents: [...]
}

以下是方法描述的示例,在本例中是 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'
}]
}

使用新数据

为了方便开发者在他们的项目中使用的结构化数据,我们创建了 electron-docs-api,这是一个小型 npm 包,每当有新的 Electron 发布时都会自动发布。

npm install electron-api-docs --save

为了快速体验,请在您的 Node.js REPL 中尝试使用该模块

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

数据是如何收集的

Electron 的 API 文档遵循 Electron 编码风格Electron 风格指南,因此其内容可以被程序化解析。

electron-docs-linterelectron/electron 仓库的一个新的开发依赖。它是一个命令行工具,可以对所有 markdown 文件进行 lint 并强制执行风格指南的规则。如果发现错误,会列出错误信息并中止发布过程。如果 API 文档有效,则会创建 electron-json.api 文件并作为 Electron 发布的一部分上传到 GitHub

标准 JavaScript 和标准 Markdown

今年早些时候,Electron 的代码库已更新为在所有 JavaScript 中使用 standard linter。Standard 的 README 总结了选择此方法的原因:

采用标准风格意味着将代码清晰度和社区约定放在比个人风格更重要的位置。这可能不适用于 100% 的项目和开发文化,然而开源对新手来说可能是一个不友好的地方。建立清晰、自动化的贡献者期望可以使项目更健康。

我们最近还创建了 standard-markdown 来验证我们文档中的所有 JavaScript 代码片段是否有效,并与代码库本身的风格一致。

这些工具共同帮助我们使用持续集成 (CI) 自动查找 pull request 中的错误。这减少了人工代码审查的负担,并增加了我们对文档准确性的信心。

社区的努力

Electron 的文档在不断改进,这都要归功于我们出色的开源社区。截至本文撰写之时,已有近 300 人为文档做出了贡献。

我们很高兴看到人们如何利用这些新的结构化数据。可能的用途包括:

Electron 内部原理:弱引用

·6 分钟阅读

JavaScript 是一种带有垃圾回收机制的语言,它让用户无需手动管理资源。但由于 Electron 托管了这种环境,因此必须非常小心地避免内存和资源泄露。

本文将介绍弱引用的概念以及它们如何在 Electron 中用于管理资源。


弱引用

在 JavaScript 中,每当你将一个对象赋给一个变量时,你就增加了一个对该对象的引用。只要对象还存在引用,它就会一直保留在内存中。一旦对象的所有引用都消失了,也就是说,没有变量再存储该对象,JavaScript 引擎将在下次垃圾回收时回收内存。

弱引用是对对象的引用,它允许你在不影响对象是否被垃圾回收的情况下获取该对象。当对象被垃圾回收时,你也会收到通知。这样,就可以用 JavaScript 来管理资源了。

以 Electron 中的 NativeImage 类为例,每次调用 nativeImage.create() API 时,都会返回一个 NativeImage 实例,它将图像数据存储在 C++ 中。一旦你不再使用该实例,并且 JavaScript 引擎 (V8) 对该对象进行了垃圾回收,C++ 中的代码就会被调用来释放内存中的图像数据,因此用户无需手动管理。

另一个例子是 窗口消失问题,它直观地展示了当对象的所有引用都消失后,窗口是如何被垃圾回收的。

在 Electron 中测试弱引用

在纯 JavaScript 中没有直接测试弱引用的方法,因为该语言没有分配弱引用的方式。JavaScript 中唯一与弱引用相关的 API 是 WeakMap,但由于它只创建弱引用键,因此无法知道对象何时被垃圾回收。

在 v0.37.8 之前的 Electron 版本中,您可以使用内部的 v8Util.setDestructor API 来测试弱引用,该 API 会为传入的对象添加一个弱引用,并在对象被垃圾回收时调用回调函数。

// Code below can only run on 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".

请注意,您必须使用 --js-flags="--expose_gc" 命令行开关启动 Electron,以暴露内部的 gc 函数。

该 API 在后续版本中被移除,因为 V8 实际上不允许在析构函数中运行 JavaScript 代码,并且在后续版本中这样做会导致随机崩溃。

remote 模块中的弱引用

除了通过 C++ 管理原生资源外,Electron 还需要弱引用来管理 JavaScript 资源。其中一个例子是 Electron 的 remote 模块,它是一个 远程过程调用 (RPC) 模块,允许在渲染器进程中使用主进程中的对象。

remote 模块的一个关键挑战是避免内存泄漏。当用户在渲染器进程中获取远程对象时,remote 模块必须保证该对象在主进程中一直存在,直到渲染器进程中的引用消失。此外,它还必须确保当渲染器进程中不再有对该对象的引用时,该对象可以被垃圾回收。

例如,如果没有正确的实现,以下代码将很快导致内存泄露

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

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

remote 模块中的资源管理很简单。每当请求一个对象时,就会向主进程发送一个消息,Electron 会将该对象存储在一个映射表中并为其分配一个 ID,然后将该 ID 发送回渲染器进程。在渲染器进程中,remote 模块会接收该 ID 并用代理对象包装它,当代理对象被垃圾回收时,会向主进程发送一个消息来释放该对象。

remote.require API 为例,简化的实现如下所示

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

在主进程中

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

具有弱值的映射

通过之前的简单实现,remote 模块中的每个调用都会从主进程返回一个新的远程对象,每个远程对象都代表对主进程中对象的引用。

设计本身是好的,但问题在于,当多次调用以获取同一对象时,会创建多个代理对象,对于复杂对象来说,这会给内存使用和垃圾回收带来巨大的压力。

例如,以下代码

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

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

它首先会消耗大量内存来创建代理对象,然后占用 CPU (中央处理器) 进行垃圾回收和发送 IPC 消息。

一个显而易见的优化是缓存远程对象:当已经有一个具有相同 ID 的远程对象时,将返回之前的远程对象,而不是创建一个新的。

使用 JavaScript 核心中的 API 无法实现这一点。使用普通映射表缓存对象会阻止 V8 对其进行垃圾回收,而 WeakMap 类只能使用对象作为弱键。

为了解决这个问题,添加了一种具有弱值作为引用的映射类型,这非常适合缓存带有 ID 的对象。现在 remote.require 看起来像这样

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
}

请注意,remoteObjectCache 将对象存储为弱引用,因此在对象被垃圾回收时无需删除键。

原生代码

对于对 Electron 中弱引用的 C++ 代码感兴趣的人,可以在以下文件中找到

setDestructor API

createIDWeakMap API

2016 年 8 月:新应用

·3 分钟阅读

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


该网站通过社区的 拉取请求 更新了新的 应用聚会。您可以 关注该仓库 以获得新内容通知,或者如果您不关心网站的所有更改,可以订阅 博客 RSS 源

如果您制作了Electron应用程序或举办了会议,请提交拉取请求将其添加到网站,它将包含在下一个汇总中。

新应用

Code RPGifyRPG风格编码应用程序
PamFax用于发送和接收传真的跨平台应用程序
BlankUpMarkdown 编辑器,清晰度+1
Rambox免费开源的消息和电子邮件应用程序,将常见的Web应用程序集成到一个应用中
Gordie您的卡牌收藏的最佳应用程序
Ionic Creator更快地构建出色的移动应用程序
TwitchAlerts通过漂亮的警报和通知让您的观众保持满意
Museeks一款简单、干净且跨平台的音乐播放器
SeaPigMarkdown 到 HTML 的转换器
GroupMe非官方 GroupMe 应用
Moeditor您的全能 Markdown 编辑器
SoundnodeSoundnode 应用是桌面版的 Soundcloud
QMUI WebQMUI Web Desktop 是一个用于管理基于 QMUI Web Framework 的项目的应用程序
Svgsus组织、清理和转换您的 SVG
Ramme非官方 Instagram 桌面应用
InsomniaREST API 客户端
Correo适用于 Windows、macOS 和 Linux 的菜单栏/任务栏 Gmail 应用
KongDashKong Admin API 的桌面客户端
Translation EditorINTL ICU 消息的翻译文件编辑器 (参见 formatjsio)
5EClient5EPlay CSGO 客户端
Theme Juice轻松进行本地 WordPress 开发

无障碍工具

·阅读时间 2 分钟

构建可访问性应用程序很重要,我们很高兴能为 DevtronSpectron 引入新功能,让开发人员有机会让他们的应用对所有人更好。


Electron 应用程序的可访问性问题与网站类似,因为它们最终都是 HTML。但是,在 Electron 应用中,您无法使用在线资源进行可访问性审计,因为您的应用没有 URL 可以指向审计工具。

这些新功能将这些审计工具引入到您的 Electron 应用中。您可以选择将审计添加到 Spectron 的测试中,或者在 DevTools 中使用 Devtron。继续阅读以了解这些工具的摘要,或查看我们的 可访问性文档 以获取更多信息。

Spectron

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

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

您可以在 Spectron 文档中了解有关此功能的更多信息。

Devtron

在 Devtron 中有一个新的可访问性选项卡,它允许您审计应用程序中的一个页面,并对结果进行排序和过滤。

devtron screenshot

这两个工具都使用了 Google 为 Chrome 构建的 Accessibility Developer Tools 库。您可以在该 存储库的 wiki 上了解有关此库使用的可访问性审计规则的更多信息。

如果您知道其他适用于 Electron 的优秀可访问性工具,请通过提交 pull request 将它们添加到 可访问性文档中。

npm install electron

·3 分钟阅读

从 Electron 1.3.1 版本开始,您可以通过 npm install electron --save-dev 命令将 Electron 的最新预编译版本安装到您的应用程序中。


npm install electron

预编译的 Electron 二进制文件

如果您之前曾使用 Electron 开发过应用程序,您很可能遇到过 electron-prebuilt npm 包。这个包几乎是每个 Electron 项目中不可或缺的一部分。安装时,它会检测您的操作系统并下载一个预先编译好的二进制文件,该文件已编译为可在您系统的架构上运行。

新的名称

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

这是因为在 npm 上存在一个现有的 electron 项目,它是在 GitHub 的 Electron 项目存在之前创建的。为了帮助新开发者更容易、更直观地进行 Electron 开发,我们联系了现有 electron npm 包的所有者,询问他是否愿意让我们使用这个名称。幸运的是,他很喜欢我们的项目,并同意帮助我们重新利用这个名称。

Prebuilt 将继续存在

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

electron-userland/electron-prebuilt 仓库将继续是 electron npm 包的标准主页。

非常感谢

我们特别感谢 @mafintosh@maxogden 以及许多其他 贡献者 创建和维护 electron-prebuilt,以及他们为 JavaScript、Node.js 和 Electron 社区所做的辛勤服务。

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

更新您的项目

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

如果您在安装此新包时遇到任何问题,请通过在 electron-userland/electron-prebuilt 仓库中打开一个 issue 来告知我们。

有关 Electron 的任何其他问题,请使用 electron/electron 仓库。