Electron 小白入门手册——跨端桌面应用开发的前世今生简史

概述

今天突然想起这个主题，虽然我们这个专栏做的是 electron 的入门教程，但对于整个跨端桌面应用开发的技术发展还是有必要了解了解。

所以呢，今天我们就从原生桌面开发、QT、NW、Electron、Tauri、Flutter 聊聊跨端桌面应用开发的前世今生。

总览对比

	原生开发	QT	NW	Electron	Tauri	Flutter
性能	⭐️⭐️⭐️	⭐️⭐️	⭐️	⭐️	⭐️⭐️	⭐️⭐️
安装包大小	⭐️⭐️⭐️	⭐️	⭐️	⭐️	⭐️⭐️⭐️	⭐️⭐️
原生体验	⭐️⭐️⭐️	⭐️⭐️	⭐️	⭐️	⭐️	⭐️
跨平台	❌	⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️⭐️
开发效率	⭐️	⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️	⭐️⭐️
社区活跃度	⭐️⭐️	⭐️	⭐️⭐️	⭐️⭐️⭐️	⭐️⭐️	⭐️⭐️

注：

• ⭐️⭐️⭐️，三颗星，表示：优
• ⭐️⭐️，二颗星，表示：良
• ⭐️，一颗星，表示：中
• ❌，红叉，表示：不支持
• 安装包大小：越小越好
• 原生体验：越能无缝对接越好（有一些业务可能需要调用原生的库或 API，此时原生体验越好越容易调用原生的库或 API）

上述对比结果缺少数据支撑，比较多是个人主观判断，如有错误欢迎指出

细说前世今生

接下来我们根据出现的时间先后顺序，依次聊聊这几种桌面端开发技术框架的由来和细节。

以下六项可以简单做个分类：

1. C 语言家族：原生开发、QT
2. Chromium + Node 家族：NW、Electron
3. Webview 家族：Tauri
4. 自立山头：Flutter

原生开发

大学读计算机系的同学或者有过 C# 开发经验的通过应该比较熟悉，无论是 windows、macOS、Linux 的原生开发基本都离不开 C 语言的家族，C、C++、C#、Objective-C 等

优点在于更接近底层，灵活性更高，理论上性能阈值更高

缺点则是学习门槛高，而且不支持跨平台

类比成移动端开发的话，桌面端原生开发就有点类似 iOS 下的原生开发和安卓下的原生开发，可以做的事情相对更多、限制更少（因为跟接近系统底层），成品的性能理论上也更好。

QT

QT 应该算是 C++ 领域比较流行的跨平台桌面端开发框架。QT 是两个挪威人在 1995年 创建的框架，经过这么多年的积累，稳定性上有一定的保障

QT 自己实现了一套绘制引擎，使得用 QT 开发出来的桌面应用在不同操作系统中的渲染都尽可能保持一致。而且还提供了很多有用的 API（网络、剪切板、文件系统等等），提高开发者的效率

不过 QT 并不是完全免费开源的，个人学习使用还好，公司使用的话一定要留意一下这块

NW

NW，NW.js 是比较早起使用 Chromium + Node 开发桌面应用的框架（是不是最早有待考证） 。这套家族下的优缺点都很明显

优点：得益于 Chromium ，可以让我们前端开发者直接使用 HTML、CSS、JS 前端三剑客编写界面，使用 Node 访问操作系统，对于前端开发者来说，几乎是 0 门槛

缺点：基本上继承了 Chromium 的所有问题，打出来的包体积大，并且占用的内存也高。（想象一下，如果同时打开 5 个这类应用，相当于同时开了 5 个谷歌浏览器，内存小哥表示瑟瑟发抖 (/□＼*) ）

据说 NW 跟 Electron 的渊源还不浅，NW 是 2011 年 Intel 发布的框架，Electron 是 2013 年 GitHub 发布的，Electron 的作者以前在 NW 的团队干过（据说在 NW 中贡献第二多的大佬就是 Electron 的作者）

对于 Chromium 和 Node 的整合，NW 的做法相对来说比较高耦合。不幸的是 Chromium 的版本更新又异常的快，高耦合带来的问题之一就是 NW 中整合的 Chromium 经常会落后于 Chromium 最新的版本

另外，截至 2022年08月26日， NW.js 的版本还是停留在 0 开头，业界都晓得主版本号 0 和 1 的含义和区别，我就不展开了~

Electron

Electron 的优缺点跟 NW 差不了太多，两者都是 Chromium + Node 家族 ，很多东西都很像

值得一提的是，Electron 在整合 Chromium 和 Node 的技术上，实现了两者的低耦合，从而使其在更新 Chromium 和 Node 的版本时不会有太大的阻碍

整体感觉 Electron 封装的系统 API 比较 NW 多一点，用起来比较便捷一些，很多系统性的功能都不用重新造轮子。另外 Electron 的社区也相对比较活跃一点

关于 Electron，有一个很关键的问题值得探讨——Electron 除了经常被人吐槽包体积大之外，还经常被人吐槽性能堪忧。这时我们前端小伙可能会踊跃站出来，随口一道：VSCode 也是用 Electron 做的，为什么 VSCode 的性能表现就这么好呢？

这时我们不得不面对一个现实，VSCode 是微软团队花了多年时间一点点优化起来的（2015 年发布至今），据说很多关键点任务的处理都用 C++ 重写依赖。相比于这些巨大投入，Github 的 Atom 就显得苍白很多。同样是编辑器，缺乏大投入的 Atom 终究逃不过性能堪忧而被淘汰的命运定式~

Tauri

Tauri 是 webview 家族的新秀，在 2021 年 github star 排行榜单中，Tauri 以一年增长了 18k 的优势斩获排行榜第五名

Tauri 的界面渲染部分交给了系统的 webview，跟系统交互、IO 处理部分使用了 Rust 语言。整个框架的卖点是：打包体积小、运行速度快

当然，webview 家族成员不止 Tauri 一位成员，还有诸如： neutralinojs、electrino、go-astilectron、wails 等前辈大哥

他们的共同点是：

• 界面渲染部分交给系统的 webview 来执行，这样，界面部分既能确保可以使用前端三剑客编程，也可以规避 Electron 需要打包整个 Chromium 导致最终包体积过大的问题
• 跟系统交互、做 IO 处理部分会交给一种语言处理（上述框架都有所不同），有用 rust 的，也有用 C++ 的，也有用 go 的

值得讨论的是，这种做法并不是什么新招，上述前辈框架很早就已经布局尝试，但还是绕不开一个问题：不同系统下 webview 表现可能不一致的兼容性问题。据说当年 Chromium + Node 家族 家族正是为了解决这类兼容性问题才有了如此大胆的想法，不惜包装一个 Chromium 也要确保各系统的渲染结果一致，尽可能减少开发者对兼容性的烦恼

个人感觉，Tauri 目前比较火的原因可能有以下两个：

1. webview 无论在 windows 还是 masOS 上都迎来了 V2.0 的时代，据说两大平台都在着手推进更新迭代
2. rust 语言的 “快”，给 Tauri 加上了高性能的标签

Flutter

Flutter，做移动端开发的同学应该不会陌生，经过几年的迭代，目前国内外都积累了一定的用户。从其官网的配图来看，其野心确实不小，感觉想把目前市面上有的硬件都支持完

相比于其它框架，Flutter 可属是另起炉灶型，渲染引擎自己造，编程语言自己造，有一种颠覆者的气势

当然，当颠覆者并不容易，也正因如此，被很多网友吐槽生态不完善、经常要重复造轮子等

总结

前面聊了那么多，很多内容都只是蜻蜓点水过一下，很多框架都没有亲身用过，如有错误麻烦在评论区留言哈

整体来说，无论是跨平台桌面开发还是我们软件开发领域，很大程度上都在持续追求高质量、高效率的道路上持续奔跑。就像是海贼王里的“ONE PIECE”，还是棋魂中的“神之一手”，虽然可能永远都不会触达得到，但并不妨碍我们对此追求的热情

软件开发没有银弹，正因没有这颗银弹，才吸引着我们每天都努力前行，找到在当前环境下、在当前条件下、在当前资源下的最优解

另外，等出外了这个专栏后，打算基于这个专栏的项目分别再出一套： Tauri 版和 Flutter 版，顺便可以更好对比对比这三个明星框架

此次就学完了本文的所有内容 （づ￣3￣）づ╭❤～

老规矩，对文中任何一点有疑问的欢迎在评论区留言，一起完善文章内容 (￣▽￣)~*

如果各位看官对本专栏感兴趣的话，可以查看 Electron 小白入门手册 或 Electron 小白入门手册——开篇 了解更多内容 \(^o^)/