本周我们采访了 @feross 和 @dcposch，聊了聊 WebTorrent，这款由 Web 驱动的种子客户端，它能连接用户，形成一个分布式、去中心化的浏览器到浏览器的网络。

什么是 WebTorrent？​

WebTorrent 是第一个在浏览器中工作的种子客户端。它完全用 JavaScript 编写，并能使用 WebRTC 进行点对点传输。无需浏览器插件、扩展或安装。

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

您可以在此处观看 WebTorrent 的演示：webtorrent.io。

这有什么酷的？​

想象一下一个像 YouTube 这样的视频网站，但访客会帮助托管网站的内容。使用 WebTorrent 驱动的网站的人越多，它就变得越快、越有弹性。

浏览器到浏览器的通信消除了中间商，让人们可以按自己的方式进行通信。不再是客户端/服务器——只有一个由所有相等的点组成的对等网络。WebTorrent 是重新去中心化 Web 之旅的第一步。

Electron 在其中扮演什么角色？​

大约一年前，我们决定构建 WebTorrent Desktop，这是 WebTorrent 的一个桌面应用程序版本。

我们构建 WebTorrent Desktop 有三个原因：

1. 我们想要一个干净、轻量级、无广告、开源的 torrent 应用程序。
2. 我们想要一个支持良好流媒体的 torrent 应用程序。
3. 我们需要一个“混合客户端”，它连接 BitTorrent 和 WebTorrent 网络。

既然我已经可以在我的网页浏览器中下载种子了，为什么还需要桌面应用程序呢？​

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

早期，BitTorrent 使用 TCP 作为其传输协议。后来，uTP 问世，承诺比 TCP 具有更好的性能和额外的优势。每一个主流的种子客户端最终都采用了 uTP，如今你可以通过任一协议使用 BitTorrent。WebRTC 协议是下一步的逻辑发展。它带来了与网页浏览器互操作性的承诺——一个由所有桌面 BitTorrent 客户端和数百万个网页浏览器组成的庞大的 P2P 网络。

“Web peers”（在网页浏览器中运行的种子 peers）通过增加数百万个新 peer 来增强 BitTorrent 网络，并将 BitTorrent 扩展到数十种新的用例。WebTorrent 尽可能遵循 BitTorrent 规范，以便现有 BitTorrent 客户端能够轻松添加对 WebTorrent 的支持。

像 Vuze 这样的某些种子应用程序已经支持 Web peers，但我们不想坐等其他应用程序添加支持。所以，基本上，WebTorrent Desktop 是我们加速 WebTorrent 协议采用的方式。 通过创建一个人们真正想要使用的出色种子应用程序，我们增加了网络中可以与 Web peers（即网站上的用户）共享种子的 peer 数量。

除了人们已知的用途，种子还有哪些有趣的应用场景？​

WebTorrent 最令人兴奋的用途之一是点对点辅助交付。像 维基百科 和 互联网档案馆 这样的非营利项目可以通过让访问者贡献带宽来减少带宽和托管成本。流行内容可以快速廉价地通过浏览器到浏览器进行分发。稀少访问的内容可以通过 HTTP 从源服务器可靠地分发。

互联网档案馆实际上已经更新了他们的种子文件，使其与 WebTorrent 配合得很好。所以，如果你想在你自己的网站上嵌入互联网档案馆的内容，你可以以一种减少互联网档案馆托管成本的方式来实现，让他们可以将更多资金用于实际存档网络！

从 CDN 到 P2P 应用交付，还有令人兴奋的商业用例。

你最喜欢的 WebTorrent 项目有哪些？​

毫无疑问，用 WebTorrent 构建的最酷的项目可能是 Gaia 3D 星图。这是一个对银河系的流畅的 3D 交互式模拟。数据直接在你的浏览器中从种子加载。当你穿越星系，认识到人类与宇宙的浩瀚相比是多么渺小时，这种感觉令人敬畏。

你可以在 Torrenting The Galaxy 中阅读关于它是如何制作的，这是一篇博文，作者 Charlie Hoey 在其中解释了他如何使用 WebGL 和 WebTorrent 构建星图。

我们也是 Brave 的忠实粉丝。Brave 是一款自动阻止广告和跟踪器的浏览器，让网络更快速、更安全。Brave 最近增加了种子支持，因此你可以在 不使用独立应用程序的情况下查看传统种子。这项功能由 WebTorrent 提供支持。

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

Brave 的联合创始人之一 Brendan Eich 是 JavaScript 的创建者，而 JavaScript 正是我们编写 WebTorrent 的语言，所以我们认为 Brave 选择集成 WebTorrent 是非常酷的事情。

你为什么选择在 Electron 上构建 WebTorrent Desktop？​

有一个说法是 Electron 应用“臃肿”，因为它们在每个应用中都包含完整的 Chrome 内容模块。在某些情况下，这部分是真的（Electron 应用安装程序通常为 40MB，而特定操作系统的应用安装程序通常为 20MB）。

然而，在 WebTorrent Desktop 的情况下，我们在正常运行过程中几乎使用了所有的 Electron 功能，以及几十个 Chrome 功能。如果我们想为每个平台从头开始实现这些功能，那么构建我们的应用程序将需要额外花费数月甚至数年时间，或者我们只能发布一个平台版本。

为了让你有个概念，我们使用了 Electron 的 Dock 集成（用于显示下载进度），菜单栏集成（用于在后台运行），协议处理程序注册（用于打开磁力链接），电源节省阻止程序（用于在视频播放期间阻止睡眠），以及自动更新程序。至于 Chrome 功能，我们使用了许多：<video> 标签（用于播放多种不同的视频格式），<track> 标签（用于支持字幕），拖放支持，以及 WebRTC（在原生应用程序中使用它并不简单）。

更不用说：我们的 torrent 引擎是用 JavaScript 编写的，并假定存在大量 Node API，但特别是 require('net') 和 require('dgram') 用于 TCP 和 UDP 套接字支持。

基本上，Electron 正是我们需要的东西，并且拥有我们需要的确切功能集，能够以创纪录的时间交付一个稳定、精美的应用程序。

你最喜欢 Electron 的哪些方面？​

WebTorrent 库作为一个开源的副项目已经开发了两年。我们在四周内完成了 WebTorrent Desktop 的开发。 Electron 是我们能够如此迅速地构建和发布应用程序的主要原因。

正如 Node.js 使一代使用 jQuery 的前端程序员能够进行服务器编程一样，Electron 使任何熟悉 Web 或 Node.js 开发的人都能进行原生应用程序开发。Electron 极大地赋权。

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

是的，webtorrent npm 包可以在 Node.js、浏览器和 Electron 中使用。完全相同的代码可以在所有环境中运行——这是 JavaScript 的魅力所在。它是当今的通用运行时。Java Applets 曾承诺“一次编写，随处运行”的应用程序，但由于种种原因，这种愿景从未真正实现。Electron 比任何其他平台都更接近这个理想。

在构建 WebTorrent 时，你遇到过哪些挑战？​

在应用程序的早期版本中，我们努力使 UI 具有高性能。我们将种子引擎放在绘制主应用程序窗口的同一个渲染进程中，可想而知，当种子引擎进行激烈的 CPU 活动（例如验证从 peer 收到的种子片段）时，会因此导致缓慢。

我们通过将种子引擎移动到一个第二个、不可见的渲染进程来解决这个问题，该进程通过 IPC 进行通信。这样，即使该进程短暂地占用大量 CPU，UI 线程也不会受到影响。流畅的滚动和动画是如此令人满意。

注意：我们必须将 torrent 引擎放在渲染器进程中，而不是“主”进程中，因为我们需要访问 WebRTC（它仅在渲染器中可用）。

Electron 应该在哪些方面进行改进？​

我们希望看到关于如何构建和发布生产级应用程序的更好文档，尤其是在代码签名和自动更新等棘手主题方面。我们不得不通过深入研究源代码和在 Twitter 上询问来学习最佳实践！

WebTorrent Desktop 完成了吗？如果还没，接下来是什么？​

我们认为当前版本的 WebTorrent Desktop 非常出色，但总有改进的空间。我们目前正在努力提高打磨度、性能、字幕支持和视频编解码器支持。

如果您有兴趣参与该项目，请查看 我们的 GitHub 页面！

对于其他开发者可能有用的 Electron 开发技巧是什么？​

Feross，WebTorrent Desktop 的贡献者之一，最近在阿根廷 NodeConf 上发表了一个题为《真实世界的 Electron：使用 JavaScript 构建跨平台桌面应用程序》的演讲，其中包含发布高质量 Electron 应用程序的有用技巧。如果您正处于拥有基本可用应用程序并希望将其提升到下一个更专业水平的阶段，这次演讲尤其有用。

在此处观看:

在此处查看幻灯片:

另一位 WebTorrent 贡献者 DC 撰写了 一份清单，列出了您可以做什么 来让您的应用程序感觉更精美、更原生。它包含代码示例，涵盖了 macOS Dock 集成、拖放、桌面通知以及确保您的应用程序加载速度快等内容。

Electron 的 1.6.3 beta 版本包含了对 macOS Touch Bar 的初步支持。

新的 Touch Bar API 允许您添加按钮、标签、弹出窗口、颜色选择器、滑块和分隔符。这些元素可以动态更新，并且在与它们交互时也会发出事件。

这是此 API 的第一个版本，因此它将在接下来的几个 Electron 版本中不断发展。请查看发行说明以获取进一步更新，并就任何问题或缺失的功能 打开 issue。

您可以通过 npm install electron@beta 安装此版本，并在 TouchBar 和 BrowserWindow Electron 文档中了解更多信息。

非常感谢 @MarshallOfSound 为 Electron 贡献此功能。🎉

Touch Bar 示例​

下面是一个在触控栏中创建简单老虎机游戏的示例。它演示了如何创建触控栏、设置项目样式、将其与窗口关联、处理按钮点击事件以及动态更新标签。

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// Reel labels
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// Spin result label
const result = new TouchBarLabel();

// Spin button
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // Ignore clicks if already spinning
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4 seconds
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // Slow down a bit on each spin
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // All 3 values are the same
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2 values are the same
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // No values are the same
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

本周我们采访了 Aprile Elcich 和 Paolo Fragomeni，聊了聊 Voltra，一款由 Electron 驱动的音乐播放器。

Voltra 是什么？​

Voltra 是一款面向想要拥有自己音乐的人的音乐播放器。它也是一个商店，您可以在其中根据您已拥有的音乐发现和购买新音乐。它无广告，跨平台支持桌面和移动设备。它也不会监视你。

Voltra 是为谁准备的？​

任何听音乐的人。

是什么促使您创建 Voltra？​

广播一直拥有大量听众。它正从无线电波转移到互联网。现在您可以按需租用音乐——这是广播的复兴！由此诞生了许多新产品和服务，但流媒体广播仍然让其他人控制您的音乐和您的体验方式。

我们想要一款完全专注于您拥有的音乐的产品。一款可以轻松直接从艺术家或唱片公司发现和购买新音乐的产品。

有免费版本吗？​

桌面播放器完全免费。 销售您的音乐也免费！ 我们不靠广告支持。

由于该应用程序是免费的，我们稍后可能会开源它。现在我们没有精力来管理它。我们对功能和发展方向也有非常具体的想法。我们有一个活跃的 beta 社区，并且非常重视用户的反馈。

你们如何盈利？​

我们有高级功能！

我们的 Voltra 音频档案库 是一项专为音乐设计的云备份服务。我们不压缩或共享数据块。您的音乐收藏将被物理备份。

对于艺术家和唱片公司，我们的 Pro 会员资格 提供工具，帮助他们接触到更相关的受众，例如分析和专业的艺术家网页。

Voltra 有何不同？​

设计和可用性对我们来说至关重要。我们希望为听众提供无干扰的聆听体验！市面上有一些有趣的音乐播放器和商店。但许多人都比他们的创造者意识到的更复杂、更难使用。我们希望让 Voltra 尽可能多的人都能轻松使用。

我们也不从艺术家或唱片公司那里抽取任何分成。这对我们来说是一个关键的区别。这非常重要，因为它降低了艺术家将音乐推向市场的门槛。

您做出了哪些设计和技术决策？​

在设计 Voltra 时，我们考虑了原生应用程序和 Web 的 UI 约定，并且还仔细考虑了我们可以去除的内容。我们有一个活跃的私人 beta 小组，他们在过去几个月里给了我们重要的反馈。

我们发现专辑封面和摄影对人们来说非常重要。许多播放器只是文件列表。拥有实体专辑的酷之处在于专辑封面，我们希望在 Voltra 桌面应用程序中强调这一点。

我们还确保不干扰用户的文件。我们使用文件监视，所以您可以将文件放在任何您想要的地方，我们不会重命名或移动它们。我们有一个嵌入式数据库来跟踪监视目录的状态，以便我们可以在进程未运行时跟踪新增内容。

在构建 Voltra 时，您遇到了哪些挑战？​

我们花费了大量时间专注于性能。我们从框架开始，然后转向 vanilla Javascript。根据我们的经验，它们提供的通用抽象 outweighs 了它们引入的性能损失和仪式感。

目前，我们能够很好地处理非常大的收藏。大型收藏意味着可能有成千上万张图片！在渲染进程中直接访问 Node.js 的文件系统模块，使得我们可以根据 DOM 事件非常快速地懒加载和卸载大量图片。

一般来说，setImmediate 和 requestIdleCallback 是执行大量处理同时保持 UI 响应能力的重要工具。更具体地说，将 CPU 密集型任务分配到单独的进程中，可以很好地保持用户界面的响应能力。例如，我们将实际的音频上下文移到了一个单独的进程中，通过 IPC 与之通信，以避免繁忙 UI 潜在的干扰。

您为什么选择在 Electron 上构建 Voltra？​

浏览器的沙箱对我们的应用程序来说太受限制了。但我们也在开发一个网页播放器。因此，我们能够在这两个实现之间共享几乎 100% 的代码是一个巨大的优势。

我们实际上是从使用 Swift 构建原生应用程序开始的。我们发现的主要问题是我们一直在重复造轮子。Web 拥有世界上最大的开源生态系统。所以我们很快就切换到了 Electron。

另外，最重要的是，使用 Electron，您只需开发一次，它就应该能在所有主要平台上正常工作™。这并非总能保证，但为每个平台原生编码的成本肯定 outweighs 了 Electron 带来的任何其他成本。

你最喜欢 Electron 的哪些方面？​

高效！：将 Node.js 的网络堆栈和 Chromium 的表示层打包在一起，是高效完成工作的秘诀。

能力：它就是 Web 堆栈，所以我们的整个团队都直接参与产品的构建。

社区：有一个高度组织的社区，他们知道如何很好地沟通！在这种支持下开发，我们感觉非常好。

Electron 在哪些方面可以改进？​

我们希望看到 Electron 支持一个单一的打包器。打包器对于 Electron 来说就像包管理器对于 Node 一样重要。存在多个用户态的打包器，每个打包器都有有趣的功能，但每个打包器都有 bug。社区的共识将有助于引导贡献者们投入的精力。

下一步是什么？​

我们目前正在开发一款移动应用程序，并与艺术家和唱片公司合作，将他们的音乐添加到 Voltra 商店。嘿！如果您是艺术家或唱片公司，请 立即注册！我们计划在我们达到 1000 万曲的目标时开放商店。

Electron 基于 Google 开源的 Chromium 项目，而 Chromium 项目本身并非专门为其他项目设计。这篇文章将介绍 Chromium 如何被构建成一个库供 Electron 使用，以及构建系统在多年间的演变。

使用 CEF​

Chromium Embedded Framework (CEF) 是一个将 Chromium 转换为库的项目，并基于 Chromium 代码库提供稳定的 API。Atom 编辑器和 NW.js 的早期版本都使用了 CEF。

为了维护稳定的 API，CEF 隐藏了 Chromium 的所有细节，并用自己的接口封装了 Chromium 的 API。因此，当我们想访问底层的 Chromium API，比如将 Node.js 集成到网页中时，CEF 的优势反而成了障碍。

最终，Electron 和 NW.js 都转而直接使用 Chromium 的 API。

作为 Chromium 的一部分进行构建​

尽管 Chromium 官方并不支持外部项目，但其代码库是模块化的，很容易基于 Chromium 构建一个最小化的浏览器。提供浏览器界面的核心模块称为 Content Module。

要开发使用 Content Module 的项目，最简单的方法是将项目作为 Chromium 的一部分进行构建。这可以通过先检出 Chromium 的源代码，然后将项目添加到 Chromium 的 DEPS 文件中来完成。

NW.js 和 Electron 的早期版本都采用了这种构建方式。

缺点是，Chromium 是一个非常庞大的代码库，构建它需要非常强大的机器。对于普通笔记本电脑，这可能需要 5 个多小时。因此，这极大地影响了能够为该项目做出贡献的开发人员数量，并且还会减慢开发速度。

将 Chromium 构建为单个共享库​

作为 Content Module 的用户，在大多数情况下 Electron 不需要修改 Chromium 的代码，因此改进 Electron 构建的明显方法是将 Chromium 构建为共享库，然后链接到 Electron 中。这样，开发人员在为 Electron 做贡献时就不再需要构建所有 Chromium 代码。

为此，由 @aroben 创建了 libchromiumcontent 项目。它将 Chromium 的 Content Module 构建为共享库，然后提供 Chromium 的头文件和预编译的二进制文件供下载。libchromiumcontent 初始版本的代码可以在 此链接 中找到。

brightray 项目也是作为 libchromiumcontent 的一部分诞生的，它在 Content Module 周围提供了一个精简的封装。

通过结合使用 libchromiumcontent 和 brightray，开发者无需深入了解 Chromium 的构建细节即可快速构建浏览器。并且消除了构建项目对快速网络和强大机器的要求。

除了 Electron 之外，还有其他 Chromium 驱动的项目也采用了这种方式构建，例如 Breach 浏览器。

过滤导出的符号​

在 Windows 上，一个共享库可以导出的符号数量是有限制的。随着 Chromium 代码库的增长，libchromiumcontent 中导出的符号数量很快就超过了限制。

解决方案是在生成 DLL 文件时过滤掉不需要的符号。它通过 为链接器提供一个 .def 文件，然后使用脚本 判断某个命名空间下的符号是否应该导出 来实现。

通过这种方法，即使 Chromium 不断添加新的导出符号，libchromiumcontent 仍然可以通过剥离更多符号来生成共享库文件。

组件构建​

在介绍 libchromiumcontent 的下一步之前，首先介绍 Chromium 中的组件构建概念非常重要。

作为一个庞大的项目，Chromium 在构建时链接步骤非常耗时。通常，当开发人员进行一次小改动时，需要 10 分钟才能看到最终输出。为了解决这个问题，Chromium 引入了组件构建，它将 Chromium 中的每个模块构建为分离的共享库，因此在最终链接步骤中花费的时间变得微不足道。

分发原始二进制文件​

随着 Chromium 的不断发展，Chromium 中导出的符号越来越多，即使是 Content Module 和 Webkit 的符号也超过了限制。仅仅通过剥离符号已经不可能生成可用的共享库了。

最终，我们不得不 分发 Chromium 的原始二进制文件，而不是生成单个共享库。

如前所述，Chromium 有两种构建模式。由于需要分发原始二进制文件，我们不得不在 libchromiumcontent 中分发两种不同的二进制文件。一种称为 static_library 构建，它包括 Chromium 正常构建生成的每个模块的所有静态库。另一种是 shared_library，它包括 Chromium 组件构建生成的每个模块的所有共享库。

在 Electron 中，Debug 版本链接了 libchromiumcontent 的 shared_library 版本，因为它下载量小，并且链接最终可执行文件时耗时少。而 Electron 的 Release 版本链接了 libchromiumcontent 的 static_library 版本，这样编译器就可以生成对调试很重要的完整符号，并且链接器可以进行更好的优化，因为它知道哪些对象文件是必需的，哪些不是。

因此，对于正常开发，开发者只需要构建 Debug 版本，这不需要好的网络或强大的机器。虽然 Release 版本构建需要更好的硬件，但它可以生成更好的优化后的二进制文件。

gn 更新​

作为世界上最大项目之一，大多数普通系统都不适合构建 Chromium，而 Chromium 团队开发了自己的构建工具。

Chromium 的早期版本使用 gyp 作为构建系统，但它速度慢，并且对于复杂项目来说，其配置文件很难理解。经过多年的开发，Chromium 已切换到 gn 作为构建系统，它速度更快，并且具有清晰的架构。

gn 的改进之一是引入了 source_set，它代表一组对象文件。在 gyp 中，每个模块都由 static_library 或 shared_library 表示，并且对于 Chromium 的正常构建，每个模块生成一个静态库，并将它们链接到最终的可执行文件中。通过使用 gn，每个模块现在只生成一组对象文件，并且最终的可执行文件只是将所有对象文件链接在一起，因此不再生成中间静态库文件。

然而，这个改进给 libchromiumcontent 带来了很大的麻烦，因为 libchromiumcontent 实际上需要中间静态库文件。

解决此问题的第一次尝试是 修补 gn 以生成静态库文件，这解决了问题，但远非一个完善的解决方案。

第二次尝试由 @alespergl 完成，他 从对象文件列表中生成自定义静态库。它使用一种技巧，首先运行一个虚拟构建来收集生成对象文件的列表，然后通过将列表馈送给 gn 来实际构建静态库。它仅对 Chromium 的源代码进行了最小的更改，并保持了 Electron 的构建架构。

总结​

正如您所见，与将 Electron 作为 Chromium 的一部分进行构建相比，将 Chromium 作为库进行构建需要更多的努力，并且需要持续的维护。然而，后者消除了构建 Electron 所需的强大硬件要求，从而使更广泛的开发人员能够构建和贡献 Electron。这些努力是完全值得的。

本周，我们采访了 Automattic 的团队，聊了聊 WordPress Desktop，这是一个用于管理 WordPress 内容的开源桌面客户端。

每个人都知道 WordPress，但 WordPress Desktop 是什么？​

该 WordPress.com 桌面应用程序 提供无缝的跨平台体验，让您可以专注于您的内容和设计，没有浏览器标签页分散您的注意力——或者让您的网站保持侧边但可访问。结合我们的浏览器支持和移动应用程序，您可以在任何地方构建您的网站，以任何能帮助您完成工作的方式。

为什么要为管理 WordPress 网站构建桌面应用程序？所有这些不能都是基于 Web 的吗？​

它实际上使用的是您在浏览器中访问 WordPress.com 时所使用的完全相同的技术。但是，它完全在本地托管，因此加载时间非常短。借助 Dock 通知等原生功能，您可以真正专注于您的 WordPress 网站和博客。

您为什么选择在 Electron 上构建 WordPress Desktop？​

在 2015 年底，我们以 Calypso 的形式重建了大部分 WordPress.com，这是一个使用 React 的开源现代 JavaScript 应用程序。我们开始研究 Electron，并通过对 Calypso 进行一些修改，使其能够在本地运行。这是一次引人注目的体验，我们认为进一步开发它具有很大价值。

我们有多个团队在开发 Calypso。使用传统的桌面技术创建一个与此相匹配的全平台 GUI 客户端将需要更多的工作。通过使用 Electron，我们 2-4 人的小团队得以利用其他团队的努力，在几个月内构建了桌面应用程序。

在构建 WordPress Desktop 时，您遇到过哪些挑战？​

我们很快就运行了应用程序的初始版本，但将其调整为作为桌面应用程序的最佳行为花费了更多时间。该应用程序的一个主要挑战是，您实际上是在本地计算机上运行 Calypso 的副本——它完全是 API 驱动的用户界面。这涉及到大量的桥接工作，并且将更改反馈给了 Calypso 本身。

此外，我们在为不同平台打包应用程序方面付出了很多努力——我们提供 Windows、macOS 和 Linux 版本——这些差异足以使这项工作变得棘手。

当时 Electron 还相对较新，我们经常遇到一些很快就被修复的问题（有时甚至在当天！）。

Electron 应该在哪些方面进行改进？​

Electron 已经为桌面应用程序提供了我们所需的大部分功能，并且自我们开始使用它以来发展迅速。尽管如此，在桌面应用程序中理所当然的一些功能，例如拼写检查和查找/替换，使用现有的 Electron 很难复制。

我们也希望看到一些较新的 Chrome 技术能够集成到 Electron 中。我们尤其热衷于尝试 WebVR。

你最喜欢 Electron 的哪些方面？​

我们选择 Electron 的主要原因，也是它最大的优势，就是非常活跃和开放的社区。Automattic 一直信奉开源。这是我们的核心原则之一，而 Electron 项目和社区遵循了许多非常开放和积极的核心理念。

WordPress 桌面版接下来有什么计划？​

我们的模式的优点是，桌面应用程序可以受益于任何新的 Calypso 功能——改进是持续不断的。我们希望能够为应用程序添加更多功能，例如离线支持，这将真正将应用程序推向原生领域，并提供更好的系统通知。

Automattic 是否有其他团队在开发 Electron 应用程序？​

是的，在我们在桌面应用程序上做出努力后，Simplenote 团队决定使用 Electron 为 Windows 和 Linux 构建桌面应用程序（已存在原生 Mac 客户端）。Simplenote Electron 应用程序 也是开源的，并在 GitHub 上可用。

我们还有一个即将推出的使用 Electron 的 Raspberry Pi 集成。

如果这一切听起来很有趣，我们很想听到您的声音！

是否有任何 Electron 技巧对其他开发者有用？​

发布签名的桌面软件的过程对我们来说相对较新，尤其是对于 Windows。我们为 Code Signing a Windows App 撰写了一篇文章，其中包含了过程以及我们为正确完成它所遇到的几个障碍。

本周的精选项目是 Dat，这是一个 获得资助 的开源、去中心化数据集分发工具。Dat 由一个 地理分布的团队 构建和维护，其中许多人协助撰写了本文。

首先，Dat 是什么？​

我们希望将点对点和分布式系统的最佳部分应用于数据共享。我们从科学数据共享开始，然后开始扩展到研究机构、政府、公共服务和开源团队。

另一种思考方式是，它是一个像 Dropbox 或 BitTorrent Sync 这样的同步和上传应用程序，只不过 Dat 是 开源的。我们的目标是成为一个强大、开源、非营利的，适用于大型、小型、中型、小批量和大规模数据的数据共享软件。

要使用 dat CLI 工具，你只需要输入：

dat share path/to/my/folder

Dat 将创建一个链接，您可以使用该链接将该文件夹发送给其他人——没有中心服务器或第三方可以访问您的数据。与 BitTorrent 不同，它也无法嗅探谁在共享什么（有关更多详细信息，请参阅 Dat Paper 草稿）。

现在我们知道了 Dat 是什么。Dat Desktop 在其中扮演什么角色？​

Dat Desktop 是一种让无法或不愿使用命令行的人也能使用 Dat 的方式。您可以在您的机器上托管多个 Dat，并通过网络服务这些数据。

可以分享一些很酷的用例吗？​

DataRefuge + Project Svalbard​

我们正在开发一个代号为 Project Svalbard 的项目，该项目与 DataRefuge 相关，这是一个致力于备份可能消失的政府气候数据的组织。Svalbard 以北极的斯瓦尔巴特全球种子库命名，该库拥有一个大型地下植物 DNA 备份库。我们的版本是一个大型受控的公共科学数据集集合。一旦我们知道并能信任元数据，我们就可以构建其他很酷的项目，比如一个 分布式志愿者数据存储网络。

加州公民数据联盟​

CACivicData 是一个开源档案库，提供来自 CAL-ACCESS 的每日下载，这是加州跟踪政治资金的数据库。他们进行 每日发布，这意味着在他们的 zip 文件中托管大量重复数据。我们正在将他们的数据作为 Dat 存储库进行托管，这将减少引用特定版本或更新到新版本所需的麻烦和带宽。

Electron 更新​

这一个还没有具体化，但我们认为一个有趣的应用场景是将编译好的 Electron 应用程序放入 Dat 存储库，然后使用 Electron 中的 Dat 客户端拉取最新版本的应用程序二进制文件增量，以节省下载时间并降低服务器的带宽成本。

谁应该使用 Dat Desktop？​

任何想要在 P2P 网络上共享和更新数据的人。数据科学家、开放数据黑客、研究人员、开发人员。如果您有我们尚未想到的酷炫用例，我们对反馈非常 receptive。您可以访问我们的 Gitter 聊天 并随时提问！

Dat 和 Dat Desktop 的下一步计划是什么？​

用户账户和元数据发布。我们正在开发一个 Dat 注册表 Web 应用程序，将在 datproject.org 上部署，它基本上将成为“数据集的 NPM”，但需要注意的是，我们只做一个元数据目录，数据可以存在于在线的任何地方（与 NPM 或 GitHub 不同，所有数据都集中托管，因为源代码足够小，可以全部放入一个系统中）。由于许多数据集非常大，我们需要一个联邦注册表（类似于 BitTorrent tracker 的工作方式）。我们希望通过 Dat Desktop 使人们可以轻松地通过注册表查找或发布数据集，从而使数据共享过程无摩擦。

另一项功能是多写器/协作文件夹。我们有大计划要进行协作工作流程，也许类似于 Git 的分支，但围绕数据集协作进行设计。但我们目前仍在致力于整体稳定性和标准化协议！

您为什么选择在 Electron 上构建 Dat Desktop？​

Dat 是使用 Node.js 构建的，因此它与我们的集成非常契合。此外，我们的用户使用各种机器，因为科学家、研究人员和政府官员可能被迫为他们的机构使用特定的设置——这意味着我们需要能够针对 Windows 和 Linux 以及 Mac。Dat Desktop 相对轻松地实现了这一点。

在构建 Dat 和 Dat Desktop 时，您遇到了哪些挑战？​

弄清楚人们想要什么。我们从表格数据集开始，但我们意识到这是一个相当复杂的问题，而且大多数人都不使用数据库。因此，在项目进行到一半时，我们从头开始重新设计了所有内容以使用文件系统，并且再也没有回头。

我们还遇到了一些通用的 Electron 基础设施问题，包括：

• 遥测 - 如何捕获匿名使用统计信息
• 更新 - 设置自动更新有些零散和神秘
• 发布 - Xcode 签名、在 Travis 上构建发布、进行 Beta 版本构建，这些都曾是挑战。

我们在 Dat Desktop 的“前端”代码中还使用了 Browserify 和一些很酷的 Browserify Transforms（有点奇怪，因为尽管我们有原生的 require 仍然进行打包——但这是因为我们想要 Transforms）。为了更好地管理我们的 CSS，我们从 Sass 切换到使用 sheetify。它极大地帮助我们模块化了 CSS，并使我们更容易将 UI 迁移到具有共享依赖项的面向组件的架构。例如，dat-colors 包含了我们所有的颜色，并在我们所有的项目中共享。

我们一直以来都是标准和最小抽象的忠实拥护者。我们的整个界面都是使用常规 DOM 节点和一些辅助库构建的。我们已经开始将其中一些组件移到 base-elements，一个低级可重用组件库。与我们的大部分技术一样，我们会不断迭代，直到做得最好，但作为一个团队，我们觉得我们在朝着正确的方向前进。

Electron 应该在哪些方面进行改进？​

我们认为最大的痛点是原生模块。必须使用 npm 为 Electron 重新构建模块会增加工作流程的复杂性。我们的团队开发了一个名为 prebuild 的模块，它处理预编译的二进制文件，这对 Node 来说效果很好，但 Electron 的工作流程在安装后仍然需要一个自定义步骤，通常是 npm run rebuild。这很烦人。为了解决这个问题，我们最近采用了一种策略，即将所有平台的编译二进制版本打包到 npm tarball 中。这意味着 tarball 会变大（尽管可以使用 .so 文件——共享库——进行优化），这种方法可以避免运行安装后脚本，并且完全避免了 npm run rebuild 模式。这意味着 npm install 第一次就能正确处理 Electron。

你最喜欢 Electron 的哪些方面？​

API 似乎考虑周全，相对稳定，并且在跟进上游 Node 版本方面做得相当好，我们别无所求！

是否有任何 Electron 技巧对其他开发者有用？​

如果你使用原生模块，不妨试试 prebuild！

了解 Dat 最新进展的最佳方式是什么？​

请在 Twitter 上关注 @dat_project，或订阅我们的 电子邮件通讯。

本周我们与 Slack 的桌面工程师、Ghost Desktop（Ghost 出版平台的 Electron 客户端）的维护者 Felix Rieseberg 进行了交流。

什么是 Ghost？​

Ghost 是一个完全开源、可定制的平台，用于构建和运行现代在线出版物。我们为从 Zappos 到 Sky News 的博客、杂志和记者提供支持。

它与其他出版平台有何不同？​

Ghost 成立于 2013 年 4 月，在一次非常成功的 Kickstarter 活动之后，旨在创建一个专注于专业出版的新平台。我们的使命是为世界各地的独立记者和作家创造最佳的开源工具，并对在线媒体的未来产生实际影响。它提供了更简单、更专注的体验：我们的编辑器完全围绕提供最佳写作体验而设计。

与经典的 WordPress 相比，它提供了更简单、更流畅的体验——它更容易设置和维护，开箱即用地包含了所有重要功能，并且速度大大加快。与其他在线平台相比，Ghost 为作者提供了对其内容的完全所有权和控制权，允许完全自定义，并使作者能够围绕他们的出版物建立业务。

Ghost 是一家营利性公司吗？​

这一点对我们很重要：Ghost 是一个独立的非营利组织。我们为现代新闻和博客构建出版工具，因为我们相信言论自由很重要。我们的软件是在 免费开源许可证 下发布的，我们的商业模式 完全透明，我们的法律结构意味着我们赚到的钱 100% 将再投资于改进 Ghost。

什么是 Ghost Desktop？​

Ghost Desktop 允许作者一次管理多个博客——并专注于他们的写作。一些简单的功能，如常用的写作快捷方式，在浏览器中无法实现，但在我们的桌面应用程序中可用。它允许其他应用程序通过 deeplinks 直接与博客通信。

什么是 Ghost for Journalism？​

今年，我们非常高兴能将我们整个 10 人的全职 Ghost 团队投入到支持三个独立出版物的成长，并为他们的努力提供 45,000 美元的资源。我们称之为 Ghost for Journalism。

我们一直在构建 Ghost，作为互联网下一个伟大的独立出版平台，已经大约三年半了，现在我们已经达到了一个非常有趣的转折点。我们踏上这段旅程是为了创建一个简单、设计精良的博客平台，几乎任何人都可以使用。这始终是第一步。

从长远来看，我们希望 Ghost 成为世界上最优秀新闻报道的卓越平台，这意味着我们需要构建功能来吸引这样的人。今年，我们有意识地决定专注于这一点。

您为什么选择在 Electron 上构建 Ghost Desktop？​

Ghost 在后端和前端都使用 JavaScript 和 Node.js，因此能够利用相同的技术和技能集使我们的团队能够更快地移动、构建更多内容，并最终提供更好的体验。此外，能够在应用程序的 macOS、Windows 和 Linux 版本之间共享超过 95% 的代码，使我们能够专注于构建出色的核心用户体验，而无需为每个平台维护一个代码库。

在构建 Ghost Desktop 时，您遇到了哪些挑战？​

拼写检查可能仍然是最困难的服务之一——我们可以轻松利用许多在线服务，但正确拼写多种语言的文本，同时保护用户的隐私和自主性，并非易事。

Electron 应该在哪些方面进行改进？​

我们很希望看到 Electron 将操作系统的原生拼写检查功能带到他们的应用程序中。我们梦想着一个 <input> 字段获得与 NSTextView 相同服务的世界，但我们也深知这有多么困难。

你最喜欢 Electron 的哪些方面？​

JavaScript 以其庞大的生态系统而闻名，涉及无数的工具和框架——但它提供的便利性不可低估。使用 Electron 构建应用程序只比构建 Web 应用程序稍微难一些，这是一个了不起的壮举。

Ghost 完成了吗？如果没有，接下来会发生什么？​

Ghost Desktop 也是一个进行中的项目——我们距离完成还很远。我们已经讨论了很长时间，希望为用户带来完整的离线模式，并且我们已经相当接近了。其他值得注意的工作领域是扩展和与其他文本编辑应用程序（如 Word 或 Atom）的集成，最终允许人们使用他们喜欢的工具编写帖子。总的来说，一旦我们发布了离线模式功能，我们将寻求与操作系统的更深层集成。如果这听起来很有趣，请 加入我们！

你最喜欢的 Electron 应用程序有哪些？​

我非常喜欢 Kap、Felony 和 Visual Studio Code。

👻

本周我们采访了 Paul Frazee，他是 Beaker Browser 的创建者。Beaker 是一款实验性的点对点 Web 浏览器，它使用 Dat 协议从用户的设备托管站点。

什么是 Beaker？你为什么创建它？​

Beaker 是一款参与式浏览器。它是为独立黑客设计的浏览器。

Web 是闭源的。如果你想影响社交媒体的工作方式，你必须在 Facebook 或 Twitter 工作。搜索的话，就是 Google。控制权掌握在公司手中，而不是用户手中。

通过 Beaker，我们有了一个新的 Web 协议：去中心化存档传输。“Dat。” 它按需免费创建站点，然后从设备共享它们。无需服务器。这是我们的创新。

当你在 Beaker 中访问 Dat 网站时，你会下载文件。该网站永远属于你。你可以保存它、分支它、修改它，并免费共享你的新版本。这一切都是开源的。

所以，这就是它的意义所在：我们正在为开源网站构建浏览器。我们希望它成为一个社交黑客工具包。

谁应该使用 Beaker？​

黑客。修改者。有创造力的人。喜欢折腾的人。

如何创建一个使用 Dat 的新项目？​

我们有一个 名为 bkr 的命令行工具，它有点像 git + npm。这是创建网站的示例：

$ cd ~/my-site
$ bkr init
$ echo "Hello, world!" > index.html
$ bkr publish

这是分支网站的示例：

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
$ echo "My fork has no regard for the previous index.html!" > index.html
$ bkr publish

这些网站然后从你的浏览器中托管。这有点像 BitTorrent；你在 P2P 网络中共享网站。

如果你想要一个 GUI，我们在浏览器中内置了一些基本工具，但我们将这些工具推向用户空间。所有这些都将是可修改的用户应用程序。

您为什么选择在 Electron 上构建 Beaker？​

这个项目很明显。如果我自己分叉 Chrome，我现在就会写 C++！没有人想那样做。我了解 Web 技术栈，并且可以用它快速工作。这是毋庸置疑的。

说实话，我不确定没有 Electron 我是否能做到这一切。它是一个很棒的软件。

在构建 Beaker 时，您遇到了哪些挑战？​

其中一半是在研究工具并弄清楚我能完成多少工作。

制作浏览器本身相当容易。Electron 几乎是一个制作浏览器的工具包……除了浏览器标签页；那个我花了很长时间才弄好。我最终还是学会了如何使用 SVG。它看起来好多了，但我在得到正确结果之前经历了 3 到 4 次迭代。

Electron 应该在哪些方面进行改进？​

如果我能将开发者工具抽屉停靠在 webview 中，那将非常棒。

Beaker 的下一步是什么？​

Dat 网站的安全 DNS 名称。一个可由社区配置的 URL 方案，称为 “app scheme”。更多 Dat API。

对于那些可能对为该项目做出贡献感兴趣的人来说，Beaker 在哪些方面需要帮助？​

我们有很多开放的 issue。不要害怕 ping 我。freenode 上的 #beakerbrowser。我们维护一个 贡献者页面，我们会将您添加进去。如果您访问奥斯汀，我会请您喝一杯啤酒。

是否有任何 Electron 技巧对其他开发者有用？​

1. 使用现有的构建工具。你不想纠结于自己的解决方案，相信我。使用 electron-builder。使用样板仓库。
2. 如果您需要在 Electron 仓库中打开 issue，请付出额外的努力使其易于重现。您会得到更快的回复，并且团队会为此感激。更好的是，尝试自己修复它。实际上，看看它的内部结构是相当有趣的。
3. 至少阅读一遍所有的指南和高级文档。
4. 不要构建浏览器，这是一个饱和的市场。

Electron 社区正在快速发展，人们正以惊人的速度创造强大的新应用程序和工具。为了庆祝这种创意动力并让社区了解其中一些新项目，我们决定开始一个每周博客系列，介绍值得注意的 Electron 相关项目。

这篇博文是该系列的第一篇，介绍了 Kap，这是一个由 Wulkano（一个由自由职业设计师和开发人员组成的地理分布团队）构建的开源屏幕录制应用程序。

Kap 是什么？​

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

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

为什么你们要构建它？​

这是一个很好的问题，并不是说市面上没有屏幕录像机！我们觉得替代方案要么过于复杂，要么过于昂贵，要么过于有限。没有一个能完美满足我们的日常需求。我们还认为，我们用来完成工作的工具是开源的，这一点很棒，这样每个人都可以帮助塑造它们。构建 Kap 最终也关于我们没有做什么。一切都在细节中，细微改进的积累构成了我们想要使用的工具的轮廓。

然而，也许最重要的是，Kap 已经成为一个地方，让我们可以在放下担忧的同时，愉快地为自己和像我们一样的人构建东西。创造一个你可以随意宣泄、尝试新事物并享受你的技艺的环境非常重要。没有要求，没有压力，没有期望。设计师和开发人员应该进行副业项目吗？是的，他们应该。

您为什么选择在 Electron 上构建 Kap？​

有几个原因

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

我们认为应用程序的未来在浏览器中，但我们还没有达到那个阶段。Electron 是通往该未来的旅程中的重要一步。它不仅使应用程序本身更易于访问，而且使它们的代码也更易于访问。一个有趣的思考是想象一个未来，操作系统是一个浏览器，而标签页本质上是 Electron 应用程序。

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

在构建 Kap 时，您遇到了哪些挑战？​

使用 Electron 可用的资源录制屏幕是最大的挑战。它们的性能不足以满足我们的要求，并且会在我们看来导致项目失败。尽管这并非 Electron 本身的问题，但在原生开发和使用 Web 技术构建桌面应用程序之间仍然存在差距。

我们花费了大量时间尝试解决 getUserMedia API 性能不佳的问题，这个问题源于 Chromium。当我们着手制作 Kap 时，我们的主要目标之一是完全使用 Web 技术构建应用程序。在尝试了所有方法使其正常工作（在 Retina 屏幕上最低要求是 30 FPS）之后，我们最终不得不寻找其他解决方案。

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

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

Electron 应该在哪些方面进行改进？​

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

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

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

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

你最喜欢 Electron 的哪些方面？​

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

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

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

Kap 的下一步是什么？​

我们的下一步是为 2.0.0 版本审核应用程序，该版本包括 React 重写以及对插件的支持，允许开发人员扩展 Kap 的功能！我们邀请大家在我们的 GitHub 仓库 上关注该项目并做出贡献。我们正在倾听，并希望听取尽可能多的人的意见，让我们知道我们如何才能让 Kap 成为对您最好的工具！

Wulkano 是什么？​

Wulkano 是一个设计工作室和数字集体，一个由远程技术人员组成的团队，他们喜欢一起合作处理客户项目和我们自己的项目。我们是一个分布但紧密的团队，来自不同的地方和背景，在我们的虚拟办公室（碰巧是基于 Electron 的 Slack！）中分享知识、想法、经验，但最重要的是分享有趣的 GIF 和表情包。

是否有任何 Electron 技巧对其他开发者有用？​

充分利用并参与到精彩的 社区，查看 Awesome Electron，查看 示例，并利用出色的 文档！

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

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

要开始，请克隆此仓库

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

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

cd activity-monitor
npm install
npm start

活动监视器​

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

哈希​

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

镜像​

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

价格​

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

URL​

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

其他资源​

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

• electron-quick-start：一个最小化的 Electron 应用程序模板。
• Electron API Demos：一个演示 Electron API 核心功能的交互式应用程序。
• electronjs.org/docs/all：将所有 Electron 文档集中在一个可搜索的页面上。
• hokein/electron-sample-apps：由 Electron 维护者 Haojian Wu 编译的另一个示例应用程序集合。
• awesome-electron - 一个收集最新、最棒的 Electron 相关教程、书籍、视频等的 GitHub 仓库。