Electron发展记事(202x)
2023-07-01 08:26:53 阿炯

本文主要用于记录Electron发展和使用过程中的大事记,截止到2030年前。


为多端统一,QQ 选用了 Electron

2023年4月23日,新版 Windows QQ 正式开启用户公测,采用全新 QQ NT 架构,并带来了全新交互界面。

2022年,随着 QQ for macOS 的更新,QQ 全新的 NT 技术架构走进大众视野。腾讯表示,QQ 将使用全新的 QQ NT 技术,对 QQ 底层代码进行一次全方位重构。12 月份,QQ for Linux 3.0 正式版上架 QQ 官网,Linux 用户可以直接下载进行尝试。该版本采用了全新的 QQ NT 技术架构,并可支持 x64 系统以及 arm64 系统,还主要针对系统外观、效率提升、生活娱乐等方面功能进行提升和拓展。QQ for Linux 版本更新很慢,1.0 版本在 2008 年推出,2.0 版本则在十多年后的 2019 年推出。3.0 版本的推出相对来说算是很快的了。2023年4月7日,腾讯 Windows QQ 全新架构版开启灰度内测,本次需要登录资格,未报名 Windows QQ 测试计划的则无法登录。

目前,基于 QQ NT 架构,这是 QQ 首次对 Windows/Mac/Linux 三个平台做架构统一,实现了三个平台一套代码、多端运行,三个平台的版本在外观、操作和性能上一致,提高了用户在操作方面的体验。


QQ 的架构设计源于 1998 年,经过二十四年的发展,其架构也经历了无数次的迭代和重构。有网友表示,如今 QQ 的 Windows 版本就是 2009 年重构基础上“缝缝补补”建立起来的。一直以来,QQ 最大的问题是无法跨平台。Windows 方面,QQ 最早用的是 MFC,后来也用了 DirectUI、WPF 等,这些能力只能用在 Windows 平台上。Linux 和 Mac 端必须使用其他技术,比如 Qt。从过往更新历史中也可以看出,三个平台的更新迭代节奏完全不同。因此对 QQ 开发团队来说,代码的复用并能保持三端用户体验一致就变得很重要。如今,QQ 凭借 NT 架构实现了 QQ 架构的统一。而 QQ NT 技术的一个重点就是使用 Electron 作为新版 QQ 桌面端 UI 跨平台解决方案。


图片来源于知乎

Electron 是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序框架,基于 Chromium 和 Node.js,兼容 Mac、Windows 和 Linux。

但不同系统间还是会有很大的差异,需要相应地做一些额外处理,使得打包出的应用在不同系统下都能正常运转。QQ 开发团队就在 Electron 基础上做了大量优化。比如针对 Electron“占内存”的问题,QQ 根据不同的使用场景,在 Electron 与 N 用 Electron 开发多平台客户端的成本相对低很多。相比于大多数都能完全复用的代码,针对性优化成本可以忽略不计。且Electron基于 Node.js 意味着,Node 大生态下的模块Electron 都可以用。同时跨平台也让 Electron 可同时开发 Web 应用和桌面应用,无论是 UI 还是代码,很多资源都可以共享,大幅减少了开发者的工作量。QQ 开发团队都可以享受到这样的便捷。

多端统一的需求不只是 QQ 有。2017 年,GitHub 已经使用 Electron 重写了 macOS 和 Windows 的客户端。负责重写应用的团队解释道,重新构建 GitHub 桌面客户端的主要原因是为了减少支持多平台开发所耗费的成本。实际上,分别为 Windows 和 macOS 开发原生应用要求使用两种不同的技术栈,也就是说,每个功能特性都需要重复实现、调试和维护。如果需要支持第三个平台,如 Linux,那么还需要投入额外的精力。这跟 QQ 面临的情况相似。

QQ 团队启动了 QQ 的架构升级计划,第一站就是解决目前桌面端迭代慢的问题,使用新架构从前到后对 QQ 代码进行了重构,而其中选择使用 Electron 作为新版 QQ 桌面端 UI 跨平台解决方案,是基于提升研发效率、框架成熟度、团队技术及人才积累等几个方面综合考虑的结果。

1. 新版 QQ 使用跨平台方案的背景
由于历史原因,QQ 最先有 Windows 版本,然后有了 Mac 和 Linux 版本,三端最早都是独立的团队和独立的代码实现,Windows 功能最丰富全面,Mac 主打创新体验,功能相对较少,Linux 最简陋,随着移动互联网的洗礼,各种组织架构调整、人才流动和业务兴替,当前的桌面端 QQ 处于一个比较臃肿、难以维护、缺少更新迭代的状态。

随着远程办公和远程教育的普及,桌面端又开始回到大家的视野,有旺盛的需求,但要同时维护 QQ 的 Windows/Mac/Linux 三个桌面端,并确保每个端都保持快速、高质量的迭代,显然是一件高成本、高投入、难度大的事。在这样的背景下,要把 QQ 桌面端重新打磨好,我们就需要尽可能多的复用代码,实现一套代码、多端运行、体验统一,提升研发效率,持续提升客户端性能和用户的产品体验,同时满足 Windows / Mac / Linux 三大桌面平台用户的需求。于是,跨平台的复用方案就变成了我们自然而然的选择。

2.跨平台方案的选择
首先,希望最后选择的跨平台方案应该是成熟足够、低开发和使用成本的,不需要为了使用框架本身,还需要投入额外巨大的人力成本。这个其实在 React Native、Flutter、Tauri 等跨平台框架的使用过程中,我们都遇到过类似的问题,除了功能开发,为了把框架生态、周边、工具链建设好,还需要投入巨大的额外成本,Qt 也有类似的问题。而使用 Electron,对于 Web 前端开发同学,基本上是 0 成本,现有的 Web 前端的大部分基建都可以直接复用,而且使用 Web 开发 UI 的效率,在主流技术栈里算是很高的了。并且这几年主流的桌面端应用基本都选择了 Electron,如 VScode、Discord、Slack、Skype、Whatsapp、Figma 等等一众应用(https://www.electronjs.org/apps),新的桌面应用基本上也是首选 Electron,另外Electron版本的迭代速度和社区氛围都很在线。

其次,技术选型是否适合当前团队也是一个考虑点,团队是否有相关的技术积累,是否有人才储备来持续投入这个技术栈也非常重要。Qt 的确在性能上是一个很好的选择,但目前团队对 Qt 没有太多积累,基建基本没有,而且市场上相关人才其实比较匮乏,招聘就更难了,而当前 QQ 团队 Web 前端团队积累是比较充分的,可以比较好的权衡质量、性能和效率。

最后,Electron 只是目前新版 QQ 桌面 UI 跨平台的部分,在总体项目中占比较小,并不是 WebQQ 或者网页版 QQ 或者内嵌浏览器,新版 QQ 其实基于 NT 架构进行了完整的重构和重写,核心的 QQ 逻辑还是运行在 C++ 这一层。

3.Electron 应用的内存占用
至于大家关心的 Electron 应用的内存问题,并非不能被优化和解决。由于一般 Web 应用的短周期使用路径,往往不太关注内存使用。而使用 QQ 中群聊和图文消息比较多情况,也会给内存带来不小的考验。但是当我们沉下心来,充分细致地针对每种场景进行分析,再结合定制深度优化 Electron 和与 Native 通信层面的优化,内存可以被很好控制,剩下的不过是再把一些内存泄漏的场景找出来而已。目前阶段,基本上一到两周就会出一个新版本,比如今天灰度的 Mac 版本,在内存占用方面就做了非常大的优化,有兴趣的同学可以使用最新版本,可以长时间运行跟老版本做个对比,已经得到明显的优化,而且优化还在持续中,敬请期待。

4.用户体验和反馈
新的 Mac 版 QQ 上线以来,其实我们一边不断迭代新功能,一边持续性能优化,过程中也收到很多不错的内测反馈和好评,也给了我们不少信心去选择并坚持这个技术路线。

最后,新版 LinuxQQ 已经在内测中,很快将和大家见面。能够快速推出功能齐全的 Linux 版 QQ,也是得益于所选方案给带来的迭代效率明显提升。全新 Windows 版本采用了全新架构 QQ NT 技术架构驱动,支持消息、小世界、QQ 空间板块等功能,还增加了夜间模式、截图能力、群应用、全局搜索能力,UI 方面采用了更类似于此前的 macOS 版 QQ。

Linux版微信正式于2024年11月释出,使用QT编写开发


太吃内存,微软抛弃 Electron


有人选择 Electron,还有人在抛弃。2023年4月初,微软宣布以公共预览版的形式,在 Win10/Win11 系统上推出新版 Microsoft Teams 应用程序。微软协作应用程序和平台总裁 Jeff Teper 表示,新版应用的设计核心是速度和易用性,“我们围绕着速度、性能、灵活性和智能,重新构建了 Teams 应用。运行速度提高了 2 倍,同时使用的内存减少50%。”

功能增强的一个重要原因是该应用程序从 Electron 过渡到了 Microsoft 的 Edge WebView 2 渲染引擎。要知道,微软从使用到放弃 Electron,前后也没有四年。2015 年,我们开始开发 Teams 时选择 Electron 等框架,使跨平台 Web 和桌面客户端的快速交付成为可能。该公司工程副总裁 Sumi Singh 解释道,然而,Teams 的功能不断扩展给设备资源带来了压力。此前,Teams 被公认为是内存大户。Office 365 MVP Tony Redmond 曾做过一次测试,下图显示了 Windows 任务管理器报告,加载到 Edge Chromium 的浏览器客户端占用了 775 MB,而组成 Teams 桌面客户端的进程需要 887 MB。


过去,微软尝试了许多不同的技术来减少桌面客户端对内存的需求。但似乎向前迈出的一大步是 2021 年时 Teams 2.0 从 Electron 转向使用 Edge WebView2。其控件允许用户在原生应用程序中嵌入 Web 技术(HTML、CSS 和 JavaScript),Web 代码可以被嵌入到原生应用的不同部分,也可以在单个 WebView2 实例中构建所有本机应用。

根据 Teams 工程师 Rish Tandon 在推特上的分享,Teams 2.0 从 Electron 转向 Edge WebView2,大概花费了 Teams 团队 6 个月的时间,优化后的 Teams 2.0 消耗的内存将只有 Teams 1.0 上相同帐户的一半。2023年的新版本 Teams 发布时,微软称邀请了第三方基准测试公司 GigaOm 在三台不同的机器(低端、通用和高性能)上测试了新旧 Teams 的性能,新版本性能明显更为优异:
启动应用程序的速度提高 2 倍
加入会议的速度提高 2 倍
切换聊天/频道的速度提高了 1.7 倍
消耗的内存最多减少 50%
占用的磁盘空间最多减少 70%

该如何选择跨平台框架

虽然多端统一带来很多便利,但跨平台框架并非万能。“跨平台意味着需要花费很多时间来解决平台差异性问题,同时要面临第三方库不够原生平台丰富健壮的现状。跨平台其实是牺牲部分功能和体验,换取开发速度和一致性的权衡,并不是业务开发的银弹。”腾讯微信客户端工程师方秋枋曾说道。目前并没有一个能完善解决这些问题的解决方案。事实上,GitHub 重写应用的团队也曾表示,Web 并非完美的平台,不过原生应用也不是。使用 Electron 重写原生应用只不过是在不同的权衡点之间进行了交换。方秋枋认为,从框架开发者的角度,跨平台开发的难点就在于处理平台差异性。从框架使用者的角度,难点在于如果框架出问题了,维护成本将会变得非常高。那么企业如何选择适合自己的跨平台开发框架?

阿里巴巴淘系技术部资深无线技术专家黄刚曾分享道,从应用的 Life Cycle 来看,研发阶段只是其中一个阶段,是否具有长久的可维护性、可运维性也是需要重点考虑的问题。其表示,如果在当下的业务形态里,前台展现是高度产品化、比较稳定或者对于性能以及交互的要求极度苛刻的,那么 Cross-Platform First 未必是一个理想的选择。一方面,多平台开发工作在整个研发成本里的占比不高,ROI 未必高;另一方面是 Cross-Platform First 是以牺牲平台特性为代价来达到跨平台的一致性。在达到一致性表现的过程中,工程上的填坑成本可能更高。反过来讲,如果当前的业务,前台的呈现比较不稳定并且整个前台开发占比较高,那么应用跨平台框架的收益就比较高了。从 Hybrid 的方案到 React Native、Weex 再到 Flutter,本质上都是在研发成本、灵活性、性能体验三者间找一个平衡点,只是大家切入的点不太一样,最终导致整个解决方案有了不同。假设现在你要做一个新的 App,可能整个开发团队是多前端、少客户端的,那可能比较建议考虑 Hybrid 的模式;如果对性能要求比较高,可以考虑 Weex 或者 React Native;反过来,如果是客户端同学比较多,那么考虑下 Flutter 未尝不可。


WhatsApp 弃用基于 Electron 框架构建的桌面应用程序

WhatsApp 已于2023年6月下旬正式宣布弃用 Windows 上基于 Electron 的桌面应用程序,促使用户转而使用新推出的原生应用程序以实现不间断访问。此举旨在在桌面设备上提供更加优化、稳定且功能丰富的消息传递体验。早在一个月前,WhatsApp 就在应用程序的主屏幕上显示了一个弃用倒计时,以提前告知用户。虽然有一些用户表达了对快速过渡、以及原生应用程序中业务工具(如目录管理和快速回复)短缺的不满。但现在所有打开基于 Electron 的 WhatsApp 桌面应用程序的用户,都会看到一个 “APP expired” 的通知消息,明确通知其该应用程序已不再受支持。目前,Electron 应用程序的弃用似乎仅限于 WhatsApp Desktop for Windows。

Electron 框架允许开发人员通过开发可跨 Windows 和 macOS 等不同操作系统运行的单一代码库,使用 Web 技术创建跨平台桌面应用程序。但 WABetaInfo 指出,“由于它们是为了在不同的操作系统上工作而开发的,所以并没有真正优化,且可能会占用大量的资源。原生应用程序肯定可以提供更流畅、更直观的用户界面,更好的响应性和更强的稳定性,提供更强大和可靠的信息服务,这也是 WhatsApp 决定为其用户构建原生解决方案的原因。”

用户需要从 Microsoft Store 下载适用于 Windows 的原生桌面应用程序。对于仍然需要使用商业工具的用户,可以考虑使用 WhatsApp Web 作为临时解决方案。


Electron开发的神级产品


Visual Studio Code

这是一款由微软开发的轻量级代码编辑器,它提供了丰富的功能和插件生态系统,支持多种编程语言和开发工具。Visual Studio Code具有高度可定制性,用户可以根据自己的需求选择和安装各种插件,使其成为适用于不同编程环境的强大工具。

Slack

作为一款广受欢迎的团队协作工具,Slack提供了实时通信、文件共享、任务管理等功能。它的桌面客户端使用Electron开发,具有良好的性能和用户体验,使用户能够方便地与团队成员进行沟通和协作。

Discord

作为一款面向游戏玩家的语音、视频和文本聊天应用程序,Discord使用Electron开发,可以在游戏过程中提供实时的语音通话和群聊功能,方便玩家之间的交流和协作。

Atom

这是一款由GitHub开发的开源代码编辑器,它使用Electron作为底层框架,具有高度可扩展性和自定义配置的特点。Atom支持丰富的插件扩展,用户可以根据自己的需求选择和安装各种插件,从而打造出适合自己的开发环境。

Microsoft Teams

作为微软开发的团队协作工具,Microsoft Teams提供了聊天、会议、文件共享等功能,与Office 365集成。它的桌面客户端使用Electron开发,为用户提供了更好的性能和用户体验。微软在使用Electron框架开发Teams后就饱受性能的困扰,后来使用Edge WebView2引擎重写了Teams,使用WebView重写后的Teams首先体积减小了50%,内存占用减少了50%,各种相关性能提升了2倍以上,虽然性能依旧比不上原生PC应用,但是相比Electron饱受诟病的大和慢,新版Teams的体验上升了不是一个档次。很多比较知名的软件都是使用Electron作为开发框架开发的,比如Visual Studio Code、PostMain、GitHub等等,据说桌面版QQ和WeChat也是使用Electron进行开发的。

因此很多写桌面软件的程序员都开始拥抱Electron,有人说Electron体积大,其实这并不是槽点,因为现在硬盘也便宜,占用内存高、性能低是我不用它的原因之一,当然也有其他原因。像Visual Studio Code这样的IDE要不要考虑性能问题?肯定是要考虑的,但是性能有时候对于一个IDE来说其实并不是太重要!有时候编译一个项目的代码等个几秒十几秒甚至更长时间都是可以接受的,有些项目编译一下花几个小时也是很常见的。打开一个项目花个几十秒也很正常。像这些通用型软件,看似许多人用,但是前端负担真不高或者不在乎,且一些大公司可以使用一些手段去优化前端性能,但小公司真不一定有能力去解决这个问题。

另外,现在基本上已经很少有公司去写通用型软件了,PC软件大多数都是用来写企业级应用或者上位机软件,企业级应用或许还可以使用Electron来开发,但是上位机软件一般都是单机软件,对于软件的性能要求很高,使用Electron很难做到那么高的实时性和性能。而且,Electron是基于Web技术开发的,上位机软件需要对接的大多数硬件都不支持Web协议通讯,当然也可以使用一些技术手段去支持,但是只是为了界面好看而使用Electron,但在对接硬件这块却要自己造轮子,我就问你值不值?

工业软件大多数注重性能和功能,对于软件界面基本没什么要求,因此至少Electron在工业软件行业里开不了花!

并且,因为Electron占内存和性能低的原因,如果使用Electron开发上位机软件,那么机器的配置就需要进行提升以弥补软件带来的性能损耗,增加硬件成本,互联网的那套思维“性能不够,硬件来凑”其实根本不适合传统行业!而且因为Electron内置了Chromium,其本身只是一个浏览器,会不会带来一些兼容性问题,这个也值得讨论,毕竟客户端版本五花八门!很多其他程序员劝我使用Electron的理由基本都是:你看,XX大公司的软件都是Electron开发的,如果它真的那么差,为什么XX大公司会用?

首先,这个逻辑就不对,比如说现在的Go、Rust很多大公司都在用,但这两门编程语言目前的流行度一个才1.37%、一个才0.91%,PHP的流行度都还有1.90%!如果按照大公司在用的东西就是好东西这个逻辑,那么其他公司非傻即笨吗?

其实,用不用Electron最终还是得看一个软件的定位是怎样的,一个软件的定位如果需要给人一种赏心悦目的感觉,对性能要求不那么高,开发和学习成本低且这个公司有能力去解决使用Web技术开发桌面软件带来的一系列问题,那么使用Electron或者像Electron这样的框架来构建桌面程序就一点问题没有,反之就是有问题的。因此,Electron好不好不是大公司决定的,而是市场决定的,如果使用它得人少,说明它的身上还有一些槽点,作为程序员是需要去拥抱新的技术和理念,但是也要考虑实际问题,不是吗?


Skype

作为一款全球知名的通信应用,Skype新的版本使用Electron开发,支持语音通话、视频通话和即时消息功能。它提供了跨平台的通信解决方案,用户可以方便地与朋友、家人和同事进行沟通和交流。

Slack Desktop

作为Slack团队开发的桌面客户端,它使用Electron框架开发,提供了更好的性能和用户体验。Slack Desktop使用户能够方便地使用Slack的各种功能,包括实时通信、文件共享和任务管理等。

Figma

作为一款基于云的设计工具,Figma使用Electron开发,用于协作设计和原型制作。它支持多人实时编辑和评论,用户可以方便地与团队成员共同工作,提高设计效率和质量。

WhatsApp Desktop

WhatsApp Desktop是一款由WhatsApp开发的桌面应用程序,它允许用户在计算机上使用WhatsApp进行即时消息和通话。用户可以使用它方便地与手机上的联系人进行同步,并通过计算机的键盘和鼠标发送消息、共享文件和进行语音通话。其提供了与移动应用程序相似的用户界面和功能,使用户能够无缝地在手机和电脑之间切换,并在多个设备上同时使用WhatsApp。从一上下文知晓其可能已经停止维护开发了。

Postman

Postman是一款用于API开发和测试的工具,它提供了一个友好的界面和丰富的功能,帮助开发人员轻松地构建、测试和调试API。使用Postman,开发人员可以发送HTTP请求并查看响应结果,还可以创建和管理API文档和测试集合。其支持各种常见的HTTP请求方法和认证方式,并提供了强大的调试和监视功能,帮助开发人员更高效地开发和测试API。此外,Postman还提供了团队协作和版本控制功能,使开发团队能够更好地协同工作和管理API项目。