初探Electron，從入門(mén)到實(shí)踐-創(chuàng)新互聯(lián)
本文由葡萄城技術(shù)團(tuán)隊(duì)于博客園原創(chuàng)并首發(fā)
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、漢臺(tái)網(wǎng)站維護(hù)、網(wǎng)站推廣。
轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。
在開(kāi)始之前，我想您一定會(huì)有這樣的困惑：標(biāo)題里的Electron 是什么？Electron能做什么？許多偉大的公司使用Electron框架的原因又是什么？
帶著這些問(wèn)題和疑惑，通過(guò)本文的介紹，可助您全面地認(rèn)識(shí)Electron這門(mén)新興的技術(shù)，迅速找到其入門(mén)途徑，并理解Electron為何被稱為當(dāng)下開(kāi)發(fā)桌面App的最佳選擇。
初探Electron
一、Electron是什么？（為何稱之為“跨平臺(tái)桌面瀏覽器”）
前端開(kāi)發(fā)的魅力，在于開(kāi)發(fā)者隨時(shí)要面臨全新技術(shù)的挑戰(zhàn)！
曾幾何時(shí)，作為前端開(kāi)發(fā)者的你可曾想過(guò)：如何利用HTML、CSS和JavaScript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序？借助 Electron，這項(xiàng)工作將比你想象的更加簡(jiǎn)單。
Electron作為一個(gè)使用新興技術(shù)（包括JavaScript，HTML和CSS）創(chuàng)建桌面應(yīng)用程序的框架，其負(fù)責(zé)處理硬件，開(kāi)發(fā)者可以更專注于應(yīng)用程序的核心并從底層更改其設(shè)計(jì)。
Electron設(shè)計(jì)之初便充分結(jié)合了當(dāng)今最好的Web技術(shù)，作為一個(gè)跨平臺(tái)的“集成框架”，它可以輕松地與Mac、Windows和Linux兼容。而所謂的“集成框架”也就是它將“Chromium”和“Node.js”很好的集成在了一起，并明確分工，Electron負(fù)責(zé)硬件部分，“Chromium”和“Node.js”負(fù)責(zé)界面與邏輯，大家井井有條，共同構(gòu)成了一個(gè)成本低廉卻十分高效的解決方案，在快速交付上甚至比Native還要快速。
Electron發(fā)展里程碑
·? ?? ?2013年4月11日，Electron以Atom Shell為名起步。
·? ?? ?2014年5月6日，Atom以及Atom Shell以MIT許可證開(kāi)源。
·? ?? ?2015年4月17日，Atom Shell改名為Electron。
·? ?? ?2016年5月11日，1.0版本發(fā)布。
·? ?? ?2016年5月20日，允許向Mac應(yīng)用商店提交軟件包。
·? ?? ?2016年8月2日，支持Windows商店。
簡(jiǎn)而言之，Electron JS是一個(gè)運(yùn)行時(shí)框架，它允許用戶使用HTML5、CSS和JavaScript創(chuàng)建桌面套件應(yīng)用程序，而大部分應(yīng)用程序都是由兩種非常受歡迎的技術(shù)混合而成：Node.js和Chromium。因此，您編寫(xiě)的任何Web應(yīng)用程序都可以在Electron JS 上正常運(yùn)行。
Electron的內(nèi)置功能包括：
·? ?? ?自動(dòng)更新 - 使應(yīng)用程序能夠自動(dòng)更新、升級(jí)
·? ?? ?本機(jī)菜單和通知 - 創(chuàng)建本機(jī)應(yīng)用程序菜單和上下文菜單
·? ?? ?應(yīng)用程序崩潰報(bào)告 - 您可以將崩潰報(bào)告提交給遠(yuǎn)程服務(wù)器
·? ?? ?調(diào)試和分析 - Chromium的內(nèi)容模塊可以發(fā)現(xiàn)性能瓶頸和運(yùn)行緩慢的原因。此外，您也可以在應(yīng)用中使用自己喜歡的Chrome開(kāi)發(fā)者工具
·? ?? ?Windows安裝程序 -您可以快速而簡(jiǎn)單創(chuàng)建安裝包
二、Electron 可以用來(lái)做什么？（哪些場(chǎng)景需要使用Electron）
以Windows平臺(tái)應(yīng)用開(kāi)發(fā)為例，大部分人首先會(huì)想到使用成熟的開(kāi)發(fā)方案，如QT(C++)、WPF(C#) 等。但面臨以下幾種使用場(chǎng)景，這些方案將顯得捉襟見(jiàn)肘：
·? ?? ?公司要設(shè)計(jì)一個(gè)全新的APP， 但技術(shù)人員大部分由前端開(kāi)發(fā)構(gòu)成
·? ?? ?公司原本就有在線的Web應(yīng)用，但是想讓該應(yīng)用能夠在桌面端直接打開(kāi)（離線狀態(tài)下也可使用），并增加一些與系統(tǒng)交互的功能
以我的親身經(jīng)歷為例：
在SpreadJS項(xiàng)目中，我們需要將基于web版的表格編輯器封裝成APP使用，同時(shí)增加文件操作的能力，如導(dǎo)入導(dǎo)出excel、導(dǎo)入PDF等，而SpreadJS是一個(gè)純前端的表格控件，開(kāi)發(fā)人員全部由前端開(kāi)發(fā)組成，對(duì)C++和C#并不熟悉，如果投入過(guò)大的時(shí)間精力用來(lái)學(xué)習(xí)其他開(kāi)發(fā)語(yǔ)言，整個(gè)項(xiàng)目的技術(shù)管理和項(xiàng)目管理將變得無(wú)法控制。除此之外，鑒于項(xiàng)目本身對(duì)應(yīng)用的業(yè)務(wù)邏輯要求并不高，只是套一個(gè)具有瀏覽器屬性的運(yùn)行環(huán)境即可，因此，單獨(dú)為此配置C++、C# 開(kāi)發(fā)人員將無(wú)形中提升更多項(xiàng)目成本。
為此，我們引入了Electron框架：現(xiàn)有的前端開(kāi)發(fā)人員能在不學(xué)習(xí)其他語(yǔ)言的情況下，直接搞定上述需求，這就是Electron 為我們帶來(lái)的價(jià)值。
三、為什么選擇 Electron？（Electron的出現(xiàn)為前端開(kāi)發(fā)者謀得了一份好差事）
可以這么說(shuō)，Electron這個(gè)框架讓網(wǎng)路里流傳很廣的一句話不再是玩笑：“不要和老夫說(shuō)什么C++、Java，老夫行走江湖就一把JS，遇到需求擼起袖子就是干”。Electron可以幫助前端開(kāi)發(fā)者在不需要學(xué)習(xí)其他語(yǔ)言和技能的情況下，快速開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用。
Electron的出現(xiàn)將蠶食很大一部分桌面客戶端領(lǐng)域的市場(chǎng)份額，鑒于它的跨平臺(tái)特性，在不同系統(tǒng)之間僅需少量的優(yōu)化工作?？上攵?，這個(gè)成本到底有多低。
在開(kāi)發(fā)的體驗(yàn)上，Electron是基于"Chromium"和"Node.js"的，所以幾乎所有的Node.js模塊都可以在Electron上運(yùn)行，并很容易使用“npm”搭積木的方式快速交付一個(gè)產(chǎn)品。
四、大型應(yīng)用使用Electron框架的成功案例
1. SpreadJS純前端表格控件
SpreadJS?是一款基于 HTML5 的純前端電子表格控件，以“高速低耗、高度類似Excel、可無(wú)限擴(kuò)展”為產(chǎn)品特色，提供移動(dòng)跨平臺(tái)和瀏覽器支持，同時(shí)滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開(kāi)發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類 Excel UI 設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成等場(chǎng)景下無(wú)需大量代碼開(kāi)發(fā)和測(cè)試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。
2. WebTorrent
WebTorrent，作為第一個(gè)在瀏覽器中運(yùn)行的torrent客戶端，是一個(gè)完全由JavaScript編寫(xiě)并使用WebRTC進(jìn)行點(diǎn)對(duì)點(diǎn)傳輸?shù)目蛻舳藨?yīng)用。無(wú)需任何插件，擴(kuò)展或安裝，WebTorrent將用戶鏈接到分散的瀏覽器到瀏覽器網(wǎng)絡(luò)，以確保有效的文件傳輸。
WebTorrent使用Electron框架開(kāi)發(fā)，使其盡可能輕量、無(wú)廣告且開(kāi)源。此外，使用Electron還有助于流式傳輸，并充當(dāng)混合客戶端，將應(yīng)用程序連接到所有流行BitTorrent和WebTorrent網(wǎng)絡(luò)。
3. WordPress
WordPress 桌面是一個(gè)使用了Electron和React作為框架的桌面應(yīng)用程序，提供無(wú)縫的跨平臺(tái)體驗(yàn)，允許用戶專注于他們的內(nèi)容和設(shè)計(jì)，而不會(huì)被任何瀏覽器標(biāo)簽所分心。
4. Slack
Slack采用了Electron框架構(gòu)建，鑒于其高性能表現(xiàn)和無(wú)框架外觀，將帶來(lái)與瀏覽器完全不同的體驗(yàn)方式。對(duì)于尋求更集中的工作空間的團(tuán)隊(duì)來(lái)說(shuō)，Slack Desktop絕對(duì)是最適合的應(yīng)用程序之一。
雖然Slack Desktop融合了很多技術(shù)，但大多數(shù)資源文件和代碼都是遠(yuǎn)程加載的，它們結(jié)合了Chromium的渲染引擎和Node.js運(yùn)行時(shí)和模塊系統(tǒng)。
5. WhatsApp
WhatsApp作為下載量最高的Messenger應(yīng)用程序，也是基于Electron框架構(gòu)建的。Electron幫助WhatsApp開(kāi)發(fā)人員以低廉的成本完成了幾乎所有工作，并通過(guò)更加簡(jiǎn)化和創(chuàng)新的技術(shù)，為用戶帶來(lái)全新的桌面體驗(yàn)方式。
Electron 架構(gòu)實(shí)現(xiàn)
Electron基本文件結(jié)構(gòu)
Electron有一個(gè)基本的文件結(jié)構(gòu)，類似于我們?cè)趧?chuàng)建網(wǎng)頁(yè)時(shí)使用的文件結(jié)構(gòu)：
electron-quick-start
- index.html 這是一個(gè)HTML5網(wǎng)頁(yè)，目的用于提供畫(huà)布（canvas）
- main.js 創(chuàng)建窗口并處理系統(tǒng)事件
- package.json 是我們應(yīng)用程序的啟動(dòng)腳本。它將在主進(jìn)程中運(yùn)行，并包含有關(guān)應(yīng)用程序的所有信息
- render.js 處理應(yīng)用程序的渲染過(guò)程
Electron的架構(gòu)主要分為兩部分：主進(jìn)程和渲染進(jìn)程
回顧以往的web開(kāi)發(fā)，我們的代碼，無(wú)論是HTML、CSS還是Javascript，都是運(yùn)行在瀏覽器沙盒中的，我們無(wú)法越過(guò)瀏覽器的權(quán)限訪問(wèn)系統(tǒng)本身的資源，代碼的能力被限制在了瀏覽器中。瀏覽器之所以這么做，是為了安全的考慮。設(shè)想一下，我們?cè)谑褂脼g覽器的時(shí)候，會(huì)打開(kāi)各式各樣不同來(lái)源的網(wǎng)站，如果JavaScript代碼有能力訪問(wèn)并操作本地操作系統(tǒng)的資源，那將是多么可怕的事情。
假設(shè)：你在某天不小心打開(kāi)了一個(gè)惡意的網(wǎng)站，可能你存儲(chǔ)在硬盤(pán)上的文件就被偷走了（都用不著去修電腦）。
但我們要開(kāi)發(fā)的是桌面應(yīng)用程序，如果無(wú)法訪問(wèn)到本地的資源肯定是不行的。Electron將nodejs巧妙的融合了進(jìn)來(lái)，讓nodejs作為整個(gè)程序的管家。管家擁有較高的權(quán)限，可以訪問(wèn)和操作本地資源，使用原本在瀏覽器中不提供的高級(jí)API。同時(shí)管家也管理著渲染進(jìn)程窗口的創(chuàng)建和銷毀。所以，我們將這個(gè)管家稱之為主進(jìn)程。在使用Electron開(kāi)發(fā)的程序中，會(huì)使用main.js作為程序的主入口，該文件內(nèi)代碼執(zhí)行的內(nèi)容，就是主進(jìn)程中執(zhí)行的內(nèi)容。
主進(jìn)程
主進(jìn)程控制應(yīng)用程序的生命周期。Electron 用來(lái)運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱為主進(jìn)程。 在主進(jìn)程中運(yùn)行的腳本通過(guò)創(chuàng)建web頁(yè)面來(lái)展示用戶界面。它內(nèi)置了完整的Node.js API，主要用于打開(kāi)對(duì)話框以及創(chuàng)建渲染進(jìn)程。此外，主進(jìn)程還負(fù)責(zé)處理與其他操作系統(tǒng)交互、啟動(dòng)和退出應(yīng)用程序。
主進(jìn)程就像是應(yīng)用程序的管家，負(fù)責(zé)管理整個(gè)應(yīng)用程序的生命周期以及所有渲染進(jìn)程的創(chuàng)建。
按照慣例，主進(jìn)程位于名為main.js的文件中，你可以通過(guò)在package.json文件中修改配置屬性來(lái)更改主進(jìn)程文件。
比如，我們可以打開(kāi)package.json并更改配置屬性：
