跨平臺桌面應用開發：基於Electron與NW.js（簡體書）

本書是一本同時介紹 Electron和 NW.js的圖書，這兩者是目前流行的支持使用 HTML、CSS 和 JavaScript 進行桌面應用開發的框架。書中包含大量的編碼示例，而且每個示例都是五臟俱全的實用應用，作者對示例中的關鍵代碼都做了非常詳細的解釋和說明，可讓讀者通過實際的編碼體會使用這兩款框架開發桌面應用的切實感受。除此之外，在內容上，本書非常系統，分為４大部分：第１部分介紹兩個框架的歷史背景，並教大家編寫第一個桌面應用，讓讀者對這兩個框架有一個初步的感受；第 2部分深入講解 NW.js和 Electron 的內部工作原理，幫助大家剖析這兩個框架的底層機制，讓讀者對它們有更深入的理解；第 3部分介紹使用框架提供的大量 API 來構建多款實用的桌面應用，全方位地讓讀者體會使用這兩個框架開發桌面應用帶來的舒適體驗；第 4部分為大家講解了，當開發完成後，如何對應用進行測試、跨平臺打包和發佈。可以說這 4部分結合起來將開發桌面應用的整個流程系統化地講解得非常清楚、到位。相信結合書中大量的示例，讀者一定能很快掌握並自己使用 Electron和 NW.js構建出跨平臺的桌面應用。

Paul B. Jensen是英國倫敦一家名為 Starcount 公司的高級售前顧問。他曾在創業公司工作過，還在網絡代理商 New Bamboo（現在屬￿ Thoughtbot）、AOL工作過，後來開辦了他自己的諮詢公司 Anephenix Ltd。他在一些大會（倫敦 Ruby 用戶組， 2013 年的 Cukeup以及倫敦用戶組）上做過演講，創建了他自己的實時儀錶盤（ Dashku），也曾是 Web 框架 Socketstream 的項目帶頭人。他喜歡麥芽酒和騎行，他的 Twitter賬號是 @paulbjensen。
譯者
本書譯者中英文水平都極高，且工作在編程第一線，具有豐富的理論知識和實踐經驗，此前翻譯過圖書，相信能為大家帶來一本質量上乘的圖書。

譯者序

Stack Over.ow 的聯合創始人 Jeff Atwood 說過一句非常經典的話： Any application that can be written in JavaScript, will eventually be written in JavaScript，翻譯過來就是：任何能使用 JavaScript 來編寫的應用，最終都會用 JavaScript 來實現。這句話被譽為 Atwood 定律。事實上，這句話正在不同領域被一次一次地驗證。以前 JavaScript 只是運行在瀏覽器沙箱環境中的腳本語言，而自從 2009 年 Node.js 問世後，JavaScript 在服務器端、物聯網領域、移動原生應用開發領域，乃至桌面應用開發領域都大放異彩。
以往要開發桌面應用，針對 Windows、Linux 以及 Mac OS 三大平臺要專門去學習各自平臺的編程語言和框架，成本高昂而且要做一款支持兼容三種平臺的桌面應用非常費時，基本都需要針對不同平臺的不同團隊才能實現。就我個人而言，幾年前我一直想學習 Objective-C 以及 Cocoa 來開發 Mac OS X 桌面應用，但是始終沒有成功。現如今， JavaScript 讓這一切都變得無比簡單。一名 Web 開發者就能開發出兼容三大操作系統的桌面應用。不僅大大降低了學習曲線，而且開發效率可以說呈指數級提升。這要歸功於 NW.js 和 Electron 這兩款目前最流行的使用 Web 技術開發桌面應用的開發框架。這兩款框架將 Chromium 和 Node.js 非常好地結合起來， Chromium使得 Web 開發技術能夠在桌面應用中得以施展， Node.js則提供了訪問操作系統 API 的能力，兩者的結合使得使用 JavaScript 開發桌面應用成為可能。
目前， NW.js 和 Electron 這兩款框架在全世界各大公司被廣泛使用。近幾年紅遍全球的 Slack就是使用 Electron 來開發他們的桌面應用的，國內阿裡巴巴的企業應用―釘釘桌面應用，就是用 NW.js 來開發的，除此之外，全球範圍內越來越多的桌面應用都在採用這兩種框架進行開發。
本書是一本專門介紹如何使用 NW.js 和 Electron 框架來開發桌面應用的書。在國內，目前本書應該是第一本同時介紹 NW.js 和 Electron 開發桌面應用的圖書。而且本書內容非常系統，從框架的背景介紹、教你開發第一款桌面應用、深入剖析框架內部原理、通過豐富的示例應用介紹框架提供的多個 API，再到應用的測試、調試、跨平臺打包、構建和最終的發佈，涵蓋整個開發到發佈流程中的所有環節。而且本書的每一章中都有大量的實用示例，通過實際的編碼讓你感受使用 NW.js 的 Electron 開發桌面應用的體驗。書中每個示例應用都會分別介紹 NW.js 和 Electron 兩個版本如何實現、過程中需要注意的地方有哪些，非常有實踐價值。總的來說，本書不論是對於初學者還是有一定經驗的開發者，都是一本相當好的學習使用 NW.js 和 Electron 開發桌面應用的圖書。
最後，非常感謝電子工業出版社計算機出版分社的張春雨編輯對我的信任，將這本書交給我來翻譯；感謝本書的責任編輯劉舫對本書的辛苦付出；還要感謝本書的原作者 Paul B. Jensen，翻譯過程中遇到模棱兩可的地方，通過 Twitter 聯繫他，他都能及時回復我，並給予詳細的解釋。
翻譯和寫書一樣，都是需要花費大量精力和時間的事情，自從翻譯完上一本《了不起的 Node.js》後，我就對自己說我再也不會幹翻譯圖書的事情了，實在是太累了。但是，當出版社編輯找到我，給我看了原版樣書後，我還是沒忍住，因為雖然過程很累很苦，但是在書出版的那一刻，除了自己小小的虛榮心能夠得到一點滿足，更多的是一想到可以幫助到很多學習使用 NW.js 和 Electron 開發桌面應用的開發者，就覺得非常自豪，再累再苦都是值得的！當然，翻譯過程中難免會有錯誤的地方，也希望大家能夠多多指正！
謹以此書獻給在背後默默支持我的家人，特別是我的兩個孩子 ―木木和一一，希望你們能夠健康快樂地成長，爸爸愛你們！
Goddy Zhao 2017 年 12 月 12 日於上海

推薦序

Electron 框架誕生於 2013 年，那個時候 Node.js 才剛剛流行起來。整個社區因 JavaScript 能夠在客戶端和服務器端運行而興奮不已，並且也在嘗試使用 JavaScript 來開發桌面應用。
我個人也對 JavaScript 技術很熱衷，而且 GUI 編程是我比較喜歡的領域。我自己寫過一些 Node.js 的模塊，這些模塊對主流的 GUI 工具提供了 JavaScript 的綁定，不過都做得一般，也沒有引起太多關注。
之後我發現了一個非常有趣的 Node.js模塊，叫作 node-webkit：這個簡單的模塊可以實現在 WebKit 瀏覽器中插入執行 Node.js 代碼。於是我有了一個點子，可以用它來開發一個具備完整功能的客戶端開發框架：我可以用 Chromium 來顯示 Web 頁面，就像桌面窗口一樣，然後其他的都用 Node.js 來控制！
當時 node-webkit 的開發並不活躍，於是我接手了這個項目並進行重寫，將它打造成一個完善的用於桌面應用開發的框架。當我完成第一版的時候，它可以用於開發小型的跨平臺應用，效果奇好！
與此同時， GitHub正在秘密開發一款基於 Web技術的 Atom編輯器，而且他們非常希望可以有一個更好的工具來替代目前 Atom不盡如人意的 Web運行時。 GitHub曾嘗試將 Atom遷移到 node-webkit，但是遇到了很多問題。我和他們的開發者碰了面並且最終我們達成一致：由我來開發一款新的框架，讓開發者使用 Node.js
技術和瀏覽器相關技術就可以開發桌面程序，然後再幫他們把 Atom遷移過來。
這款新的框架起初命名為 atom-shell；一年後，在正式開源的時候將其改名為 Electron。Electron是從零開始開發的，並且使用了和 node-webkit完全不同的底層架構，它可以讓開發者開發大型且複雜的桌面端應用。（如今， node-webkit交由其他開發者在維護開發，項目狀態也比較活躍。它現在叫 NW.js，使用也很廣泛。）
因為使用 Electron可以既簡單又快速地構建出複雜的跨平臺應用，所以它得到了許多開發者的關注，發展也很迅速。現如今，許多大公司都基於 Electron 開發了他們的桌面端產品，除此之外，小型創業公司也圍繞這個平臺在構建他們的業務。
使用 Electron 和 NW.js 開發桌面應用要求開發者掌握一些新的概念。桌面應用開發和前端程序開發截然不同，對於初學者來說也更難。不過本書可以幫助到大家。
本書將帶你一覽 Electron 和 NW.js 豐富的 API、教你如何開發桌面應用。你會學到許多使用 JavaScript 開發桌面應用的技術細節，包括如何構建和分發應用，以及如何將現有應用集成到桌面應用中的一些深度小技巧。本書還涵蓋了一些高級話題，如調試、分析以及在不同平臺發佈應用，哪怕是有經驗的開發者也可以從中學到不少東西。
我建議所有想要開發桌面應用的讀者都來閱讀本書。讀完後你會驚訝於使用 JavaScript 和 Web 技術來進行跨平臺的桌面應用開發是一件多麼簡單的事情。
Cheng Zhao Electron框架開發者

序言

幾年前我在一家叫 Axisto Media 的公司工作時，我們需要為一個健康行業大會開發一款桌面應用，用來展示大會的視頻、議題信息以及海報。當時這款應用是用 Adobe AIR 開發的。但是開發過程並不容易，而且客戶需要進行一些操作才能讓應用在他們的計算機中運行起來。好在我們後來找到了更好的解決方案。
我大概從 2013 年年底開始學習 NW.js（那個時候它叫 node-webkit）。我發現使用 NW.js 開發的桌面應用客戶用起來更方便，因為他們不再需要安裝 Adobe Flash 播放器，也不用把應用文件放到 U 盤裡來加載。他們只需雙擊應用就可以運行了。不僅如此，我們還能提供 Linux版本，而且其技術棧和我們的業務本身的技術棧很契合，因為我們在其他地方也都使用 Node.js 技術。
我抓住了機會，使用 NW.js 去重新構建這款桌面應用並且摒棄一切，勇往直前。 NW.js 讓一切都變得更加簡單，這得益於它可以從大會網站的 Web 應用重用 HTML、 CSS和 JS代碼，我們可以讓桌面應用看上去樣式更加統一。這是一個巨大的好處。
我當時對這個框架非常滿意，於是決定在 2014 年 6 月的倫敦 Node.js 用戶組聚會上進行分享。後來我就把演示稿放到了網上。幾個月後，我發現這個演示稿在 SlideShare 網站上很快被查看了 20 000次。這太棒了，我以為這事就這樣了。
然而並沒有。
2014 年 12 月，我收到了一封來自 Manning 出版社 Erin Twohey 的電子郵件，他問我是否有興趣寫一本關於 node-webkit 的書。這簡直太棒了，我立刻就投入到這本書的寫作中。
那段時間發生了很多事情。Node.js 社區 fork 了 Node.js 項目並命名為 IO.js，他們加快了平臺新特性的開發，後來 IO.js 項目又合併回了 Node.js項目。 node-webkit 框架切換到了 IO.js，並且由於它使用了 Blink 而非 WebKit，因此改名為 NW.js。一年過去了，本書的寫作也臨近尾聲，就在這個時候，我們發現了另外一個可以用 Node.js 開發桌面應用的框架，叫 Electron。仔細一看，我發現 Electro

目錄

第1部分　歡迎來到 Node.js 桌面應用開發的世界
第1章　Electron和NW.js入門 .......................3

1.1　為什麼要用 Node.js 構建桌面應用 ...4

1.1.1　桌面應用到 Web 應用，再回到桌面應用 ..............................................4

1.1.2　Node.js 桌面應用相比 Web 應用有什麼優勢 ........................................6

1.2　NW.js 和 Electron 的起源 ..................8

1.3　NW.js 介紹 ..........................................9

1.3.1　使用 NW.js 構建 Hello World 應用 .......................................................10

1.3.2　NW.js 有哪些特性................15

1.4　Electron 介紹 ....................................18

1.4.1　Electron 是如何工作的以及它和 NW.js 的區別是什麼 ......................19

1.4.2　使用 Electron 開發 Hello World 應用 ....................................................19

1.4.3　Electron 有哪些特性 ............25

1.5　NW.js 和 Electron 支持創建哪類應用 ..............................................................25

1.5.1　Slack ......................................26

1.5.2　Light Table ............................26

1.5.3　Game Dev Tycoon .................27

1.5.4　Gitter......................................28

1.5.5　Macaw ...................................29

1.5.6　Hyper .....................................30

1.6　小結 ...................................................31

第2章　為你的首款桌面應用搭建基礎架構.32

2.1　我們將構建什麼應用 .......................33

2.2　創建應用 ...........................................34

2.2.1　安裝 NW.js 和 Electron ........34

2.2.2　為 NW.js 版本的應用創建文件和文件夾.............................................35

2.2.3　為 Electron 版本的應用創建文件和文件夾 .........................................37

2.3　實現啟動界面 ...................................39

2.3.1　在工具條中展示用戶個人文件夾信息 .................................................40

2.3.2　顯示用戶個人文件夾中的文件和文件夾 .............................................44

2.4　小結 ...................................................54

第3章　構建你的首款桌面應用...................56

3.1　瀏覽文件夾 .......................................57

3.1.1　重構代碼 ...............................57

3.1.2　處理對文件夾的雙擊操作 ...61

3.2　實現快速搜索 ...................................64

3.2.1　在工具條中增加搜索框 .......65

3.2.2　引入一個內存搜索庫 ...........65

3.2.3　在界面上觸發搜索功能 .......67

3.3　改進應用內的導航功能 ...................71

3.3.1　實現當前文件夾路徑可單擊 .................................................................71

3.3.2　讓應用隨著文件夾路徑的改變顯示對應的文件夾內容 .....................74

3.3.3　實現使用默認應用打開對應的文件 .....................................................75

3.4　小結 ...................................................77

第4章　分發你的首款桌面應用...................79

4.1　對應用進行與分發相關的設置 .......80

4.2　對要分發的應用進行打包 ...............83

4.2.1　使用一種 NW.js 的構建工具.................................................................83

4.2.2　使用一種 Electron的構建工具 .............................................................84

4.2.3　設置應用的圖標 ...................85

4.3　在多個操作系統中測試應用 ...........91

4.3.1　Windows 操作系統 ...............91

4.3.2　Linux 操作系統 ....................92

4.3.3　Mac OS 系統.........................92

4.4　小結 ...................................................92

第2部分　深度剖析
第5章　在NW.js和Electron中使用Node.js..97

5.1　什麼是 Node.js ..................................98

5.1.1　同步與異步 ...........................98

5.1.2　流是一等公民 .....................101

5.1.3　事件 .....................................105

5.1.4　模塊 .....................................106

5.2　Node 包管理器 ...............................109

5.2.1　尋找應用需要的模塊 .........109

5.2.2　使用 package.json記錄安裝的模塊 ....................................................109

5.2.3　使用 npm 打包模塊和應用 111

5.3　小結 ................................................. 114

第6章　探索NW.js和Electron的內部機制 .115

6.1　NW.js 內部是如何工作的 .............. 116

6.1.1　使用同一個 V8 實例 .......... 117

6.1.2　集成主事件循環 ................. 118

6.1.3　橋接 Node.js 和 Chromium 的 JavaScript 上下文............................... 119

6.2　Electron 內部是如何工作的 .......... 119

6.2.1　libchromiumcontent 介紹 ...120

6.2.2　Electron 中的組件 ..............120

6.2.3　Electron 是如何將應用運行起來的 ....................................................121

6.3　Node.js是如何與NW.js以及Electron一起工作的 ...........................................122

6.3.1　Node.js 集成在 NW.js 的哪個位置..................