Electron 是什么?它之前的名字是 Atom Shell,是 Github 開發(fā)的結(jié)合了 io.js 和 chromium 的跨平臺桌面應(yīng)用框架。Github 自己出的編輯器 Atom 以及微軟出的編輯器 VSCode 都是基于這個框架。
眾所周知,Google chrome 就是基于 chromium 而發(fā)展出來的一款優(yōu)秀的瀏覽器。因其出色的體驗(yàn)和網(wǎng)頁解析性能,所有國內(nèi)出產(chǎn)的
瀏覽器 / 雙核瀏覽器,無不選用了 chrome 作為內(nèi)核。所以在網(wǎng)頁解析渲染方面,使用 chromium 是極其正確的選擇。
那跟平常的桌面應(yīng)用構(gòu)建,使用 Electron 又有什么優(yōu)勢呢?
普通的桌面應(yīng)用構(gòu)建,比較成熟的語言不外乎 C/C++、Java、C#、Python 等。然而 C/C++ 易學(xué)難精,即使其 GUI 框架有 MFC、Qt、KDE 等眾,也是極難快速開發(fā);Java 的 GUI 爛得不提也罷;C# 極有可能成為以后霸主,然而還在跨平臺表現(xiàn)上有所欠缺,GUI 表現(xiàn)力不足;Python則是個人喜好關(guān)系順帶一提,其實(shí)很少作為 GUI 主力語言被使用。(當(dāng)然你可以閱讀本人的另一個有關(guān) python 和 Qt 構(gòu)建桌面應(yīng)用的系列)
Electron 則是使用了 Javascript 作為主力語言,并且為其加上了原生支持 html5 和 CSS3 的瀏覽器。從 GUI 構(gòu)建來說,使用 html 和 css 的網(wǎng)頁構(gòu)建顯然更加簡單,成熟的工具和技術(shù)數(shù)不勝數(shù);而作為桌面應(yīng)用著重依賴的 IO、進(jìn)程和網(wǎng)絡(luò)通信模塊等則由支持 ES6 的 io.js 提供,這樣前端后端均采用 Javascript 語言,大大降低技術(shù)復(fù)雜性。
如果你有經(jīng)常關(guān)注前端的消息,那么一定聽說過一個國人開發(fā)的 GUI 框架:node-webkit。然后一看到Electron,就會皺皺眉頭:這不就是node-webkit嘛!
然而,Electron 和 node-webkit 并不一樣,其 github 項(xiàng)目上有詳細(xì)的對比,鏈接。
就個人理解來說,NW.js 偏向網(wǎng)頁主導(dǎo),是一個加上了 node.js 的瀏覽器;Electron 則是 javascript主導(dǎo),是 io.js 加上了一個 chromium。
準(zhǔn)確來說,Electron 只是選擇了網(wǎng)頁作為 GUi,并非為 GUI 綁定了 javascript。在 Electron 文檔的Quick start中很明確地指出“It doesn't mean Electron is a JavaScript binding to GUI libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.”
在聽說了 node-webkit 之后,我曾經(jīng)上手把玩了一下,當(dāng)時也是驚訝于其結(jié)合了瀏覽器內(nèi)核而得到的強(qiáng)大表現(xiàn)力。因?yàn)樽约涸谇岸朔矫嬗幸稽c(diǎn)技術(shù),所以在編寫界面的過程中感覺非常舒服。不過我也留意到其在軟件方面的能力明顯有比較大的欠缺,除了能讀寫文件外似乎沒有什么亮點(diǎn)。(當(dāng)然不排除在改名為 NW.js 后會加入了更多功能的可能性)
總之,NW.js 更像是將網(wǎng)頁打包成應(yīng)用,而 Electron 則是實(shí)際開發(fā)的應(yīng)用。
如果要將網(wǎng)頁設(shè)計應(yīng)用到軟件界面開發(fā)上,那么一些 MVC 框架或 UI 框架就比較適合。MVC 框架中比較有名的是 knockout 和 Backbone,而 UI 框架,則是 reactjs、angularjs 和 polymer 最為著名。國產(chǎn)的還有 avalon。
那么為什么選 angular 呢?因?yàn)?angular 的理念比較符合開發(fā)網(wǎng)頁應(yīng)用,更重要的是有 angular material 這樣一個比較能使用的 UI 主題。相比之下,knockout 和 Backbone 功能太弱,reactjs 則是太激進(jìn)(一開始我是選 reactjs 的,但是一番嘗試之后還是放棄了),polymer 則未作深入了解。
不過,就像 Electron 只是選用了網(wǎng)頁作為呈現(xiàn) GUI 的方式,那么在編寫基于 Electron 的應(yīng)用的時候,GUI 框架的選擇其實(shí)并非固定死的,如有必要或者個人喜好,轉(zhuǎn)而使用 polymer 或者 reactjs 也未嘗不可。
如果有看過鄙人寫的python × Qt應(yīng)用開發(fā)系列,那么一定知道本人的教程都偏向?qū)嵺`,喜歡實(shí)際解釋代碼和一定程度地搞清楚技術(shù)的細(xì)枝末節(jié),而非跟著網(wǎng)上一搜一大把的英文教程或者官方文檔演示一篇后以近乎翻譯一般地寫出所謂的“教程”。官方文檔就擺在那,誰不會RTFM?
在本系列中,鄙人同樣會以記錄一個應(yīng)用的開發(fā)流程的形式來呈現(xiàn)成功(或者說,可行)的開發(fā)方式。有時會有大量的代碼,有時又會有長篇的理論討論,有時又會有大段的思維解釋,希望讀者能耐心讀下去。