# 导读

使用Electron开发客户端程序已经有一段时间了，整体感觉还是非常不错的，其中也遇到了一些坑点，本文旨在从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图，长文预警～】

# 一、桌面应用程序

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

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

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

# 1.1 原生开发

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

• 使用C++ / MFC开发Windows应用
• 使用Objective-C开发MAC应用

# 1.2 托管平台

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

• 使用C# / .NET Framework(只能开发Windows应用)
• Java / Swing

不过，上面两种对前端开发人员太不友好了，基本是前端人员不会设计的领域，但是在这个【大前端😅】的时代，前端开发者正在想方设法涉足各个领域，使用WEB技术开发客户端的方式横空出世。

# 1.3 WEB开发

使用WEB技术进行开发，利用浏览器引擎完成UI渲染，利用Node.js实现服务器端JS编程并可以调用系统API，可以把它想像成一个套了一个客户端外壳的WEB应用。

在界面上，WEB的强大生态为UI带来了无限可能，并且开发、维护成本相对较低，有WEB开发经验的前端开发者很容易上手进行开发。

本文就来着重介绍使用WEB技术开发客户端程序的技术之一【electron】

# 二、Electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

https://electronjs.org/docs

https://juejin.im/post/5c67619351882562276c3162#heading-5

# 2.1 使用Electron开发的理由：

• 1.使用具有强大生态的Web技术进行开发，开发成本低，可扩展性强，更炫酷的UI
• 2.跨平台，一套代码可打包为Windows、Linux、Mac三套软件，且编译快速
• 3.可直接在现有Web应用上进行扩展，提供浏览器不具备的能力
• 4.你是一个前端👨‍💻～

当然，我们也要认清它的缺点：性能比原生桌面应用要低，最终打包后的安装包和其他文件都比较大。

# 2.2 开发体验

兼容性

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

Node环境

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

跨域

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

强大的扩展性

借助node-ffi，为应用程序提供强大的扩展性（后面的章节会详细介绍）。

# 2.3 谁在用Electron

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