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

本章主要內容

理解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。

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