跳至主要内容

本周项目:Kap

·阅读时长 7 分钟

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


这篇文章是该系列的第一篇,重点介绍了 Kap,这是一款由 Wulkano(一个由自由职业设计师和开发人员组成的地理分布式团队)构建的开源屏幕录制应用。

Kap Screencast

什么是 Kap?

Kap 是一款开源屏幕录制器,主要为设计师和开发人员构建,以便轻松捕获他们的工作。人们使用它来分享动画原型、记录错误、创建有趣的 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 技术构建整个应用程序。在尝试了所有可以解决问题的方法后(最低要求是在视网膜屏幕上达到 30 FPS),我们最终不得不找到另一种解决方案。

我在仓库中看到了一些 Swift 代码。这是怎么回事?

由于被迫寻找 getUserMedia 的替代方案,我们开始尝试使用 ffmpeg。除了它是音频和视频转换的最佳工具之一外,它还具有在几乎所有操作系统上录制屏幕的功能,并且我们能够录制满足我们最低要求(在视网膜屏幕上达到 30 FPS)的清晰视频。问题?性能是 "😩",CPU 使用率飙升。因此,我们重新开始,讨论了我们的选择,并意识到我们必须做出妥协。这导致了 Aperture,我们自己的用 Swift 编写的 macOS 屏幕录制库。

Electron 在哪些方面应该改进?

我们都知道 Electron 应用可能会比较消耗内存,但实际上,这主要是 Chromium 的特性。这是它的工作机制的一部分,并且它真正取决于你运行的是什么,例如 Kap 和 Hyper 通常使用的内存少于 100MB。

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

创建跨平台的 Electron 应用可以带来更好的体验。现在存在太多不一致之处、平台特定的 API 以及平台之间的功能缺失,导致你的代码库充满了 if-else 语句。例如,活力效果仅在 macOS 上受支持,自动更新程序在 macOS 和 Windows 上的工作方式不同,并且在 Linux 上甚至不受支持。透明度在 Linux 上是时有时无的,通常是不可用的。

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

你最喜欢 Electron 的哪些方面?

我们最喜欢的一点是,任何掌握 Web 开发知识的人都可以构建和贡献多平台原生体验。更不用说它易于开发且令人愉悦,拥有优秀的文档和蓬勃发展的生态系统。

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

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

Kap 的下一步计划是什么?

我们的下一步是审查应用程序,为 2.0.0 里程碑做准备,其中包括使用 React 重写,以及对插件的支持,允许开发人员扩展 Kap 的功能!我们邀请大家关注项目并在我们的 GitHub 仓库 中贡献代码。我们一直在倾听,并希望听到尽可能多的人的声音,告诉我们如何才能让 Kap 成为最适合你的工具

什么是 Wulkano?

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

哪些 Electron 提示可能对其他开发人员有用?

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

Electron 简单示例

·阅读时间:2分钟

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


如果您是 Electron 开发的新手或尚未尝试过它,这些示例应用程序是一个很好的起点。它们体积小巧,易于阅读,并且代码中有大量注释来解释每个部分的工作原理。

要开始使用,请克隆此仓库

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

要运行下面任何一个应用程序,请切换到应用程序的目录,安装依赖项,然后启动

cd activity-monitor
npm install
npm start

活动监视器

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

Screenshot

哈希

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

screenshot

镜像

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

价格

使用雅虎财经 API 显示石油、黄金和白银的当前价格。

screenshot

URL

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

其他资源

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

Electron 用户空间

·阅读时间:3分钟

我们在 Electron 网站上添加了一个新的 userland 部分,以帮助用户发现构成我们蓬勃发展的开源生态系统的人员、软件包和应用程序。


github-contributors

Userland 的起源

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

Node 和 Electron

与 Node 类似,Electron 有一组小的核心 API。这些 API 提供了开发多平台桌面应用程序所需的基本功能。这种设计理念允许 Electron 保持灵活的工具,而不会过度规定其使用方式。

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

收集数据

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

我们使用了 GitHub APIlibraries.io API 和 npm 注册表来收集有关依赖项、开发依赖项、依赖方、包作者、仓库贡献者、下载次数、分支次数、星标次数等信息。

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

筛选结果

应用程序依赖项星标应用程序 这样的列出软件包、应用程序和仓库的报告有一个文本输入框,可用于筛选结果。

当您在此输入框中键入时,页面的 URL 会动态更新。这允许您复制表示 userland 数据特定片段的 URL,然后与他人共享。

babel

更多内容即将推出

这第一组报告仅仅是开始。我们将继续收集有关社区如何构建 Electron 的数据,并将向网站添加新的报告。

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

如果您有关于如何改进这些报告的想法,请告知我们 在网站仓库上创建一个 issue 或任何上述仓库。

感谢您,Electron 社区,让用户领域成为今天的样子!

证书透明度修复

·阅读时间:2分钟

Electron 1.4.12 包含一个重要的补丁,修复了上游 Chrome 中的一个问题,该问题导致在 libchromiumcontent(Electron 的底层 Chrome 库)构建时间 10 周后,错误地拒绝了一些 Symantec、GeoTrust 和 Thawte SSL/TLS 证书。受影响网站使用的证书本身没有问题,替换这些证书也无济于事。


在 Electron 1.4.0 – 1.4.11 中,在某个日期之后,对使用这些受影响证书的网站的 HTTPS 请求将因网络错误而失败。这会影响使用 Chrome 的底层网络 API(如 window.fetch、Ajax 请求、Electron 的 net API、BrowserWindow.loadURLwebContents.loadURL<webview> 标签的 src 属性等)发出的 HTTPS 请求。

将您的应用程序升级到 1.4.12 将防止这些请求失败。

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

影响日期

下表列出了每个 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 月:新应用

·阅读时间:3分钟

以下是 9 月份添加到网站的新 Electron 应用和演讲。


此网站通过来自社区的 pull request 更新了新的 应用聚会。您可以 关注仓库 以获取新添加内容的通知,或者如果您不感兴趣网站的所有更改,请订阅 博客 RSS 订阅

如果您创建了一个 Electron 应用或举办了一个聚会,请创建一个 pull request 将其添加到网站,它将在下一次汇总中出现。

新的演讲

9 月份,GitHub 举办了 GitHub Universe 大会,该大会被称为构建软件未来的活动。活动中有一些有趣的 Electron 演讲。

此外,如果您碰巧在 12 月 5 日在巴黎,Zeke 将在 dotJS 2016 上发表一个关于 Electron 的演讲

新的应用

Pexels搜索完全免费的照片并将其复制到剪贴板
Timestamp一个更好的 macOS 菜单栏时钟,具有可自定义的日期/时间显示和日历
Harmony音乐播放器,兼容 Spotify、Soundcloud、Play Music 和本地文件
uPhoneWebRTC 桌面电话
SealTalk由 RongCloud IM 云服务和 IM SDK 提供支持的即时通讯应用
Infinity一种制作演示文稿的简单方法
Cycligent Git 工具用于 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 文档作为结构化数据

·阅读时间:3分钟

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


架构概述

每个 API 都是一个具有名称、描述、类型等属性的对象。BrowserWindowMenu 等类具有其他属性,描述了它们的实例方法、实例属性、实例事件等。

以下是描述 BrowserWindow 类的架构摘录

{
name: 'BrowserWindow',
description: 'Create and control browser windows.',
process: {
main: true,
renderer: false
},
type: 'Class',
instanceName: 'win',
slug: 'browser-window',
websiteUrl: 'https://www.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 文件并强制执行风格指南的规则。如果发现错误,则会列出这些错误并停止发布过程。如果 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 来测试弱引用,它会向传递的对象添加一个弱引用,并在对象被垃圾回收时调用回调函数。

// 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 应用或举办了一个聚会,请创建一个 pull request 将其添加到网站,它将在下一次汇总中出现。

新的应用

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

辅助功能工具

·阅读时间:2分钟

创建无障碍应用程序非常重要,我们很高兴为 DevtronSpectron 引入新的功能,使开发人员有机会为所有人改进他们的应用程序。


Electron 应用程序中的无障碍问题与网站类似,因为它们最终都是 HTML。但是,对于 Electron 应用程序,您无法使用在线无障碍审核资源,因为您的应用程序没有指向审核器的 URL。

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

Spectron

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

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

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

Devtron

在 Devtron 中,有一个新的无障碍选项卡,允许您审核应用程序中的页面,并对结果进行排序和筛选。

devtron screenshot

这两个工具都使用 Google 为 Chrome 构建的 无障碍开发者工具 库。您可以在该 存储库的 wiki 上了解更多关于此库使用的无障碍审核规则的信息。

如果您知道其他适用于 Electron 的优秀的无障碍工具,请通过拉取请求将其添加到 无障碍文档 中。

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 包的所有者,询问他是否愿意让我们使用该名称。幸运的是,他是我们项目的粉丝,并同意帮助我们重新利用该名称。

预构建继续存在

从 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 仓库。