快速了解Electron：新一代基于Web的跨平台桌面技术

Posted 2022-01-08 imstudy

本文引用了作者“ ConardLi”的《用JS开发跨平台桌面应用，从原理到实践》一文部分内容，原文链接：segmentfault.com/a/1190000019426512，感谢原作者的无私分享。

1、引言

现在开发IM应用动不动就要求多端——即android端、ios端、PC端、Web端等，Android端和iOS端作为两种不同的移动端技术，单独开发和维护还能理解，PC端和Web端如果要单独开发那就有点头大了，必竟开发传统的PC桌面应用成本太高（QT这类技术跟Web技术相比，上手难度大的多，而且太小众）。所以，很大情况下大家都是PC富客户端和Web端二选一，对于比较磨叽的老板、产品经理或客户来说，这是个很费口舌的事情（你懂的。。。）。

在即时通讯网的官方技术群里不只一次看到大家在讨论Electron技术，作为新一代基于Web的桌面技术，已经被越来越的产品采用，成熟度和认可度都不错，Electron技术可以降低开发PC端的成本和难度，或许PC富客户端和Web端再也不需要二选一了。

本文将从入门者的角度，为你快速讲解Electron到底是个什么技术，包括案例介绍、技术优势、技术体验、实现原理等。

 

（本文同步发布于：http://www.52im.net/thread-2616-1-1.html）

2、传统桌面应用程序

 

桌面应用程序，又称为 GUI 程序（Graphical User Interface），但是和 GUI 程序也有一些区别。桌面应用程序 将 GUI 程序从GUI 具体为“桌面”，使冷冰冰的像块木头一样的电脑概念更具有 人性化，更生动和富有活力。

我们电脑上使用的各种客户端程序都属于桌面应用程序，近年来WEB和移动端的兴起让桌面程序渐渐暗淡，但是在某些日常功能或者行业应用中桌面应用程序仍然是必不可少的。

传统的桌面应用开发方式，一般是下面两种。

1）原生开发：

直接将语言编译成可执行文件，直接调用系统API，完成UI绘制等。这类开发技术，有着较高的运行效率，但一般来说，开发速度较慢，技术要求较高，例如：

a. 使用C++ / MFC开发Windows应用；

b. 使用Objective-C开发MAC应用。

2）托管平台：

一开始就有本地开发和UI开发。一次编译后，得到中间文件，通过平台或虚机完成二次加载编译或解释运行。运行效率低于原生编译，但平台优化后，其效率也是比较可观的。就开发速度方面，比原生编译技术要快一些。例如：

a. 使用C# / .NET Framework(只能开发Windows应用)；

b. Java / Swing。

不过，上面两种对前端开发人员太不友好了，基本是前端人员不会涉及的领域，但是在这个"大前端"的时代，前端开发者正在想方设法涉足各个领域，使用WEB技术开发客户端的方式横空出世——这就是本文正在介绍的“Electron”技术。

3、什么是Electron技术？

Electron是由Github开发，用html，CSS和javascript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。通过Node它提供了通常浏览器所不能提供的能力。 

Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来（PS：据说这个Atom看起来很漂亮，但很难用...）。这两个项目在2014春季开源。

其实，Electron在早期一直是由原作者 Cheng Zhao 一个人维护和开发的（他现在是 Github 北京 Atom 编辑器开发 team 的一名工程师）。在这之前，Zhao主要进行node-webkit（现在叫nw.js）的开发工作。从概念上，Electron与nw.js很相似，但是他们有很重要的区别：一个主要的不同点是Electron 通过 Googles Chromium Content Module 来使用 Chromium 的功能，nw.js 则直接使用了 Chromium本身。

PS：Electron的作者 Cheng Zhao 应该是个中国人，但网上能查到的信息非常少，连中文名都没有（大佬就是低调...），这个框架作者还为一本中文译名叫《跨平台桌面应用开发：基于Electron与NW.js》的书写了序（见下图）。

 

Electron 发展历程中的里程碑：

 

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具（看看谁在使用Electron）。

Electron资源：

1）Electron官网：https://electronjs.org；

2）Electron Github：https://github.com/electron；

3）Electron开发手册：https://electronjs.org/docs。

4、Electron为何如此迷人？

可能主要是因为，猿类里的亚种——“前端开发”，又有了新的出路了吧，已经在岗的前端也有了新一年的 KPI/OKR，刚起步的创业公司可以只拉一个前端就能开发跨平台的多个桌面客户端... ...（开个玩笑）。

1）可以用 Web 前端技术开发跨平台的桌面客户端：

这是 Electron 最迷人的地方，究其根本是因为它是建立在 Chromium 和 NodeJS 之上的，一个负责界面，一个负责背后的逻辑，典型的"你负责貌美如花，我负责赚钱养家"，为什么 Electron 能够开发跨平台的桌面应用也就可以理解了。

而对于前端开发来说，“不要和老夫说什么 C++，Java，老夫行走江湖就一把 JS，遇到需求就是干”。前端开发可以用自己熟悉的方式去写应用界面，逻辑部分也还是 JS，如果你精通 Node 后端，那后端也可以插一脚，“鸟枪换大炮”，你开发客户端的能力有一种“忽如一夜春风来”的感觉。

但是，不同系统间还是会有很大的不同，“同一套代码，编译出跨平台的多个客户端”，话是这么说，但你得因为系统的不同做一些额外的处理，以使得打包出的不同系统下的应用都可以正常工作，这可能是一些“if - else”的成本，但相比于那80%都能完全复用的代码，这些成本已经很小了。

综上所述：一个 Web 前端开发者可以花很少的成本去上手 Electron，而相比于以前开发多平台客户端的成本，利用 Electron 开发多平台客户端的成本是极低的。

2）可以从 NodeJS 的生态获得极大的助力：

因为 Electron 是基于 NodeJS 的，意味着，NodeJS 这个大生态下的模块，Electron 也都可以用，这减少了很多造轮子的时间，你要写一些逻辑将首先思考有没有成熟的模块可以引入，而不是自己吭哧吭哧闭门造车，自己造时间精力会大量得被消耗，上路还可能翻车。

Electron 从 NodeJS 获益有2个方面，一个方面是如现代的 web 项目一般，开发构建流程可以引入很多成熟的包去打造出适合自己项目的开发工作流，另一个方面就是其应用本身也可以依赖需要的包去完成自己的功能。

3）“这个东西做Web版就可以，干吗还要开发PC客户端版？”

既然 Electron 是用 Web 技术写客户端，那么看上去 Electron 要做的事，可以搬到网站上。

为什么还要搬到PC客户端，这里有3个角度的回答：

a. 用户角度： 客户端是一款独立的软件，其综合体验一般都是比网站高的，尤其是涉及到「工具」范畴的应用，此外，特定的用户群体也会有类似的使用习惯；

b. 发行方角度： 客户端是另一种产品形式，是一种产品的分发方式和入口，客户端可以实现很多本地应用独有的需求去触达用户，也能提供更加可靠的服务；

c. 开发角度： 终于...不用考虑浏览器兼容了，Chromium 也足够开发使用一些先进的 CSS 或 JS 特性，我们现在还没计划引入 webpack 和 babel，因为现在好像够用，克制才是爱，除了写起来爽，对于开发来说，终于跳出了浏览器的沙盒，你可以自己去控制 Electron 中的“浏览器”，莫名的开心。

这些综合起来回答这个小节的问题就是，用 Electron 开发客户端，用户体验好，开发麻烦小，功能更强大，老板脱发少。

4）那在 Electron 和 NW.js 之间，为啥选择前者？

我没怎么用过 NW.js，但当时在没有时间深入体验的实际情况下，我选择生态好的。

Electron 相关的社区生态很好，之后的开发过程也证明了这一点，遇到的问题基本都能通过 Stackoverflow 找到，如果没有找到，新开一个问题或者去 Github 提 Issue 都可以得到较快的解决，除非是一些已知的问题或一些看文档可以解决的问题，这类问题可能会被忽略过去。

所以，生态更好一些，我选择了 Electron。

5）总结一下，使用Electron开发的理由：

a. 使用具有强大生态的Web技术进行开发，开发成本低，可扩展性强，更炫酷的UI；

b. 跨平台，一套代码可打包为Windows、Linux、Mac三套软件，且编译快速；

c. 可直接在现有Web应用上进行扩展，提供浏览器不具备的能力；

d. 你是一个前端??‍??～

当然，我们也要认清它的缺点：性能比原生桌面应用要低，最终打包后的应用比原生应用大很多。

5、Electron的开发体验

兼容性：虽然你还在用WEB技术进行开发，但是你不用再考虑兼容性问题了，你只需要关心你当前使用Electron的版本对应Chrome的版本，一般情况下它已经足够新来让你使用最新的API和语法了，你还可以手动升级Chrome版本。同样的，你也不用考虑不同浏览器带的样式和代码兼容问题。

NodeJS环境：这可能是很多前端开发者曾经梦想过的功能，在WEB界面中使用Node.js提供的强大API，这意味着你在WEB页面直接可以操作文件，调用系统API，甚至操作数据库。当然，除了完整的 Node API，你还可以使用额外的几十万个npm模块。

跨域：你可以直接使用Node提供的request模块进行网络请求，这意味着你无需再被跨域所困扰。

强大的扩展性：借助node-ffi，为应用程序提供强大的扩展性（更详细的介绍可以自行百度相关资料了解一下）。

6、那么，都有谁在用 Electron？

 

现在市面上已经有非常多的应用在使用Electron进行开发了，包括我们熟悉的VS Code客户端、GitHub客户端、Atom客户端等等。

印象很深的，去年迅雷在发布迅雷X10.1时的文案：

从迅雷X 10.1版本开始，我们采用Electron软件框架完全重写了迅雷主界面。使用新框架的迅雷X可以完美支持2K、4K等高清显示屏，界面中的文字渲染也更加清晰锐利。从技术层面来说，新框架的界面绘制、事件处理等方面比老框架更加灵活高效，因此界面的流畅度也显著优于老框架的迅雷。至于具体提升有多大？您一试便知。

你可以打开VS Code，点击“帮助”-“切换开发人员工具”，来调试VS Code客户端的界面：

 

Electron的官网还列举了更多案例：看看谁在使用Electron。

7、Electron的运行原理

 

如上图所示，Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API。

1）Chromium：

Chromium 是 Google 为发展 Chrome 浏览器而启动的开源项目，Chromium 相当于 Chrome 的工程版或称实验版，新功能会率先在 Chromium 上实现，待验证后才会应用在Chrome 上，故 Chrome 的功能会相对落后但较稳定。

Chromium为Electron提供强大的UI能力，可以在不考虑兼容性的情况下开发界面。

2）Node.js：

Node.js是一个让 JavaScript 运行在服务端的开发平台，Node 使用事件驱动，非阻塞I/O 模型而得以轻量和高效。

单单靠Chromium是不能具备直接操作原生GUI能力的，Electron内集成了Nodejs，这让其在开发界面的同时也有了操作系统底层 API 的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用。

3）系统API：

为了提供原生系统的GUI支持，Electron内置了原生应用程序接口，对调用一些系统功能，如调用系统通知、打开系统文件夹提供支持。

在开发模式上，Electron在调用系统API和绘制界面上是分离开发的，下面我们来看看Electron关于进程如何划分。

8、Electron项目和Web项目的区别

Electron核心可以分成2个部分：主进程和渲染进程。

主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了，只是载体改变了，从浏览器变成了window。

传统的Web环境我们是不能对用户的系统就行操作的，而Electron相当于NodeJS环境，我们可以在项目里使用所有的node api（Electron的作者相当机智...）。

简单理解：给Web项目套上一个NodeJS环境的壳，就是Electron技术。

项目结构：相比web项目，桌面项目多了一个进程，如下图所示。

 

项目迁移：如果要迁移项目到Web端，就需要把项目中的Electron提供的API和NodeJS的API完全剥离出来，只能遗留Web的代码，比如 node fs模块，Electron提供ipc 模块，都需要剥离。如果你一开始就打算双端程序，在开始写代码时应该对Web代码和Elecctron的代码进行分离，以便后期的迁移。

9、本文小结

Electron是一个年轻的开源项目，被原作者一个人维护了很长时间，这反而成了很好的开始。浏览器是个比较复杂的东西，很少能引起人的兴趣，但是Electron已经有了很多个开发者，还有很好的跨平台支持，有了个不错的开始。

最后说一些可以帮助你更好学习electron的基础知识：

1）Webpack： 最强构建工具，没有之一，了解webpack，你才能更好编写项目配置;

2）NodeJS： Electron是搭载谷歌v8内核的高性能的NodeJS环境 ，所有NodeJS能用的东西，我们都能用。是不是很酸爽？

附录：有关Web即时通讯技术的文章

Web即时通讯新手入门贴：
《新手入门贴：详解Web端即时通讯技术的原理》

Web端即时通讯技术盘点请参见：
《Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE》

关于Ajax短轮询：
找这方面的资料没什么意义，除非忽悠客户，否则请考虑其它3种方案即可。

有关Comet技术的详细介绍请参见：

• 《Comet技术详解：基于HTTP长连接的Web端实时通信技术》
• 《WEB端即时通讯：HTTP长连接、长轮询（long polling）详解》
• 《WEB端即时通讯：不用WebSocket也一样能搞定消息的即时性》
• 《开源Comet服务器iComet：支持百万并发的Web端即时通讯方案》

更多WebSocket的详细介绍请参见：

• 《新手快速入门：WebSocket简明教程》
• 《WebSocket详解（一）：初步认识WebSocket技术》
• 《WebSocket详解（二）：技术原理、代码演示和应用案例》
• 《WebSocket详解（三）：深入WebSocket通信协议细节》
• 《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
• 《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
• 《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
• 《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性》
• 《Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架》
• 《socket.io和websocket 之间是什么关系？有什么区别？》

有关SSE的详细介绍文章请参见：
《SSE技术详解：一种全新的HTML5服务器推送事件技术》

更多WEB即时通讯文章请见：
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

（本文同步发布于：http://www.52im.net/thread-2616-1-1.html）