跳至主要内容

宣布 Electron 中支持 TypeScript

·阅读时间:4 分钟

electron npm 包现在包含一个 TypeScript 定义文件,该文件提供了对整个 Electron API 的详细注释。即使您正在编写普通 JavaScript,这些注释也可以改善您的 Electron 开发体验。只需 npm install electron 即可在您的项目中获得最新的 Electron 类型定义。


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

TypeScript 支持 JavaScript 中许多较新的语言特性,例如类、对象解构和 async/await,但其真正的区别特征是**类型注释**。声明程序预期接受的输入和输出数据类型可以减少错误,因为它可以帮助您在编译时发现错误,而且注释还可以作为对程序工作原理的正式声明。

当库是用普通 JavaScript 编写的时,类型通常在编写文档时作为事后考虑被模糊地定义。函数通常可以接受比文档中描述的更多类型,或者函数可能具有未记录的隐式约束,这会导致运行时错误。

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

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

安装

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

使用最安全的方式安装 Electron,即使用精确的版本号

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

或者如果您正在使用yarn

yarn add electron --dev --exact

如果您之前已经在使用第三方定义,例如 @types/electron@types/node,则应将其从您的 Electron 项目中删除,以防止出现任何冲突。

定义文件是从我们的结构化 API 文档派生的,因此它始终与Electron 的 API 文档保持一致。只需安装 electron,您将始终获得与您使用的 Electron 版本相对应的最新 TypeScript 定义。

使用

有关如何安装和使用 Electron 的新的 TypeScript 注释的摘要,请观看此简短的演示视频

如果您正在使用Visual Studio Code,则已内置支持 TypeScript。还有社区维护的插件可用于AtomSublimevim其他编辑器.

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

Method autocompletion

Method reference

Argument checking

TypeScript 入门

如果您是 TypeScript 的新手,想了解更多信息,此来自微软的入门视频提供了一个很好的概述,介绍了该语言的创建原因、工作原理、使用方法及其未来方向。

在官方 TypeScript 网站上也有手册游乐场.

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

感谢

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

支持

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

祝您 TypeScript 使用愉快!

本周项目:Jasper

·阅读时长:5 分钟

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


你好!你是谁?

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

什么是 Jasper?

Jasper 是一个灵活而强大的 GitHub 问题阅读器。它支持 github.com 和 GitHub Enterprise 上的问题和拉取请求。

Jasper App Screenshot

你为什么要做它?

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

  • 很容易忽略我被提及、我评论过或我正在关注的问题。
  • 我把一些问题放在脑海中,打算以后再检查,但有时我会忘记它们。
  • 为了不忘记问题,我在浏览器中打开了多个选项卡。
  • 很难检查所有与我相关的问题。
  • 很难掌握我整个团队的活动。

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

谁在使用 Jasper?

许多使用 GitHub 的公司中的开发人员、设计师和经理都在使用 Jasper。当然,一些开源开发者也在使用它。GitHub 的一些人也使用它!

Jasper 如何工作?

配置好 Jasper 后,会出现以下界面。从左到右,你可以看到“流列表”、“问题列表”和“问题内容”。

Jasper Start Screen

这个“流”是 Jasper 的核心功能。例如,如果你想查看“在 electron/electron 存储库中分配给 @zeke 的问题”,你可以创建以下流

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

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

Jasper Start Screen 3

我们可以用流做什么?

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

用户和团队

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

involves 表示 mentionauthorassigneecommenter

存储库和组织

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

orguser 相同

属性

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

审查状态

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

正如你可能从这些内容中注意到的一样,流可以使用 GitHub 的搜索查询。有关如何使用流和搜索查询的详细信息,请参阅以下网址。

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

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

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

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

我喜欢 Electron 的以下方面

  • 应用程序可以用 JavaScript/CSS/HTML 开发。
  • 应用程序可以为 Windows、Mac 和 Linux 平台构建。
  • Electron 正在积极开发,并拥有庞大的社区。

这些功能使快速简单的桌面应用程序开发成为可能。太棒了!如果你有任何产品想法,你应该考虑使用 Electron。

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

我很难弄清楚“流”的概念。起初,我考虑使用 GitHub 的 通知 API。但是我注意到它不支持某些用例。之后,我考虑使用 问题 API拉取请求 API,以及通知 API。但它从未成为我想要的东西。然后,在思考各种方法时,我意识到轮询 GitHub 的 搜索 API 将提供最大的灵活性。我花了大约一个月的时间进行实验才达到这一点,然后我在两天内用流概念实现了 Jasper 的原型。

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

接下来是什么?

我计划开发以下功能

  • 过滤后的流:流具有过滤后的流,可以过滤流中的问题。它就像 SQL 的视图。
  • 多个帐户:你将能够使用 github.com 和 GHE。
  • 提高性能:目前,在 WebView 中加载问题比在普通浏览器中速度慢。

关注 Twitter 上的 @jasperappio 以获取更新。

本周项目:WebTorrent

·阅读时长:9 分钟

本周,我们与 @feross@dcposch 进行了交流,讨论了 WebTorrent,这款网页版 BT 客户端将用户连接在一起,形成一个分布式的、去中心化的浏览器到浏览器网络。


什么是 WebTorrent?

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

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

你可以在这里查看 WebTorrent 的演示:webtorrent.io

webtorrent homepage

为什么它很酷?

想象一个像 YouTube 这样的视频网站,但网站的访客会帮助托管网站内容。使用 WebTorrent 支持的网站的人越多,网站运行速度越快,弹性也越高。

浏览器到浏览器的通信消除了中间人,让人们能够按照自己的意愿进行交流。不再有客户端/服务器 - 只有对等节点网络,所有节点都是平等的。WebTorrent 是重新去中心化网络的第一步。

Electron 在哪里发挥作用?

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

WebTorrent Desktop player window

我们创建 WebTorrent Desktop 有三个原因

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

如果我们已经可以在我的 Web 浏览器中下载 BT 文件,为什么还要桌面应用程序?

首先,介绍一下 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 最令人兴奋的用途之一是 peer-assisted delivery。像 维基百科互联网档案 这样的非营利项目可以通过让访问者参与进来,来减少带宽和托管成本。热门内容可以在浏览器之间快速而廉价地提供。很少访问的内容可以从源服务器通过 HTTP 可靠地提供。

互联网档案实际上已经更新了他们的 torrent 文件,因此它们可以很好地与 WebTorrent 一起使用。因此,如果您想在您的网站上嵌入互联网档案内容,您可以以一种减少档案托管成本的方式进行,从而使他们能够将更多资金投入到实际存档网络中!

还有令人兴奋的商业用例,从 CDN 到通过 P2P 提供应用程序。

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

gaia app screenshot

用 WebTorrent 制作的最酷的东西,毫无疑问,可能是 盖亚 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 的创造者,我们用它编写了 WebTorrent,所以我们认为 Brave 选择集成 WebTorrent 非常酷。

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

WebTorrent Desktop main window

有一个 meme 说 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 Applet 承诺了“一次编写,随处运行”的应用程序,但由于多种原因,该愿景从未真正实现。Electron 比任何其他平台更接近于这一理想状态。

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

在应用程序的早期版本中,我们难以使 UI 具有良好的性能。我们将 torrent 引擎放在与绘制主应用程序窗口相同的渲染器进程中,这会导致在 torrent 引擎(例如验证从对等方接收到的 torrent 片段)产生大量 CPU 活动时速度变慢。

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

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

Electron 在哪些方面应该改进?

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

WebTorrent Desktop 完成了吗?如果没有,接下来会做什么?

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

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

任何可能对其他开发人员有用的 Electron 开发技巧?

Feross,WebTorrent Desktop 的贡献者之一,最近在 NodeConf Argentina 做了一个名为“Real world Electron: Building Cross-platform desktop apps with JavaScript”的演讲,其中包含有关发布精致的 Electron 应用程序的有用技巧。如果您处于拥有基本工作应用程序并试图将其提升到抛光度和专业性水平的阶段,那么该演讲将特别有用。

观看此处:

幻灯片在此处:

DC,另一位 WebTorrent 贡献者,写了一篇 关于您可以做些什么的清单 使您的应用程序显得精致和原生。它附带代码示例,涵盖了 macOS dock 集成、拖放、桌面通知以及确保您的应用程序快速加载等内容。

Touch Bar 支持

·阅读时间 3 分钟

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


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

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

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

非常感谢 @MarshallOfSound 为 Electron 做出的贡献。🎉

Touch Bar 示例

Touch Bar Gif

下面是一个在 Touch Bar 中创建简单的老虎机游戏的示例。它演示了如何创建 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);
});

本周项目:Voltra

·阅读时间:6 分钟

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


什么是 Voltra?

Voltra 是一款面向想要拥有自己音乐的人们的音乐播放器。它也是一家商店,你可以根据你已经拥有的音乐来发现和购买新音乐。它没有广告,跨平台,适用于桌面和移动设备。它也不会窥探你。

voltra-artistview

Voltra 适合谁?

任何听音乐的人。

是什么促使你创建 Voltra?

广播一直拥有大量的听众。它正在从无线电波转向互联网。现在你可以按需租用音乐——这是广播的复兴!许多新产品和服务应运而生,但流媒体广播仍然让其他人控制着你的音乐以及你的体验方式。

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

有免费版吗?

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

由于该应用是免费的,我们可能会在以后将其开源。现在我们没有足够的带宽来管理它。我们也有非常具体的关于功能和我们想做的事情的方向的想法。我们有一个活跃的测试版社区,我们非常重视他们的反馈。

你们如何赚钱?

我们有高级功能!

我们的 Voltra 音频存档 是一款专门为音乐设计的云备份服务。我们不会压缩或共享数据块。你的音乐收藏会为你物理备份。

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

是什么让 Voltra 与众不同?

设计和可用性对我们来说非常重要。我们想要给听众提供一种无干扰的聆听体验!市面上有一些有趣的音乐播放器和商店。但它们中的许多比它们的创造者意识到的更高级,更难使用。我们希望让 Voltra 尽可能多的人都能使用。

我们也不会从艺术家或唱片公司那里抽成。这对我们来说是一个关键的差异化因素。这真的很重要,因为它降低了艺术家将音乐推向市场的门槛。

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

在设计 Voltra 时,我们考虑了原生应用和网络的 UI 约定,我们也思考了很多我们可以删除的东西。我们有一个活跃的私人测试版组,他们在过去几个月里给了我们重要的反馈。

我们发现专辑封面和摄影对人们来说真的很重要。许多播放器只是文件列表。拥有实体专辑的一件很酷的事情是专辑封面,我们想在 Voltra 桌面应用程序中强调这一点。

voltra-albumview

我们还确保不要乱动人们的文件。我们使用文件监视,所以你可以将文件放到任何你想放的地方,我们不会为你重命名或移动它们。我们有一个嵌入式数据库来跟踪监视目录的状态,以便我们可以跟踪新内容,即使在进程未运行时也是如此。

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

我们花了很多时间专注于性能。我们从框架开始,但转移到了原生 JavaScript。根据我们的经验,它们提供的通用抽象超过了它们引入的性能损失和仪式。

我们现在处理非常大的集合非常有效。大型集合可能意味着数万张图片!能够直接从渲染进程中使用 Node.js 的文件系统模块,让我们能够根据 DOM 事件非常快速地懒加载和卸载大量的图片。

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

为什么选择用 Electron 构建 Voltra?

浏览器的沙盒对我们的应用来说太受限制了。但我们也正在开发一个网页播放器。所以我们能够在两个实现之间共享几乎 100% 的代码是一个巨大的胜利。

我们实际上是先用 Swift 构建了一个原生应用程序。我们发现的主要问题是,我们重新发明了很多东西。网络拥有世界上最大的开源生态系统。所以我们很快就切换到了 Electron。

此外,最重要的是,使用 Electron,你只需开发一次,它就可以在所有主要平台上正常运行™。这不能保证,但为每个平台原生编码的成本远远超过 Electron 引入的任何其他成本。

您最喜欢 Electron 的哪些方面?

GTD!: 拥有 Node.js 的网络堆栈和 Chromium 的表示层打包在一起,是完成任务的秘诀。

能力: 仅仅是网络堆栈,所以我们整个团队都参与了产品的实际构建。

社区: 有一个高度组织化的社区,他们知道如何很好地交流!我们对有这样的支持而开发感到非常棒。

Electron 可以改进哪些方面?

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

接下来是什么?

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

Electron 内部:将 Chromium 作为库构建

·阅读时间:7 分钟

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 构建一个最小的浏览器。提供浏览器接口的核心模块称为内容模块。

要使用内容模块开发一个项目,最简单的方法是将项目作为 Chromium 的一部分构建。这可以通过先签出 Chromium 的源代码,然后将项目添加到 Chromium 的 DEPS 文件中来完成。

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

缺点是,Chromium 的代码库非常庞大,需要非常强大的机器才能构建。对于普通笔记本电脑来说,这可能需要超过 5 个小时。因此,这极大地影响了能够为该项目做出贡献的开发人员的数量,也让开发速度变慢。

将 Chromium 构建为一个单一的共享库

作为内容模块的用户,Electron 在大多数情况下不需要修改 Chromium 的代码,所以改进 Electron 构建的一个明显方法是将 Chromium 构建为一个共享库,然后在 Electron 中与它链接。这样一来,开发人员在为 Electron 做出贡献时就不再需要构建整个 Chromium。

The libchromiumcontent 项目是由 @aroben 为此目的创建的。它将 Chromium 的内容模块构建为一个共享库,然后提供 Chromium 的头文件和预构建的二进制文件供下载。libchromiumcontent 初始版本的代码可以在 这个链接 中找到。

The brightray 项目也是作为 libchromiumcontent 的一部分诞生的,它在内容模块周围提供了一层薄薄的层。

通过使用 libchromiumcontent 和 brightray,开发者可以快速构建一个浏览器,而无需深入了解构建 Chromium 的细节。它还消除了构建项目所需的快速网络和强大机器的要求。

除了 Electron,还有其他基于 Chromium 的项目以这种方式构建,例如 Breach 浏览器

过滤导出符号

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

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

通过采用这种方法,虽然 Chromium 继续添加新的导出符号,但 libchromiumcontent 仍然可以通过剥离更多符号来生成共享库文件。

组件构建

在讨论 libchromiumcontent 中采取的后续步骤之前,首先介绍一下 Chromium 中的组件构建概念。

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

交付原始二进制文件

随着 Chromium 的不断增长,Chromium 中有如此多的导出符号,甚至 Content 模块和 Webkit 的符号也超过了限制。仅仅通过剥离符号就无法生成可用的共享库。

最后,我们不得不 交付 Chromium 的原始二进制文件,而不是生成单个共享库。

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

在 Electron 中,Debug 版本与 shared_library 版本的 libchromiumcontent 链接,因为它下载量小,并且在链接最终可执行文件时花费的时间很少。Electron 的 Release 版本与 static_library 版本的 libchromiumcontent 链接,这样编译器就可以生成完整的符号,这对调试非常重要,并且链接器可以进行更好的优化,因为它知道哪些目标文件需要,哪些不需要。

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

gn 更新

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

早期的 Chromium 版本使用 gyp 作为构建系统,但它存在速度慢的问题,并且其配置文件对于复杂的项目而言难以理解。经过多年的开发,Chromium 切换到 gn 作为构建系统,它更快,并且具有清晰的体系结构。

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

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

解决这个问题的第一个尝试是 修补 gn 以生成静态库文件,这解决了问题,但远非一个体面的解决方案。

第二次尝试是由 @alespergl 进行的,他 从目标文件列表中生成自定义静态库。它使用了一个技巧,首先运行一个虚拟构建来收集生成的目標文件列表,然后通过向 gn 提供该列表来实际构建静态库。它只对 Chromium 的源代码进行了最小的更改,并且保持了 Electron 的构建架构。

总结

如您所见,与将 Electron 作为 Chromium 的一部分进行构建相比,将 Chromium 作为库进行构建需要更大的努力,并且需要持续维护。然而,后者消除了构建 Electron 所需的强大硬件的要求,从而使更多开发者能够构建和为 Electron 做出贡献。这种努力绝对是值得的。

本周项目:WordPress 桌面版

·阅读时间:4 分钟

本周,我们与 Automattic 的人进行了交流,讨论了 WordPress 桌面版,这是一个用于管理 WordPress 内容的开源桌面客户端。


WordPress Apps

每个人都知道 WordPress,但什么是 WordPress 桌面版?

WordPress.com 桌面版应用程序 中,提供了一种无缝的跨平台体验,使您能够专注于内容和设计,而不会有任何浏览器标签分散您的注意力,或让您的网站处于一边,但仍然可以访问。与我们的浏览器支持和移动应用程序相结合,您可以在任何地方、以任何方式构建您的网站,这有助于您完成工作。

为什么要构建一个用于管理 WordPress 网站的桌面应用程序?难道不能全部基于 Web 吗?

它实际上使用了与您在浏览器中访问 WordPress.com 时完全相同的技术。但是,它全部是本地托管的,因此加载时间最短。通过使用诸如在您的停靠栏中、通知等本地功能的优势,您真正可以专注于您的 WordPress 网站和博客。

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

在 2015 年底,我们重建了 WordPress.com 的大部分内容,形式是 Calypso,这是一个使用 React 的开源现代 JavaScript 应用程序。我们开始研究 Electron,并且在对 Calypso 进行了一些更改后,我们能够使其在本地运行。这是一种令人信服的体验,我们认为进一步开发它很有价值。

我们有几个团队在开发 Calypso。要使用传统的桌面技术制作一个与之匹配的完整的跨平台 GUI 客户端,需要更多工作。通过使用 Electron,我们 2-4 人的小团队能够利用其他团队的努力,在几个月内构建了桌面应用程序。

在构建 WordPress 桌面版时,您遇到了哪些挑战?

我们很快便让应用程序的初始版本运行起来,但将其调整为以最佳方式作为桌面应用程序运行,却花费了更多时间。该应用程序的一个主要挑战是,您实际上是在自己的机器上运行 Calypso 的副本,它只是一个 API驱动的 UI。其中涉及很多桥接工作,并且更改会反馈到 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 上获得。

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

如果其中任何内容听起来有趣,我们很乐意听到您的消息!联系我们

您有什么可能对其他开发者有用的 Electron 提示吗?

为 Windows 发布签名的桌面软件对我们来说是一个相对较新的过程,尤其是在 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 CLI 工具,您只需键入

dat share path/to/my/folder

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

现在我们知道 Dat 是什么。Dat 桌面如何融入其中?

Dat 桌面 是一种让 Dat 对那些无法或不想使用命令行的人可用。您可以在自己的机器上托管多个 dat,并在您的网络上提供数据。

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

DataRefuge + Project Svalbard

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

加州公民数据联盟

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

Electron 更新

这个还不确定,但我们认为一个有趣的用例是将编译后的 Electron 应用放入 Dat 存储库中,然后使用 Electron 中的 Dat 客户端拉取最新构建的应用二进制文件的增量,以节省下载时间,也减少服务器的带宽成本。

谁应该使用 Dat 桌面?

任何希望通过点对点网络共享和更新数据的人。数据科学家、开放数据黑客、研究人员、开发人员。如果您有任何我们尚未想到的酷炫用例,我们非常乐意接受您的反馈。您可以访问我们的 Gitter 聊天 并向我们提问!

Dat 和 Dat 桌面接下来会有什么?

用户帐户和元数据发布。我们正在开发一个 Dat 注册表 Web 应用程序,该应用程序将在 datproject.org 上部署,它基本上将是“数据集的 NPM”,除了要注意的是我们只是一个元数据目录,数据可以存储在线上的任何地方(与 NPM 或 GitHub 不同,GitHub 上的所有数据都集中托管,因为源代码足够小,可以全部放在一个系统中)。由于许多数据集都很大,我们需要一个联合注册表(类似于 BitTorrent 跟踪器的工作方式)。我们希望从 Dat 桌面轻松地让人们能够查找或发布数据集,从而使数据共享过程变得无缝。

另一个功能是多作者/协作文件夹。我们有很大的计划来进行协作工作流程,也许还有分支,类似于 git,但针对数据集协作进行设计。但我们目前仍在努力提高整体稳定性并标准化我们的协议!

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

Dat 使用 Node.js 构建,因此它与我们的集成非常自然。除此之外,我们的用户使用各种机器,因为科学家、研究人员和政府官员可能被迫为其机构使用某些设置 - 这意味着我们需要能够针对 Windows 和 Linux 以及 Mac。Dat 桌面可以轻松地做到这一点。

在构建 Dat 和 Dat 桌面的过程中,您遇到了哪些挑战?

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

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

  • 遥测 - 如何捕获匿名使用统计信息
  • 更新 - 设置自动更新有点零碎和神奇
  • 发布 - XCode 签名、在 Travis 上构建发布、进行测试版构建,所有这些都是挑战。

我们还在 Dat 桌面中的“前端”代码中使用 Browserify 和一些酷炫的 Browserify 转换(这有点奇怪,因为我们仍然进行捆绑,即使我们有本地的 require - 但这是因为我们想要转换)。为了更好地帮助管理我们的 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,或订阅我们的 电子邮件通讯

本周项目:Ghost

·阅读时长:5 分钟

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


Ghost Desktop Screenshot

什么是 Ghost?

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

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

Ghost 成立于 2013 年 4 月,是在一个非常成功的 Kickstarter 活动之后,该活动旨在创建一个专注于专业出版的新平台。我们的使命是为全球独立记者和作家创建最佳的开源工具,并对在线媒体的未来产生真正影响。它提供更简单、更集中的体验:我们的编辑器专为提供最佳写作体验而设计。

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

Ghost 是一家盈利公司吗?

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

什么是 Ghost 桌面?

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

什么是面向新闻的 Ghost?

今年,我们非常高兴地将我们整个由 10 名全职员工组成的 Ghost 团队投入到帮助发展三家独立出版物,以及为他们的努力提供 45,000 美元的资源。我们称之为 面向新闻的 Ghost

我们已经将 Ghost 打造成网络上独立出版商的下一个伟大平台,大约三年半了,现在我们已经进入了一个非常有趣的拐点。我们开始这段旅程是为了创建一个简单、设计精良的博客平台,几乎任何人都可以使用它。这将永远是第一步。

从长远来看,我们希望 Ghost 成为世界上最好的新闻平台,这意味着我们需要构建功能来吸引这些人。今年,我们有意识地决定专注于此。

你为什么选择用 Electron 构建 Ghost 桌面?

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

在构建 Ghost 桌面的过程中,你遇到了哪些挑战?

拼写检查可能是最困难的服务之一 - 我们很容易使用众多在线服务中的任何一种,但正确地拼写检查多种语言的文本,同时保护用户的隐私和自主权并非易事。

Electron 在哪些方面应该改进?

我们希望看到 Electron 将操作系统的原生拼写检查功能带入他们的应用程序。我们梦想着一个世界,在这个世界中,<input> 字段与 NSTextView 接收相同的服务,但我们也深刻地意识到这是多么困难。

您最喜欢 Electron 的哪些方面?

JavaScript 因其庞大的生态系统而闻名,它涉及无数的工具和框架 - 但它带给我们的便利性是难以言喻的。用 Electron 构建应用程序比构建 Web 应用程序只稍微难一点,这真是一个了不起的壮举。

Ghost 完成了吗?如果没有,下一步是什么?

Ghost 桌面也是一个正在进行的项目 - 我们距离完成还有很长的路要走。我们已经谈论了很长时间,要为用户提供一个完整的离线模式,我们正在接近完成。其他值得注意的工作领域包括扩展和与其他文本编辑应用程序(如 Word 或 Atom)的集成,最终允许人们使用他们喜欢的工具撰写文章。总的来说,在我们发布离线模式功能后,我们将寻求更深层的操作系统集成。如果你对此感兴趣,加入我们

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

我非常喜欢 KapFelonyVisual Studio Code

👻

本周项目:Beaker 浏览器

·阅读时间:4 分钟

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


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

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

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

使用 Beaker,我们有了一个新的 Web 协议:去中心化档案传输。“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,我们有一些基本的工具内置在浏览器中,但我们正在将这些工具推到用户领域。所有这些都将是可修改的用户应用程序。

你为什么选择用 Electron 构建 Beaker?

对于这个项目来说,这是显而易见的。如果我自己复制 Chrome,我现在就应该在编写 C++!没有人想做那样的事情。我知道 Web 堆栈,并且能够快速地使用它。这是显而易见的。

事实上,我不确定如果没有 Electron,我是否能完成所有这些。这是一个很棒的软件。

在构建 Beaker 的过程中,你遇到了哪些挑战?

其中一半是戳弄这些工具,弄清楚我可以用多少。

制作浏览器本身相当容易。Electron 实际上是一个制作浏览器的工具包。……除了浏览器标签;我花了好长时间才搞定它。我最后不得不学习如何使用 SVG。它看起来好多了,但我在搞定它之前,花了 3 到 4 次迭代。

Electron 在哪些方面应该改进?

如果我能在 webview 中停靠开发者工具,那就太好了。

Beaker 的下一步是什么?

为 Dat 网站提供安全的 DNS 名称。一种社会可配置的 URL 方案,称为 “应用程序方案”。更多 Dat API。

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

我们有很多未解决的问题。不要害怕与我联系。在 freenode 上使用 #beakerbrowser。我们为贡献者提供了一个 页面,我们会将你添加进去。如果你来奥斯汀,我会请你喝啤酒。

您有什么可能对其他开发者有用的 Electron 提示吗?

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