本周项目: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 构建的开源屏幕录制应用,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,以及其他各种用途。
我们看到各个年龄段和各种背景的人在教育环境中、屏幕录制、教程中使用它……列表还在继续。甚至用它来创建生产素材!我们对这个小型副项目受到的热烈欢迎感到完全震惊。
🌐 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 开发者
- 我们投资于 JavaScript
- 它为更多人贡献代码打开了大门
- Electron 本身是开源的
node_modules的强大功能和易于维护的模块化- 跨平台可能性
我们认为应用的未来在于浏览器,但我们还没有完全到达那里。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.
此外,作为主要的网页开发者,我们非常喜欢 JavaScript 的同构特性,因为你可以在客户端、服务器端,现在甚至桌面端运行 JS。使用网页技术(HTML、CSS 和 JS),许多事情比原生开发简单得多:原型制作更快,代码更少,Flexbox 优于自动布局(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 时,我们的主要目标之一就是用网页技术构建整个应用。在尝试了一切可行的方法以使其工作(最低要求是在 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。除了是音频和视频转换方面最好的工具之一外,它几乎可以在任何操作系统上录制屏幕,并且我们成功录制出了符合最低要求 30 FPS 的清晰视频,在 Retina 屏幕上效果很好。问题?性能令人 😩,CPU 使用率异常高。所以我们回到起点,讨论我们的选项,并意识到我们必须做出妥协。结果就是 Aperture,我们为 macOS 编写的 Swift 屏幕录制库。
🌐 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 语句。例如,振动效果仅在 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?
我们最喜欢的一点无疑是,任何懂得网页开发的人都可以构建并贡献多平台的原生体验。更不用说在它上面开发的轻松与乐趣、出色的文档以及蓬勃发展的生态系统。
🌐 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 在让应用开发类似(基本上与)网页开发方面做得非常好。事实上非常简单,以至于根本不需要框架或类似工具来帮助我们,只需干净且模块化的 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 和表情包。
有哪些 Electron 开发技巧可能对其他开发者有用?
🌐 Any Electron tips that might be useful to other developers?
利用并参与精彩的社区,查看Awesome Electron,看看示例,并充分使用优秀的文档!
🌐 Take advantage of and get involved in the fantastic community, check out Awesome Electron, look at examples and make use of the great docs!


