《跨平台桌面套用開發：基於Electron與NW.js》
Node.js全棧徹底貫徹 大前端從web到全平台 真正意義的一次編寫到處運行
【丹】Paul B. Jensen 著
Goddy Zhao 譯
ISBN 978-7-121-33474-0
2018年3月出版
定價：99.00元
360頁
16開
基本介紹
- 書名：跨平台桌面套用開發：基於Electron與NW.js
- 作者：【丹】Paul B. Jensen
- 譯者：Goddy Zhao
- ISBN：978-7-121-33474-0
- 頁數：360
- 定價：99
- 出版社：電子工業出版社
- 出版時間：2018-3
- 開本：16
編輯推薦
傳統桌面套用開發要求懂高級程式語言以及專門的框架。有了Electron和NW.js，你可以將現有Web開發技術運用到僅僅使用HTML、CSS和JavaScript就能開發的桌面套用中。而且，開發出來的套用還能在Windows、Mac和Linux中工作，顯著減少了開發和培訓的時間。
本書一步步指導你使用Electron和NW.js來進行桌面套用開發。這份指導中包含了大量的示例，教你如何開發一個屬於你自己的檔案瀏覽器，介紹使用框架提供的API來訪問攝像頭、剪貼簿數據，製作可以用鍵盤控制的遊戲以及構建一個Twitter桌面提醒工具。你還會學到如何測試和調試套用，以及為不同作業系統將套用打包為二進制檔案。
本書包含的內容
使用桌面攝像頭創建一個自拍套用
學習如何使用Devtron來測試Electron套用
學習如何在你的套用中使用Node.js
內容提要
《跨平台桌面套用開發：基於Electron與NW.js》是一本同時介紹 Electron和 NW.js的圖書，這兩者是目前流行的支持使用 HTML、CSS 和 JavaScript 進行桌面套用開發的框架。書中包含大量的編碼示例，而且每個示例都是五臟俱全的實用套用，作者對示例中的關鍵代碼都做了非常詳細的解釋和說明，可讓讀者通過實際的編碼體會使用這兩款框架開發桌面套用的切實感受。除此之外，在內容上，《跨平台桌面套用開發：基於Electron與NW.js》非常系統，分為4大部分：第1部分介紹兩個框架的歷史背景，並教大家編寫第一個桌面套用，讓讀者對這兩個框架有一個初步的感受；第 2部分深入講解 NW.js和 Electron 的內部工作原理，幫助大家剖析這兩個框架的底層機制，讓讀者對它們有更深入的理解；第 3部分介紹使用框架提供的大量 API 來構建多款實用的桌面套用，全方位地讓讀者體會使用這兩個框架開發桌面套用帶來的舒適體驗；第 4部分為大家講解了，當開發完成後，如何對套用進行測試、跨平台打包和發布。可以說這 4部分結合起來將開發桌面套用的整個流程系統化地講解得非常清楚、到位。相信結合書中大量的示例，讀者一定能很快掌握並自己使用 Electron和 NW.js構建出跨平台的桌面套用。
目錄
第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 的哪個位置 122
6.3.2 在 NW.js中使用 Node.js 的缺點 123
6.3.3 Electron 是怎么使用 Node.js 的 123
6.4 小結 124
第3部分 精通Node.js桌面套用開發
第7章 自定義桌面套用的外觀 127
7.1 視窗的尺寸和模式 127
7.1.1 配置 NW.js 套用的視窗尺寸 128
7.1.2 配置 Electron 套用的視窗尺寸 129
7.1.3 在 NW.js 中限制視窗的尺寸 131
7.1.4 在 Electron 中限制視窗的尺寸 133
7.2 無框線套用以及全螢幕套用 134
7.2.1 NW.js 中的全螢幕套用 135
7.2.2 Electron 中的全螢幕套用 138
7.2.3 無框線套用 140
7.2.4 kiosk 套用 145
7.3 小結 149
第8章 創建托盤套用 150
8.1 使用 NW.js 創建簡單的托盤套用 .151
8.2 使用 Electron 創建托盤套用 156
8.3 小結 159
第9章 創建套用選單以及上下文選單 161
9.1 為套用添加選單 162
9.1.1 套用視窗選單 162
9.1.2 使用 NW.js 為 Mac OS的套用創建選單 162
9.1.3 使用 Electron 為 Mac OS的套用創建選單 163
9.1.4 為 Windows 和 Linux的套用創建選單 166
9.1.5 基於作業系統來選擇渲染具體的選單 173
9.2 上下文選單 174
9.2.1 使用 NW.js 創建上下文選單 174
9.2.2 NW.js 中的上下文選單是如何工作的 179
9.2.3 設定選單項圖示 180
9.2.4 使用 Electron 創建上下文選單 181
9.2.5 使用 Electron 添加上下文選單 184
9.3 小結 185
第10章 拖曳檔案以及定製界面 186
10.1 在套用中拖曳檔案 186
10.1.1 使用 NW.js 實現在套用中拖曳檔案 187
10.1.2 使用 Electron 實現拖曳功能 190
10.2 模擬作業系統原生樣式 191
10.2.1 檢測用戶的作業系統 191
10.2.2 使用 NW.js檢測作業系統 191
10.2.3 使用 Electron檢測作業系統 192
10.2.4 使用 CSS匹配用戶作業系統的樣式 194
10.3 小結 197
第11章 在套用中使用網路攝像頭 198
11.1 使用 HTML5 媒體捕捉 API 來實現相片快照 198
11.1.1 解讀 NW.js 版的套用 199
11.1.2 使用 Electron 構建 Facebomb 套用 205
11.2 小結 210
第12章 存儲套用數據 211
12.1 應該使用哪種數據存儲方案 211
12.2 使用 localStorage API 存儲便箋數據 212
12.2.1 使用 Electron開發 Let Me Remember套用 213
12.2.2 使用 NW.js開發 Let Me Remember套用 216
12.3 將待辦事項套用移植為桌面套用 219
12.3.1 使用 NW.js 移植 TodoMVC Web 套用 219
12.3.2 使用 Electron 移植 TodoMVC 套用 220
12.4 小結 222
第13章 從剪貼簿複製和貼上數據 223
13.1 訪問剪貼簿數據 223
13.1.1 使用 NW.js 創建 Pearls 套用 224
13.1.2 使用 Electron 創建 Pearls 套用 228
13.1.3 使用 Electron 將不同類型的數據寫入剪貼簿 231
13.2 小結 232
第14章 綁定鍵盤快捷鍵 233
14.1 使用 NW.js 創建貪吃蛇遊戲 234
14.1.1 使用 NW.js 在視窗獲取焦點的時候實現鍵盤快捷鍵 242
14.1.2 使用 NW.js 來創建全局鍵盤快捷鍵 243
14.2 使用 Electron 為貪吃蛇遊戲創建全局快捷鍵 245
14.3 小結 247
第15章 製作桌面通知 248
15.1 關於你要構建的套用 249
15.2 使用 Electron 構建 Watchy 套用 .249
15.3 使用 NW.js 構建 Watchy 套用 254
15.4 小結 257
第4部分 準備發布
第16章 測試桌面套用 261
16.1 測試套用的不同方法 262
16.1.1 測試驅動開發 262
16.1.2 行為驅動開發 264
16.1.3 不同層面的測試 265
16.2 單元測試 265
16.2.1 使用 Mocha 編寫測試 266
16.2.2 讓待完成的測試變成執行通過的測試 268
16.3 功能測試 271
16.3.1 功能測試實踐 272
16.3.2 使用 NW.js 和 ChromeDriver 進行測試 272
16.4 使用Spectron測試Electron套用 273
16.5 集成測試 275
16.5.1 Cucumber 介紹 276
16.5.2 使用 Cucumber和 Spectron對 Electron套用進行自動化測試 277
16.6 小結 280
第17章 調試並提升套用性能 281
17.1 了解你要調試的是什麼 282
17.1.1 確定問題根本原因的位置 283
17.1.2 使用瀏覽器開發者工具進行調試 284
17.2 修復 bug 287
17.2.1 使用 Node.js 的調試器來調試套用 288
17.2.2 使用 NW.js 的開發者工具來調試套用 291
17.3 解決性能問題 296
17.3.1 Network選項卡 296
17.3.2 Timeline選項卡 297
17.3.3 Pro.les選項卡 299
17.4 調試 Electron 套用 301
17.5 小結 307
第18章 為多平台打包套用 308
18.1 為套用創建執行檔 309
18.1.1 為 Windows 系統創建 NW.js 套用的執行檔 309
18.1.2 安裝虛擬機 309
18.1.3 為一個 NW.js套用創建針對 Windows系統的 .exe檔案 310
18.1.4 為一個 Electron 套用創建 Windows 系統的執行檔 311
18.2 為 Windows 的套用創建啟動安裝器 314
18.2.1 使用 NW.js 創建 Windows 系統啟動安裝器 314
18.2.2 使用 Electron創建 Windows系統啟動安裝器 321
18.3 為 Mac OS 創建 NW.js 套用的執行檔 324
18.3.1 創建 Mac 可執行套用 324
18.3.2 為 Mac OS 創建 Electron 套用的執行檔 327
18.4 為 Linux 創建可執行套用 329
18.4.1 為 Linux 創建獨立的 NW.js 套用檔案 330
18.4.2 為 Linux 創建獨立的 Electron 套用檔案 331
18.5 小結 333
附錄A 安裝 Node.js 335
作者簡介
Paul B. Jensen是英國倫敦一家名為 Starcount 公司的高級售前顧問。他曾在創業公司工作過，還在網路代理商 New Bamboo（現在屬於 Thoughtbot）、AOL工作過，後來開辦了他自己的諮詢公司 Anephenix Ltd。他在一些大會（倫敦 Ruby 用戶組， 2013 年的 Cukeup以及倫敦用戶組）上做過演講，創建了他自己的實時儀錶盤（ Dashku），也曾是 Web 框架 Socketstream 的項目帶頭人。他喜歡麥芽酒和騎行，他的 Twitter賬號是 @paulbjensen。
譯者
本書譯者中英文水平都極高，且工作在編程第一線，具有豐富的理論知識和實踐經驗，此前翻譯過圖書，相信能為大家帶來一本質量上乘的圖書。
媒體評論
本書適合了解HTML、CSS和JavaScript的開發者。
——Paul Jensen就職於Starcount，生活在英國倫敦。
你會被這么容易就能開發桌面套用而感到震驚的！
——來自一線開發者趙成，Electron的創造者
“一次編寫，到處運行”，真的成真了。
——Stephen Byrne, Dell
推薦序
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框架開發者
序言
關於本書
NW.js 和 Electron 是基於 Node.js 開發的桌面套用框架。它們可以讓開發者使用 HTML、CSS 和 JavaScript 來構建跨平台的桌面套用。它們為 Web 設計師和開發者新開闢了一條路，可以讓他們將已有的開發 Web 套用和界面的技能同樣用於桌面套用的開發。這兩個框架還支持將同一份套用代碼分發到 Mac OS、Windows 和 Linux，這意味著開發者在構建全平台可用的套用時可以大大節約時間和精力。
NW.js 和 Electron 有一段共同的歷史，並且對部分特性的支持有類似的實現方式。本書在介紹每一個主題的時候都會同時介紹這兩個框架，幫助你了解兩者的共性和區別。這將有助於你判斷哪個框架更適合自己的需求。本書會介紹各類套用以及特性，從而激發你的學習熱情和興趣，還會對一些你可能想要開發但又不知如何開發的套用提供建議和想法。
希望你喜歡這本書，也希望你可以用本書中介紹的知識做一些很棒的事情。
誰應該閱讀本書
任何有過 HTML、CSS 和 JavaScript 開發經驗的人都可以閱讀本書並快速上手。 Node.js的開發經驗不是必需的，但是有的話讀起來會更加得心應手。如果你對於 HTML、CSS和 JavaScript完全陌生，那么在開始閱讀本書之前最好先去熟悉一下。
本書是如何組織的
本書共 18 個章節，分為 4個部分。
第 1部分主要介紹框架。
第 1章介紹 NW.js 和 Electron的入門知識，介紹它們是什麼，緣何而來，介紹用這兩個框架開發出來的 Hello World 套用是怎樣的，還會介紹一些用它們開發出來的實用的套用。
第 2章通過構建一個檔案瀏覽器套用來直接對比這兩個框架的異同。
第 3章繼續完成檔案瀏覽器套用的部分功能。
第 4章通過構建可以在不同作業系統中運行的套用來結束第 1部分的內容。
讀完第 1部分後，你將學會如何使用這兩個框架開發一個功能完整的套用。第 2部分（第 5章和第 6章）從技術角度介紹了 NW.js和 Electron 的內部原理。
第 5章介紹 Node.js，它是 NW.js 和 Electron 底層使用的編程框架。本章介紹了 Node.js 是如何工作的，異步編程和同步編程的區別以及如何使用回調、流、事件和模組。
第 6章介紹了 NW.js 和 Electron 是如何將 Chromium 和 Node.js 整合起來的，以及它們是如何處理前後端的狀態管理的。
部分內容揭示了 NW.js 和 Electron 框架的內部機制，同時也有助於對 Node.js 陌生的人理解 Node.js。
本書的第 3部分介紹了如何使用 NW.js 和 Electron 實現桌面套用的特定功能。
第 7章介紹了如何設定桌面套用的顯示、控制視窗大小和螢幕的各種模式以及如何進行不同模式之間的切換。
第 8章介紹了如何構建在桌面托盤區域顯示托盤應用程式。
第 9章介紹了如何構建套用選單以及套用內的上下文選單。
第 10章介紹了如何在套用內實現拖曳檔案以及如何在不同的作業系統中提供一致的樣式。
第 11章介紹了如何使用計算機的攝像頭實現一個自拍套用以及如何將拍攝的照片存儲到計算機中。
第 12章介紹了如何存取應用程式的數據。
第 13章介紹了如何在 NW.js 和 Electron 中使用剪貼簿 API 實現應用程式和作業系統之間的內容複製和貼上。
第 14章通過構建一個 2D 遊戲介紹了如何在套用中支持快捷鍵，還介紹了如何實現系統級的快捷鍵操作。
第 15章通過構建一個推特訊息流客戶端介紹了如何實現桌面訊息提醒，以此來結束第 3部分的內容。這部分介紹了絕大部分 NW.js 和 Electron 都支持的特性，可幫助你了解這些特性框架是如何支持以及如何使用的，同時有助於判斷到底哪個框架更適合你的需求。本書最後一部分介紹了套用發布前需要做的工作：寫測試、調試代碼以及最終產出一個可執行的二進制包分發給客戶。
第 16章介紹了如何在不同粒度上測試桌面套用。介紹了單元測試、功能測試以及集成測試的概念，還介紹了使用 Cucumber 編寫套用特性需求文檔，使用 Spectron 為桌面套用做自動化集成測試。
第 17章介紹了如何調試代碼，以此發現套用的性能瓶頸和缺陷，還介紹了如何使用像 Devtron 這樣的工具來更進一步地分析你的套用。
第 18章介紹了針對不同作業系統為應用程式構建二進制執行檔案以及安裝檔案的多種方式，以此來結束這部分內容。
學完這部分內容後，你應該已經掌握了如何測試自己的套用、調試套用缺陷以及最終完成套用並分發給你的客戶。
