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

什么是 WebTorrent？​

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

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

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

为什么这很酷？​

想象一下像 YouTube 这样的视频网站，但访问者可以帮助托管网站的内容。使用 WebTorrent 的网站的用户越多，它就越快、更具弹性。

浏览器到浏览器的通信消除了中间人，让人们可以按照自己的意愿进行通信。不再有客户端/服务器 - 只是一个对等网络，所有对等方都是平等的。WebTorrent 是重新去中心化 Web 的旅程中的第一步。

Electron 在这里扮演什么角色？​

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

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

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

如果我已经在 Web 浏览器中下载 torrent，为什么还需要桌面应用程序？​

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

在早期，BitTorrent 使用 TCP 作为其传输协议。后来，uTP 出现，承诺比 TCP 更好的性能和其他优势。每个主流 torrent 客户端最终都采用了 uTP，今天您可以使用 BitTorrent over 任何一个协议。WebRTC 协议是下一个合乎逻辑的步骤。它带来了与 Web 浏览器互操作的希望 - 一个由所有桌面 BitTorrent 客户端和数百万 Web 浏览器组成的巨大 P2P 网络。

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

一些 torrent 应用程序（如 Vuze）已经支持 Web 对等方，但我们不想等待其他应用程序添加支持。所以基本上，WebTorrent Desktop 是我们加快 WebTorrent 协议采用的方式。 通过制作人们真正想要使用的精彩 torrent 应用程序，我们可以增加网络中可以与 Web 对等方（即网站上的用户）共享 torrent 的对等方数量。

除了人们已经知道可以做的事情之外，torrent 还有哪些有趣的用例？​

WebTorrent 最令人兴奋的用途之一是对等辅助交付。像 Wikipedia 和 Internet Archive 这样的非营利项目可以通过让访问者参与进来来降低带宽和托管成本。热门内容可以通过浏览器到浏览器快速、廉价地提供。很少访问的内容可以通过 HTTP 从原始服务器可靠地提供。

Internet Archive 实际上已经更新了他们的 torrent 文件，因此它们可以很好地与 WebTorrent 配合使用。因此，如果您想将 Internet Archive 内容嵌入到您的网站上，您可以通过一种方式来降低 Archive 的托管成本，从而让他们能够将更多的资金用于实际归档 Web！

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

您最喜欢哪些使用 WebTorrent 的项目？​

毫无疑问，使用 WebTorrent 构建的最酷的事情可能是 Gaia 3D 星图。它是一个光滑的 3D 交互式银河系模拟。数据直接从浏览器中的 torrent 加载。飞过我们的恒星系统并意识到与我们浩瀚的宇宙相比，我们人类有多么渺小，这令人叹为观止。

您可以在 Torrenting The Galaxy 中阅读有关如何制作此星图的信息，这是一篇博客文章，作者 Charlie Hoey 解释了他是如何使用 WebGL 和 WebTorrent 构建星图的。

我们也是 Brave 的忠实粉丝。Brave 是一款可以自动阻止广告和跟踪器的浏览器，以使 Web 更快、更安全。Brave 最近添加了 torrent 支持，因此您可以 查看传统的 torrent，而无需使用单独的应用程序。该功能由 WebTorrent 提供支持。

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

Brave 的联合创始人之一实际上是 Brendan Eich，他是 JavaScript 的创建者，我们用这种语言编写了 WebTorrent，因此我们认为 Brave 选择集成 WebTorrent 非常酷。

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

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

但是，就 WebTorrent Desktop 而言，我们在正常运行过程中几乎使用了每个 Electron 功能和许多数十个 Chrome 功能。如果我们想从头开始为每个平台实现这些功能，那么构建我们的应用程序将需要数月或数年，或者我们只能为单个平台发布。

仅了解一下，我们使用 Electron 的 停靠栏集成（显示下载进度）、菜单栏集成（在后台运行）、协议处理程序注册（打开磁力链接）、省电阻止程序（防止视频播放期间睡眠）和 自动更新程序。至于 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 具有高性能。我们将 torrent 引擎放在绘制主应用程序窗口的同一渲染器进程中，可以预见的是，每当 torrent 引擎发生激烈的 CPU 活动时（例如验证从对等方收到的 torrent 片段），都会导致速度变慢。

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

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

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

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

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

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

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

对于其他开发人员，有哪些可能有用的 Electron 开发技巧？​

WebTorrent Desktop 的贡献者之一 Feross 最近在 NodeConf Argentina 上发表了题为 "Real world Electron: Building Cross-platform desktop apps with JavaScript" 的演讲，其中包含有关发布完善的 Electron 应用程序的有用技巧。如果您处于拥有基本工作应用程序并尝试将其提升到更高的水平并达到专业水平的阶段，那么这次演讲特别有用。

在此处观看:

幻灯片在此处:

另一位 WebTorrent 贡献者 DC 编写了 一份您可以做的事情的清单，以使您的应用程序感觉完善和原生。它带有代码示例，涵盖了 macOS 停靠栏集成、拖放、桌面通知以及确保您的应用程序快速加载等内容。

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

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

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

您可以通过 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 时，您遇到过哪些挑战？​

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

目前，我们可以很好地处理非常大的收藏。大型收藏意味着可能成千上万张图片！直接从渲染进程中使用 Node.js 的文件系统模块使得基于 DOM 事件快速惰性加载和卸载大量图像变得非常容易。

总的来说，setImmediate 和 requestIdleCallback 一直是执行大量处理同时保持 UI 响应的重要工具。更具体地说，将 CPU 密集型任务分配到单独的进程中确实有助于保持用户界面的响应性。例如，我们将实际的音频上下文移动到一个单独的进程中，通过 IPC 与其通信，以避免来自繁忙 UI 的潜在中断。

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

浏览器的沙箱对于我们的应用来说太受限制了。但我们也在开发 Web 播放器。因此，我们可以在两个实现之间共享几乎 100% 的代码，这是一个巨大的胜利。

实际上，我们最初是使用 Swift 构建原生应用。我们发现的主要问题是我们正在重新发明很多东西。Web 拥有世界上最大的开源生态系统。因此，我们很快就切换到了 Electron。

此外，最重要的是，使用 Electron，您只需开发一次，它就应该在所有主要平台上 Just Work™。这不能保证，但为每个平台进行原生编码的成本肯定超过了 Electron 引入的任何其他成本。

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

GTD!：将 Node.js 的网络堆栈和 Chromium 的演示层打包在一起是完成工作的秘诀。

能力：它只是 Web 堆栈，因此我们整个团队都参与了实际构建产品。

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

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

我们希望看到 Electron 支持一个单独的打包器。打包器对于 Electron 来说与包管理器对于 Node 来说一样重要。用户空间中有多个打包器，每个打包器都有有趣的功能，但每个打包器都有错误。社区的共识将有助于指导贡献者所花费的精力。

接下来会是什么？​

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

Electron 基于 Google 的开源 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。

libchromiumcontent 项目由 @aroben 为此目的而创建。它将 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，其中包括由组件构建生成的每个模块的所有共享库。

在 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 驱动的 UI。其中涉及大量的桥接工作，并且这些更改会反馈给 Calypso 本身。

此外，我们还花费了大量的精力来打包该应用以用于不同的平台——我们提供 Windows、macOS 和 Linux 版本——并且存在足够的差异来使其变得棘手。

当时，Electron 相对较新，我们不断遇到一些问题，这些问题很快就得到了修复（有时是在同一天！）

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

Electron 已经提供了我们桌面应用所需的大部分功能，并且自从我们开始使用它以来，它已经取得了快速的进展。也就是说，在桌面应用中理所当然地存在一些领域，例如拼写检查和查找/替换，使用 Electron 按照原样复制它们更加困难。

我们也希望看到一些较新的 Chrome 技术也能过滤到 Electron 中。我们特别热衷于试验 WebVR。

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

我们选择 Electron 的主要原因以及它最大的优势是积极且开放的社区。Automattic 一直坚信开源。这是我们的核心原则之一，并且 Electron 项目和社区遵循许多非常开放和积极的核心信念。

WordPress Desktop 的下一步是什么？​

我们模型的优点是桌面应用受益于任何新的 Calypso 功能——并且一直在不断改进。我们希望我们可以向该应用添加其他功能，例如离线支持，这将真正使该应用进入原生领域，并改善系统通知。

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

是的，在我们对桌面应用进行了努力之后，Simplenote 团队决定使用 Electron 来构建 Windows 和 Linux 的桌面应用（已经存在一个原生的 Mac 客户端）。Simplenote Electron 应用也是开源的，并且可以在 Github 上获得。

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

如果任何这些听起来很有趣，那么我们 很乐意收到您的来信！

您有什么可以用于其他开发人员的 Electron 技巧吗？​

发布已签名的桌面软件对我们来说相对较新，尤其是对于 Windows 来说。我们撰写了一篇关于 代码签名 Windows 应用的文章，其中包括该过程以及我们为正确执行该过程所经历的一些障碍。

本周的特色项目是 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 以北极的 Svalbard Global Seed Vault 命名，该仓库拥有大量的植物 DNA 地下备份库。我们的版本是一个大型的版本控制的公共科学数据集集合。一旦我们知道并可以信任元数据，我们就可以构建其他很酷的项目，比如 分布式志愿者数据存储网络。

California Civic Data Coalition​

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

Electron 更新​

这个尚未具体实现，但我们认为一个有趣的使用案例是将已编译的 Electron 应用放入 Dat 存储库中，然后在 Electron 中使用 Dat 客户端来提取已构建的应用二进制文件的最新增量，以节省下载时间，同时也降低服务器的带宽成本。

谁应该使用 Dat Desktop？​

任何想通过 p2p 网络分享和更新数据的人。数据科学家、开放数据黑客、研究人员、开发者。如果有人想到我们还没考虑到的有趣用例，我们非常乐意接受反馈。您可以访问我们的 Gitter Chat，随时提出任何问题！

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

用户帐户和元数据发布。我们正在开发一个 Dat 注册表 Web 应用程序，将在 datproject.org 上部署，它基本上是数据集的“NPM”，但需要注意的是，我们只会是一个元数据目录，而数据可以存在于任何在线位置（与 NPM 或 GitHub 不同，所有数据都集中托管，因为源代码足够小，可以容纳在一个系统中）。由于许多数据集都很大，我们需要一个联邦注册表（类似于 BitTorrent trackers 的工作方式）。我们希望让人们可以轻松地从 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 文件 - 共享库进行优化），但这种方法避免了运行 post-install 脚本，也完全避免了 npm run rebuild 模式。这意味着 npm install 第一次就能为 Electron 做正确的事情。

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

API 似乎经过了深思熟虑，相对稳定，并且在保持与上游 Node 版本同步方面做得很好，我们没什么可要求的了！

您有什么可以用于其他开发人员的 Electron 技巧吗？​

如果您使用原生模块，请尝试 prebuild！

关注 Dat 发展的最佳方式是什么？​

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

本周我们与 Felix Rieseberg 进行了交流，他是 Slack 的桌面工程师，也是 Ghost Desktop 的维护者，Ghost Desktop 是 Ghost 发布平台的 Electron 客户端。

什么是 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 是一种实验性的对等网络浏览器，它使用 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 方案，称为 “应用程序方案”。更多 Dat API。

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

我们有很多未解决的问题。不要害怕 ping 我。freenode 上的 #beakerbrowser。我们维护一个 贡献者页面，我们会将您添加到其中。如果您访问奥斯汀，我会请您喝一杯啤酒。

您有什么可以用于其他开发人员的 Electron 技巧吗？​

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

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

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

什么是 Kap？​

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

我们看到各个年龄段和背景的人在教育环境、屏幕录像、教程中使用它……清单还在继续。甚至可以创建生产资产！我们完全被我们的小型副项目受到如此好评所震惊。

你为什么要构建它？​

这是一个非常好的问题，因为似乎并不缺少屏幕录像机！我们觉得替代方案要么太复杂，要么太昂贵，要么太有限。没有什么感觉恰到好处来满足我们的日常需求。我们也认为，当我们用来做我们工作的工具是开源的时候，那是非常棒的，这样每个人都可以帮助塑造它们。构建 Kap 最终与我们没有做什么一样重要。这一切都在细节中，一个小改进的积累，成为我们想要使用的工具的轮廓。

然而，也许最重要的是，Kap 已经成为一个让我们把烦恼抛在脑后，只是为了我们自己和像我们这样的人而愉快地构建一些东西的地方。创造一个让你发泄、尝试新事物并享受你的手艺的环境非常重要。没有要求，没有压力，没有期望。设计师和开发人员应该做副项目吗？为什么，是的。是的，他们应该。

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

有很多原因

• Web 技术
• 大多数团队成员都是 Web 开发人员
• 我们投资于 JavaScript
• 它为更多人贡献打开了大门
• Electron 本身是开源的
• node_modules 的强大功能和易于维护的模块化
• 跨平台可能性

我们认为应用程序的未来在浏览器中，但我们还没有完全实现。Electron 是通往该未来的重要一步。它不仅使应用程序本身更易于访问，而且还使构建它们的代码更易于访问。一个有趣的想法是想象一个未来，操作系统是一个浏览器，而选项卡本质上是 Electron 应用程序。

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

在构建 Kap 时，您面临过哪些挑战？​

使用 Electron 提供的资源来录制屏幕是最大的挑战。它们根本没有足够的性能来满足我们的要求，并且在我们看来会导致项目失败。虽然不是 Electron 本身的错误，但在使用 Web 技术进行本机开发和构建桌面应用程序之间仍然存在差距。

我们花了很多时间试图解决 getUserMedia API 的性能不佳问题，该问题源于 Chromium。当我们开始制作 Kap 时，我们的主要目标之一是使用 Web 技术构建整个应用程序。在尝试了一切可以使其工作的方法之后（最低要求是在 Retina 屏幕上达到 30 FPS），我们最终不得不找到另一种解决方案。

我在 repo 中看到一些 Swift 代码。那是关于什么的？​

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

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

我们都知道 Electron 应用程序可能会占用 RAM，但同样，这实际上是 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 示例应用程序的集合，由 Electron 维护者 Haojian Wu 编译。
• awesome-electron - 一个 GitHub 存储库，收集了最新最好的 Electron 相关教程、书籍、视频等。