一：前世今生
Electron-----------------小名 Atom Shell
按照字面意思來說，electron直譯為 “電子”，是 GitHub開發(fā) Atom 編輯器時配套開發(fā)的技術(shù)框架，現(xiàn)在已經(jīng)成為一款專業(yè)的利用 Web 前端技術(shù)去開發(fā)一個桌面的客戶端產(chǎn)品開發(fā)框架。
二：這個東西網(wǎng)站也可以為什么需要客戶端？
既然 Electron 是用 Web 技術(shù)寫客戶端，那么看上去 Electron 要做的事，可以搬到網(wǎng)站上，為什么還要搬到客戶端，這里有3個角度的回答：
- 用戶角度： 客戶端是一款獨立的軟件，其綜合體驗一般都是比網(wǎng)站高的，尤其是涉及到「工具」范疇的應(yīng)用，此外，特定的用戶群體也會有類似的使用習慣
- 發(fā)行方角度： 客戶端是另一種產(chǎn)品形式，是一種產(chǎn)品的分發(fā)方式和入口，客戶端可以實現(xiàn)很多 本地應(yīng)用獨有的需求去觸達用戶，也能提供更加可靠的服務(wù)
- 開發(fā)角度： 終于.......不用考慮瀏覽器兼容了，對于開發(fā)來說，終于跳出了瀏覽器的沙盒，你可以自己去控制 Electron 中的「瀏覽器」，莫名的開心，開發(fā)麻煩小，功能更強大，脫發(fā)少
三：背后的男人和女人
它是建立在「Chromium」和「Node」之上的，Chromium負責界面，它能夠滿足你使用出先進的css以及js特性，Node負責背后的邏輯，Node 這個大生態(tài)下的模塊，Electron 也都可以用，這減少了很多造輪子的時間，這就是典型的「你負責貌美如花，我負責賺錢養(yǎng)家」。
而對于前端開發(fā)來說，「不要和老夫說什么 C++，Java，老夫行走江湖就一把 JS，遇到需求就是干」。前端開發(fā)可以用自己熟悉的方式去寫應(yīng)用界面，邏輯部分也還是 JS，如果你精通 Node 后端，那后端也可以插一腳，「鳥槍換大炮」，你開發(fā)客戶端的能力有一種「忽如一夜春風來」的感覺。
四：技術(shù)實現(xiàn)
理解 Electron 最重要應(yīng)該就是理解主進程（Main Process）和渲染進程（Render Process）了。理解了這兩者，其他內(nèi)容花費些時間查查API文檔即可。主進程連接著操作系統(tǒng)和渲染進程，可以把它看做頁面和計算機溝通的橋梁。渲染進程就是我們所熟悉前端環(huán)境了。只是載體改變了，從瀏覽器變成了window。傳統(tǒng)的web環(huán)境我們是不能對用戶的系統(tǒng)就行操作的。而electron相當于node環(huán)境，我們可以在項目里使用所有的node api 。官方地址，Electron 并不是很復雜，在寫完不多的主進程代碼后，其他的業(yè)務(wù)代碼幾乎和 Web 應(yīng)用沒什么區(qū)別。
簡單理解：
- web項目套上一個node環(huán)境的殼
- 相比web項目，桌面項目多了一個進程
五：Electron的對手NW.js
NW和Electron框架的優(yōu)劣眾說紛紜，由于作者的水平有限，不作說明。從開發(fā)角度來說，選擇用 nw.js 還是 election ，區(qū)別其實不是很大。倆著的開發(fā)工作還是在自己的 前端交互邏輯上面。倆著的APP都會跑兩部分的js runtime，分別是node-runtime和chromium-runtime。
NW.js（node-webkit）* : NW比electron生的早，誕生于微軟，有很多的知名桌面應(yīng)用都是基于NW，比如微信的開發(fā)者工具，釘釘桌面版，微信小程序IDE等等。基于NW的應(yīng)用入口是index.html，NW.js將自己的功能都整合進了chromium-runtime，因此更接近一個前端的應(yīng)用開發(fā)方式，像一個跑在node-platform上的瀏覽器。
其實NW的electron和NW.js主要代碼貢獻者和維護者都是同一個人，他在微軟實習的時候的對NW做出的代碼貢獻，而后來轉(zhuǎn)職進入GitHub之后對electron做出代碼貢獻。我們拋去關(guān)于NW這部分插曲不說，NW和electron之間的相互聯(lián)系其實還是很緊密，畢竟主要維護者都是同一人。
六：快速開始electron
七：搭一個架子
這個架子主要包括加入技術(shù)React+Redux+Antd，然后自定義標題欄，
1.React創(chuàng)建一個項目其實很繁瑣，因為它用了JSX，所以需要配置Babel、webpack or Browserify
不過好在官方提供了一個工具 Create React App，可以非常簡單快速的創(chuàng)建React 項目，并且提供了熱調(diào)試環(huán)境。詳細參考官方文檔
簡單的來說，Create React App 創(chuàng)建了一個React的項目模版、配置，并且提供了一些很方便的腳本命令用于調(diào)試和部署React前端程序。
整合Electron和React
Create React App創(chuàng)建的項目是一個純前端項目，整合React項目和Electron并且保留熱調(diào)試和本地包引用需要以下幾個簡單的操作
需要在React項目的根目錄（不是src目錄）創(chuàng)建Electron的啟動文件main.js（前文中有詳細內(nèi)容）
在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創(chuàng)建的桌面應(yīng)用了。
但是還有幾個問題
資源文件顯示不出來，在調(diào)試面板出現(xiàn)找不到文件的錯誤提示
每次都要 npm run build 后才能看到修改項
無法獲得系統(tǒng)包，例如用 os.cpus()無法得到系統(tǒng)cpus信息。
注意的幾點
默認情況下，homepage是 http://localhost:3000 ,build后，所有資源文件路徑都是／static，而Electron調(diào)用的入口是以file：協(xié)議，/staitc就會定位到系統(tǒng)的根目錄去，所以找不到靜態(tài)文件。在package.json文件中添加homepage字段并設(shè)置為"."后，靜態(tài)文件的路徑就變成了相對路徑，就能正確的找到了。
