摘要：首發(fā)于酷家樂(lè)前端博客標(biāo)題是我以第一視角基于開發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開始接觸到去開發(fā)客戶端產(chǎn)品，最后隨著業(yè)務(wù)和功能的復(fù)雜度提升再不斷地優(yōu)化客戶端。

首發(fā)于酷家樂(lè)前端博客

標(biāo)題是我以第一視角基于 Electron 開發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開始接觸 Electron 到去開發(fā)客戶端產(chǎn)品，最后隨著業(yè)務(wù)和功能的復(fù)雜度提升再不斷地優(yōu)化客戶端。
這是該系列的第一篇，我也是邊學(xué)邊做邊反思，歡迎交流，哦，不用擔(dān)心我會(huì)「太監(jiān)」這個(gè)系列文章，因?yàn)槲业睦洗笪罩?0米大刀注視著我，不定期出下一篇（間隔最大不超3周）。
?

?

?
// 以下是單口相聲，從第一視角講我是怎么接觸到 Electron 直到要自己去用它開發(fā)應(yīng)用的，不喜歡可以跳過(guò)
?
Electron，小名 Atom Shell，而 Atom 是 Github 發(fā)布的一款「現(xiàn)代化」的文本編輯器，很多人因?yàn)榭吹健窤tom 華麗的編輯器截圖」而入坑，又紛紛因?yàn)椤窤tom 三分鐘憋不出一個(gè)P的流暢度」而棄坑，仰天感嘆「封面果然都是騙人的」，我就是其中一個(gè)，這是第一次我和 Electron 接觸，但那時(shí)候我還不認(rèn)識(shí)她。
?
后來(lái)聽(tīng)說(shuō)微軟有一款編輯器叫「VS Code」賊好用，我就又去用了下，一樣華麗的「封面」，然而卻異常地好用和流暢，（這里我并不想挑起兩大門派戰(zhàn)爭(zhēng)，只是個(gè)人體驗(yàn)實(shí)錄），那是我和 Electron 的第二次接觸，我依舊不認(rèn)識(shí)她。
?
之后又在一些博客、專欄看到過(guò)諸多 Electron 的相關(guān)的文章，大致知道這是一個(gè)新的技術(shù)框架，可以讓 web 前端去開發(fā)跨平臺(tái)的桌面客戶端，但也沒(méi)深入，因?yàn)閺淖置嫔稀赣?Web 前端技術(shù)去開發(fā)一個(gè)桌面的客戶端產(chǎn)品」去理解，腦中就是六個(gè)字「叔叔，我們不約」。
?
而3個(gè)月前，我的老大「尼古拉斯·飛」想讓我一個(gè)前端去搞 Windows 客戶端開發(fā)，和我提及技術(shù)框架是用 Electron，問(wèn)我要不要試試。我才第一次去確認(rèn)了這個(gè)單詞的讀音和意思，意思是「電子」，再去看下她的前世今生，之前叫 Atom Shell「原子的殼」，是 Github 開發(fā) Atom 編輯器時(shí)配套開發(fā)的技術(shù)框架，合理了，「原子」不就是由「電子」和「原子核」組成么，可能哪天 Github 還會(huì)出一個(gè)「Nucleus」（原子核）的東西吧...
?
更進(jìn)一步，我在Electron的官網(wǎng)發(fā)現(xiàn)，很多基于 Electron 的大佬級(jí)產(chǎn)品，我都自己體驗(yàn)過(guò)，而那時(shí)的我并不知道這背后是 Electron。和我每天接觸最頻繁的當(dāng)屬「VS Code」，也是基于 Electron 的，我在公司 windows 電腦上用的 GitGUI「GitKraken」、我 Mac 上用的郵箱客戶端 Nylas 等等都是基于 Electron 開發(fā)的。
?
于是，我和我老大說(shuō)，“我要試試用 Electron 開發(fā)客戶端產(chǎn)品”，那時(shí)候我確實(shí)就是覺(jué)得這個(gè)東西好玩好看（可以用 Web 前端寫界面，一般都比較好看），額外說(shuō)一句，Electron 本身這個(gè)項(xiàng)目也是抱著好玩的心態(tài)創(chuàng)造出來(lái)的。
?
我抱著把 Electron 當(dāng)玩具的態(tài)度去瀏覽它的文檔，看一些 Electron 的應(yīng)用 Demo，再結(jié)合我們客戶端應(yīng)用的需求去看，我們可以從這些 Demo 中借鑒哪些思路，慢慢地，我就熟練學(xué)會(huì)了 Electron ...的拼寫。
?
// 單口相聲結(jié)束
?
所以，在這篇以及之后一系列的文章中，我將把自己在 Electron 方面的學(xué)習(xí)收獲和應(yīng)用心得記錄下來(lái)，而在這第一篇文字里，我將「庸俗地」介紹如何「Quick Start Electron」，但不是 Hello World。我的「Quick Start」將依次介紹以下內(nèi)容：
?

是什么讓 Electron 如此迷人（尤其是對(duì)于前端）

Electron 入門的幾個(gè)階段和對(duì)應(yīng)要完成的事

該怎么去閱讀和學(xué)習(xí) Electron 的文檔

該如何去挑選一些 Electron 的 Demo 源碼來(lái)學(xué)習(xí)和實(shí)踐

之后的該系列文章會(huì)涉及到哪些功能或主題（吊個(gè)胃口）
?

本文不會(huì)具體說(shuō)怎么起一個(gè) Demo 去「Quick Start」，這完全可以在官網(wǎng)找到，也有很多文章寫了，我只是就自己的經(jīng)歷去給出一些有限的建議，給有興趣的朋友一個(gè)合理的入門參考，很多時(shí)候，當(dāng)我們實(shí)踐完「Hello world」后，我們就不知道怎么辦了，于是熱情就只能冰封在「Hello world」階段了，下面這個(gè)笑話不是想要的結(jié)果。
?

?
?
?

?
讀文檔，這回事其實(shí)是見(jiàn)仁見(jiàn)智的，如果你看文檔有自己的三板斧，可以不用管這一節(jié)，不然還是建議看一下一些讀和查 Electron 文檔的建議，曾經(jīng)我也「行尸走肉」般地看過(guò) Electron 文檔，然后發(fā)現(xiàn)這樣效率極低，所以都是教訓(xùn)啊。
?

?
文檔里你不理解的，可能很多開發(fā)者已經(jīng)在自己的博客里展開解釋了，所以你如果遇到看文檔不理解的，可以搜一些文章，結(jié)合著看，這樣你才會(huì)理解，尤其對(duì)于必須理解的基本概念，這非常重要。
?
甚至，你可能還要結(jié)合一些代碼去看。
?

?
第一遍瀏覽，快的一個(gè)下午，慢的2天，檢查自己的成果就是搞定以下3個(gè)難題，你都能清楚地表達(dá)就可以了：
?

能向不了解 Electron 前端開發(fā)解釋清楚 Electron 這個(gè)技術(shù)框架的特性和優(yōu)勢(shì)

能清楚地解釋什么是「主進(jìn)程」，什么是「渲染進(jìn)程」，各自負(fù)責(zé)什么，怎么通信的

大腦中可以清晰地浮現(xiàn)出 Electron 文檔的組織方式（尤其是 API 文檔部分，是分主/渲染進(jìn)程的、模塊化的 API 組織方式）
?

?
在第一遍的基礎(chǔ)上，第二遍看 API 文檔，腦中基本就有一定的框架了（別小看第一遍的瀏覽，這會(huì)大大提升你第二遍看的效率，也會(huì)提高以后你查文檔的效率），這個(gè)時(shí)候看文檔的目標(biāo)就是讓每個(gè)模塊在腦中有一個(gè)印象。
?
這個(gè)印象包括，這個(gè)模塊是在哪類進(jìn)程中可用的、這個(gè)模塊負(fù)責(zé)什么功能，有個(gè)印象就好。
?
因?yàn)槊總€(gè)應(yīng)用的不同，可能對(duì)于模塊的重要程度排序也會(huì)不同，我僅給出我的建議，你可能需要好好看的一些模塊，「好好看」的意思是，這些模塊可能是很重要的，你要仔細(xì)地看：
?
只能在主進(jìn)程使用的：
?

app：控制你整個(gè) Electron 應(yīng)用的生命周期

BrowserWindow：創(chuàng)建和控制應(yīng)用的窗口

ipcMain：用于主進(jìn)程中，和渲染進(jìn)程通信的

webContents：渲染和控制你窗口中的 web 內(nèi)容的（因?yàn)?Electron 中，你是用 web 寫的界面）
?

可以在渲染進(jìn)程使用的：
?

ipcRenderer：用于渲染進(jìn)程中，和主進(jìn)程通信的

remote：可以方便你在渲染進(jìn)程中直接調(diào)用主進(jìn)程的方法

Tag：可以載入外界的網(wǎng)頁(yè)
?

以上模塊是我覺(jué)得是需要仔細(xì)學(xué)習(xí)的第一梯隊(duì)模塊，當(dāng)然也說(shuō)了，每個(gè)應(yīng)用不盡相同，所以總體思路還是知道什么對(duì)自己重要，就重點(diǎn)看什么，至于其余的，要用到的時(shí)候去查就行。
?

?
只要你已經(jīng)對(duì) Electron 有了大致的認(rèn)識(shí)，你就會(huì)查文檔了，不會(huì)發(fā)生你要在渲染進(jìn)程中使用的模塊，但卻直奔主進(jìn)程中可用的模塊那查半天。
?
有一個(gè) Tip 是，如果你是明確可以定位的，那么你根據(jù)你的需求去查對(duì)應(yīng)模塊，如果你只有幾個(gè)關(guān)鍵字，那么 Electron 提供把所有文檔在一個(gè)頁(yè)面內(nèi)展示，這樣你就可以用「搜索」了。
?
?

?
每過(guò)一段時(shí)間，總能看到一些文章「Electron + xxx 開發(fā) what what what」，所以我們可以借鑒和學(xué)習(xí)的 Demo 是很多的，但是要去挑適合自己的并且友好的 Demo 來(lái)看，而看 Demo 代碼也需要一定的方式。
?

?
怎么沒(méi)有第一個(gè)？「Hello World」：你把我置于何地。
?

挑一個(gè)復(fù)雜度不要太高的（package.json簡(jiǎn)單的一般不復(fù)雜）。這一點(diǎn)好理解，不解釋。

不要選擇一個(gè)代碼寫得很隨意的，可能會(huì)帶壞你。沒(méi)注釋，代碼風(fēng)格清奇，這樣的還是算了吧。

不要去跟著寫了很復(fù)雜的界面，但對(duì) Electron 本身的使用沒(méi)幾行的 Demo，畢竟你不是來(lái)學(xué) CSS 的。我真遇到過(guò)所謂用 Electron + XXX 開發(fā)的項(xiàng)目，寫了一個(gè)花哨的界面，對(duì) Electron 的使用依舊停在「Hello World」階段。
?

?

看懂主要的代碼邏輯，看不懂的查文檔

自己去給它擴(kuò)展一個(gè)功能，這里會(huì)遇到一些很有趣的事，比如你覺(jué)得應(yīng)該簡(jiǎn)單的，結(jié)果你花了很久都沒(méi)搞定，正常的，所以建議擴(kuò)展一個(gè)和 Demo 中已有功能類似的功能，那樣你可以直接參考了。
?

?
直到目前，我還是會(huì)經(jīng)常看一些其他的 Electron Demo 或者已可以稱為產(chǎn)品的應(yīng)用，這個(gè)時(shí)候我不可再事無(wú)巨細(xì)地去看整個(gè)應(yīng)用的代碼，而是明確知道我要去看什么。
?
舉個(gè)栗子，在開發(fā)實(shí)際應(yīng)用一段時(shí)間后，我覺(jué)得我們的 Electron 應(yīng)用，從開發(fā)到打包，再到構(gòu)建安裝包，最后到發(fā)行，整個(gè)開發(fā)工作流效率低下，很不流暢，這個(gè)時(shí)候我就去看很多的項(xiàng)目，借鑒很多的優(yōu)秀實(shí)踐，感謝他們。在那個(gè)時(shí)候，我就會(huì)只看他們是怎么組織整個(gè)工程的，是怎么劃分開發(fā)的各個(gè)階段的，又是如何讓整個(gè)流程流暢地自動(dòng)化的。
?
到后來(lái)，需要實(shí)現(xiàn)「自動(dòng)更新」功能的時(shí)候，我又去看一些實(shí)現(xiàn)了自動(dòng)更新的應(yīng)用和 Demo，看他們是怎么實(shí)現(xiàn)的，最終結(jié)合我們自己的需求實(shí)現(xiàn)了「分強(qiáng)弱的自動(dòng)更新」功能。
?
所以在有了自己要開發(fā)的產(chǎn)品后，看 Electron 應(yīng)用的代碼，就是帶著訴求去看的，這一步對(duì)優(yōu)化自己的產(chǎn)品很重要。
?
?

?
以上是我對(duì)于想入坑的「坑友」們分享的一些「入坑正確姿勢(shì)」，姿勢(shì)不對(duì)，容易折啊。可以看到這整篇文字沒(méi)啥具體的實(shí)踐，但作為一個(gè)開發(fā)了一段時(shí)間產(chǎn)品的前端，這是我認(rèn)為很重要的一些方式方法。
?
在之后的一系列文章中，我將介紹以下內(nèi)容（確定了一定會(huì)寫的）：
?

怎么打造自己的開發(fā)工作流：從源代碼到一個(gè)安裝程序，我們?cè)趺醋詣?dòng)化這個(gè)流程

自動(dòng)更新：我們?cè)趺纯紤]自動(dòng)更新，為什么需要分強(qiáng)弱級(jí)別的自動(dòng)更新，有什么區(qū)別，怎么實(shí)現(xiàn)

如何給自己的應(yīng)用加入測(cè)試版功能，以提供一些方便測(cè)試的功能

怎么做客戶端能做但瀏覽器為難的消息推送

... ...
?

任重道遠(yuǎn)，歡迎交流，以上內(nèi)容轉(zhuǎn)載請(qǐng)標(biāo)明原文鏈接和作者。