开发屏幕标注工具:为什么我选择Native而不是Electron?
开发屏幕标注工具:为什么我选择Native而不是Electron?
大家好,我是CatalystPack Studio。
在上一篇文章中,我分享了Spotmark诞生的故事。今天,我想深入探讨一个目前所有做桌面应用开发的人都会面临的技术难题:应该选择Native还是Electron?
在开始Spotmark(一个帮助你在桌面上直接绘制、高亮和打光聚光的工具)项目时,技术选型是最艰难的决定之一。我并不是想写一篇文章来“贬低”Electron,因为它本身是一项非常棒的技术。相反,我想分享一个客观的视角,探讨两者的优缺点,以及为什么Native是像Spotmark这样工具的最佳拼图。
Electron的魅力
在过去十年里,Electron统治桌面应用世界并非偶然。我们每天打开的VS Code、Slack、Figma或Discord等软件都是基于它构建的。
在为Spotmark进行第一个概念验证(PoC)时,我也立刻想到了Electron,因为它有着无可辩驳的优势:
- Write Once, Run Everywhere(一次编写,到处运行): 对小团队(或独立开发者)极具吸引力。你只需用HTML/CSS/JS编写一次UI,就能打包给Windows、macOS和Linux使用。
- 开发速度(Development Speed): 庞大的NPM生态系统加上UI框架(React/Vue)可以帮助你在几天内而不是几周内搭建出精美的界面。
- 非常适合Standard Apps(标准应用): 如果你做的是聊天软件、任务管理工具或笔记软件,Electron能以最低的开发成本提供非常好的体验。
对于Spotmark这样的工具,如果用Electron来做设置界面或许可证管理,那将是“顺风顺水”的。但核心问题在于最重要的功能:屏幕覆盖层(Screen Overlay)。
Screen Marker的特殊难题
Spotmark不是一个普通的应用程序窗口。为了让你能在Chrome浏览器上画圈,或者在IDE里画箭头指向一行代码,Spotmark必须创建一个与你电脑屏幕一样大的透明无形窗口(transparent window),并且悬浮在最上层(always on top)。
正是在这种特定任务(Niche Task)中,Electron的弱点暴露无遗。
1. 内存占用(Memory Footprint)
为了用Electron创建这个透明覆盖层,操作系统必须在后台维持一个庞大的Chromium进程。当你在演示时,你的电脑可能已经承载了一个沉重的Excel文件、一个正在编译代码的IDE,再加上Zoom/Teams在推流视频。 如果像Spotmark这样的“备用”工具(大部分时间躺在系统托盘里,只有在需要时才呼出30秒)再吃掉200MB - 300MB的RAM,系统就会开始出现延迟。
2. 绘制延迟(Latency)
当你用触控笔或鼠标在屏幕上画曲线时,你的大脑期望线条能立即出现在光标下方。
在Electron环境中,鼠标输入要经过多层处理:
操作系统 -> Node.js/Electron包装层 -> Chromium引擎 -> DOM / Canvas -> 屏幕重新渲染
虽然这个过程只发生在几毫秒内,但对于图形绘制这种要求实时的操作来说,这种微小的延迟会让人感觉墨迹被“拖在”鼠标后面。一切都感觉比实际要生硬一些。
艰难但值得的选择:Native (C++/Qt)
经过慎重考虑,我们团队决定转向Native (C++/Qt)。
使用Native开发需要在环境配置和设置上投入更多精力。你牺牲了现成的跨平台便利性,换取了极致的性能。处理系统API(Windows上的Win32,macOS上的Cocoa,Linux上的Wayland/X11)也需要更加谨慎的测试和调试过程。
但作为回报,用户体验的提升是巨大的:
- 与硬件直接通信: 管道被压缩到最短(
操作系统 -> 图形API -> 屏幕)。从鼠标移动到墨水出现的距离几乎为零。流畅的线条以60FPS+的速度流淌(我称之为Liquid Drawing)。 - Zero-footprint(零占用): 通过使用C++,Spotmark消耗的RAM和CPU极少。在你用快捷键呼出它之前,它的存在对你的电脑来说完全是“隐形”的。
- 与操作系统的深度整合: 诸如全局快捷键(Global Hotkeys)拦截或多显示器DPI处理等功能,运行得难以置信地顺畅和准确。
结语
Electron是一项出色的技术,我也会在其他许多项目中继续使用它。但对于一个需要即时响应和持续后台运行的工具如Spotmark来说,Native是实现完美体验的唯一途径。
开发时间上的牺牲正在随着Windows版本v0.4.5 Beta的发布逐渐开花结果。团队的工程师们仍在努力解决ARM架构(macOS)和Wayland环境(Linux)下的“难题”,争取早日向社区发布。
如果你是Windows用户,并想体验一款超轻量的屏幕标注工具,欢迎试用:
点击下载 Spotmark v0.4.5 Beta (Windows版) →
期待在以后的文章中与大家见面,届时我将有机会分享团队是如何解决即使电脑崩溃也能安全保存mp4视频文件这个难题的!
带着Native的骄傲构建。 ⚡