Skip to main content

Electron 2 中的新功能:应用内购买

· 4 min read

新的 Electron 2.0 发行版是 packed,包含新功能和修复。此新主要版本的一大亮点是针对 Apple Mac 应用商店 推出了新的 inAppPurchase API

¥The new Electron 2.0 release line is packed with new features and fixes. One of the highlights from this new major version is a new inAppPurchase API for Apple's Mac App Store.


应用内购买功能允许直接在应用内购买内容或订阅。这为开发者提供了一种轻松拥抱 免费增值商业模式 的方法,用户无需付费即可下载应用,并可以选择应用内购买高级功能、附加内容或订阅。

¥In-app purchases enable content or subscriptions to be purchased directly from within apps. This gives developers an easy way to embrace the freemium business model, wherein users pay nothing to download an app and are offered optional in-app purchases for premium features, additional content, or subscriptions.

社区贡献者 Adrien Fery 为 Electron 添加了新的 API,以便在 Amanote(一款用于讲座和会议的 Electron 注意应用)中启用应用内购买。Amanote 可免费下载,允许在 PDF 中添加清晰、结构化的注释,并具有数学公式、绘图、录音等功能。

¥The new API was added to Electron by community contributor Adrien Fery to enable in-app purchases in Amanote, a note-taking Electron app for lectures and conferences. Amanote is free to download and allows clear and structured notes to be added to PDFs, with features like mathematical formulae, drawings, audio recording, and more.

自从 Mac 版 Amanote 增加应用内购买支持以来,Adrien 注意到其销量增长了 40%!

¥Since adding in-app purchase support to the Mac version of Amanote, Adrien has noted a 40% increase in sales!

入门

¥Getting Started

新的 inAppPurchase API 已在最新的 Electron 测试版中推出:

¥The new inAppPurchase API has already landed in the latest Electron beta:

npm i -D electron@beta

API 的文档可在 在 GitHub 上找到 上找到,Adrien 也非常慷慨地编写了一篇关于如何使用 API 的教程。要开始在你的应用中添加应用内购买功能,请使用 查看教程

¥The docs for the API can be found on GitHub, and Adrien has been kind enough to write a tutorial on how to use the API. To get started adding in-app purchases to your app, see the tutorial.

更多 API 改进 正在开发中,并将很快在即将发布的 Electron 测试版中推出。

¥More improvements to the API are in the works, and will soon be landing in an upcoming Electron beta release.

Windows 可能是下一个

¥Windows Could Be Next

接下来,Adrien 希望通过在 Electron 中添加对 Microsoft Store 应用内购买的支持,为 Amanote 开辟新的收入渠道。敬请关注最新进展!

¥Up next, Adrien is hoping to open a new revenue channel for Amanote by adding support for Microsoft Store in-app purchases in Electron. Stay tuned for developments on that!

Webview 漏洞修复

· 3 min read

已发现一个漏洞,该漏洞允许在某些禁用 Node.js 集成的 Electron 应用中重新启用它。此漏洞已被分配 CVE 标识符 CVE-2018-1000136

¥A vulnerability has been discovered which allows Node.js integration to be re-enabled in some Electron applications that disable it. This vulnerability has been assigned the CVE identifier CVE-2018-1000136.


受影响的应用

¥Affected Applications

如果满足以下所有条件,则应用会受到影响:

¥An application is affected if all of the following are true:

  1. 可在 Electron 1.7、1.8 或 2.0.0-beta 版本上运行

    ¥Runs on Electron 1.7, 1.8, or a 2.0.0-beta

  2. 允许执行任意远程代码

    ¥Allows execution of arbitrary remote code

  3. 禁用 Node.js 集成

    ¥Disables Node.js integration

  4. 未在其 webPreferences 中明确声明 webviewTag: false

    ¥Does not explicitly declare webviewTag: false in its webPreferences

  5. 不启用 nativeWindowOption 选项

    ¥Does not enable the nativeWindowOption option

  6. 不拦截 new-window 事件,也不在不使用提供的 options 标签的情况下手动覆盖 event.newGuest

    ¥Does not intercept new-window events and manually override event.newGuest without using the supplied options tag

虽然这似乎只存在于少数 Electron 应用中,但我们建议所有应用升级以防万一。

¥Although this appears to be a minority of Electron applicatons, we encourage all applications to be upgraded as a precaution.

缓解措施

¥Mitigation

此漏洞已在今天的 1.7.131.8.42.0.0-beta.5 版本中修复。

¥This vulnerability is fixed in today's 1.7.13, 1.8.4, and 2.0.0-beta.5 releases.

无法升级应用 Electron 版本的开发者可以使用以下代码缓解此漏洞:

¥Developers who are unable to upgrade their application's Electron version can mitigate the vulnerability with the following code:

app.on('web-contents-created', (event, win) => {
win.on(
'new-window',
(event, newURL, frameName, disposition, options, additionalFeatures) => {
if (!options.webPreferences) options.webPreferences = {};
options.webPreferences.nodeIntegration = false;
options.webPreferences.nodeIntegrationInWorker = false;
options.webPreferences.webviewTag = false;
delete options.webPreferences.preload;
},
);
});

// and *IF* you don't use WebViews at all,
// you might also want
app.on('web-contents-created', (event, win) => {
win.on('will-attach-webview', (event, webPreferences, params) => {
event.preventDefault();
});
});

更多信息

¥Further Information

此漏洞由 Trustwave SpiderLabs 的 Brendan Scarvell 发现并负责任地报告给 Electron 项目。

¥This vulnerability was found and reported responsibly to the Electron project by Brendan Scarvell of Trustwave SpiderLabs.

要了解有关保护 Electron 应用安全的最佳实践的更多信息,请参阅我们的 安全教程

¥To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

要报告 Electron 中的漏洞,请发送电子邮件至 security@electronjs.org

¥To report a vulnerability in Electron, please email security@electronjs.org.

请加入我们的 邮件列表 以接收有关版本和安全更新的更新。

¥Please join our email list to receive updates about releases and security updates.

网站故障

· 3 min read

上周,electronjs.org 网站宕机了几分钟。如果你受到了这些短暂中断的影响,对于由此造成的不便,我们深表歉意。经过今天的一些调查,我们诊断出了根本原因并部署了 fix

¥Last week the electronjs.org site had a few minutes of downtime. If you were affected by these brief outages, we're sorry for the inconvenience. After a bit of investigation today, we've diagnosed the root cause and have deployed a fix.


为了防止将来再次出现此类停机,我们已在应用上启用了 Heroku 阈值警报。每当我们的 Web 服务器累积的失败请求或响应速度超过一定阈值时,我们的团队都会收到通知,以便我们快速解决问题。

¥To prevent this kind of downtime in the future, we've enabled Heroku threshold alerts on our app. Any time our web server accumulates failed requests or slow responses beyond a certain threshold, our team will be notified so we can address the problem quickly.

所有语言的离线文档

¥Offline Docs in Every Language

下次你在飞机上或地下咖啡店开发 Electron 应用时,不妨准备一份文档副本以供离线参考。幸运的是,Electron 的文档以 Markdown 文件的形式提供,支持 20 多种语言。

¥The next time you're developing an Electron app on a plane or in a subterranean coffee shop, you might want to have a copy of the docs for offline reference. Fortunately, Electron's docs are available as Markdown files in over 20 languages.

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

带有图形用户界面的离线文档

¥Offline Docs with a GUI

devdocs.io/electron 是一个便捷的网站,存储文档以供离线使用,不仅适用于 Electron,还适用于许多其他项目,例如 JavaScript、TypeScript、Node.js、React、Angular 等等。当然,Electron 也有一个应用可以实现这一点。在 Electron 网站上查看 devdocs-app

¥devdocs.io/electron is a handy website that stores docs for offline use, not just for Electron but many other projects like JavaScript, TypeScript, Node.js, React, Angular, and many others. And of course there's an Electron app for that, too. Check out devdocs-app on the Electron site.

devdocs-app

如果你喜欢不使用鼠标或触控板安装应用,请尝试 Electron Forgeinstall 命令:

¥If you like to install apps without using your mouse or trackpad, give Electron Forge's install command a try:

npx electron-forge install egoist/devdocs-app

协议处理程序漏洞修复

· 3 min read

已发现一个远程代码执行漏洞,该漏洞影响使用自定义协议处理程序的 Electron 应用。此漏洞已被分配 CVE 标识符 CVE-2018-1000006

¥A remote code execution vulnerability has been discovered affecting Electron apps that use custom protocol handlers. This vulnerability has been assigned the CVE identifier CVE-2018-1000006.


受影响的平台

¥Affected Platforms

设计为在 Windows 上运行的 Electron 应用,如果将自己注册为某个协议(例如 myapp://)的默认处理程序,则容易受到攻击。

¥Electron apps designed to run on Windows that register themselves as the default handler for a protocol, like myapp://, are vulnerable.

无论协议如何注册(例如使用原生代码、Windows 注册表或 Electron 的 app.setAsDefaultProtocolClient API),此类应用都可能受到影响。

¥Such apps can be affected regardless of how the protocol is registered, e.g. using native code, the Windows registry, or Electron's app.setAsDefaultProtocolClient API.

macOS 和 Linux 均不易受此问题影响。

¥macOS and Linux are not vulnerable to this issue.

缓解措施

¥Mitigation

我们已发布 Electron 的新版本,其中包含针对此漏洞的修复:1.8.2-beta.51.7.121.6.17。我们敦促所有 Electron 开发者立即将其应用更新到最新的稳定版本。

¥We've published new versions of Electron which include fixes for this vulnerability: 1.8.2-beta.5, 1.7.12, and 1.6.17. We urge all Electron developers to update their apps to the latest stable version immediately.

如果由于某种原因你无法升级 Electron 版本,你可以在调用 app.setAsDefaultProtocolClient 时将 -- 作为最后一个参数附加,这样可以防止 Chromium 解析其他选项。双破折号 -- 表示命令选项的结束,之后仅接受位置参数。

¥If for some reason you are unable to upgrade your Electron version, you can append -- as the last argument when calling app.setAsDefaultProtocolClient, which prevents Chromium from parsing further options. The double dash -- signifies the end of command options, after which only positional parameters are accepted.

app.setAsDefaultProtocolClient(protocol, process.execPath, [
'--your-switches-here',
'--',
]);

请参阅 app.setAsDefaultProtocolClient API 了解更多详情。

¥See the app.setAsDefaultProtocolClient API for more details.

要了解有关保护 Electron 应用安全的最佳实践的更多信息,请参阅我们的 安全教程

¥To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

如果你想报告 Electron 中的漏洞,请发送电子邮件至 security@electronjs.org

¥If you wish to report a vulnerability in Electron, email security@electronjs.org.

Electron 2.0 及更高版本 - 语义化版本控制

· 3 min read

Electron 的新主要版本正在开发中,我们的版本控制策略也随之进行了一些调整。从 2.0.0 版本开始,Electron 将严格遵守语义化版本控制。

¥A new major version of Electron is in the works, and with it some changes to our versioning strategy. As of version 2.0.0, Electron will strictly adhere to Semantic Versioning.


此更改意味着你将更频繁地看到主要版本升级,并且通常是 Chromium 的重大更新。补丁版本也将更加稳定,因为它们现在只包含错误修复,不包含任何新功能。

¥This change means you'll see the major version bump more often, and it will usually be a major update to Chromium. Patch releases will also be more stable, as they will now only contain bug fixes with no new features.

主要版本增量

¥Major Version Increments

  • Chrom 版本更新

    ¥Chromium version updates

  • Node.js 主要版本更新

    ¥Node.js major version updates

  • Electron 断裂 API 更改

    ¥Electron breaking API changes

小版本增量

¥Minor Version Increments

  • Node.js 小版本更新

    ¥Node.js minor version updates

  • Electron 不间断 API 更改

    ¥Electron non-breaking API changes

补丁版本增量

¥Patch Version Increments

  • Node.js 补丁版本更新

    ¥Node.js patch version updates

  • 修复相关的 chromium 补丁

    ¥fix-related chromium patches

  • Electron 错误修复

    ¥Electron bug fixes

由于 Electron 的语义版本范围现在更有意义,我们建议使用 npm 的默认 --save-dev 标志安装 Electron,该标志会为你的版本添加 ^ 前缀,确保你能够安全地获取次要更新和补丁更新:

¥Because Electron's semver ranges will now be more meaningful, we recommend installing Electron using npm's default --save-dev flag, which will prefix your version with ^, keeping you safely up to date with minor and patch updates:

npm install --save-dev electron

对于只对错误修复感兴趣的开发者,你应该使用波浪符号语义版本前缀,例如 ~2.0.0,它永远不会引入新功能,只会修复以提高稳定性。

¥For developers interested only in bug fixes, you should use the tilde semver prefix e.g. ~2.0.0, which which will never introduce new features, only fixes to improve stability.

有关更多详细信息,请参阅 electronjs.org/docs/tutorial/electron-versioning

¥For more details, see electronjs.org/docs/tutorial/electron-versioning.

Electron 新的国际化网站

· 13 min read

Electron 的新网站 electronjs.org 上线!我们已将静态 Jekyll 网站替换为 Node.js 网络服务器,这使我们能够灵活地实现网站的国际化,并为更多激动人心的新功能铺平道路。

¥Electron has a new website at electronjs.org! We've replaced our static Jekyll site with a Node.js webserver, giving us flexibility to internationalize the site and paving the way for more exciting new features.


🌍 翻译

¥🌍 Translations

我们已启动网站国际化进程,旨在让全球开发者都能轻松使用 Electron 应用开发。我们正在使用一个名为 Crowdin 的本地化平台,该平台与 GitHub 集成,在内容翻译成不同语言时自动打开和更新拉取请求。

¥We've begun the process of internationalizing the website with the goal of making Electron app development accessible to a global audience of developers. We're using a localization platform called Crowdin that integrates with GitHub, opening and updating pull requests automatically as content is translated into different languages.

Electron Nav in Simplified Chinese

虽然我们一直在默默地进行这项工作,但已有超过 75 位 Electron 社区成员自然而然地发现了这个项目,并加入了网站国际化和将 Electron 文档翻译成 20 多种语言的努力。我们看到世界各地的人们都在为 每日贡献 努力,其中法语、越南语、印尼语和中文等语言的翻译工作正在稳步推进。

¥Though we've been working quietly on this effort so far, over 75 Electron community members have already discovered the project organically and joined in the effort to internationalize the website and translate Electron's docs into over 20 languages. We are seeing daily contributions from people all over the world, with translations for languages like French, Vietnamese, Indonesian, and Chinese leading the way.

要选择你的语言并查看翻译进度,请访问 electronjs.org/languages

¥To choose your language and view translation progress, visit electronjs.org/languages

Translations in progress on Crowdin

如果你精通多语言,并且有兴趣帮助翻译 Electron 的文档和网站,请访问 electron/electron-i18n 仓库,或者直接使用 Crowdin 进行翻译,你可以使用你的 GitHub 账户登录。

¥If you're multilingual and interested in helping translate Electron's docs and website, visit the electron/electron-i18n repo, or jump right into translating on Crowdin, where you can sign in using your GitHub account.

目前,Crowdin 上的 Electron 项目支持 21 种语言。添加更多语言支持非常简单,如果你有兴趣帮助翻译,但没有看到你要使用的语言列表,请 告诉我们,我们将为你启用。

¥There are currently 21 languages enabled for the Electron project on Crowdin. Adding support for more languages is easy, so if you're interested in helping translate but you don't see your language listed, let us know and we'll enable it.

原始翻译文档

¥Raw Translated Docs

如果你更喜欢阅读原始 Markdown 文件中的文档,现在你可以使用任何语言进行操作:

¥If you prefer to read documentation in raw markdown files, you can now do that in any language:

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

应用页面

¥App Pages

从今天起,任何 Electron 应用都可以在 Electron 网站上轻松拥有自己的页面。如需查看一些示例,请查看 Etcher1ClipboardGraphQL 游乐场,如图所示,该图位于网站的日文版中:

¥As of today, any Electron app can easily have its own page on the Electron site. For a few examples, check out Etcher, 1Clipboard, or GraphQL Playground, pictured here on the Japanese version of the site:

GraphQL Playground

市面上有一些非常棒的 Electron 应用,但它们并不总是那么容易找到,而且并非每个开发者都有时间或资源来构建一个合适的网站来营销和分发他们的应用。

¥There are some incredible Electron apps out there, but they're not always easy to find, and not every developer has the time or resources to build a proper website to market and distribute their app.

仅使用 PNG 图标文件和少量应用元数据,我们就能收集有关特定应用的大量信息。使用从 GitHub 收集的数据,应用页面现在可以显示每个拥有公共代码库的应用的屏幕截图、下载链接、版本、发行说明和自述文件。使用从每个应用图标中提取的调色板,我们可以生成 醒目且易于理解的颜色,为每个应用页面提供一些视觉上的区别。

¥Using just a PNG icon file and a small amount of app metadata, we're able to collect a lot of information about a given app. Using data collected from GitHub, app pages can now display screenshots, download links, versions, release notes, and READMEs for every app that has a public repository. Using a color palette extracted from each app's icon, we can produce bold and accessible colors to give each app page some visual distinction.

应用索引页 现在还包含类别和关键字过滤器,以便查找有趣的应用,例如 GraphQL GUIp2p 工具

¥The apps index page now also has categories and a keyword filter to find interesting apps like GraphQL GUIs and p2p tools.

如果你有一个 Electron 应用想要在网站上展示,请在 electron/electron-apps 代码库上提交拉取请求。

¥If you've got an Electron app that you'd like featured on the site, open a pull request on the electron/electron-apps repository.

使用 Homebrew 的一行安装

¥One-line Installation with Homebrew

macOS 的 Homebrew 软件包管理器有一个名为 cask 的子命令,它可以轻松地在终端中使用单个命令安装桌面应用,就像 brew cask install atom 一样。

¥The Homebrew package manager for macOS has a subcommand called cask that makes it easy to install desktop apps using a single command in your terminal, like brew cask install atom.

我们已开始为热门 Electron 应用收集 Homebrew 的 Cask 名称,现在会在每个包含 Cask 的应用页面上显示安装命令(供 macOS 访问者使用):

¥We've begun collecting Homebrew cask names for popular Electron apps and are now displaying the installation command (for macOS visitors) on every app page that has a cask:

Installation options tailored for your platform: macOS, Windows, Linux

要查看所有使用 Homebrew Cask 名称的应用,请访问 electronjs.org/apps?q=homebrew。如果你知道其他我们尚未索引的带有 cask 的应用,请添加它们!

¥To view all the apps that have homebrew cask names, visit electronjs.org/apps?q=homebrew. If you know of other apps with casks that we haven't indexed yet, please add them!

🌐 新字段

¥🌐 A New Domain

我们已将网站从 electron.atom.io 迁移到新域名:electronjs.org

¥We've moved the site from electron.atom.io to a new domain: electronjs.org.

Electron 项目诞生于 Atom,这是 GitHub 基于 Web 技术构建的开源文本编辑器。Electron 最初名为 atom-shell。Atom 是第一个使用它的应用,但很快人们就意识到这个神奇的 Chromium + Node 运行时可以用于各种不同的应用。当微软和 Slack 等公司开始使用 atom-shell 时,很明显,该项目需要一个新名称。

¥The Electron project was born inside Atom, GitHub's open-source text editor built on web technologies. Electron was originally called atom-shell. Atom was the first app to use it, but it didn't take long for folks to realize that this magical Chromium + Node runtime could be used for all kinds of different applications. When companies like Microsoft and Slack started to make use of atom-shell, it became clear that the project needed a new name.

于是 "Electron" 诞生了。2016 年初,GitHub 组建了一支新团队,专注于 Electron 的开发和维护,不再专注于 Atom 的开发。自那时起,Electron 已被成千上万的应用开发者采用,现在许多大公司都依赖于它,其中许多公司都有自己的 Electron 团队。

¥And so "Electron" was born. In early 2016, GitHub assembled a new team to focus specifically on Electron development and maintenance, apart from Atom. In the time since, Electron has been adopted by thousands of app developers, and is now depended on by many large companies, many of which have Electron teams of their own.

支持 GitHub 的 Electron 项目(例如 Atom 和 GitHub 桌面版)仍然是我们团队的首要任务,但通过迁移到新域名,我们希望能够帮助明确 Atom 和 Electron 之间的技术区别。

¥Supporting GitHub's Electron projects like Atom and GitHub Desktop is still a priority for our team, but by moving to a new domain we hope to help clarify the technical distinction between Atom and Electron.

🐢🚀 Node.js 无处不在

¥🐢🚀 Node.js Everywhere

之前的 Electron 网站是使用 Jekyll(一款流行的基于 Ruby 的静态网站生成器)构建的。Jekyll 是构建静态网站的绝佳工具,但该网站的发展已经开始超出其能力范围。我们想要更多动态功能,例如合理的重定向和动态内容渲染,因此 Node.js 服务器是显而易见的选择。

¥The previous Electron website was built with Jekyll, the popular Ruby-based static site generator. Jekyll is a great tool for building static websites, but the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a Node.js server was the obvious choice.

Electron 生态系统包含使用多种编程语言编写的组件项目,从 Python 到 C++ 再到 Bash。但 JavaScript 是 Electron 的基础,也是我们社区中使用最多的语言。

¥The Electron ecosystem includes projects with components written in many different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.

通过将网站从 Ruby 迁移到 Node.js,我们旨在降低希望为网站做出贡献的人的准入门槛。

¥By migrating the website from Ruby to Node.js, we aim to lower the barrier to entry for people wishing to contribute to the website.

⚡ 更轻松的开源参与

¥⚡️ Easier Open-Source Participation

如果你的系统上安装了 Node.js(8 或更高版本)和 git,你可以轻松地在本地运行网站:

¥If you've got Node.js (8 or higher) and git installed on your system, you can easily get the site running locally:

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

新网站托管在 Heroku 上。我们使用部署流水线和 应用审核 功能,该功能会为每个拉取请求自动创建应用的运行副本。这使得审阅者能够轻松查看拉取请求对网站实时副本的实际效果。

¥The new website is hosted on Heroku. We use deployment pipelines and the Review Apps feature, which automatically creates a running copy of the app for every pull request. This makes it easy for reviewers to view the actual effects of a pull request on a live copy of the site.

🙏 感谢贡献者

¥🙏 Thanks to Contributors

我们还要特别感谢世界各地所有贡献时间和精力来帮助改进 Electron 的朋友们。开源社区的热情为 Electron 的成功做出了巨大的贡献。谢谢!

¥We'd like to give special thanks to all the folks around the world who have contributed their own time and energy to help improve Electron. The passion of the open-source community has helped immeasurably in making Electron a success. Thank you!

Thumbs up!

Chromium RCE 漏洞修复

· 2 min read

已发现 Google Chromium 中存在一个远程代码执行漏洞,该漏洞影响 Electron 所有最新版本。任何访问远程内容的 Electron 应用都容易受到此漏洞的攻击,无论是否启用了 沙盒选项

¥A remote code execution vulnerability has been discovered in Google Chromium that affects all recent versions of Electron. Any Electron app that accesses remote content is vulnerable to this exploit, regardless of whether the sandbox option is enabled.

我们已发布 Electron 的两个新版本 1.7.81.6.14,均包含针对此漏洞的修复。我们敦促所有 Electron 开发者立即将其应用更新到最新稳定版本:

¥We've published two new versions of electron 1.7.8 and 1.6.14, both of which include a fix for this vulnerability. We urge all Electron developers to update their apps to the latest stable version immediately:

npm i electron@latest --save-dev

要了解有关保护 Electron 应用安全的最佳实践的更多信息,请参阅我们的 安全教程

¥To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

如果你想报告 Electron 中的漏洞,请联系 security@electronjs.org

¥Please contact security@electronjs.org if you wish to report a vulnerability in Electron.

宣布 Electron 中支持 TypeScript

· 9 min read

electron npm 软件包现在包含一个 TypeScript 定义文件,该文件提供了整个 Electron API 的详细注释。即使你编写的是原生 JavaScript,这些注解也可以提升你的 Electron 开发体验。只需安装 npm install electron,即可在你的项目中获取最新的 Electron 类型。

¥The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development experience even if you're writing vanilla JavaScript. Just npm install electron to get up-to-date Electron typings in your project.


TypeScript 是由微软创建的一种开源编程语言。它是 JavaScript 的一个超集,通过添加对静态类型的支持来扩展 JavaScript 语言。TypeScript 社区近年来发展迅速,在最近的 Stack Overflow 开发者调查中,TypeScript 跻身 最受欢迎的编程语言 之列。TypeScript 被描述为 "可扩展的 JavaScript",GitHubSlack微软 的团队都在使用它来编写可扩展的 Electron 应用,这些应用的用户多达数百万。

¥TypeScript is an open-source programming language created by Microsoft. It's a superset of JavaScript that extends the language by adding support for static types. The TypeScript community has grown quickly in recent years, and TypeScript was ranked among the most loved programming languages in a recent Stack Overflow developer survey. TypeScript is described as "JavaScript that scales", and teams at GitHub, Slack, and Microsoft are all using it to write scalable Electron apps that are used by millions of people.

TypeScript 支持 JavaScript 中的许多较新的语言特性,例如类、对象解构和 async/await,但其真正的区别在于类型注解。声明程序所需的输入和输出数据类型可以帮助你在编译时发现错误,而注解也可以作为正式的声明。

¥TypeScript supports many of the newer language features in JavaScript like classes, object destructuring, and async/await, but its real differentiating feature is type annotations. Declaring the input and output datatypes expected by your program can reduce bugs by helping you find errors at compile time, and the annotations can also serve as a formal declaration of how your program works.

当库是用原生 JavaScript 编写时,类型通常是在编写文档时事后才模糊地定义的。函数通常可以接受比文档中更多的类型,或者函数可能存在未记录的不可见约束,这可能导致运行时错误。

¥When libraries are written in vanilla Javascript, the types are often vaguely defined as an afterthought when writing documentation. Functions can often accept more types than what was documented, or a function can have invisible constraints that are not documented, which can lead to runtime errors.

TypeScript 使用定义文件解决了这个问题。TypeScript 定义文件描述了库的所有函数及其预期的输入和输出类型。当库作者将 TypeScript 定义文件与其发布的库打包在一起时,该库的使用者可以立即 直接在内部探索其 API 编辑器 并开始使用它,通常无需查阅库的文档。

¥TypeScript solves this problem with definition files. A TypeScript definition file describes all the functions of a library and its expected input and output types. When library authors bundle a TypeScript definition file with their published library, consumers of that library can explore its API right inside their editor and start using it right away, often without needing to consult the library's documentation.

许多热门项目,例如 AngularVue.jsnode-github(现在还有 Electron!),都编译了自己的定义文件,并将其与已发布的 npm 包打包在一起。对于未打包自身定义文件的项目,可以使用 DefinitelyTyped,这是一个由社区维护的定义文件的第三方生态系统。

¥Many popular projects like Angular, Vue.js, node-github (and now Electron!) compile their own definition file and bundle it with their published npm package. For projects that don't bundle their own definition file, there is DefinitelyTyped, a third-party ecosystem of community-maintained definition files.

安装

¥Installation

从 1.6.10 版本开始,每个 Electron 版本都包含自己的 TypeScript 定义文件。当你从 npm 安装 electron 包时,electron.d.ts 文件会自动与已安装的包打包在一起。

¥Starting at version 1.6.10, every release of Electron includes its own TypeScript definition file. When you install the electron package from npm, the electron.d.ts file is bundled automatically with the installed package.

用于安装 Electron 的 最安全的方式 使用确切的版本号:

¥The safest way to install Electron is using an exact version number:

npm install electron --save-dev --save-exact

或者,如果你正在使用 yarn

¥Or if you're using yarn:

yarn add electron --dev --exact

如果你已经在使用 @types/electron@types/node 等第三方定义,你应该将它们从你的 Electron 项目中删除,以防止任何冲突。

¥If you were already using third-party definitions like @types/electron and @types/node, you should remove them from your Electron project to prevent any collisions.

定义文件源自我们的 结构化 API 文档,因此它将始终与 Electron API 文档 保持一致。只需安装 electron,你将始终获得与你正在使用的 Electron 版本同步的 TypeScript 定义。

¥The definition file is derived from our structured API documentation, so it will always be consistent with Electron's API documentation. Just install electron and you'll always get TypeScript definitions that are up to date with the version of Electron you're using.

用法

¥Usage

如需了解如何安装和使用 Electron 新的 TypeScript 注释,请观看此简短的演示截屏视频:

¥For a summary of how to install and use Electron's new TypeScript annotations, watch this short demo screencast:

如果你正在使用 Visual Studio Code,则说明你已经内置了 TypeScript 支持。社区维护的 AtomSublimevim其他编辑器 插件也同样如此。

¥If you're using Visual Studio Code, you've already got TypeScript support built in. There are also community-maintained plugins for Atom, Sublime, vim, and other editors.

一旦你的编辑器配置为 TypeScript,你将开始看到更多上下文感知行为,例如自动补齐建议、内联方法引用、参数检查等等。

¥Once your editor is configured for TypeScript, you'll start to see more context-aware behavior like autocomplete suggestions, inline method reference, argument checking, and more.

Method autocompletion

Method reference

Argument checking

TypeScript 入门

¥Getting started with TypeScript

如果你是 TypeScript 新手,并且想要了解更多信息,那么这篇 来自微软的介绍视频 文章会很好地概述这门语言的诞生原因、工作原理、使用方法以及未来发展方向。

¥If you're new to TypeScript and want to learn more, this introductory video from Microsoft provides a nice overview of why the language was created, how it works, how to use it, and where it's headed.

TypeScript 官方网站上也有 handbookplayground 模块。

¥There's also a handbook and a playground on the official TypeScript website.

由于 TypeScript 是 JavaScript 的超集,因此你现有的 JavaScript 代码已经是有效的 TypeScript。这意味着你可以逐步将现有的 JavaScript 项目过渡到 TypeScript,并根据需要添加新的语言特性。

¥Because TypeScript is a superset of JavaScript, your existing JavaScript code is already valid TypeScript. This means you can gradually transition an existing JavaScript project to TypeScript, sprinkling in new language features as needed.

致谢

¥Thanks

如果没有 Electron 开源维护者社区的帮助,这个项目是不可能实现的。感谢 Samuel AttardFelix RiesebergBirunthan MohanathasMilan BurdaBrendan Forster 以及其他许多开发者修复了错误、改进了文档并提供技术指导。

¥This project would not have been possible without the help of Electron's community of open-source maintainers. Thanks to Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster, and many others for their bug fixes, documentation improvements, and technical guidance.

支持

¥Support

如果你在使用 Electron 的新 TypeScript 定义文件时遇到任何问题,请在 electron-typescript-definitions 代码库中提交问题。

¥If you encounter any issues using Electron's new TypeScript definition files, please file an issue on the electron-typescript-definitions repository.

祝你 TypeScript 愉快!

¥Happy TypeScripting!

本周项目:Jasper

· 10 min read

本周,我们采访了 Jasper 的创建者,Jasper 是一款基于 Electron 的 GitHub 通知管理工具。

¥This week we interviewed the creator of Jasper, an Electron-based tool for managing GitHub notifications.


你好!你是谁?

¥Hello! Who are you?

我是 Ryo Maruyama,日本的一名软件开发者。我正在开发 JasperESDoc

¥I'm Ryo Maruyama, a software developer in Japan. I am developing Jasper and ESDoc.

什么是 Jasper?

¥What is Jasper?

Jasper 是一个灵活而强大的 GitHub 问题阅读器。它支持 github.com 和 GitHub Enterprise 上的 issue 和 pull request。

¥Jasper is a flexible and powerful issue reader for GitHub. It supports issues and pull requests on github.com and GitHub Enterprise.

Jasper App Screenshot

为什么要这样做?

¥Why did you make it?

当人们在工作或 OSS 活动中使用 GitHub 时,他们往往每天都会收到许多通知。作为订阅通知的方式,GitHub 提供了电子邮件和 网页通知。我使用了这些版本几年,但遇到了以下问题:

¥When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:

  • 我很容易忽略别人提到我、我评论过或我正在关注的问题。

    ¥It's easy to overlook issues where I was mentioned, I commented, or I am watching.

  • 我把一些问题记在脑子里,以便以后检查,但有时我会忘记它们。

    ¥I put some issues in a corner of my head to check later, but I sometimes forget about them.

  • 为了避免忘记问题,我会在浏览器中保持多个标签页打开。

    ¥To not forget issues, I keep many tabs open in my browser.

  • 很难检查所有与我相关的问题。

    ¥It's hard to check all issues that are related to me.

  • 很难掌握团队的所有活动。

    ¥It's hard to grasp all of my team's activity.

我花费了大量时间和精力来避免这些问题,因此我决定为 GitHub 创建一个问题阅读器来有效地解决这些问题,并开始开发 Jasper。

¥I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.

谁在使用 Jasper?

¥Who's using Jasper?

Jasper 已被多家使用 GitHub 的公司的开发者、设计师和经理所采用。当然,一些 OSS 开发者也在使用它。GitHub 上的一些人也在使用它!

¥Jasper is used by developers, designers, and managers in several companies that are using GitHub. Of course, some OSS developers also are using it. And it is also used by some people at GitHub!

Jasper 如何工作?

¥How does Jasper work?

Jasper 配置完成后,将出现以下屏幕。从左到右,你可以看到 "流列表"、"问题列表" 和 "问题正文"。

¥Once Jasper is configured, the following screen appears. From left to right, you can see "streams list", "issues list" and "issue body".

Jasper Start Screen

此 "stream" 是 Jasper 的核心功能。例如,如果你想查看 "在 electron/electron 代码库中分配给 @zeke 的问题",你可以创建以下流:

¥This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

创建流并等待几秒钟后,你可以看到符合条件的问题。

¥After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.

Jasper Start Screen 3

我们能用流做什么?

¥What can we do with streams?

我将介绍哪些类型的条件可用于流。

¥I will introduce what kind of conditions can be used for stream.

用户和团队

¥Users and Teams

问题
mentions:cat mentions:dog提及用户 catdog 的问题
author:cat author:dog用户 catdog 创建的问题
assignee:cat assignee:dog分配给 catdog 的问题
commenter:cat commenter:dogcatdog 评论过的问题
involves:cat involves:dog"involve"、catbob 中的问题
team:animal/white-cat team:animal/black-doganimal/white-catanimal/black-dog 提及的问题

involves 表示 mentionauthorassigneecommenter

¥involves means mention, author, assignee or commenter

代码库和组织

¥Repositories and Organizations

问题
repo:cat/jump repo:dog/runcat/jumpdog/run 中的问题
org:electron user:cat user:dogelectroncatdog 中的问题

orguser 相同

¥org is same as user

属性

¥Attributes

问题
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1cat/jump 中附加到 v1.0.0v1.0.1 的问题
repo:cat/jump label:bug label:blockercat/jump 中附加到 bugblocker 的问题
electron OR atomshell包含 electronatomshell 的问题

审核状态

¥Review Status

问题
is:pr review:requiredcat/jump 中需要审核的问题
is:pr review-requested:catcat 请求审核的问题。
但这些尚未审核。
is:pr reviewed-by:catcat 已审核的问题

你可能已经注意到,流可以使用 GitHub 的搜索查询。有关如何使用流和搜索查询的详细信息,请参阅以下 URL。

¥As you may have noticed by looking at these, streams can use GitHub's search queries. For details on how to use streams and search queries, see the following URLs.

Jasper 还具有未读问题管理、未读评论管理、标记星标、通知更新、问题过滤、键盘快捷键等功能。

¥Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.

Jasper 是付费产品吗?费用是多少?

¥Is Jasper a paid product? How much does it cost?

Jasper 售价 12 美元。但是,你可以使用 免费试用版 30 天。

¥Jasper is $12. However you can use the free trial edition for 30 days.

为什么选择在 Electron 上构建 Jasper?

¥Why did you choose to build Jasper on Electron?

我喜欢 Electron 的以下几个方面:

¥I like the following aspects of Electron:

  • 应用可以使用 JavaScript/CSS/HTML 开发。

    ¥Apps can be developed with JavaScript/CSS/HTML.

  • 应用可以构建于 Windows、Mac 和 Linux 平台。

    ¥Apps can be built for Windows, Mac, and Linux platforms.

  • Electron 正在积极开发中,并拥有庞大的社区。

    ¥Electron is actively developed and has a large community.

这些功能使快速简便的桌面应用开发成为可能。太棒了!如果你有任何产品创意,请务必考虑使用 Electron。

¥These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.

在开发 Jasper 的过程中,你遇到了哪些挑战?

¥What are some challenges you've faced while developing Jasper?

我费了好大劲才弄清楚 "stream" 的概念。起初我考虑使用 GitHub 的 通知 API。但是我注意到它不支持某些用例。之后,除了通知 API 之外,我还考虑使用 问题 API拉取请求 API。但它从未达到我的预期。然后,在思考各种方法时,我意识到轮询 GitHub 的 搜索 API 将提供最大的灵活性。我花了大约一个月的时间进行实验才达到这个目标,然后我用两天时间实现了一个带有流概念的 Jasper 原型。

¥I had a hard time figuring out the "stream" concept. At first I considered using GitHub's Notifications API. However I noticed that it does not support certain use cases. After that I considered using the Issues API and Pull Requests API, in addition to the Notification API. But it never became what I wanted. Then while thinking about various methods, I realized that polling GitHub's Search API would offer the most flexibility. It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.

注意:轮询次数最多限制为每 10 秒一次。这对于 GitHub API 的限制来说已经足够了。

¥Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.

下一步计划是什么?

¥What's coming next?

我计划开发以下功能:

¥I have a plan to develop the following features:

  • 过滤流:流中包含一些经过过滤的流,用于过滤流中的问题。它就像 SQL 的视图。

    ¥A filtered stream: A stream has some filtered stream that filter issues in the stream. It is like as view of SQL.

  • 多个账户:你将能够同时使用 github.com 和 GHE

    ¥Multiple accounts: you will be able to use both github.com and GHE

  • 提升性能:目前,WebView 的加载速度比普通浏览器慢。

    ¥Improve performance: For now the loading a issue in WebView is low speed than normal browser.

在 Twitter 上关注 @jasperappio 获取最新动态。

¥Follow @jasperappio on Twitter for updates.

本周项目:WebTorrent

· 22 min read

本周,我们采访了 @feross@dcposch,一起探讨了 WebTorrent。这是一款基于 Web 的种子客户端,它将用户连接在一起,形成一个分布式、去中心化的浏览器到浏览器网络。

¥This week we caught up with @feross and @dcposch to talk about WebTorrent, the web-powered torrent client that connects users together to form a distributed, decentralized browser-to-browser network.


什么是 WebTorrent?

¥What is WebTorrent?

WebTorrent 是第一个在浏览器中运行的 torrent 客户端。它完全用 JavaScript 编写,可以使用 WebRTC 进行点对点传输。无需浏览器插件、扩展程序或安装。

¥WebTorrent is the first torrent client that works in the browser. It's written completely in JavaScript and it can use WebRTC for peer-to-peer transport. No browser plugin, extension, or installation is required.

WebTorrent 使用开放的 Web 标准,将网站用户连接在一起,形成一个分布式、去中心化的浏览器到浏览器网络,以实现高效的文件传输。

¥Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer.

你可以在此处查看 WebTorrent 的实际演示:webtorrent.io

¥You can see a demo of WebTorrent in action here: webtorrent.io.

webtorrent homepage

为什么这很酷?

¥Why is this cool?

想象一个像 YouTube 这样的视频网站,但访问者可以参与托管网站的内容。使用 WebTorrent 驱动的网站的人越多,它的速度就越快,弹性也就越强。

¥Imagine a video site like YouTube, but where visitors help to host the site's content. The more people that use a WebTorrent-powered website, the faster and more resilient it becomes.

浏览器之间的通信省去了中间人,让人们可以按照自己的方式进行交流。不再使用客户端/服务器模式 - 只创建一个对等网络,所有对等网络均平等。WebTorrent 是重新去中心化 Web 之旅的第一步。

¥Browser-to-browser communication cuts out the middle-man and lets people communicate on their own terms. No more client/server – just a network of peers, all equal. WebTorrent is the first step in the journey to re-decentralize the Web.

Electron 在其中扮演什么角色?

¥Where does Electron come into the picture?

大约一年前,我们决定构建 WebTorrent 桌面版,一个作为桌面应用运行的 WebTorrent 版本。

¥About one year ago, we decided to build WebTorrent Desktop, a version of WebTorrent that runs as a desktop app.

WebTorrent Desktop player window

我们创建 WebTorrent Desktop 有三个原因:

¥We created WebTorrent Desktop for three reasons:

  1. 我们想要一款简洁、轻量、无广告的开源种子应用。

    ¥We wanted a clean, lightweight, ad-free, open source torrent app

  2. 我们想要一个能够良好支持流媒体的种子应用。

    ¥We wanted a torrent app with good streaming support

  3. 我们需要一个 "混合客户端" 来连接 BitTorrent 和 WebTorrent 网络。

    ¥We need a "hybrid client" that connects the BitTorrent and WebTorrent networks

如果我们已经可以在 Web 浏览器中下载种子,为什么还要开发桌面应用?

¥If we can already download torrents in my web browser, why a desktop app?

首先,简单介绍一下 WebTorrent 的设计背景。

¥First, a bit of background on the design of WebTorrent.

webtorrent desktop logo

早期,BitTorrent 使用 TCP 作为其传输协议。后来,uTP 应运而生,承诺提供比 TCP 更佳的性能和其他优势。每个主流 torrent 客户端最终都采用了 uTP,如今你可以通过任一协议使用 BitTorrent。WebRTC 协议是下一个合乎逻辑的步骤。它带来了与 Web 浏览器互操作的希望 - 一个由所有桌面 BitTorrent 客户端和数百万 Web 浏览器组成的巨型 P2P 网络。

¥In the early days, BitTorrent used TCP as its transport protocol. Later, uTP came along promising better performance and additional advantages over TCP. Every mainstream torrent client eventually adopted uTP, and today you can use BitTorrent over either protocol. The WebRTC protocol is the next logical step. It brings the promise of interoperability with web browsers – one giant P2P network made up of all desktop BitTorrent clients and millions of web browsers.

“Web peers”(在 Web 浏览器中运行的 torrent peers)通过增加数百万个新 peers,并将 BitTorrent 扩展到数十个新的用例,使 BitTorrent 网络更加强大。WebTorrent 尽可能严格地遵循 BitTorrent 规范,以便现有的 BitTorrent 客户端轻松添加对 WebTorrent 的支持。

¥“Web peers” (torrent peers that run in a web browser) make the BitTorrent network stronger by adding millions of new peers, and spreading BitTorrent to dozens of new use cases. WebTorrent follows the BitTorrent spec as closely as possible, to make it easy for existing BitTorrent clients to add support for WebTorrent.

一些种子应用(例如 Vuze)已经支持 Web 端,但我们不想等待其他应用添加支持。所以,WebTorrent Desktop 基本上是我们加速 WebTorrent 协议普及的一种方式。通过制作一款人们真正想要使用的优秀 torrent 应用,我们增加了网络中可以与 Web 用户(即网站上的用户)共享 torrent 的对等体数量。

¥Some torrent apps like Vuze already support web peers, but we didn't want to wait around for the rest to add support. So basically, WebTorrent Desktop was our way to speed up the adoption of the WebTorrent protocol. By making an awesome torrent app that people really want to use, we increase the number of peers in the network that can share torrents with web peers (i.e. users on websites).

除了人们已知的功能之外,torrent 还有哪些有趣的用例?

¥What are some interesting use cases for torrents beyond what people already know they can do?

WebTorrent 最令人兴奋的用途之一是同伴协助交付。像 维基百科互联网档案馆 这样的非营利项目可以通过让访问者参与进来来降低带宽和托管成本。热门内容可以快速且经济地在浏览器之间传输。很少访问的内容可以通过 HTTP 从源服务器可靠地提供。

¥One of the most exciting uses for WebTorrent is peer-assisted delivery. Non-profit projects like Wikipedia and the Internet Archive could reduce bandwidth and hosting costs by letting visitors chip in. Popular content can be served browser-to-browser, quickly and cheaply. Rarely-accessed content can be served reliably over HTTP from the origin server.

互联网档案馆实际上已经更新了他们的种子文件,使其能够与 WebTorrent 完美兼容。因此,如果你想在网站上嵌入互联网档案馆的内容,你可以采用一种降低档案馆托管成本的方式,让他们能够将更多资金投入到实际的网络存档工作中!

¥The Internet Archive actually already updated their torrent files so they work great with WebTorrent. So if you want to embed Internet Archive content on your site, you can do it in a way that reduces hosting costs for the Archive, allowing them to devote more money to actually archiving the web!

还有一些令人兴奋的商业用例,从 CDN 到通过 P2P 交付应用。

¥There are also exciting business use cases, from CDNs to app delivery over P2P.

你最喜欢的使用 WebTorrent 的项目有哪些?

¥What are some of your favorite projects that use WebTorrent?

gaia app screenshot

毫无疑​​问,用 WebTorrent 构建的最酷的东西可能是 Gaia 3D 星图。它是一个流畅的银河系 3D 交互式模拟。数据直接从浏览器中的 torrent 加载。飞越我们的星系,意识到我们人类与浩瀚的宇宙相比是多么渺小,这令人惊叹。

¥The coolest thing built with WebTorrent, hands down, is probably Gaia 3D Star Map. It's a slick 3D interactive simulation of the Milky Way. The data loads from a torrent, right in your browser. It's awe-inspiring to fly through our star system and realize just how little we humans are compared to the vastness of our universe.

你可以在 Torrenting Galaxy 中了解它的实现过程,这是一篇博客文章,作者 Charlie Hoey 在其中解释了他如何使用 WebGL 和 WebTorrent 构建星图。

¥You can read about how this was made in Torrenting The Galaxy, a blog post where the author, Charlie Hoey, explains how he built the star map with WebGL and WebTorrent.

brave logo

我们也是 Brave 的忠实粉丝。Brave 是一款自动屏蔽广告和追踪器的浏览器,可以让网络速度更快、更安全。Brave 最近添加了 torrent 支持,因此你可以使用 无需使用单独应用即可查看传统种子。该功能由 WebTorrent 提供支持。

¥We're also huge fans of Brave. Brave is a browser that automatically blocks ads and trackers to make the web faster and safer. Brave recently added torrent support, so you can view traditional torrents without using a separate app. That feature is powered by WebTorrent.

因此,就像大多数浏览器可以渲染 PDF 文件一样,Brave 也可以渲染磁力链接和种子文件。它们只是浏览器原生支持的另一种内容类型。

¥So, just like how most browsers can render PDF files, Brave can render magnet links and torrent files. They're just another type of content that the browser natively supports.

Brave 的联合创始人之一实际上是 Brendan Eich,他是 JavaScript 的创造者,而 JavaScript 正是我们编写 WebTorrent 所用的语言,因此我们认为 Brave 选择集成 WebTorrent 非常酷。

¥One of the co-founders of Brave is actually Brendan Eich, the creator of JavaScript, the language we wrote WebTorrent in, so we think it's pretty cool that Brave chose to integrate WebTorrent.

为什么选择在 Electron 上构建 WebTorrent 桌面?

¥Why did you choose to build WebTorrent Desktop on Electron?

WebTorrent Desktop main window

有种说法是 Electron 应用是 "bloated",因为它们在每个应用中都包含完整的 Chrome 内容模块。在某些情况下,这部分正确(Electron 应用安装程序通常约为 40MB,而特定于操作系统的应用安装程序通常约为 20MB)。

¥There is a meme that Electron apps are "bloated" because they include the entire Chrome content module in every app. In some cases, this is partially true (an Electron app installer is usually ~40MB, where an OS-specific app installer is usually ~20MB).

然而,就 WebTorrent 桌面版而言,我们在正常运行过程中几乎使用了所有 Electron 功能以及数十项 Chrome 功能。如果我们想为每个平台从头开始实现这些功能,那么构建我们的应用将需要数月甚至数年的时间,或者我们只能为单个平台发布应用。

¥However, in the case of WebTorrent Desktop, we use nearly every Electron feature, and many dozens of Chrome features in the course of normal operation. If we wanted to implement these features from scratch for each platform, it would have taken months or years longer to build our app, or we would have only been able to release for a single platform.

为了便于理解,我们使用了 Electron 的 Dock 集成(用于显示下载进度)、菜单栏集成(用于在后台运行)、协议处理程序注册(用于打开磁力链接)、省电阻止程序(用于防止视频播放期间进入睡眠状态)和 自动更新程序。至于 Chrome 特性,我们大量使用了以下特性:<video> 标签(用于播放多种不同的视频格式)、<track> 标签(用于支持隐藏字幕)、拖放支持以及 WebRTC(在原生应用中使用起来并不简单)。

¥Just to get an idea, we use Electron's dock integration (to show download progress), menu bar integration (to run in the background), protocol handler registration (to open magnet links), power save blocker (to prevent sleep during video playback), and automatic updater. As for Chrome features, we use plenty: the <video> tag (to play many different video formats), the <track> tag (for closed captions support), drag-and-drop support, and WebRTC (which is non-trivial to use in a native app).

另请参阅:我们的 torrent 引擎用 JavaScript 编写,并假设存在许多 Node API,尤其是 require('net')require('dgram'),用于 TCP 和 UDP 套接字支持。

¥Not to mention: our torrent engine is written in JavaScript and assumes the existence of lots of Node APIs, but especially require('net') and require('dgram') for TCP and UDP socket support.

基本上,Electron 正是我们所需要的,它拥有我们在创纪录的时间内交付一个稳定、精致的应用所需的全部功能。

¥Basically, Electron is just what we needed and had the exact set of features we needed to ship a solid, polished app in record time.

你最喜欢 Electron 的哪些方面?

¥What are your favorite things about Electron?

WebTorrent 库作为开源项目已经开发了两年。我们用四周时间制作了 WebTorrent 桌面版。Electron 是我们能够如此快速地构建和发布应用的主要原因。

¥The WebTorrent library has been in development as an open source side project for two years. We made WebTorrent Desktop in four weeks. Electron is the primary reason that we were able to build and ship our app so quickly.

正如 Node.js 让使用 jQuery 的一代前端程序员能够轻松进行服务器编程一样,Electron 也让任何熟悉 Web 或 Node.js 开发的人都能轻松进行原生应用开发。Electron 功能极其强大。

¥Just as Node.js made server programming accessible to a generation of jQuery-using front-end programmers, Electron makes native app development accessible to anyone familiar with Web or Node.js development. Electron is extremely empowering.

网站和桌面客户端共享代码吗?

¥Do the website and the Desktop client share code?

是的,webtorrent npm 包 可以在 Node.js、浏览器和 Electron 中运行。完全相同的代码可以在所有环境中运行 - 这就是 JavaScript 的魅力所在。它是当今的通用运行时。Java Applets 承诺推出 "一次编写,随处运行" 应用,但由于多种原因,这一愿景从未真正实现。实际上,Electron 比任何其他平台都更接近这一理想状态。

¥Yes, the webtorrent npm package works in Node.js, in the browser, and in Electron. The exact same code can run in all environments – this is the beauty of JavaScript. It's today's universal runtime. Java Applets promised "Write Once, Run Anywhere" apps, but that vision never really materialized for a number of reasons. Electron, more than any other platform, actually gets pretty darn close to that ideal.

在构建 WebTorrent 时,你遇到了哪些挑战?

¥What are some challenges you've faced while building WebTorrent?

在应用的早期版本中,我们努力提高 UI 的性能。我们将 torrent 引擎与绘制主应用窗口的渲染进程放在了同一个渲染进程中,不出所料,当 torrent 引擎的 CPU 活动非常频繁时(例如验证从其他用户收到的 torrent 片段),会导致系统运行缓慢。

¥In early versions of the app, we struggled to make the UI performant. We put the torrent engine in the same renderer process that draws the main app window which, predictably, led to slowness anytime there was intense CPU activity from the torrent engine (like verifying the torrent pieces received from peers).

我们通过将 torrent 引擎移至第二个不可见的渲染进程来解决这个问题,该进程通过 IPC 进行通信。这样,即使该进程短暂地占用了大量 CPU,UI 线程也不会受到影响。流畅的滚动和动画效果令人非常满意。

¥We fixed this by moving the torrent engine to a second, invisible renderer process that we communicate with over IPC. This way, if that process briefly uses a lot of CPU, the UI thread will be unaffected. Buttery-smooth scrolling and animations are so satisfying.

注意:我们必须将 torrent 引擎放在渲染器进程中,而不是 "main" 进程中,因为我们需要访问 WebRTC(它仅在渲染器中可用)。

¥Note: we had to put the torrent engine in a renderer process, instead of a "main" process, because we need access to WebRTC (which is only available in the renderer.)

Electron 应该在哪些方面改进?

¥In what areas should Electron be improved?

我们希望看到更好的文档,介绍如何构建和发布可用于生产环境的应用,尤其是在代码签名和自动更新等棘手问题上。我们必须通过深入研究源代码并在 Twitter 上四处咨询来学习最佳实践!

¥One thing we'd love to see is better documentation about how to build and ship production-ready apps, especially around tricky subjects like code signing and auto-updating. We had to learn about best practices by digging into source code and asking around on Twitter!

WebTorrent Desktop 完成了吗?如果不行,下一步是什么?

¥Is WebTorrent Desktop done? If not, what's coming next?

我们认为 WebTorrent Desktop 的当前版本非常出色,但仍有改进的空间。我们目前正在改进代码、性能、字幕支持和视频编解码器支持。

¥We think the current version of WebTorrent Desktop is excellent, but there's always room for improvement. We're currently working on improving polish, performance, subtitle support, and video codec support.

如果你有兴趣参与该项目,请查看 我们的 GitHub 页面

¥If you're interested in getting involved in the project, check out our GitHub page!

有哪些 Electron 开发技巧可能对其他开发者有用?

¥Any Electron development tips that might be useful to other developers?

WebTorrent 桌面贡献者之一 Feross 最近发表了题为“真实世界的 Electron:在阿根廷 NodeConf 大会上,我们将举办“使用 JavaScript 构建跨平台桌面应用”活动,其中包含发布优质 Electron 应用的实用技巧。如果你正处于拥有一个基本可运行的应用的阶段,并希望将其提升到更高的完善度和专业性,那么本次演讲将特别有用。

¥Feross, one of the WebTorrent Desktop contributors, recently gave a talk "Real world Electron: Building Cross-platform desktop apps with JavaScript" at NodeConf Argentina that contains useful tips for releasing a polished Electron app. The talk is especially useful if you're at the stage where you have a basic working app and you're trying to take it to the next level of polish and professionalism.

点击此处观看

¥Watch here:

幻灯片在此

¥Slides here:

DC 是另一位 WebTorrent 贡献者,他编写了 一份你可以执行的操作清单,旨在让你的应用更加精致,更具原生体验。它附带代码示例,涵盖了 macOS 停靠栏集成、拖放、桌面通知以及确保应用快速加载等功能。

¥DC, another WebTorrent contributor, wrote a checklist of things you can do to make your app feel polished and native. It comes with code examples and covers things like macOS dock integration, drag-and-drop, desktop notifications, and making sure your app loads quickly.