跳至主要内容

每周项目:Kap

·7 分钟阅读

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


这篇文章是该系列的第一篇,重点介绍 Kap,这是一个由 Wulkano 构建的开源屏幕录制应用程序,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 技术构建整个应用程序。在尝试了一切方法使其正常工作(在 Retina 屏幕上达到 30 FPS 的最低要求)后,我们最终不得不寻找其他解决方案。

我在代码仓库中看到了一些 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,查看 示例 并使用优秀的 文档