¥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!
¥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.
接下来,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!
已发现一个漏洞,该漏洞允许在某些禁用 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.
¥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.
下次你在飞机上或地下咖啡店开发 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
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.
已发现一个远程代码执行漏洞,该漏洞影响使用自定义协议处理程序的 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.
¥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.
我们已发布 Electron 的新版本,其中包含针对此漏洞的修复:1.8.2-beta.5、1.7.12 和 1.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.
¥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.
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.
¥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:
¥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.
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.
我们已启动网站国际化进程,旨在让全球开发者都能轻松使用 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.
虽然我们一直在默默地进行这项工作,但已有超过 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.
¥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.
从今天起,任何 Electron 应用都可以在 Electron 网站上轻松拥有自己的页面。如需查看一些示例,请查看 Etcher、1Clipboard 或 GraphQL 游乐场,如图所示,该图位于网站的日文版中:
¥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:
市面上有一些非常棒的 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.
¥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.
¥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.
¥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:
¥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.
之前的 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.
¥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.
我们还要特别感谢世界各地所有贡献时间和精力来帮助改进 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!
已发现 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.8 和 1.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:
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 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 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.
¥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.
¥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.
从 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.
如果你已经在使用 @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.
¥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.
¥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.
¥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.
¥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.
¥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 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!
¥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
创建流并等待几秒钟后,你可以看到符合条件的问题。
¥After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.
¥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 also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.
¥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.
¥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.
本周,我们采访了 @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 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.
¥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.
¥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” (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).
¥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.
¥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.
¥What are some of your favorite projects that use WebTorrent?
毫无疑问,用 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.
¥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.
¥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.
¥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.
¥Why did you choose to build WebTorrent Desktop on Electron?
有种说法是 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).
¥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.
¥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.
¥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.
¥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.
¥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).
¥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.
¥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.)
¥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!
¥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.
¥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.
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.