跳到主内容

标有“社区”标签的 26 篇文章

Electron 中的社区倡议

查看所有标签

Electron 应用反馈计划

·阅读时长 3 分钟

Electron 正在努力使其发布周期更快、更稳定。为了实现这一点,我们启动了“应用反馈计划”,供大型 Electron 应用测试我们的 Beta 版本,并向我们报告应用特有的问题。这有助于我们优先处理那些能让应用程序更快升级到下一个稳定版本的工作。

编辑 (2020-05-21): 此计划已停止运行。


谁可以加入?

应用程序加入本计划的标准和期望包括以下项目

  • 在 Beta 测试期间对您的应用进行 10,000 小时以上的用户测试
  • 指定一名联络人,每周检查并讨论您应用的 Electron Bug 和应用阻碍性问题
  • 您同意遵守 Electron 的行为准则
  • 您愿意分享下个问题中列出的以下信息

我的 Electron 应用需要分享哪些信息?

  • 您的应用在使用任何 Beta 版本时运行的总用户时长
  • 您的应用正在测试的 Electron 版本(例如,4.0.0-beta.3)
  • 阻止您的应用升级到正在进行 Beta 测试的发布分支的任何 Bug

用户时长

我们理解并非所有人都能分享准确的用户数量,但是更好的数据有助于我们判断特定版本的稳定性。我们要求应用程序承诺在 Beta 周期内至少进行规定数量的用户测试时长,目前是 10,000 小时。

  • 10 用户时长可以是 10 个人测试 1 小时,也可以是 1 个人测试 10 小时
  • 您可以在不同的 Beta 版本之间分摊测试时间,例如在 3.0.0-beta.2 上测试 5,000 用户时长,然后在 3.0.0-beta.5 上测试 5,000 用户时长。测试越多越好,但我们理解有些应用无法测试每个 Beta 版本
  • CI 或 QA 测试时间不计入总时长;但是,内部发布版本计入

我的 Electron 应用为什么要加入?

您的应用的 Bug 将被跟踪并受到 Electron 核心团队的关注。您的反馈有助于 Electron 团队了解新 Beta 版本的表现以及需要完成的工作。

我的应用信息会公开分享吗?谁可以看到这些信息?

不会,您的应用信息不会与公众分享。信息保存在一个私有 GitHub 仓库中,只有“应用反馈计划”的成员和 Electron 治理委员会成员可见。所有成员都同意遵守 Electron 的行为准则

注册

我们目前正在接受有限数量的注册。如果您有兴趣并能够满足以上要求,请填写此表格

本周项目:Jasper

·阅读时长 5 分钟

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


你好!你是谁?

我是丸山亮,一位在日本的软件开发者。我正在开发 JasperESDoc

什么是 Jasper?

Jasper 是一款灵活而强大的 GitHub Issue 阅读器。它支持 github.com 和 GitHub Enterprise 上的 Issue 和 Pull Request。

Jasper App Screenshot

你为什么创建它?

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

  • 很容易忽略那些提到我、我评论过或我正在关注的 Issue。
  • 我把一些 Issue 放在脑子里想着稍后查看,但有时会忘记它们。
  • 为了不忘记 Issue,我在浏览器中打开了许多标签页。
  • 很难查看所有与我相关的 Issue。
  • 很难掌握我团队的所有活动。

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

谁在使用 Jasper?

Jasper 被使用 GitHub 的多家公司的开发者、设计师和管理者使用。当然,一些开源开发者也在使用它。GitHub 的一些人也在使用它!

Jasper 如何工作?

配置好 Jasper 后,会出现以下屏幕。从左到右,您可以看到“流列表”、“Issue 列表”和“Issue 主体”。

Jasper Start Screen

这个“流”是 Jasper 的核心功能。例如,如果您想查看“electron/electron 仓库中分配给 @zeke 的 Issue”,您可以创建以下流

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

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

Jasper Start Screen 3

我们可以用流做什么?

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

用户与团队

Issue
mentions:cat mentions:dog提到用户 catdog 的 Issue
author:cat author:dog由用户 catdog 创建的 Issue
assignee:cat assignee:dog分配给 catdog 的 Issue
commenter:cat commenter:dogcatdog 评论过的 Issue
involves:cat involves:dog涉及 catbob 的 Issue
team:animal/white-cat team:animal/black-dog提到 animal/white-catanimal/black-dog 的 Issue

involves 表示 mentionauthorassigneecommenter

仓库与组织

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

orguser 相同

属性

Issue
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1cat/jump 中附加到 v1.0.0v1.0.1 的 Issue
repo:cat/jump label:bug label:blockercat/jump 中附加了 bug blocker 标签的 Issue
electron OR atomshell包含 electronatomshell 的 Issue

评审状态

Issue
is:pr review:required需要评审的 Issue (Pull Request)
is:pr review-requested:catcat 请求评审的 Issue。
但这些尚未被评审。
is:pr reviewed-by:cat已被 cat 评审的 Issue

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

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

Jasper 是付费产品吗?售价多少?

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

你为什么选择基于 Electron 构建 Jasper?

我喜欢 Electron 的以下几个方面

  • 应用可以用 JavaScript/CSS/HTML 开发。
  • 应用可以构建用于 Windows、Mac 和 Linux 平台。
  • Electron 积极开发,并拥有一个大型社区。

这些特性使得桌面应用程序开发变得快速而简单。太棒了!如果您有任何产品想法,强烈建议考虑使用 Electron。

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

我很难理清“流”的概念。起初,我考虑使用 GitHub 的通知 API。但我注意到它不支持某些用例。之后,我考虑在通知 API 的基础上使用Issues APIPull Requests API。但它始终未能达到我的预期。然后在思考各种方法时,我意识到轮询 GitHub 的搜索 API 将提供最大的灵活性。达到这一点花了大约一个月的实验,然后我在两天内用流的概念实现了 Jasper 的原型。

注意:轮询频率最多限制为每 10 秒一次。这对于 GitHub API 的限制来说是足够可以接受的。

接下来有什么计划?

我计划开发以下功能

  • 过滤流:一个流可以有子过滤流,用于过滤主流程中的 Issue。这就像 SQL 中的视图。
  • 多账户:您将能够同时使用 github.com 和 GHE
  • 提升性能:目前在 WebView 中加载 Issue 的速度比普通浏览器慢。

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

本周项目:WebTorrent

·阅读时长 9 分钟

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


什么是 WebTorrent?

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

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

您可以在这里看到 WebTorrent 的实际演示:webtorrent.io

webtorrent homepage

这为什么很酷?

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

浏览器间的通信消除了中间人,让人们可以按照自己的方式交流。不再有客户端/服务器——只有一个由对等节点组成的网络,所有节点都是平等的。WebTorrent 是重新去中心化 Web 的第一步。

Electron 在哪里派上用场?

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

WebTorrent Desktop player window

我们创建 WebTorrent Desktop 有三个原因

  1. 我们想要一个简洁、轻量、无广告的开源 Torrent 应用
  2. 我们想要一个具有良好流媒体支持的 Torrent 应用
  3. 我们需要一个连接 BitTorrent 和 WebTorrent 网络的“混合客户端”

如果我已经在网页浏览器中下载 Torrent,为什么还需要桌面应用?

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

webtorrent desktop logo

早期,BitTorrent 使用 TCP 作为传输协议。后来,uTP 出现,承诺比 TCP 更好的性能和额外的优势。每个主流 Torrent 客户端最终都采用了 uTP,如今您可以通过这两种协议使用 BitTorrent。WebRTC 协议是下一个合乎逻辑的步骤。它带来了与网页浏览器互操作的承诺——一个由所有桌面 BitTorrent 客户端和数百万网页浏览器组成的巨大 P2P 网络。

“Web 对等节点”(在网页浏览器中运行的 Torrent 对等节点)通过增加数百万新对等节点,并为 BitTorrent 带来数十个新用例,使 BitTorrent 网络变得更强大。WebTorrent 尽可能地遵循 BitTorrent 规范,以便现有的 BitTorrent 客户端轻松添加对 WebTorrent 的支持。

一些 Torrent 应用,如 Vuze,已经支持 Web 对等节点,但我们不想等待其他客户端添加支持。**因此,基本上,WebTorrent Desktop 是我们加速 WebTorrent 协议采用的方式。** 通过创建一个人们真正想使用的出色 Torrent 应用,我们增加了网络中可以与 Web 对等节点(即网站用户)共享 Torrent 的对等节点数量。

除了人们已经知道的用途之外,Torrent 还有哪些有趣的用例?

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

互联网档案馆实际上已经更新了他们的 Torrent 文件,以便它们与 WebTorrent 很好地配合。因此,如果您想在您的网站上嵌入互联网档案馆的内容,您可以通过一种方式来实现,这可以降低档案馆的托管成本,使他们能够将更多资金投入到实际的网页存档工作中!

还有令人兴奋的商业用例,从 CDN 到通过 P2P 分发应用。

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

gaia app screenshot

使用 WebTorrent 构建的最酷的项目无疑是 Gaia 3D 星图。它是一个流畅的银河系 3D 交互式模拟。数据直接从 Torrent 加载到您的浏览器中。当我们飞越我们的恒星系统,并意识到与浩瀚的宇宙相比我们人类是多么微小时,这真是令人敬畏。

您可以在《Torrenting The Galaxy》 这篇博文中阅读有关其制作过程的信息。在这篇文章中,作者 Charlie Hoey 解释了他是如何使用 WebGL 和 WebTorrent 构建这个星图的。

brave logo

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

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

Brave 的联合创始人之一实际上是 Brendan Eich,他是 JavaScript 的创造者,我们就是用 JavaScript 编写的 WebTorrent,所以我们认为 Brave 选择集成 WebTorrent 是很酷的事情。

你为什么选择基于 Electron 构建 WebTorrent Desktop?

WebTorrent Desktop main window

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

然而,就 WebTorrent Desktop 而言,我们在正常运行过程中使用了几乎所有 Electron 功能以及许多 Chrome 功能。如果我们要为每个平台从头实现这些功能,构建我们的应用将花费数月甚至数年,或者我们只能发布到单一平台。

举例来说,我们使用了 Electron 的停靠栏集成(显示下载进度)、菜单栏集成(后台运行)、协议处理器注册(打开磁力链接)、阻止电源管理(防止视频播放期间休眠)和自动更新。至于 Chrome 功能,我们使用了许多:<video> 标签(播放多种不同视频格式)、<track> 标签(支持隐藏式字幕)、拖放支持以及 WebRTC(在原生应用中使用并非易事)。

更不用说:我们的 Torrent 引擎是用 JavaScript 编写的,并假定存在许多 Node API,特别是用于 TCP 和 UDP 套接字支持的 require('net')require('dgram')

基本上,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 开发技巧吗?

Feross,WebTorrent Desktop 的贡献者之一,最近在 NodeConf Argentina 大会上发表了题为“真实的 Electron:使用 JavaScript 构建跨平台桌面应用”的演讲,其中包含了发布一个精良的 Electron 应用的实用技巧。如果您正处于拥有一个基本可用的应用并尝试将其提升到更高水平的精良度和专业性的阶段,这场演讲将特别有用。

观看此处:

幻灯片此处:

另一位 WebTorrent 贡献者 DC 写了一篇关于如何让您的应用感觉精良和原生的清单。它附带代码示例,涵盖了 macOS Dock 集成、拖放、桌面通知以及确保您的应用快速加载等内容。

本周项目:Voltra

·阅读时长 6 分钟

本周我们与 Aprile ElcichPaolo Fragomeni 进行了会面,讨论了 Voltra,一个基于 Electron 的音乐播放器。


Voltra 是什么?

Voltra 是一个为希望拥有自己音乐的人们打造的音乐播放器。它也是一个商店,您可以在其中根据您已拥有的音乐发现和购买新音乐。它无广告,支持桌面和移动平台的跨平台应用。它也不会监视您。

voltra-artistview

Voltra 是为谁打造的?

任何听音乐的人。

是什么促使你们创建 Voltra?

广播一直拥有大量的听众。它正在从电波转向互联网。现在您可以按需租赁音乐——这是一场广播复兴!因此涌现出许多新产品和服务,但流媒体广播仍然让别人掌控您的音乐以及您体验音乐的方式。

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

是否有免费版本?

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

由于该应用是免费的,我们以后可能会将其开源。目前我们没有足够的精力来管理这件事。我们也有非常具体的功能设想以及我们希望项目发展的方向。我们有一个活跃的内测社区,并且我们认真听取反馈。

你们如何赚钱?

我们提供高级功能!

我们的 Voltra Audio Archive 是一个专为音乐设计的云备份服务。我们不压缩或共享数据块。您的音乐收藏会为您进行物理备份。

对于艺术家和唱片公司,我们的 Pro Membership 提供了帮助他们触达更相关受众的工具,例如分析和专业的艺术家网页。

Voltra 有何不同?

设计和易用性对我们来说至关重要。我们希望为听众提供无干扰的聆听体验!市面上有一些有趣的音乐播放器和商店。但其中许多比其创建者意识到的更高级、更难使用。我们希望 Voltra 能够尽可能多的人使用。

我们也不从艺术家或唱片公司那里抽取分成。这是我们一个关键的差异点。这非常重要,因为它降低了艺术家将其音乐推向市场的门槛。

你们做出了哪些设计和技术决策?

在设计 Voltra 时,我们考虑了原生应用和 Web 的 UI 约定,我们也花了很多心思考虑可以删除哪些内容。我们有一个活跃的私人内测小组,他们在过去几个月里给了我们重要的反馈。

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

voltra-albumview

我们还确保不干扰用户的文件。我们使用文件监视功能,这样您就可以将文件放在任何您想放的地方,而我们不会为您重命名或移动它们。我们有一个嵌入式数据库来跟踪监视目录的状态,以便即使进程未运行,我们也能跟踪新文件。

构建 Voltra 时遇到过哪些挑战?

我们花了很多时间专注于性能。我们最初使用了框架,但后来转向了原生 Javascript。根据我们的经验,它们提供的通用抽象所带来的性能损失和复杂性超过了它们的益处。

目前我们能很好地处理非常大的音乐库。大的音乐库可能意味着数万张图片!直接从渲染进程访问 Node.js 的文件系统模块,使得根据 DOM 事件超快速地延迟加载和卸载大量图片变得非常容易。

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

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

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

我们实际上最初使用 Swift 构建了一个原生应用。我们发现的主要问题是,我们正在重复发明很多东西。Web 拥有世界上最大的开源生态系统。所以我们很快就转向了 Electron。

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

你最喜欢 Electron 的哪些方面?

事半功倍!:将 Node.js 的网络堆栈和 Chromium 的表示层打包在一起,是事半功倍的秘诀。

能力:它只是 Web 技术栈,所以我们整个团队都可以参与到产品的实际构建中。

社区:有一个组织良好且非常擅长沟通的社区!在如此支持的环境中进行开发,我们感觉非常棒!

Electron 在哪些方面可以改进?

我们希望看到 Electron 支持单一的打包器。打包器对于 Electron 的重要性,就像包管理器对于 Node 一样。用户空间中有多个打包器,每个都有有趣的特性,但也都有 bug。社区的共识将有助于引导贡献者所投入的精力。

接下来有什么计划?

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

本周项目:WordPress Desktop

·阅读时长 4 分钟

本周我们与 Automattic 的各位聊了聊 WordPress Desktop,这是一个用于管理 WordPress 内容的开源桌面客户端。


WordPress Apps

大家都知道 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 的树莓派集成项目。

如果您对这些项目中的任何一个感兴趣,我们非常欢迎您加入我们

有什么可能对其他开发者有用的 Electron 技巧吗?

对于我们来说,发布已签名的桌面软件的过程是相对较新的,特别是对于 Windows。我们写了一篇关于为 Windows 应用进行代码签名的文章,其中包含了流程以及我们为正确执行此操作而遇到的一些障碍。

本周项目:Dat

·阅读时长 7 分钟

本周的特色项目是 Dat,一个由资助支持的开源去中心化数据分发工具。Dat 由一个跨地域团队构建和维护,其中许多人协助撰写了这篇文章。


A screenshot of the main view of dat-desktop, showing a few rows of shared
dats

首先,Dat 是什么?

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

另一种思考方式是将其视为像 Dropbox 或 BitTorrent Sync 这样的同步和上传应用,但 Dat 是开源的。我们的目标是成为一个强大、开源、非营利的数据共享软件,适用于大型、小型、中型、小批量和大数据。

要使用 dat 命令行工具,您只需输入

dat share path/to/my/folder

然后 dat 会创建一个链接,您可以使用该链接将该文件夹发送给其他人——没有中心服务器或第三方可以访问您的数据。与 BitTorrent 不同的是,也无法嗅探谁在共享什么(更多详情请参阅 Dat Paper 草案)。

现在我们知道了 Dat 是什么。Dat Desktop 是如何融入其中的?

Dat Desktop 是一种让那些不能或不想使用命令行的人们也能访问 Dat 的方式。您可以在自己的机器上托管多个 dat,并通过网络提供数据。

能分享一些酷炫的用例吗?

DataRefuge + Project Svalbard

我们正在开发一个代号为 Project Svalbard 的项目,它与 DataRefuge 相关,DataRefuge 是一个旨在备份面临丢失风险的政府气候数据的组织。Svalbard 的命名来源于位于北极的斯瓦尔巴全球种子库,该种子库拥有一个巨大的地下植物 DNA 备份库。我们版本的它是一个巨大的版本控制的公共科学数据集集合。一旦我们了解并信任元数据,我们就可以构建其他很酷的项目,例如分布式志愿者数据存储网络

California Civic Data Coalition

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

Electron 更新

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

谁应该使用 Dat Desktop?

任何希望通过 P2P 网络共享和更新数据的人。数据科学家、开放数据黑客、研究人员、开发者。如果任何人有我们尚未想到的酷炫用例,我们都非常乐于接受反馈。您可以在我们的 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 进展的最佳方式是什么?

关注 @dat_project 的 Twitter,或订阅我们的电子邮件通讯

本周项目:Ghost

·阅读时长 5 分钟

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


Ghost Desktop Screenshot

Ghost 是什么?

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

它与其他发布平台有何不同?

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

与经典的 WordPress 相比,它提供了更简单、更流畅的体验——它更容易设置和维护,自带所有重要功能,速度显著更快。与其他在线平台相比,Ghost 让作者对其内容拥有完全所有权和控制权,允许完全自定义,并使作者能够围绕其出版物建立业务。

Ghost 是一家营利性公司吗?

这一点对我们来说很重要:Ghost 是一个独立的非营利组织。我们构建面向现代新闻业和博客的出版工具,因为我们认为言论自由非常重要。我们的软件根据免费开源许可证发布,我们的商业模式完全透明,我们的法律结构意味着我们赚取的 100% 资金都再投资于改进 Ghost。

Ghost Desktop 是什么?

Ghost Desktop 允许作者同时管理多个博客——并专注于写作。一些简单的事情,比如常用的写作快捷方式,在浏览器中无法实现,但在我们的桌面应用中是可用的。它允许其他应用通过深层链接直接与博客通信。

Ghost For Journalism 是什么?

今年我们非常兴奋地将我们 10 人的全职 Ghost 团队全部投入到帮助发展三个独立出版物,并投入 45,000 美元的资源支持他们的工作。我们将其称为 Ghost For Journalism

我们构建 Ghost 作为 Web 上下一个伟大的独立出版平台已经有三年半了,现在我们已经达到了一个非常有趣的拐点。我们开始这个旅程是为了创建一个简单、设计精良的博客平台,任何人都可以使用。这始终是第一步。

从长远来看,我们希望 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 应用有哪些?

我非常喜欢 KapFelonyVisual Studio Code

👻

本周项目:Beaker Browser

·阅读时长 4 分钟

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


Beaker 是什么?你为什么创建它?

Beaker 是一款参与式浏览器。它是为独立开发者设计的浏览器。

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

使用 Beaker,我们有了一个新的 Web 协议:去中心化归档传输协议(Decentralized Archive Transport),简称“Dat”。它可以按需免费创建网站,然后从设备共享它们。无需服务器。这就是我们的创新。

Beakers Protocols

当你通过 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,我们浏览器内置了一些基本工具,但我们正将这些工具推向用户空间(userland)。所有这些都将是可修改的用户应用。

为什么选择用 Electron 构建 Beaker?

对于这个项目来说,这是显而易见的。如果我自己分叉 Chrome,我现在就得写 C++ 代码了!没人想那样做。我了解 Web 技术栈,并且可以快速使用它。这是显而易见的最佳选择。

说实话,我不太确定没有 Electron 我能否完成这一切。它是一款很棒的软件。

构建 Beaker 时,你遇到过哪些挑战?

其中一半的工作是在摸索这些工具,弄清楚我能做到什么程度。

构建浏览器本身是相当容易的。Electron 几乎就是一个用于构建浏览器的工具箱。……除了浏览器标签页;这花了我很长时间才弄对。我最终下定决心学习了如何制作 SVGs。它看起来好多了,但在我弄对之前,经历了 3 或 4 次迭代。

Electron 在哪些方面可以改进?

如果我能将 devtools 停靠在 webview 内部,那就太棒了。

Beaker 的下一步计划是什么?

为 Dat 网站提供安全的 DNS 名称。一个可社交配置的 URL 方案,称为“app scheme”。更多 Dat API。

对于可能对贡献项目感兴趣的人,Beaker 在哪些方面需要帮助?

我们有很多未解决的问题(open issues)。不要害怕联系我。freenode 上的 #beakerbrowser 频道。我们有一个贡献者页面,我们会把你加进去。如果你来奥斯汀,我请你喝啤酒。

有什么可能对其他开发者有用的 Electron 技巧吗?

  1. 使用现有的构建工具。相信我,你不会想自己折腾解决方案的。使用 electron-builder。使用样板仓库(boilerplate repo)。
  2. 如果你需要在 Electron 仓库中提出问题(issue),请多花点力气使其易于重现。这样你会更快得到回复,团队也会很感激。更棒的是,尝试自己修复它。看看其内部结构实际上非常有趣。
  3. 至少通读一遍所有指南和高级文档。
  4. 不要构建浏览器,这是一个饱和的市场。

本周项目:Kap

·阅读时长 7 分钟

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


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

Kap Screencast

Kap 是什么?

Kap 是一款开源屏幕录制工具,主要为设计师和开发者构建,以便他们轻松捕捉工作内容。人们用它来分享动画原型、记录错误、制作有趣的 GIF 以及介于两者之间的各种内容。

我们看到各种年龄和背景的人在教育环境、截屏演示、教程等场景中使用它……不胜枚举。甚至用来创建生产资产!我们对这个小小的副项目如此受欢迎感到完全震惊。

你为什么构建它?

这是个很好的问题,又不是市面上没有屏幕录制工具!我们觉得现有选项要么太复杂、太昂贵,要么太受限。没有一个感觉完全符合我们的日常需求。我们也认为,当我们用来工作的工具是开源的,每个人都可以帮助塑造它们时,这很棒。构建 Kap 最终也关乎我们没有做的事情。一切都在细节里,是小改进的累积构成了我们想要使用的工具的轮廓。

然而,也许最重要的是,Kap 成为了一个让我们放下担忧、纯粹享受为自己和像我们一样的人构建东西的乐趣的地方。创造一个可以自由表达、尝试新事物并享受手艺的环境非常重要。没有要求,没有压力,没有期望。设计师和开发者应该做副项目吗?当然,应该。

为什么选择用 Electron 构建 Kap?

原因有很多

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

我们认为应用的未来在浏览器中,但我们还没完全达到。Electron 是通往那个未来征程中的重要一步。它不仅使应用本身更容易访问,也使其构建代码更容易获取。一个有趣的想法是,想象未来操作系统就是浏览器,而标签页本质上就是 Electron 应用。

此外,作为主要 Web 开发者,我们非常喜欢 JavaScript 的同构特性,即可以在客户端、服务器以及现在桌面端运行 JS。使用 Web 技术(HTML、CSS 和 JS),许多事情比原生开发简单得多:更快的原型开发、更少的代码、flexbox > auto-layout (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 应用可能有点爱用内存(RAM),但这确实是 Chromium 的问题。这是它的工作方式的一部分,而且很大程度上取决于你运行什么,例如 Kap 和 Hyper 通常使用不到 100MB 的内存。

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

创建跨平台 Electron 应用的体验可以更好。现在,不同平台之间存在太多不一致、特定于平台的 API 和缺失的功能,导致你的代码库充满了 if-else 语句。例如,vibrancy 效果只在 macOS 上支持,自动更新器在 macOS 和 Windows 上工作方式不同,在 Linux 上甚至不支持。透明度在 Linux 上时好时坏,通常是不行。

调用原生系统 API 也应该更容易。Electron 提供了一套非常好的 API,但有时你需要它不提供的功能。创建一个原生的 Node.js 插件(addon)是一种选择,但使用起来很痛苦。理想情况下,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,看看示例,并充分利用优秀的文档

Electron 简单示例

·2 分钟阅读

我们最近在 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 系统、用户和空闲活动时间的甜甜圈图。

Screenshot

哈希

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

screenshot

镜像

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

价格

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

screenshot

URL

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

其他资源

我们希望这些应用能帮助你开始使用 Electron。以下是其他一些学习资源的精选列表