干货 | Electron在DevTools中的探索与实践

作者简介

隋丰蔚，携程无线平台研发部前端工程师，现负责开发者工具NFES Developer Tools的设计与研发。

引言

目前，主流的桌面应用开发方法有几种，一是使用纯Native技术栈进行开发，比如说Windows上使用C++，Mac上使用Objective-C。这种方式能够实现最好的性能，但是开发成本比较高，周期也长，而且需要分别开发Windows和Mac版本，人员投入比较大。

二是基于Qt等Native框架进行开发，这种方案可以获得接近Native的性能体验，但是学习成本仍然较高，而且界面开发效率不高，没有办法满足快速迭代的需求。

第三种则是以Electron为代表的，允许我们使用web技术开发桌面应用的框架。这种方案背后是整个web技术体系，资源丰富，跨平台性好，开发效率高，甚至于我们可以使用一套代码逻辑同时开发桌面应用和web应用，特别适合企业用来开发一些偏业务型的桌面应用。而且，Electron由GitHub维护，社区活跃度高，像我们熟悉的VS Code，Skype都是基于Electron构建的。

因此，如果不是要开发对性能要求很高的桌面应用，团队中web开发人员又相对充足，Electron是一个比较合适的选择。

本文将介绍Electron、开发过程中可能会遇到的问题和场景，以及Electron在DevTools中的实践，希望可以为想要开发Electron应用的小伙伴们提供一点参考或者思路。

一、初识Electron

根据官方文档，基于Electron，我们可以使用JavaScript，HTML 和 CSS构建跨平台的桌面应用。目前Electron支持的平台有Mac, Windows 和 Linux。

1.1 Quick Start

先来看一下如何使用Electron快速构建一个桌面应用，目录结构如下图所示：

其中，index.html就是我们平时开发的web页面，负责界面展示。main.js则是整个Electron应用的入口文件，如下：

main.js中首先引入了app和BrowserWindow模块，app模块主要负责应用级别的事情，包括应用的生命周期。可以看到，Electron初始化完成之后，会触发app ready，这时就可以开始做自己的事情了，比如说在这里我们创建了一个窗口，然后加载了index.html。如此，一个Electron应用就可以运行了，Easy Peasy。

1.2 Electron工作机制

之所以可以使用web技术构建桌面应用，其实是因为Electron做了一个整合，它集成了Chromium和Node.js，同时提供了一系列可以操作原生GUI的API。

而能够做这个整合，首先得益于Chromium和Node.js都是基于v8引擎来执行js的，所以给了一种可能，他们是可以一起工作的。

但是有一个问题，Chromium和Node.js的事件循环机制不同。我们知道，Node.js是基于libuv的，Chromium也有一套自己的事件循环方式，要让他们一起工作，就必须整合这两个事件循环机制。

如上图所示，Electron采用了这样一种方式，它起了一个新的线程轮询libuv中的backend fd，从而监听Node.js中的事件，一旦发现有新的事件发生，就会立即把它post到Chromium的事件循环中，唤醒主线程处理这个事件。