我眼中的 Electron

之前发过一个装逼的朋友圈：感谢 Electron，我现在有两个身份了：前端开发和 Mac 端开发。

今年开始了一个全新的产品，但项目组并没有 Mac 的开发人员，然后我们前端就顺利的扛下了这面大旗，并且选择了火爆的 Electron（4w+ star）。

年底了，看大家在写各种各样的年终总结，想着我和 Electron 也打情骂俏了好几个月，也该写点东西。不过 Electron 已经够火了，能 google 到很多类似如何使用 Electron 开发桌面端应用的文章，比如用Electron开发桌面应用，也能找到官方中文文档，虽然滞后了一点。所以我也就不再赘述怎样从头写一个 Electron 应用了，在阅读下面的内容之前，最好能先跟随官方的 Quick Start 走一遍。

为什么选择 Electron

Electron提供了一个Nodejs的运行时，专注于构建桌面应用，同时使用web页面来作为应用的GUI，你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。

够火自不必说，Electron 的作者和 NW.js（原 node-webkit）是同一人，大家可以去知乎围观维护一个大型开源项目是怎样的体验？这个问题下作者的回答。官方也有 Electron 和 NW.js 的对比，相信作者在新的项目中有了新的思考，所以选择 Electron 是个对的选择，并且我们只需要开发 Mac 端（组内有 Windows 开发人员），没有对 XP 系统兼容的要求。

也有考虑过像 MacGap 这样的解决方案，不过 MacGap 是基于 webkit 内核的，并不支持 IndexedDB，而我们的项目依赖的第三方服务是依赖 IndexedDB 做为本地存储的。并且 Electron 更强大，比如新开 webview 加载第三方页面，并且可以预加载(preload) JavaScript来作为 jssdk 供 web 应用使用。

所以 Electron，就是你了！

主进程和渲染进程

个人感觉，理解 Electron 最重要应该就是理解主进程（Main Process）和渲染进程（Render Process）了。理解了这两者，其他内容花费些时间查查API文档即可。

Electron 中，入口是一个 js 文件（和 NW.js 不同，入口是 html 文件），运行这个入口文件（通常会是 package.json 里的 main 脚本）的进程称作主进程，在主进程使用 BrowserWindow 模块可以创建并管理 web 页面，也就是应用的 GUI。