1. Electron 发展现状

2020年5月SpaceX发射的Dragon 2载人航天飞船，使用了Chromium和JavaScript来构建用户界面。消息一出，立即引起了技术界的热烈关注，一个Web框架被使用到对效率和可靠性要求极高的航天应用场景，一方面反映了SpaceX在技术领域的敢于突破传统的实干精神，同时也把两个跨领域的技术：桌面客户端和Web技术栈的完美结合案例带入了大众的视野。

Electron作为一个优秀的PC端应用开发框架，主要应用在开发Windows/PC的桌面应用。本人在2017年公司开始做一个PC端的游戏控制终端，类似于我们现在看到的自助唱K终端、麦当劳自助点餐和地铁站自助购票等终端，一方面，需要像传统WEB项目一样快频繁迭代UI界面和请求网络资源，另一方面需要使用设备端的原生资源，比如外部进程，串口/USB设备等。在这种需求的前提下，我们没有进行太多的甄选而选择了NW.js(和Electron 组成架构几乎一样), 而2019年新开了一个PC端的项目，我们又选择了electron来开发。其实NWJS和Electron的区别不大，这里主要介绍Electron相关的知识。

2 PC客户端的横向比较

时间倒回到2015年以前，如果大家选择桌面端的开发框架，会在MFC，Qt和C#等框架中选择。这三者都有比较完善的功能类库，比如消息机制、组件钩子等，技术栈相对贴近操作系统底层，开发者需要了解Windows API 和 Linux系统的一些知识，入门的门槛也相对较高。比如Websocket这些在HTTP协议中非常成熟的应用协议，在这些框架中需要额外调用动态库或者插件来实现，架构的设计、代码的层次远比Web技术栈更加复杂。

当然这里不是完全的摒弃这三个UI框架的价值，在一些计算密集型场景，比如音视频播放、图像处理，或者说工业控制领域，如果现成已经有技术积累是在这几个框架的基础之上，那么继续采用MFC/QT/C#框架会是更好的选择。

在小团队或者应用场景相对简单的背景下，采用Electron会是一个好的选择。

3 Electron的框架介绍

这个公式阐明了Electron的功能组成:

Chromium：作为google推出的浏览器内核，大规模应用在了Chrome浏览器、360浏览器、QQ浏览器、微信内嵌网页等应用场景。

NodeJS: 把JavaScript技术栈延伸到了服务器和操作系统(文件操作、异步读写、进程/线程管理等)领域，让前端技术的可应用场景进一步丰富和下沉。

Native API: 对Window、Linux和IOS的跨平台做了兼容处理，把窗口操作、弹窗消息、操作系统信息等API封装了一遍, 使得Web界面和Native功能完美结合到一起。

4. Electron的应用场景

A. 文件管理

比如开源的PicGo，一个图片管理软禁，github Star数已经12K+，就是集成了本地图片管理、云端上传等功能，类似于一个本地/远程同步的电子相册。

技术栈是Vue+Electron

阿里云OSS 的PC客户端也是基于Electron，前端框架是angular。

B. 前端IDE

微软推出的 visual code是基于Electron，Electron的强大之处在于集成了很多前端的插件，比如代码规范、找回历史代码、代码比对、注释信息格式、甚至取变量名也有插件。

而且媲美notepad++的启动速度，以及永远免费的使用权限，受到了大批开发者，尤其是前端开发者的青睐。

C. 触屏客户端

国内第一家VR游戏自助终端-肉丸VR（现在改名为"弥天"VR）就是本人主导开发的，集成了游戏界面列表、玩家自助选择游戏、自助付费、体验游戏、商户运维等功能，最大的有特色就是界面的更新和迭代采用的是web前端技术，游戏进程的管理采用的是native模块，让客户端具有了前端界面开发的高效，以及native技术在操作系统层面的丰富资源。关于这其中的详细架构，在其它文章中国再详细阐述。

像国内现在随处可见的自助K歌、自助售货机等智能终端，它们的UI也有很多采用的是chromium + web + native的架构，与Electron的技术栈是异曲同工的。

后续的章节会继续介绍Electron的详细技术点，以及实际开发中会遇到的常见问题，请大家持续关注。

Electron介绍(一)相关推荐

electron 介绍
地址:https://github.com/electron/electron electron 是一个跨平台的桌面应用开发框架,用HTML css js 的技术开发桌面上面可以安装的软件,可以让前端 ...
Electron教程（一）Electron介绍
Electron介绍 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到 ...
Electron介绍
1 Electron 快速入门简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.j ...
用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld
场景 Electron介绍 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js ...
Electron教程1_Electron介绍
Electron介绍 Electron 是由Github开发的,用HTML , CSS 和JavaScript 来构建的跨平台桌面应用程序的一个开源库. Electron 通过将Chromium 和N ...
electron 安装import_Electron: 从零开始写一个记事本app
Electron介绍简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...
[Electron]仿写一个课堂随机点名小项目
自从前几个月下了抖音,无聊闲暇时就打会打开抖音,因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频:随机点名于是仿写了一个课堂点名小项目,算是对Electron的一个简单的认识,有 ...
第八节 Electron主进程和渲染进程之间的通信
系列文章目录第一节 electron 介绍第二节创建electron项目并启动第三节 Electron运行流程 . 主进程渲染进程并使用nodejs 第四节 Electron 调用H5事件结合 ...
electron开发计算器
electron完成一个简易的桌面计算器效果: 目录什么是electron,它能做什么使用electron展示一个桌面应用程序的界面(简单的窗口展示) electron中菜单的添加和配置 ele ...
使用Squirrel创建基于Electron开发的Windows 应用安装包
我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...

Electron介绍(一)