本周项目：Kap
Electron 社区正在快速发展，人们正在以惊人的速度创建强大的新应用和工具。为了庆祝这一创新势头，并让社区了解一些新项目，我们决定开设一个每周博客系列，介绍值得关注的 Electron 相关项目。
¥The Electron community is growing quickly, and people are creating powerful new apps and tools at an astounding rate. To celebrate this creative momentum and keep the community informed of some of these new projects, we've decided to start a weekly blog series featuring noteworthy Electron-related projects.
本文是本系列的第一篇，主要介绍 Kap，这是一款由地理分布的自由设计师和开发者团队 Wulkano 开发的开源屏幕录制应用。
¥This post is the first in the series, and features Kap, an open-source screen recording app built by Wulkano, a geodistributed team of freelance designers and developers.
什么是 Kap？
¥What is Kap?
Kap 是一款开源屏幕录像机 主要为设计师和开发者构建，方便他们轻松捕捉工作成果。人们使用它来分享动画原型、记录错误、创建有趣的 GIF 以及介于两者之间的一切。
¥Kap is an open-source screen recorder built primarily for designers and developers to easily capture their work. People use it to share animated prototypes, document bugs, create silly GIFs and everything in-between.
我们看到不同年龄段、不同背景的人们都在教育场合、截屏视频、教程等场合使用它。列表还在继续。甚至用于创建生产资源！我们的小项目如此受欢迎，让我们感到非常惊喜。
¥We've seen people of all ages and backgrounds use it in educational settings, screencasts, tutorials... the list goes on. Even to create production assets! We're completely blown away by how well received our little side project has been.
为什么要构建它？
¥Why did you build it?
这个问题问得好，毕竟现在也不缺屏幕录像机！我们认为其他替代方案要么过于复杂、成本过高，要么功能过于有限。没有什么感觉恰到好处，可以满足我们的日常需求。我们也认为，我们工作中使用的工具开源是一件很棒的事情，这样每个人都可以帮助改进它们。构建 Kap 最终与我们没有做的事情一样重要。一切都在于细节，一些小改进的积累，最终形成了我们想要使用的工具的轮廓。
¥That's a very good question, it's not like there's a lack of screen recorders out there! We felt the alternatives were either too complex, too expensive or too limited. Nothing felt just right for our everyday needs. We also think it's great when the tools we use to do our work are open-source, that way everyone can help shape them. Building Kap ended up being just as much about what we didn't do. It's all in the details, an accumulation of small improvements that became the outline of a tool we wanted to use.
然而，或许最重要的是，Kap 已经成为一个让我们抛开一切烦恼，尽情享受为自己和像我们一样的人构建东西的乐趣的地方。创造一个可以尽情发泄、尝试新事物并享受创作乐趣的环境至关重要。无要求，无压力，无期望。设计师和开发者应该进行侧项目吗？当然。是的，应该这样做。
¥However, and maybe most importantly, Kap has become a place for us to leave our worries at the door and just have fun building something for ourselves and people like us. It's so important to create an environment where you get to just vent, try new thins and enjoy your craft. No requirements, no pressure, no expectations. Should designers and developers side project? Why, yes. Yes, they should.
为什么选择在 Electron 上构建 Kap？
¥Why did you choose to build Kap on Electron?
原因如下：
¥There were a number of reasons:
-
Web 技术
¥Web tech
-
团队大部分成员都是 Web 开发者
¥Most of the team are web developers
-
我们投资于 JavaScript
¥We're invested in JavaScript
-
它为更多人贡献代码打开了大门
¥It opens the door for more people to contribute
-
Electron 本身是开源的
¥Electron itself is open-source
-
node_modules的强大功能和易于维护的模块化¥The power and easily maintainable modularity of
node_modules -
跨平台可能性
¥Cross-platform possibilities
我们认为应用的未来在于浏览器，但我们还没有完全实现这一目标。Electron 是迈向未来的重要一步。它不仅使应用本身更易于访问，也使构建它们的代码更易于访问。一个有趣的想法是设想未来操作系统就是浏览器，而标签页本质上就是 Electron 应用。
¥We think the future of apps are in the browser, but we're not quite there yet. Electron is an important step in the journey towards that future. It not only makes the apps themselves more accessible, but also the code they're built with. An interesting thought is imagining a future where the OS is a browser, and the tabs are essentially Electron apps.
此外，作为 Web 开发者，我们非常欣赏 JavaScript 的同构特性，因为 JS 可以在客户端、服务器以及现在的桌面上运行。使用 Web 技术（HTML、CSS 和 JS），很多事情比原生技术简单得多：更快的原型设计，更少的代码，弹性框 > 自动布局（macOS/iOS）。
¥Additionally, being primarily web developers, we're big fans of the isomorphic nature of JavaScript, in that you can run JS on the client, server, and now the desktop. With web tech (HTML, CSS and JS), many things are much simpler than native: Faster prototyping, less code, flexbox > auto-layout (macOS/iOS).
在构建 Kap 时，你遇到了哪些挑战？
¥What are some challenges you've faced while building Kap?
利用 Electron 可用的资源来录制屏幕是最大的挑战。它们的性能不足以满足我们的要求，在我们看来，这会使项目失败。虽然 Electron 本身没有问题，但在原生开发和使用 Web 技术构建桌面应用之间仍然存在差距。
¥Using the resources Electron has available to record the screen was the biggest challenge. They simply weren't performant enough to meet our requirements and would render the project a failure in our eyes. Though at no fault of Electron itself, there's still a gap between native development and building desktop apps with web tech.
我们花了大量时间尝试解决 getUserMedia API 性能不佳的问题，这个问题源于 Chromium。我们着手开发 Kap 时的主要目标之一是使用 Web 技术构建整个应用。在尝试了所有方法使其正常运行之后（最低要求是在 Retina 屏幕上达到 30 FPS），我们最终不得不寻找其他解决方案。
¥We spent a lot of time trying to work around the poor performance of the getUserMedia API, an issue originating in Chromium. One of our main goals when we set out to make Kap was to build the entire app with web tech. After trying everything we could to get it working (the minimum requirement being 30 FPS on a Retina screen), we eventually had to find another solution.
我在代码库中看到了一些 Swift 代码。关于什么？
¥I see some Swift code in the repo. What's that about?
被迫寻找 getUserMedia 的替代方案，我们开始尝试 ffmpeg。除了是最好的音频和视频转换工具之一之外，它还具有在几乎所有操作系统中录制屏幕的功能，并且我们能够在 Retina 屏幕上录制出清晰的视频，满足我们最低 30 FPS 的要求。有问题吗？性能方面，"😩" 的 CPU 占用率一度飙升。因此，我们重新开始，讨论了各种方案，并意识到必须做出妥协。这促成了 Aperture 的诞生，这是我们用 Swift 编写的 macOS 屏幕录制库。
¥Being forced to look for alternatives to getUserMedia, we started experimenting with ffmpeg. Besides being one of the best tools for audio and video conversion it has the functionality of recording the screen in almost any OS, and we were able to record crispy video meeting our minimum requirement of 30 FPS on a Retina screen. Problem? The performance was "😩", the CPU usage was going haywire. So we went back to the drawing board, discussed our options and realised that we had to make a compromise. That resulted in Aperture, our own screen recording library for macOS written in Swift.
Electron 应该在哪些方面改进？
¥In what areas should Electron be improved?
我们都知道 Electron 应用可能会占用大量内存，但这其实是 Chromium 的问题。这是它工作方式的一部分，实际上取决于你运行的是什么，例如 Kap 和 Hyper 通常占用不到 100MB 的内存。
¥We all know that Electron apps can have a thing for using RAM, but again, that's really a Chromium thing. It's part of how it works and it really depends on what you're running, for example Kap and Hyper typically use less than 100MB of memory.
我们看到的最大改进字段之一是负载，尤其是 Electron 分发 Chromium 的方式。一个想法是使用共享的 Electron 核心，并让应用安装程序检查它是否已存在于系统中。
¥One of the biggest areas of improvement that we see is payload, particularly how Electron distributes Chromium. One idea would be to have a shared Electron core and make app installers check if it's already present on the system.
创建跨平台 Electron 应用可能会提供更佳体验。目前，平台之间存在太多不一致、平台特定 API 以及功能缺失的问题，导致你的代码库充斥着 if-else 语句。例如，vibrancy 仅在 macOS 上受支持，自动更新程序在 macOS 和 Windows 上的运行方式不同，甚至在 Linux 上也不受支持。在 Linux 上，透明度有时好有时坏，通常都不好。
¥Creating cross-platform Electron apps could be a better experience. Right now there are too many inconsistencies, platform-specific APIs, and missing features between platforms, making your codebase littered with if-else statements. For example, vibrancy is only supported on macOS, the auto-updater works differently on macOS and Windows, and is not even supported on Linux. Transparency is a hit or miss on Linux, usually miss.
调用原生系统 API 也应该更容易。Electron 提供了一套非常优秀的 API，但有时你需要它未提供的功能。创建原生 Node.js 插件是一种选择，但使用起来很麻烦。理想情况下，Electron 应该附带一个良好的 FFI API，例如 fastcall。这样我们就可以用 JavaScript 编写 Swift 部分了。
¥It should also be easier to call native system APIs. Electron comes with a very good set of APIs, but sometimes you need functionality it doesn't provide. Creating a native Node.js addon is an option, but it's painful to work with. Ideally Electron would ship with a good FFI API, like fastcall. This would have enabled us to write the Swift part in JavaScript instead.
你最喜欢 Electron 的哪些方面？
¥What are your favorite things about Electron?
我们最喜欢的一点是，任何具备 Web 创作知识的人都可以构建并为多平台原生体验做出贡献。更不用说在其上进行开发的轻松和乐趣、优秀的文档和蓬勃发展的生态系统。
¥Our favorite thing is easily the fact that anyone with knowledge of creating for the web can build and contribute to multi-platform native experiences. Not to mention the ease and joy of developing on it, the excellent documentation and the thriving ecosystem.
从前端的角度来看，构建 Kap 与使用浏览器 API 构建一个简单的网站没有什么不同。Electron 在使应用开发与 Web 开发相似（基本相同）方面做得非常出色。实际上非常简单，我们不需要框架或类似的东西来帮助我们，只需要简洁且模块化的 JS 和 CSS。
¥From a front-end perspective, building Kap felt no different than building a simple website using browser APIs. Electron does a really great job of making app development similar (basically identical) to web development. So simple in fact that there was no need for frameworks or similar to help us, just clean and modular JS and CSS.
我们也非常欣赏这个项目的开发团队、他们的奉献精神和支持，以及他们维护的活跃友好的社区。拥抱你们所有人！
¥We are also huge fans of the team building it, their dedication and support, and the active and friendly community they maintain. Hugs to all of you!
Kap 的下一步计划是什么？
¥What's coming next in Kap?
我们的下一步是审查该应用，为 2.0.0 里程碑版本做准备，该版本除了支持插件外，还包含 React 重写，允许开发者扩展 Kap 的功能！我们诚邀大家关注我们的 GitHub 代码库 项目并为其做出贡献。让我们知道如何让 Kap 成为最适合你的工具，我们倾听并希望听到尽可能多的你们的声音！
¥The next step for us is to review the app in preparation for our 2.0.0 milestone, which includes a React re-write in addition to support for plugins, allowing developers to extend the functionality of Kap! We invite everyone to follow to project and contribute on our GitHub repository. We're listening and want to hear from as many of you as possible, let us know how we can make Kap the best possible tool it can be for you!
什么是 Wulkano？
¥What is Wulkano?
Wulkano 是一个设计工作室和数字集体，由一群热爱远程工作的技术人员组成，他们既喜欢为客户工作，也喜欢在自己的项目上合作。我们是一个分散但紧密联系的群体，来自不同地方，拥有不同的背景。在我们的虚拟办公室（恰好是基于 Electron 的 Slack！），我们分享知识、想法、经验，但最重要的是分享一些搞笑的 GIF 和表情包。
¥Wulkano is a design studio and digital collective, a team of remote technologists who love working together on both client gigs and our own projects. We're a distributed but tight knit group of people from different places and backgrounds, sharing knowledge, ideas, experiences, but most importantly silly GIFs and memes, in our virtual office (which happens to be the Electron based Slack!).
有哪些 Electron 开发技巧可能对其他开发者有用？
¥Any Electron tips that might be useful to other developers?
充分利用并参与精彩的 community，了解 令人敬畏的 Electron，了解 示例，并充分利用强大的 docs！
¥Take advantage of and get involved in the fantastic community, check out Awesome Electron, look at examples and make use of the great docs!