跳至主要内容

23 篇文章标签为“社区”

Electron 中的社区举措

查看所有标签

本周项目:Voltra

·6 分钟阅读

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


什么是 Voltra?

Voltra 是一款适用于希望拥有自己音乐的人的音乐播放器。它也是一家商店,您可以在其中根据已拥有内容发现和购买新音乐。它无广告,适用于桌面和移动设备的跨平台。它也不会监视您。

voltra-artistview

谁适合使用 Voltra?

所有听音乐的人。

是什么促使您创建 Voltra?

广播一直拥有大量听众。它正在从广播电台转向互联网。现在您可以按需租用音乐 - 这是广播的复兴!由于此,许多新产品和服务出现了,但流媒体广播仍然让其他人控制您的音乐以及您体验它的方式。

我们想要一款完全专注于您拥有的音乐的产品。让直接从艺术家或唱片公司发现和购买新音乐变得容易的东西。

有免费版本吗?

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

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

您如何赚钱?

我们有高级功能!

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

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

是什么让 Voltra 与众不同?

设计和可用性对我们来说极其重要。我们希望给听众带来无干扰的聆听体验!市场上有一些有趣的音乐播放器和商店。但他们中的许多人比他们的创造者意识到的更先进,也更难使用。我们希望让 Voltra 尽可能多的人都能使用。

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

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

在设计 Voltra 时,我们考虑了原生应用程序和网络的 UI 约定,我们也对可以删除的内容进行了很多思考。我们有一个活跃的私人测试版小组,他们在过去几个月里给了我们关键的反馈。

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

voltra-albumview

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

在构建 Voltra 过程中您遇到了哪些挑战?

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

我们现在可以很好地处理非常大的收藏。大型收藏可能意味着数万张图片!直接从渲染进程使用 Node.js 的文件系统模块,可以非常轻松地根据 DOM 事件快速延迟加载和卸载大量图片。

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

为什么选择用 Electron 构建 Voltra?

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

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

此外,也是最重要的是,使用 Electron,你只需开发一次,它应该就能在所有主要平台上“正常运行”。虽然不能保证,但为每个平台进行原生编码的成本远远超过了 Electron 带来的任何其他成本。

你最喜欢 Electron 的哪些方面?

GTD!:将 Node.js 的网络栈和 Chromium 的展现层打包在一起是完成事情的秘诀。

能力:它只是 Web 栈,因此我们整个团队实际上都参与了产品的构建。

社区:这是一个高度组织化的社区,他们知道如何很好地沟通!我们对拥有这样的支持感到非常高兴。

Electron 在哪些方面可以改进?

我们希望看到 Electron 认可一个打包器。打包器对于 Electron 的重要性就像包管理器对于 Node 一样重要。用户层有多个打包器,每个都有有趣的特性,但也都有 bug。社区的共识将有助于引导贡献者所花费的精力。

接下来会发生什么?

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

本周项目:WordPress 桌面版

·阅读时间:4 分钟

本周我们与 Automattic 的朋友们交流了关于 WordPress 桌面版 的问题,这是一个用于管理 WordPress 内容的开源桌面客户端。


WordPress Apps

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

WordPress.com 桌面应用 提供了无缝的跨平台体验,让你可以专注于你的内容和设计,而不会被浏览器标签分心——或者让你的网站处于闲置状态但仍然可以访问。结合我们的浏览器支持和移动应用,你可以随时随地以任何帮助你完成工作的方式构建你的网站。

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

它实际上使用了与你在浏览器中访问 WordPress.com 时完全相同的技术。但是,它是在本地托管的,因此加载时间非常短。得益于原生功能(例如在你的停靠栏中、通知等),你可以真正专注于你的 WordPress 网站和博客。

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

在 2015 年底,我们以 Calypso 的形式重建了 WordPress.com 的大部分功能,这是一个使用 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 上获取。

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

如果这些听起来很有趣,那么我们很乐意 与你联系

有哪些对其他开发者可能有用的 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 CLI 工具,你只需键入

dat share path/to/my/folder

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

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

Dat 桌面版 是一种让 Dat 能够被那些无法或不愿意使用命令行的人访问的方式。你可以在你的机器上托管多个 Dat,并在你的网络上提供数据服务。

你能分享一些很酷的用例吗?

DataRefuge + 项目斯瓦尔巴德

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

加利福尼亚公民数据联盟

CACivicData 是一个开源档案库,每天都会从 CAL-ACCESS 中下载数据,CAL-ACCESS 是加州用于追踪政治资金的数据库。他们 每天都会发布数据,这意味着他们的 zip 文件中会存储很多重复数据。我们正在努力将他们的数据托管为 Dat 仓库,这将减少参考特定版本或更新到新版本的麻烦和带宽需求。

Electron 更新

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

谁应该使用 Dat 桌面?

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

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

用户帐户和元数据发布。我们正在开发一个 Dat 注册表 Web 应用程序,该应用程序将在 datproject.org 上部署,它基本上是“用于数据集的 NPM”,区别在于我们只是一个元数据目录,数据可以存储在网上的任何地方(与 NPM 或 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 开发的最佳方式是什么?

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

本周项目: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 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 浏览器

·阅读时间:4 分钟

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


什么是 Beaker,您为什么要创建它?

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

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

有了 Beaker,我们有了新的网络协议:分散式存档传输。“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. 不要构建浏览器,这是一个饱和的市场。

本周项目: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 > 自动布局(macOS/iOS)。

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

利用 Electron 提供的资源来录制屏幕是最大的挑战。它们的表现力不足以满足我们的要求,在我们看来,这将使项目成为失败。尽管这并非 Electron 本身的错误,但原生开发和使用 Web 技术构建桌面应用程序之间仍然存在差距。

我们花了大量时间试图解决 getUserMedia API 性能差的问题,这是一个源于 Chromium 的问题。我们在着手制作 Kap 时,主要目标之一是用 Web 技术构建整个应用程序。在尝试了所有可能的方法来使其正常工作后(最低要求是在视网膜屏幕上达到 30 FPS),我们最终不得不寻找其他解决方案。

我在仓库中看到了一些 Swift 代码。这是什么?

被迫寻找 getUserMedia 的替代方案,我们开始尝试 ffmpeg。除了是音频和视频转换的最佳工具之一之外,它还具有在几乎所有操作系统中录制屏幕的功能,我们能够录制符合我们最低要求(视网膜屏幕上达到 30 FPS)的清晰视频。问题?性能是 "😩",CPU 使用率非常高。因此,我们又回到了起点,讨论了我们的选择,并意识到我们必须做出妥协。这导致了 Aperture,我们用 Swift 编写的用于 macOS 的屏幕录制库。

Electron 在哪些方面应该改进?

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

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

创建跨平台 Electron 应用程序可以提供更好的体验。现在,跨平台之间存在太多不一致、特定于平台的 API 和缺少的功能,导致你的代码库充满了 if-else 语句。例如,鲜艳度仅在 macOS 上受支持,自动更新程序在 macOS 和 Windows 上的工作方式不同,甚至在 Linux 上不受支持。透明度在 Linux 上是一个命中或错过,通常是错过。

调用本机系统 API 也应该更容易。Electron 带有一组非常好的 API,但有时你需要的功能它没有提供。创建本机 Node.js 插件是一个选项,但使用它很痛苦。理想情况下,Electron 会附带一个好的 FFI API,比如 fastcall。这将使我们能够用 JavaScript 而不是 Swift 编写 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 黑客马拉松,这是一个位于旧金山的女性编码学校。为了帮助与会者为他们的项目做好准备,我们自己的 Kevin Sawicki 创建了一些示例 Electron 应用程序。


如果你刚接触 Electron 开发,或者还没有尝试过它,这些示例应用程序是一个很好的起点。它们体积小,易于阅读,代码中有大量注释来解释一切是如何工作的。

要开始使用,请克隆此仓库

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

要运行下面列出的任何应用程序,请更改到应用程序的目录,安装依赖项,然后启动

cd activity-monitor
npm install
npm start

活动监视器

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

Screenshot

哈希

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

screenshot

镜像

以最大化大小播放计算机摄像头的视频,就像对着镜子看一样。包括可选的彩虹滤镜效果,使用 CSS 动画。

价格

使用雅虎财经 API 显示石油、黄金和白银的当前价格。

screenshot

URL

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

其他资源

我们希望这些应用程序能帮助你开始使用 Electron。以下是一些学习更多知识的其他资源

Electron 用户区

·阅读时间:3 分钟

我们在 Electron 网站上添加了一个新的 userland 部分,以帮助用户发现构成我们蓬勃发展的开源生态系统的人员、软件包和应用程序。


github-contributors

Userland 的起源

Userland 是软件社区中的人们聚集在一起分享工具和想法的地方。这个词起源于 Unix 社区,指的是在内核之外运行的任何程序,但今天它意味着更多。当当今的 Javascript 社区中的人们提到 userland 时,他们通常指的是 npm 包注册表。这是大多数实验和创新发生的地方,而 Node 和 JavaScript 语言(就像 Unix 内核一样)保留了一组相对较小且稳定的核心功能。

Node 和 Electron

与 Node 类似,Electron 拥有一个核心 API 集。这些 API 提供了开发跨平台桌面应用程序所需的必要基础功能。这种设计理念使 Electron 能够保持灵活性,而不必过度限制其使用方式。

用户空间是“核心”的对立面,它允许用户创建和共享扩展 Electron 功能的工具。

收集数据

为了更好地了解我们生态系统中的趋势,我们分析了 15,000 个依赖于 electronelectron-prebuilt 的公共 GitHub 存储库的元数据。

我们使用 GitHub APIlibraries.io API 和 npm 注册表收集有关依赖项、开发依赖项、依赖者、包作者、仓库贡献者、下载次数、fork 次数、star 次数等的 信息。

然后,我们使用这些数据生成了以下报告。

过滤结果

应用程序依赖项Starred 应用程序 这样的报告列出了包、应用程序和仓库,它们有一个文本输入框,可以用于过滤结果。

当您在该输入框中输入内容时,页面的 URL 会动态更新。这样您就可以复制代表用户空间数据特定切片的 URL,然后与他人共享。

babel

更多内容即将推出

这组初始报告仅仅是开始。我们将继续收集有关社区如何构建 Electron 的数据,并会在网站上添加新的报告。

所有用于收集和显示这些数据的工具都是开源的。

如果您有关于如何改进这些报告的想法,请告诉我们 在网站存储库上创建新的问题 或在上述任何存储库上创建新问题。

感谢您,Electron 社区,使用户空间成为今天的样子!

2016 年 9 月:新应用

·阅读时间:3 分钟

以下是 9 月份添加到网站上的新 Electron 应用程序和演讲。


该网站通过社区的 拉取请求 更新了新的 应用程序聚会。您可以 监控存储库 以获取有关新添加内容的通知,或者如果您对网站的所有更改都不感兴趣,可以订阅 博客 RSS 订阅

如果您制作了 Electron 应用程序或举办了聚会,请发送 拉取请求 将其添加到网站,它将在下次 roundup 中出现。

新演讲

9 月份,GitHub 举办了 GitHub Universe 会议,该会议被誉为构建软件未来的活动。会上有一些有趣的 Electron 演讲。

另外,如果您碰巧在 12 月 5 日在巴黎,Zeke 将会在 dotJS 2016 上发表 Electron 演讲

新应用程序

Pexels搜索完全免费的照片并将其复制到剪贴板。
Timestamp带有可自定义日期/时间显示和日历的更好的 macOS 菜单栏时钟。
Harmony与 Spotify、Soundcloud、Play 音乐和本地文件兼容的音乐播放器。
uPhoneWebRTC 桌面电话。
SealTalk由 RongCloud IM 云服务和 IM SDK 提供支持的即时通讯应用程序。
Infinity制作演示文稿的简便方法。
Cycligent Git Tool用于 Git 项目的简单图形 GUI。
Foco使用 Foco 专注并提高工作效率。
Strawberry赢得终身客户,通过全面的餐厅软件套件更好地了解并为他们服务。
Mixmax实时查看您电子邮件上的所有操作,随时随地进行撰写。
Firebase AdminFirebase 数据管理工具。
ANote简单友好的 Markdown 笔记。
Temps简单但智能的菜单栏天气应用程序。
Amium一种工作协作产品,它将对话带到您的文件。
Soube简单的音乐播放器。
(Un)colored下一代桌面富文本编辑器,它使用主题保存文档,支持 HTML 和 Markdown。适用于 Windows、OS X 和 Linux。
quickcalc菜单栏计算器。
Forestpin Analytics用于企业的财务数据分析工具。
LingREST 客户端。
Shortexts您经常复制的文本、文件夹和表情符号的快捷方式。
Front-End Box一组前端代码生成器。

2016 年 8 月:新应用

·阅读时间:3 分钟

以下是 8 月份添加到网站上的新 Electron 应用程序。


该网站通过社区的 拉取请求 更新了新的 应用程序聚会。您可以 监控存储库 以获取有关新添加内容的通知,或者如果您对网站的所有更改都不感兴趣,可以订阅 博客 RSS 订阅

如果您制作了 Electron 应用程序或举办了聚会,请发送 拉取请求 将其添加到网站,它将在下次 roundup 中出现。

新应用程序

Code RPGifyRPG 风格的编码应用程序。
PamFax用于发送和接收传真的跨平台应用程序。
BlankUpMarkdown 编辑器,清晰度 +1。
Rambox免费且开源的邮件和邮件应用程序,将常见的 Web 应用程序合并到一个应用程序中。
Gordie用于您的卡片收藏的最佳应用程序。
Ionic Creator更快地构建出色的移动应用程序。
TwitchAlerts通过精美的警报和通知让您的观众满意。
Museeks简单、干净且跨平台的音乐播放器。
SeaPig从 Markdown 到 HTML 的转换器。
GroupMe非官方的 GroupMe 应用程序。
Moeditor您的全能 Markdown 编辑器。
SoundnodeSoundnode App 是桌面版的 Soundcloud。
QMUI WebQMUI Web 桌面版是一个用于管理基于 QMUI Web 框架的项目的应用程序。
Svgsus整理、清理和转换您的 SVG。
Ramme非官方的 Instagram 桌面应用程序。
InsomniaREST API 客户端。
Correo适用于 Windows、macOS 和 Linux 的菜单栏/任务栏 Gmail 应用程序。
KongDashKong Admin API 的桌面客户端。
Translation Editor用于 INTL ICU 消息(参见 formatjsio)的翻译文件编辑器。
5EClient5EPlay CSGO 客户端。
Theme Juice简化本地 WordPress 开发。