一：前世今生
Electron-----------------小名 Atom Shell
按照字面意思來說，electron直譯為 “電子”，是 GitHub開發 Atom 編輯器時配套開發的技術框架，現在已經成為一款專業的利用 Web 前端技術去開發一個桌面的客戶端產品開發框架。
二：這個東西網站也可以為什么需要客戶端？
既然 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等等?；贜W的應用入口是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字段并設置為"."后，靜態文件的路徑就變成了相對路徑，就能正確的找到了。
