electron

一：前世今生

Electron-----------------小名 Atom Shell

按照字面意思来说，electron直译为 “电子”，是 GitHub开发 Atom 编辑器时配套开发的技术框架，现在已经成为一款专业的利用 Web 前端技术去开发一个桌面的客户端产品开发框架。

部分产品.png

二：这个东西网站也可以为什么需要客户端？

既然 Electron 是用 Web 技术写客户端，那么看上去 Electron 要做的事，可以搬到网站上，为什么还要搬到客户端，这里有3个角度的回答：

用户角度：客户端是一款独立的软件，其综合体验一般都是比网站高的，尤其是涉及到「工具」范畴的应用，此外，特定的用户群体也会有类似的使用习惯
发行方角度：客户端是另一种产品形式，是一种产品的分发方式和入口，客户端可以实现很多本地应用独有的需求去触达用户，也能提供更加可靠的服务
开发角度：终于.......不用考虑浏览器兼容了，对于开发来说，终于跳出了浏览器的沙盒，你可以自己去控制 Electron 中的「浏览器」，莫名的开心，开发麻烦小，功能更强大，脱发少

三：背后的男人和女人

它是建立在「Chromium」和「Node」之上的，Chromium负责界面，它能够满足你使用出先进的css以及js特性，Node负责背后的逻辑，Node 这个大生态下的模块，Electron 也都可以用，这减少了很多造轮子的时间，这就是典型的「你负责貌美如花，我负责赚钱养家」。
而对于前端开发来说，「不要和老夫说什么 C++，Java，老夫行走江湖就一把 JS，遇到需求就是干」。前端开发可以用自己熟悉的方式去写应用界面，逻辑部分也还是 JS，如果你精通 Node 后端，那后端也可以插一脚，「鸟枪换大炮」，你开发客户端的能力有一种「忽如一夜春风来」的感觉。

四：技术实现

理解 Electron 最重要应该就是理解主进程（Main Process）和渲染进程（Render Process）了。理解了这两者，其他内容花费些时间查查API文档即可。主进程连接着操作系统和渲染进程，可以把它看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。官方地址，Electron 并不是很复杂，在写完不多的主进程代码后，其他的业务代码几乎和 Web 应用没什么区别。

简单理解：

web项目套上一个node环境的壳

相比web项目，桌面项目多了一个进程

五：Electron的对手NW.js

NW和Electron框架的优劣众说纷纭，由于作者的水平有限，不作说明。从开发角度来说，选择用 nw.js 还是 election ，区别其实不是很大。俩着的开发工作还是在自己的前端交互逻辑上面。俩着的APP都会跑两部分的js runtime，分别是node-runtime和chromium-runtime。

NW.js（node-webkit）* : NW比electron生的早，诞生于微软，有很多的知名桌面应用都是基于NW，比如微信的开发者工具，钉钉桌面版，微信小程序IDE等等。基于NW的应用入口是index.html，NW.js将自己的功能都整合进了chromium-runtime，因此更接近一个前端的应用开发方式，像一个跑在node-platform上的浏览器。
其实NW的electron和NW.js主要代码贡献者和维护者都是同一个人，他在微软实习的时候的对NW做出的代码贡献，而后来转职进入GitHub之后对electron做出代码贡献。我们抛去关于NW这部分插曲不说，NW和electron之间的相互联系其实还是很紧密，毕竟主要维护者都是同一人。

六：快速开始electron

官方快速开始

七：搭一个架子

这个架子主要包括加入技术React+Redux+Antd，然后自定义标题栏，
1.React创建一个项目其实很繁琐，因为它用了JSX，所以需要配置Babel、webpack or Browserify

不过好在官方提供了一个工具 Create React App，可以非常简单快速的创建React 项目，并且提供了热调试环境。详细参考官方文档

简单的来说，Create React App 创建了一个React的项目模版、配置，并且提供了一些很方便的脚本命令用于调试和部署React前端程序。
整合Electron和React
Create React App创建的项目是一个纯前端项目，整合React项目和Electron并且保留热调试和本地包引用需要以下几个简单的操作

需要在React项目的根目录（不是src目录）创建Electron的启动文件main.js（前文中有详细内容）
在React项目中的package.json文件中增加main字段，值为 "./main.js"
修改main.js 中的win.loadURL，改为

 win.loadURL(url.format({
    pathname: path.join(__dirname, './build/index.html'),
    protocol: 'file:',
    slashes: true
  }))

到目前为止，在根目录下运行 electron .就可以启动React创建的桌面应用了。

但是还有几个问题

资源文件显示不出来，在调试面板出现找不到文件的错误提示
每次都要 npm run build 后才能看到修改项
无法获得系统包，例如用 os.cpus()无法得到系统cpus信息。

注意的几点

默认情况下，homepage是 http://localhost:3000 ,build后，所有资源文件路径都是／static，而Electron调用的入口是以file：协议，/staitc就会定位到系统的根目录去，所以找不到静态文件。在package.json文件中添加homepage字段并设置为"."后，静态文件的路径就变成了相对路径，就能正确的找到了。