前言

    首先聲明一下這篇文章不談代碼，只談心。
    從接觸Electron到真正去做出一個桌面應(yīng)用，再到今天寫下這邊文章，大概花了三個月時間吧，到不是因為有多難，主要是這純碎是個人興趣，自己是在業(yè)余時間干的，公司里面目前還沒有推行,這段時間開發(fā)任務(wù)又比較重，所以斷斷續(xù)續(xù)用了三月吧。今天寫下這篇文章只是記錄一下這個過程，也是和初學者分享一下。相信大多數(shù)人都是知道Electron最初是起源于Atom,然后從Atom剝離開來最終形成了現(xiàn)在的Electron，目前使用Electron來開發(fā)的桌面用非常多，我們最熟悉的比如Atom,VScode…,這類IDE，除此之外還有一些開發(fā)的輔助工具也借助于electron，比如iview的官方腳手架用來創(chuàng)建vue項目，騰訊的weFlow工具，等等。這些輔助工具將平時的一些命令行操作集成到了圖像化界面操作中來,使用起來更加方便簡潔?？偟膩碚f，electron對于我們前端來說用到的知識沒什么特別的，但是做出來的東西感覺挺新鮮的，畢竟一下從做web頁面，升華到做桌面應(yīng)用了，內(nèi)心還是有點小激動的。

目錄：

1. 我是什么時候開始接觸electron的
2. 為什么作為一個前端要花時間在Electron這種桌面應(yīng)用開發(fā)框架上去
3. 為什么越來越對她越來越有感覺了
4. 為什么一定要做成桌面應(yīng)用，web網(wǎng)頁不是也能干他的活嗎
5. 使用eletron需要儲備哪些知識
6. 學習electron的過程中需要注意什么
7. electron的弊端

我是什么時候開始接觸electron的

    最先接觸的是Weex這一類的垮終端移動APP開發(fā)框架，后來開始使用VScode編輯器，才聽說Electron有多么的強大，然后跑去Electron的官網(wǎng)一看，首頁那句醒目的標題“使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用”瞬間吸引到了我，然后就開始干，從最開始的官方demo到electron-vue再到自己開始做了一個前端開發(fā)的輔助工具應(yīng)用，一步步趟過來，有點喜悅，也有點頭疼，雖然已經(jīng)有類似Atom,VScode這樣的產(chǎn)品了，但是發(fā)現(xiàn)在開發(fā)過程中遇到的問題，度娘上還是找不到幾篇真正能解決問題的帖子，最后還是自己去踩，但是比起weex來還是好多了，不是黑weex，主要是他的生態(tài)建設(shè)太差了，新入門的需要花費大量的時間去學習，并且需要在實際應(yīng)用中不斷去發(fā)現(xiàn)問題，然后解決問題，關(guān)鍵是解決問題的過程中很少能獲得社區(qū)的幫助。言歸正傳，我們還是回到electron的話題上來。

為什么作為一個前端要花時間在Electron這種桌面應(yīng)用開發(fā)框架上去

    作為一個web前端開發(fā)人員，去弄桌面應(yīng)用是不是有點不誤正業(yè)。這個其實不然，首先electron的精華就是”使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺的桌面應(yīng)用”，這就是赤裸裸的在勾引我們前端開發(fā)人員，臣妾就是為你服務(wù)的。其次在node出來之后，前端的定位其實開始變得模糊起來了，前端開發(fā)人員不再僅僅局限于UI和頁面,UE和業(yè)務(wù)邏輯的實現(xiàn)了，開始越來越多的接觸后端的知識，‘大前端’這個名詞也開始經(jīng)常在各種公開場合見到，就連ES也開始和java這對兄弟也開始相認了（越來越像了），所以多接觸一點也算是與時俱進吧。
    像Electron這種結(jié)合了Node，Chromium,html,css,js的框架，對于有志成為‘大前端’的同學來說，是比較有吸引力的，它是基于node的，對于熟悉node生態(tài)圈的人來說，開發(fā)起來就更加如魚得水了。這里可能唯一比較陌生的可能就是Chromium了，我們可以拿面向?qū)ο蟮乃枷雭砜创?，electron已經(jīng)幫我們封裝了對于Chromium的操作，so.我們只需要了解electron的API就行了，剛開始接觸沒有必要去糾結(jié)自己對于它有多了解，當?shù)搅擞胑lectorn開發(fā)桌面應(yīng)用如魚得水的時候，我們有時間可以去了解一下他。所以這些所謂的陌生并不會成為我們學習和使用electorn 阻礙作為一個程序員，就是要勇于去接觸新的東西，這樣平時枯燥的編碼生活才會多一點點色彩。
    所以，作為前端完全可以大膽去嘗試使用electron來開發(fā)桌面應(yīng)用，技多不壓身，在將來的某些時候或許可以為你提供一種全新的解決方案。

為什么越來越對她越來越有感覺了

1. 他讓我擺脫了不同瀏覽器之間的差異和版本的限制，由于electron是基于Chromium的（Chromium是chrome的開發(fā)者版本），他完全遵循W3C的標準，對ES,CSS,BOM，DOM的最新規(guī)范都有很好的支持，所以我們在寫代碼的時候，什么ES6,7,8,DOM0,2,3都大膽的用起來，爽歪歪。
2. 基于Node,生態(tài)成熟，有足夠豐富的第三方包來支持我們的開發(fā)。沒必要自己再絞盡腦汁的去想某個功能的實現(xiàn)，別人寫的npm包早已幫我們實現(xiàn)，這就是”拿來主義”的好處。
3. 可以開發(fā)跨平臺的桌面應(yīng)用，就像weex宣傳的那樣“write once,run everyWhere”,只需要寫一份代碼，打包出來的應(yīng)用可以在windows,linux，mac OS上面運行。當然這是最理想的情況，無論是RN，weex還是electron,要做到多端共用，還是需要在代碼中做一定的適配的，大概有百分之八十是共用的吧，剩下的百分之二十還是需要兼容一下。

為什么一定要做成桌面應(yīng)用，web網(wǎng)頁不是也能干他的活嗎

    在最開始的時候我也有這樣的疑問,用web網(wǎng)頁來實現(xiàn)不是更好嗎，只要有瀏覽器就可以訪問，而且只要終端上面有瀏覽器就能訪問，這樣還省去了應(yīng)用的安裝步驟多好啊。在接觸久了之后發(fā)現(xiàn)，網(wǎng)頁能干的他能干，而且干的更好，web不能干的，他也能干。比如：
1.他可以擺脫瀏覽器的沙盒機制，可以訪問操作系統(tǒng)層面的東西。我們在網(wǎng)頁上面只能借助于后臺服務(wù)去干這種事，然后通過http告訴前端頁面，如果要處理本地文件，還得將文件傳到服務(wù)器上去，讓服務(wù)器處理。
2.更好的用戶體驗，不管我們是做成B/S的web還是做成客戶端的形式，最終的目的其實是在實現(xiàn)功能需求的同時還是最求更好的用戶體驗，在用戶體驗上桌面應(yīng)用無疑更上一層。就像你webApp和原生APP比較，原生無疑還是體驗更好。

既然electron就可以做桌面應(yīng)用，那是不是就沒有C#和C++什么事了

    在electron之前，桌面應(yīng)用基本上是靠C#和QT來做。那為什么不用他們來做，非得整個electron呢。

1. 效率，就我個人的使用經(jīng)驗來看，用electron來開發(fā)相同需求的桌面應(yīng)用，使用electron來開發(fā)效率明顯比其他的要提高很多，而且做出來的桌面效果更佳。
2. C#的開發(fā)者現(xiàn)在基本上在各個公司都是稀有物種了，現(xiàn)在都跑去開發(fā)移動端應(yīng)用去了，PC端的桌面應(yīng)用感覺沒什么油水了，能用web開發(fā)的就用web了，這樣自然開發(fā)的人就少了，開發(fā)人員少了如果還用他去開發(fā)，這樣后期維護起來會比較困難。
3. 除了C#不是還有QT嗎，這個我沒有寫過，但是我們組老大就是用QT框架來桌面應(yīng)用的，但是當他看見electron的時候，感慨還是這個寫起來方便。
4. 當然java也有類似Swing之類的桌面UI組件，但是效果比較一般，也能做比較酷的效果但是比較耗時。
   當然這并不是說electron 就可以替代C#和QT，每總技術(shù)都有適合他的應(yīng)用場景，在做之前我們在技術(shù)選型的時候，需要充分的考慮他們的利與弊，后面我會說說我在使用electron使用中遇見的弊端。

使用eletron需要儲備哪些知識

1. 首先需要熟練掌握前端的基礎(chǔ)知識html,css，js，為什么要強調(diào)熟練，因為作為前端，你連這都沒掌握，那我還是建議好好學習一下前端基礎(chǔ)知識吧，等基礎(chǔ)打牢了再出來浪。
2. 有一定的node基礎(chǔ)，也就是對nodejs有一定了解，知道他是什么，用來干什么的，怎么環(huán)境搭建，npm包的使用，我是建議系統(tǒng)的學一下nodejs,看看官方文檔，然后Express或者Koa這種web服務(wù)框架看看，自己搭建一個web服務(wù)玩玩，現(xiàn)在流行大前端，走出去不知道nodejs，所實話有點不好意思。
3. 在具備了上面兩門絕技之后，就可以跟著官方demo,把electron的demo拉下來根據(jù)步驟，將代碼跑起來，看看electron做的桌面應(yīng)用到底長什么樣子，感受一下。
4. 在demo跑起來后然后再根據(jù)demo的結(jié)構(gòu)看看里面使到的API，這里我不建議一開始就去擼官方的API文檔，這樣你可能很快就放棄了，一看，呀這么多API那記得住啊，然后就在心里開始打退堂鼓了。一步一步來，用到什么，然后去看什么，這里我后面會將我從搭建環(huán)境到最后制作打包出APP的心路歷程分享出來，有興趣的可以留意一下，下個月吧。

學習electron的過程中需要注意什么

1. 首先不要急功冒進，一來就要干點什么大事，先按照文檔，將demo跑起來，看看怎么搭建開發(fā)環(huán)境，怎么打包成一個可執(zhí)行程序，這里打包出來的執(zhí)行程序可能有點難看，但是不要在意，先將就用著，我會在后面的筆記整理中提到如何打包成我們平時看到那樣的安裝程序。
2. 建議現(xiàn)在網(wǎng)上找一些鼻尖簡單的demo看看，然要一上來就擼官方API文檔，這樣太枯燥了，而且好多API你一開始也用不上，看看簡單的demo，將基本的API掌握，再去完善其他。
3. 需要分清楚主進程和渲染進程，分清楚他們的職能，這樣我們在寫代碼的時候才不會混淆，代碼的層次結(jié)構(gòu)才能分的領(lǐng)清。
4. 有node經(jīng)驗的小伙伴不要先入為主將主進程當著nodejs中的服務(wù)端了，我開始就這么干的，一看到node就激動了，這樣你會遇見很多坑的，而且可能還爬不出來。

electron的弊端

    前面都是說electron是多么多么方便快捷，現(xiàn)在提一下，我在使用中遇到的弊端

1. 窗口創(chuàng)建背景的問題，在html沒有被加載完成前，窗口只用用背景色去填充，不能使用個性化的背景圖案，這會造成首次加載的體驗不好。
2. 打包出來的APP太大，就是最簡單的應(yīng)用打包出來都有40多MB。

總結(jié)
    就一句話，前端現(xiàn)在真是牛逼大了，老本行web就不說了，用nodejs可以搭建后臺服務(wù)，用RN,weex可以做移動端APP，現(xiàn)在electron連PC桌面端應(yīng)用也不放過了，現(xiàn)在誰還敢說我們前端就是寫寫頁面，寫寫樣式的。吼！吼！