第一章 Electron介紹 | Electron in Action(中譯)

 

Github

官方地址

表明做:

Visual Studio Code

• Atom - Code editor. Github開源的代碼編輯器，Electron起源地

• Visual Studio Code - Cross-platform IDE. 近幾年最火的代碼IDE

• Hyper - Terminal. 3萬多星的命令行窗口，慌了!

• 其餘

本章主要內容

• 理解Electron是什麼

• 學習Electron基於什麼技術

• 瞭解使用Electron和傳統Web應用程序有什麼不一樣

• 構建Electron應用

• 在生產中使用Electron構建現實應用

 

網頁的一大特點就是無處不在， 這是一個使人驚歎的平臺，用它所建立的協做平臺，能夠被多種類型的設備所訪問，不管設備運行在何種操做系統上。換句話說，網頁只能運行在瀏覽器中，沒法直接運行在操做系統中，所以網頁應用程序也就沒法訪問文件操做系統。它們也沒法執行非JavaScript編寫的代碼，他們沒法調用桌面應用程序可使用的衆多操做系統接口。還有，當大多數網頁應用程序沒有可靠的互聯網鏈接時，也就沒法使用了。

很長一段時間，相對於網頁開發，構建桌面程序須要適應徹底不一樣的技能棧。 咱們中的許多人沒有足夠的耐心爲學習新語言和框架所需的曲線來進行長時間的學習。使用Electron，您可使用做爲Web開發人員的現有技能來構建具備原生桌面應用許多功能的應用程序。

Electron是什麼?

Electron是一個實時框架，容許您使用HTML5，CSS和JavaScript建立桌面應用程序。這是一個由GitHub的工程師Cheng Zhao（又名zcbenz）發起的開源項目。之前稱爲Atom Shell，Electron做爲構建Github上可編程的文本編輯器Atom的框架而被開發出來。您可能據說過或使用過Apache Cordova或Adobe PhoneGap來構建包含在本機shell中的Web應用程序 - 用於iOS，Android和Windows Phone等移動操做系統。若是是這樣，那麼用Electron構建桌面應用程序會有所幫助。

Electron容許您使用已知的Web技術來構建桌面應用程序。在本書中，您將學習如何構建使用Windows，macOS和Linux上的本機操做系統API的應用程序。

Electron將Chromium和Node.js合併到同一個運行環境中。它容許開發人員使用Web頁面構建GUI，並經過與操做系統無關的API訪問Windows，macOS和Linux上的本機操做系統功能。

Chromium和Node自己就是廣受歡迎的應用程序平臺，它們都被獨立用於建立雄心勃勃的應用程序。 Electron將兩個平臺結合在一塊兒，容許您使用JavaScript構建一個全新的應用程序類。您能夠在瀏覽器中執行任何操做，您Electron和Node中能作的任何事，您在Electron中一樣可使用。 ​ 使人興奮的部分是您能夠將兩種技術結合在一塊兒。能夠構建僅使用一個技術沒法實現可是利用這兩個平臺的優勢能夠生成的應用程序，這就是本書的所有內容。 Electron不只是構建功能相似原生的Web應用程序的絕佳選擇桌面應用技術；它也是圍繞Node應用程序構建GUI的絕佳選擇，不然將限制在命令行界面。見圖1.1。

假設您要構建一個容許您在計算機上查看和編輯圖像文件夾的應用程序。傳統的瀏覽器應用程序沒法訪問文件系統。他們沒法訪問照片目錄，加載目錄中的任何照片，或保存您在應用程序中所作的任何更改。使用Node，您能夠實現全部這些功能，可是您沒法提供GUI，這會使您的應用程序對普通用戶難以使用。經過將瀏覽器環境與Node相結合，您可使用Electron建立一個能夠打開和編輯圖片的應用程序而且提供用戶界面給你的用戶。見圖1.2。

Electron不是一個複雜的框架 - 它是一個簡單的運行時框架。與您從命令行使用Node的方式相似，您可使用Electron命令行工具運行程序。您無需學習許多約定,便可開始使用，而且您能夠自由地構建應用程序，可是我會在本書中提供建議和最佳實踐。

圖1.1

LevelUI是一個使用Electron構建的Node的LevelUp數據庫．你不能經過傳統的瀏覽器Web技術來構建，由於它不能訪問用戶計算機上的本地數據庫，也不能使用LevelUI庫，由於它是一個編譯過的c++模塊，只有Node能夠可是瀏覽器不可使用。

圖1.2 Electron結合網頁瀏覽組件Chromium與Node的底層系統訪問。

Chromium是什麼?

Chromium是谷歌的Chrome web瀏覽器的開源版本。它共享許多相同的代碼和特性，但有一些細微的差異和不一樣的受權。內容模塊是核心代碼，容許Chromium在獨立進程中呈現web頁面，並使用GPU加速。它包括Blink渲染引擎和V8 JavaScript引擎。內容模塊使web瀏覽器成爲web瀏覽器。它處理從web服務器獲取和呈現HTML、加載任何引用的CSS和JavaScript、相應地設計頁面樣式並執行JavaScript。

考慮Chromium最簡單的方法是考慮它沒有作什麼。內容模塊不支持Chrome擴展。它不處理與谷歌的雲服務同步書籤和歷史記錄。它不能安全地存儲您保存的密碼，也不能在您訪問某個頁面時自動爲您填寫密碼。它不會檢測一個頁面是否用另外一種語言編寫，而後調用谷歌的翻譯服務尋求幫助。內容模塊只包含呈現HTML、CSS和JavaScript所需的核心技術。

Node.Js是什麼?

在JavaScript存在的前15年裏，在傳統上是孤立於web瀏覽器。對JavaScript運行在服務端沒有太多的支持。項目是存在的，但歷來沒有獲得任何推動。Node.js項目最初是發佈於2009年，做爲一個使用JavaScript用於開發開源、運行時跨平臺的服務器端應用程序。它使用了谷歌的開源V8引擎來解釋JavaScript,用於訪問文件系統、建立服務器和從外部模塊加載代碼的接口。

在過去的幾年裏，Node受到了極大的關注和歡迎而且用途普遍，從編寫web服務器到控制機器人，還有？你猜對了，構建桌面應用程序。Node附帶了一個名爲npm的包管理器，這使得在多達25萬個庫的註冊表尋找依賴變得容易。

誰在使用Electron?

Electron被大大小小的公司用於構建桌面應用程序。如前所述，它最初是做爲GitHub的Atom文本編輯器的基礎開發的。Atom須要訪問文件系統來履行其做爲文本編輯器的職責。一樣，其餘公司也將Electron技術做爲文本編輯應用程序的基礎。Facebook發佈了一個基於Atom的Nuclide包，它將文本編輯器變成了一個完整的集成開發環境(IDE)，並提供了一流的支持，用於React Native、Hack和Flow項目。微軟的跨平臺Visual Studio Code編輯器也使用了Electron，它運行在macOS、Windows和Linux上。

您可使用electronic構建更多的文本編輯器。流行的消息傳遞應用程序－Slack，在其Windows和Linux版本中使用了Electron。Nylas爲其N1電子郵件客戶端使用了Electron，在全部主要平臺上的此客戶端看起來都很漂亮。它還支持JavaScript插件架構，容許第三方開發人員添加特性和擴展UI。

Particle－生產用於建立定製硬件的開發工具包，它的IDE使用了Electron，該IDE容許用戶編寫代碼，並經過蜂窩網絡或Wi-Fi網絡將代碼部署到硬件設備上。使用Mapbox Studio，用戶能夠導入本地存儲的數據，並在本身的計算機上進行處理，而無需經過internet將數據發送到Mapbox的服務器。其結果是更快更好的體驗，容許設計師輕鬆建立自定義映射。

Dat是一個針對分散數據用於共享、同步和版本控制的開源工具。這個由捐獻資助的項目由三個web開發人員組成。儘管是一個相對較小的團隊，Dat仍是爲該項目發佈了一個使用Electron構建的桌面應用程序。2015年，wiredcraft(一家軟件諮詢公司)利用Electron開發了一款離線友好的Windows應用程序，用於收集和糾正緬甸的選民登記信息。該公司須要一個可以存儲收集到的數據的應用程序 而後在設備鏈接到網絡時發佈它。該公司選擇了Electron而不是c++構建它的方案，由於它容許Wiredcraft利用其現有的HTML、CSS和JavaScript功能，而不是從新學習這些技能以適應不一樣的生態系統。

Javascript的建立者Brendan Eich開發了一款專一於速度和安全性的新瀏覽器braveich，它自己就是創建在Electron之上的,參見圖1.3。沒錯，您甚至可使用web技術來構建web瀏覽器。

圖1.3 Brave是一個構建在Electron之上的完整web瀏覽器。

 

基於electronic構建的新項目天天都在發佈，由於公司和開發人員看到了構建產品的價值，這些產品使用桌面應用程序提供的功能，同時仍然保持web固有的平臺能力。在本書的最後，您將使用現有的web開發技能，並將其應用於建立在傳統瀏覽器環境中不可能建立的新應用程序。

我須要瞭解什麼？

讓咱們從你不須要知道的開始。本書是爲web開發人員編寫的，他們但願使用現有的技能來建立在傳統瀏覽器環境中不可能建立的桌面應用程序。從這本書中獲取有價值的構建桌面應用程序的知識，你不須要任何經驗積累。

也就是說，您應該可以輕鬆地編寫JavaScript、HTML和CSS，可是您不須要成爲專家。在本書中，我不會涉及變量或條件，可是若是您熟悉JavaScript的通常語言特性，那麼，你可能就具有了必要的技能。若是您熟悉Node中的一些約定和模式，這也頗有幫助。如模塊系統如何工做。咱們將在遇到這些概念時探討它們。

 

爲何我應該使用Electron

當您爲web瀏覽器編寫應用程序時，您必須在選擇使用什麼技術方面保持保守，在如何編寫代碼方面保持謹慎。這是由於，與許多服務器端狀況不一樣，您編寫的代碼將在其餘人的計算機上執行。

您的用戶可能正在使用最新版本的現代瀏覽器，如Chrome或Firefox，也可能正在使用過期版本的Internet Explorer。在何處呈現和執行代碼，您幾乎沒有發言權。你必須作好一切準備。

當您編寫代碼時，一般必須考慮到當今廣泛使用的絕大多數瀏覽器的版本中支持的最普遍特性。即便問題存在更好、更有效或更吸引人的解決方案，您也可能沒法使用該方法。當您決定使用現代瀏覽器特性時，您一般須要實現一個應急計劃，包括優雅的回退、特性檢測和漸進加強，這給您的開發工做流增長了不小的阻力。

當您使用Electron構建應用程序時，您是在打包特定版本的Chromium和Node。所以，您能夠依賴這些版本中可用的任何特性。您沒必要關心其餘瀏覽器及其版本支持哪些特性。例如，若是你構建的應用程序的Chromium版本支持Service Worker API，那麼您能夠放心地在應用程序中使用該API。參見圖1.4。

圖1.4 在基於瀏覽器的web應用程序中，因爲Fetch API提供了不一致的支持，所以依賴它多是不實際的。可是在您的電子應用程序中，您將當前穩定的Chromium構建與對Fetch API的徹底支持捆綁在一塊兒。

 

Electron容許您使用最前沿的web平臺特性，由於它包含了相對較新的Chromium版本。Electron中Chromium的版本一般會在Chromium發行新的穩定版後的一到兩週以內更新，具體時間根據升級所需的工做量而定。爲了使版本更加穩定，Electron一般會在Node.js發佈了新版本的一個月以後再更新。在Electron裏，Node.js和Chromium共享同一個V8實例--一般是Chromium在用的版本。大多數狀況下這能正常工做但有時候仍是須要爲Node.js打補丁。

 

基於已有的技術

若是您像我同樣，那麼構建web應用程序的經驗可能比桌面應用程序豐富得多。您但願將建立桌面應用程序的能力添加到您的工具集中，可是您沒有足夠的時間來學習一種新的編程語言，並且可能還須要學習一個新的框架。

學習一門新的語言或框架是一項重大的投資。做爲一名web開發人員，您習慣於編寫對全部用戶都一樣有效的應用程序—即便這意味着要與特定瀏覽器或屏幕大小的特性做鬥爭。可是，當您考慮構建傳統的桌面應用程序時，您談論的不只僅是學習一種語言和框架。若是您想要針對Windows、macOS和Linux，還須要學習至少三種不一樣的語言和框架。

我的和小型團隊可使用Electron在他們沒法提供桌面應用程序的狀況下提供桌面應用程序。對於一個小團隊來講，僱傭一個精通每一個平臺構建應用程序的開發人員可能不是一個選擇。electronic容許您使用現有的技能集並將應用程序部署到全部主要平臺。使用Electron，您能夠支持多個操做系統，而不須要像一般支持多個瀏覽器那樣作那麼多工做。

 

訪問本機操做系統APIs

Electron應用程序相似於任何其餘桌面應用程序。它們與您的其餘本機應用程序一塊兒位於文件系統中。它們位於macOS的dock中，或者Windows和Linux的任務欄中，其餘本地應用程序都掛在那裏。Electron應用程序能夠觸發本機打開和保存文件對話框。能夠將這些對話框配置爲容許操做系統只選擇具備特定文件擴展名的文件、整個目錄或多個文件。你能夠拖拽文件到Electron應用程序並觸發不一樣的操做。

此外，Electron應用程序能夠像其餘應用程序同樣設置自定義應用程序菜單。參見圖1.5。它們能夠建立自定義上下文菜單，當用戶從應用程序中右鍵單擊時，這些菜單就會當即生效。您可使用Chromium的通知API來觸發系統級的通知。它們還能夠從系統剪貼板中讀取數據，並將文本、圖像和其餘媒體寫入剪貼板。

圖1.5 Electron容許您建立自定義應用程序菜單

與傳統的web應用程序不一樣，電子應用程序並不侷限於瀏覽器。您能夠在菜單欄或系統托盤中建立應用程序。參見圖1.6。您甚至能夠註冊全局快捷方式來觸發這些應用程序或它們的任何功能，只需在操做系統中的任何位置進行特殊的擊鍵。

圖1.6 您能夠在操做系統的菜單欄或系統托盤中建立一個應用程序。

Electron應用程序能夠訪問系統級的信息，好比計算機是處於電池供電狀態仍是正在充電。若是有必要，它們還可讓操做系統保持亮屏，防止它進入節電模式。

 

加強權限和寬鬆限制

web是歷史上最大的分佈式應用程序平臺。它是如此廣泛，以致於web開發人員將許多相關的頭痛視爲理所固然。構建web應用程序須要精心設計服務器端之間的通訊應用程序和潛在的數千個客戶端應用程序實例。客戶端代碼運行在用戶的web瀏覽器中——遠離服務器。

客戶機中發生的任何事情對於瀏覽器會話都是惟一的，除非更改被髮送回服務器。一樣，若是您的端發生了任何更改，您必須等到客戶機發送另外一個HTTP請求更新;或者，若是在客戶機和服務器上都實現了該功能，則能夠經過WebSockets發送更新。

桌面應用程序具備更普遍的功能，而且因爲用戶顯式地下載、安裝和打開應用程序，因此對它們所能作的限制更少。然而，當你在瀏覽網頁時，您正在執行沒有選擇安裝在計算機上的代碼。所以，web應用程序在它們被容許作的事情上有不少限制。

當瀏覽器訪問web上的一個頁面時，它會很高興的加載全部HTML代碼文檔，以及這些代碼添加的任何附加依賴項，而後開始執行代碼。多年來，瀏覽器廠商對瀏覽器的功能進行了限制，以防止惡意代碼對用戶或internet上的其餘站點形成傷害。

我不是個壞人！可是爲了便於討論，假如我是。假設我運行一個流行的站點，它銷售手工製做的小部件。有一天，一個競爭對手忽然出如今個人雷達上，他以一樣高的折扣出售而且優良的小部件。個人網站一樣仍是受歡迎的，可是這個新的挑戰者難以睡眠。做爲一個壞人，我決定將JavaScript添加到個人網站中，該網站每隔幾毫秒就向競爭對手的網站發出一次AJAX請求，但願訪問我網站的數千名訪問者可以下載這段代碼，從而有效地擊潰競爭對手的服務器，使其沒法處理任何合法的請求。這也會下降訪問者在我網站上的體驗，但這是我願意付出的代價讓競爭對手的網站變得崩潰。

儘管個人計劃具備惡魔般的性質，但它行不通。現代瀏覽器限制客戶端代碼向第三方服務器發出請求，除非該服務器明確聲明容許此類請求。

通常來講，大多數網站不會這樣作。若是您想向第三方服務器發送請求，那麼您必須先向您本身的服務器發出請求，讓它與第三方，並將結果轉發給客戶端。如前面的示例描述,這增長了個人服務器瓶頸對那些成千上萬的請求,這將使我推出這類攻擊變得不可行。很是簡單的原理，對於個人競爭對手只需屏蔽我單一的服務器地址而不是來個人網站的成千上萬遊客的IPs。

瀏覽器還嚴格限制客戶端代碼能夠訪問什麼以及它能夠作什麼。全部這些都爲用戶提供了更安全、更安全、最終更好的體驗。這一切都是很是實用的，也是Web成爲這樣一個世界的用戶平臺緣由之一,很是棒的，平易近人。

也就是說，全部這些有用且重要的安全限制都嚴重限制了使用web技術構建應用程序的類型。用戶顯式地下載和安裝Electron應用程序，就像任何其餘本機應用程序同樣。您能夠像任何本機桌面應用程序或服務器端Node進程那樣自由地訪問文件系統。您還能夠自由地向第三方api發出請求，而不須要通過Node服務器，由於您能夠訪問與任何其餘Node進程相同的特權和功能。參見圖1.7。

圖1.7 Electron應用程序可使用Node.js第三方api發出請求。

從瀏覽器上下文訪問Node

除了授予對文件系統的訪問權和啓動web服務器的能力以外，Node.js還使用了基於CommonJS模塊規範的系統。從最先的版本開始，Node就支持將代碼分解爲多個模塊，並在給定文件中顯式地包含所需的模塊。

爲瀏覽器打包大量JavaScript代碼並不老是那麼容易。對於少許代碼，您能夠將其包含在匹配的一對<script>開始和結束。 對於較大的代碼塊，可使用src屬性引用外部JavaScript文件。咱們歡迎您儘量多地這樣作，可是您必須付出性能代價，由於瀏覽器會發出一個額外的請求來獲取每一個外部資產。

歡迎您使用構建工具，如webpack或Browserify(若是您願意)，但在Electron應用程序中一般沒有必要使用它，歡迎您使用構建工具，如webpack或Browserify(若是您願意)，可是在電子應用程序中一般沒有必要使用它，由於全部Node的全局屬性(例如require、module和export)均可以在瀏覽器內容中使用。您能夠在傳統上認爲是客戶端的地方使用Node的模塊系統，而不須要嚮應用程序添加構建過程。

您能夠從Electron應用程序的瀏覽器上下文訪問Node的全部api。除了利用Node的模塊系統以外，您還可使用帶有本地擴展的已編譯模塊、訪問文件系統，以及作一些一般在瀏覽器環境中不支持的其餘事情。

 

離線第一

任何曾經在橫貫大陸的航班上使用過計算機的人均可以證實，大多數基於瀏覽器的web應用程序在沒有鏈接到internet的狀況下都不太好。甚至使用任何流行的客戶端框架的高級web應用程序 與Ember、React或Angular同樣，一般須要鏈接到遠程服務器來進行數據交換。

Electron應用程序已經下載到用戶的計算機上。一般，它們加載本地存儲的HTML文件。在那裏，若是鏈接可用，他們能夠請求遠程數據和頁面。Electron甚至提供了api，容許您檢測鏈接是否可用。使用Electron構建離線應用程序不須要特殊的清單或前沿技術—這是默認狀態，除非應用程序顯式地從internet請求某些東西。除非特殊狀況(例如，您正在構建一個聊天客戶機)，不然電子應用程序能夠像其餘應用程序同樣離線工做。

Electron如何工做?

Electron由主進程和渲染器進程所組成。每一個進程在應用程序中扮演不一樣的角色，Electron包含不一樣的模塊來幫助您構建應用程序。某些模塊，例如從系統剪貼板讀寫的能力，在這兩種類型的進程中均可用。其餘的，好比訪問操做系統接口的能力，僅限於主進程。參見圖1.8。

圖1.8 Electron多進程框架

Electron運行package的main腳本的進程被稱爲主進程。 這個文件能夠命名任何您想要的名稱，只要它正確地包含在package.json中。

 

主進程

主流程有幾個重要的職責。它能夠響應應用程序生命週期事件，例如啓動、退出、準備退出、後臺調用、前臺跳轉、等等。主過程也負責與本機操做系統接口通訊。若是你想要顯示對話框去打開或者保存文件，能夠從主進程中執行。

 

渲染進程

主進程可使用Electron瀏覽器窗口模塊建立和銷燬渲染器進程，渲染器進程能夠加載web頁面來顯示用戶界面。每個進程利用Chromium的多進程架構，並在本身的線程上運行，而後，這些頁面能夠加載其餘JavaScript文件並在此進程中執行代碼。與普通web頁面不一樣，你能夠在本身的渲染進程中，訪問全部Node APIs，容許使用本機模塊和較低級別的系統交互。

每一個渲染進程都是獨立的，沒法訪問操做系統集成的接口。若是須要觸發打開或保存文件對話框或訪問任何其餘操做系統集成。其對應的渲染進程必須與主進程進行通信。

 

Electron vs. NW.js

Electron與另外一個名爲NW.js(之前稱爲node-webkit)的項目相似。這二者有不少共同之處。事實上，在開始研究電子以前，zcbenz(Electron項目發起者)是NW.js的重要貢獻者。也就是說，它們在幾個重要的方面是不一樣的，如表1.1所示。

 

　　　　　　　　　表1.1 Electron和NW.js之間的主要區別的比較

	Electron	NW.js
平臺	支持官方最新的Chromium版本	Chromium分支版本
進程模型	分離進程模型	共享Node進程
錯誤報告	內置	不支持
自動更新		不支持
Windows支持	Windows 7及以上	Windows XP及以上

 

NW.js使用了一個Chromium的分支版本。Electron使用Chromium和Node.js而且不作任何修改。這使得Electron更容易跟上大多數Chromium和Node的最新版本。電子還包括自動下載更新和錯誤崩潰上報，NW.js不支持。

NW.js應用程序從HTML頁面啓動，每一個瀏覽器窗口共享一個Node 進程。若是打開多個窗口，它們都共享同一個Node進程。Electron將Node和瀏覽器進程分開。在Electron,你從Node啓動一個主進程。這個主進程能夠打開瀏覽器窗口，每一個都有本身的進程。電子提供了主進程和瀏覽器窗口之間的通信接口，在這本書。咱們稱之爲渲染進程

若是須要考慮向後兼容性，那麼NW.js多是更好的選擇，由於它支持Windows XP和Vista。電子只支持Windows 7及之後。對於多媒體應用，Electron一般是更好的選擇，由於Chromium的FFmpeg庫是一個靜態連接的依賴項，Electron支持更多開箱即用的依賴，用NW.js，您須要手動連接FFmpeg依賴項。

 

總結

• Electron是一個使用web技術構建桌面應用程序的運行時框架。

• 該項目開始於GitHub，做爲Atom文本編輯器的基礎。

• Electron結合Chromium模塊－剝離版本的Chrome網絡瀏覽器與Node。

• 這種組合容許您構建可以訪問文件系統的應用程序以及編譯模塊，以及呈現UI和使用web api。

• Electron被大大小小的應用程序所使用，如Atom,微軟的Visual Studio Code和Slack。

• 對於那些不須要學習三種或更多語言，也不須要學習每一個平臺的框架，就想要針對一個以上平臺的我的或小型團隊來講，Electron很是適合。

• Electron容許web開發人員使用他們現有的技能集來構建在瀏覽器環境中不可能實現的應用程序。

• Electron緊跟Chromium和Node的最新版本，這意味着您可使用web平臺的最新和最強大的功能。

• 電子應用程序能夠訪問操做系統api，如應用程序和上下文菜單、文件打開和保存對話框、電池狀態和電源設置等。

• 與基於瀏覽器的web應用程序相比，電子應用程序被容許具備加強的特權，而且對其功能的限制更少。

• 電子應用程序由一個主進程和一個或多個渲染程序組成。

• 主流程處理OS集成，管理應用程序的生命週期，並建立渲染器流程。

• 渲染器進程顯示UI並響應用戶事件。

• Electron與NW.js的不一樣之處在於，它使用的是Chromium官方支持的內容模塊。而NW,使用定製的Chromium。