本周项目:Kap
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 技术构建整个应用程序。在尝试了所有可以解决问题的方法后(最低要求是在视网膜屏幕上达到 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 部分。
你最喜欢 Electron 的哪些方面?
我们最喜欢的一点是,任何掌握 Web 开发知识的人都可以构建和贡献多平台原生体验。更不用说它易于开发且令人愉悦,拥有优秀的文档和蓬勃发展的生态系统。
从前端的角度来看,构建 Kap 的感觉与使用浏览器 API 构建一个简单的网站没有区别。Electron 在使应用程序开发类似于(基本上与)Web 开发方面做得非常出色。事实上,它非常简单,我们不需要框架或类似工具来帮助我们,只需使用简洁且模块化的 JS 和 CSS 即可。
我们也是构建 Electron 团队的忠实粉丝,他们奉献和支持,以及他们维护的活跃友好的社区。向你们所有人致以拥抱!
Kap 的下一步计划是什么?
我们的下一步是审查应用程序,为 2.0.0 里程碑做准备,其中包括使用 React 重写,以及对插件的支持,允许开发人员扩展 Kap 的功能!我们邀请大家关注项目并在我们的 GitHub 仓库 中贡献代码。我们一直在倾听,并希望听到尽可能多的人的声音,告诉我们如何才能让 Kap 成为最适合你的工具!
什么是 Wulkano?
Wulkano 是一家设计工作室和数字集体,由一群热爱合作的远程技术人员组成,他们既从事客户项目,也开展自己的项目。我们是一个分布式但紧密联系的团队,成员来自不同的地方和背景,分享知识、想法、经验,但最重要的是,在我们的虚拟办公室(恰好是基于 Electron 的 Slack!)里分享有趣的 GIF 和表情包。
哪些 Electron 提示可能对其他开发人员有用?
利用并参与到优秀的 社区 中,查看 Awesome Electron,查看 示例 并使用优秀的 文档!