這是一本能幫助讀者夯實Electron基礎進而開發(fā)出穩(wěn)定、健壯的Electron應用的著作。
書中對Electron的工作原理、大型工程構建、常見技術方案、周邊生態(tài)工具等進行了細致、深入地講解。
工作原理維度:
對Electron及其周邊工具的原理進行了深入講解,包括Electron依賴包的原理、Electron原理、electron-builder的原理等。
工程構建維度:
講解了如何駕馭和構建一個大型Electron工程,包括使用各種現(xiàn)代前端構建工具構建Electron工程、自動化測試、編譯和調(diào)試Electron源碼等。
技術方案維度:
總結(jié)了實踐過程中遇到的一些技術難題以及應對這些難題的技術方案,包括跨進程消息總線、窗口池、大數(shù)據(jù)渲染、點對點通信等。
周邊工具維度:
作者根據(jù)自己的踩坑經(jīng)驗和教訓,有針對性地講解了大量Electron的周邊工具、庫和技術,涉及Qt開發(fā)框架、C 語言、Nodejs框架甚至Vite構建工具等,幫助讀者拓寬技術廣度,掌握開發(fā)Electron應用需要的全棧技術。
(1)作者資歷深厚:?低曌烂娑思夹g專家,10余年研發(fā)經(jīng)驗,一直聚焦在桌面開發(fā)領域,為多家世界500強企業(yè)提供技術服務。
(2)作者經(jīng)驗豐富:Electron的早期實踐者和不遺余力的布道者,對Electron有持續(xù)、深入的研究,有大量的項目經(jīng)驗。
(3)深入講解原理:深入分析了Electron及其周邊生態(tài)工具的底層原理,讓讀者在遇到問題時能迅速定位到問題的本質(zhì)。
(4)注重工程實踐:不僅講解了如何構建和駕馭大型Electron工程項目,而且還針對生產(chǎn)環(huán)境中的各種常見技術挑戰(zhàn)給出了技術方案。
(5)不止于Electron:Electron并不能解決桌面應用開發(fā)的所有問題,故本書根據(jù)作者寶貴的經(jīng)驗,針對性地講解了Electron的周邊工具,掌握Electron的全棧技術。
(6)關注:華章計算機,回復:69609,獲取本書配套視頻資源及下載部分源代碼
【緣起】
2019年的春天,我開始動手寫《Electron實戰(zhàn):入門、進階與性能優(yōu)化》一書,并用大概一年時間完成了該書的創(chuàng)作。書上市后,從各方面的反饋來看,還是達到了我的預期目標。很多讀者特意聯(lián)系我,告訴我書里的知識幫助他們解決了工作中的實際問題。這使我萌生了再寫一本書的想法。
2020年的春天,我調(diào)換了工作崗位,雖然仍是基于Electron工作,但所面臨的問題與挑戰(zhàn)都是前所未有的,所產(chǎn)出的產(chǎn)品的用戶群更大,用戶所使用的環(huán)境也更多樣。除了工作本身帶來的挑戰(zhàn)被逐一克服之外,我還應用了很多新的方案和技術以提升產(chǎn)品的用戶體驗。
與此同時,Electron領域也發(fā)生了重大的變革,Electron版本現(xiàn)如今已更新到了13.x.x,難以計數(shù)的Issue得到解決,同時也新增了很多重要的功能,廢棄了一些重要的API和內(nèi)置庫。Electron領域重要的庫electron-builder和Spectron也升級了多個版本。每次升級我都會時間去了解它們做了哪些更新,并驗證這些更新是否可以應用于我的實際工作中。
除Electron及其生態(tài)外,商業(yè)社會也更加傾向于使用這種技術來開發(fā)桌面應用,像阿里巴巴、騰訊、、網(wǎng)易、美團、拼多多等大廠都有基于Electron開發(fā)的產(chǎn)品,也都在招聘具備Electron實戰(zhàn)經(jīng)驗的人才,而且崗位薪資都相當可觀,比同等崗位前端開發(fā)工程師的薪資要高出一大截。然而從我近一年的面試經(jīng)歷來看,這方面的人才還是非常匱乏的。
于是我從2020年7月份開始動手寫這本新書,足足用了一年的時間才寫完。希望我這一年的工作能為這個領域的同人做些微末的貢獻。
【介紹】
本書并不是《Electron實戰(zhàn):入門、進階與性能優(yōu)化》的替代品!禘lectron實戰(zhàn):入門、進階與性能優(yōu)化》的內(nèi)容是偏實踐的,希望開發(fā)者了解怎樣以的姿態(tài)進入這個領域,怎樣用的手段開發(fā)出Electron應用,目的是幫助開發(fā)者提升生產(chǎn)力。而本書的內(nèi)容是偏底層的,旨在幫助開發(fā)者了解Electron及其周邊工具的底層運轉(zhuǎn)邏輯,不畏Electron開發(fā)領域的難題,即使碰到問題也能找出根本原因和解決方案。也就是說,本書是幫助開發(fā)者夯實基礎的。
這兩本書的目的都是讓開發(fā)者開發(fā)出穩(wěn)定、健壯的Electron應用。
由于涉及了很多底層實現(xiàn)細節(jié)(C 編程、操作系統(tǒng)、Node.js和Chromium等),所以本書要求讀者具備一定的前端開發(fā)基礎。如果你的前端技術尚處于初級階段,希望能通過Electron入門桌面端開發(fā),那么我建議你先讀《Electron實戰(zhàn):入門、進階與性能優(yōu)化》并做一些實戰(zhàn)練習,之后再來讀本書。
本書以如何基于Electron開發(fā)桌面應用為主線,介紹了大量的周邊工具、庫及技術。本書的目的是希望讀者能從容地用Electron開發(fā)桌面應用,但凡對此目的有巨大幫助的技術,我都不希望讀者錯過,所以里面涉及了Qt開發(fā)框架、C 語言、
Node.js框架甚至Vite構建工具等,希望讀者也能像我一樣,不要把眼光局限在Electron這一單一的技術上,不是為了學習技術而學習技術,而是為了達到目的、創(chuàng)造價值而學習技術。
功利心太強可能會導致開發(fā)者忽視基礎知識的重要性,在這種狀態(tài)下構建工程是很容易出問題的,且一旦出問題開發(fā)者也沒有能力在短時間內(nèi)解決,甚至連甄別問題的根源都無能為力。基于此,本書也介紹了很多原理性的內(nèi)容,幫助讀者知其然也知其所以然。前輩的箴言勿在浮沙筑高臺聲猶在耳,希望你學完本書也能夯實構建Electron桌面應用的基礎。
有的讀者可能會擔心,這本書又講原理又涉及Electron與周邊生態(tài),會不會范圍太廣、內(nèi)容太雜,導致質(zhì)量不精。這確實非常考驗作者對知識的駕馭和掌控能力,我在這方面主要做了以下三點工作。
首先,這不是一本面面俱到地介紹Electron與周邊生態(tài)的書,它只截取了我認為重要的部分,如果你希望由淺入深、面面俱到地學習Electron,那么我建議你先讀《Electron實戰(zhàn):入門、進階與性能優(yōu)化》一書,再學習一下官網(wǎng)文檔。
其次,本書不會涵蓋那些在互聯(lián)網(wǎng)上隨處可見的教程、文章甚至面試題所涉及的內(nèi)容。本書介紹的內(nèi)容大部分都是我踩坑付出代價后得到的經(jīng)驗,大部分書里的知識點都是具備獨創(chuàng)性的,是首次公開的。
后,本書假定讀者具備現(xiàn)代前端開發(fā)能力,了解基本的Node.js知識,甚至擁有一定的原生桌面應用開發(fā)經(jīng)驗。在做了這方面的約束后,我才可以從容地繞開那些基礎知識,直接與讀者交流實際業(yè)務領域中的技術問題。
【編排】
本書分為三部分。
部分原理介紹Electron及其周邊重要工具的運行原理,第二部分工程介紹使用不同的技術棧開發(fā)大型Electron工程的相關知識,第三部分實踐介紹實際項目開發(fā)中的一些具體的技術方案,如窗口池、跨進程消息總線等。
本書部分源碼開源地址為https://gitee.com/horsejs/simple-but-profound-electron(注意:并非所有示例的源碼都公開在此倉儲下了)。
另外,本書的三部分內(nèi)容并沒有明確的先后順序,讀者如果覺得部分某些章涉及了大量的C 知識,讀起來比較吃力,可以先跳過這些章,甚至可以直接從第二部分或第三部分開始閱讀,等掌握了足夠的基礎知識后再回頭閱讀部分也不遲。如果讀者對實踐內(nèi)容更感興趣,也可以跳過前兩個部分直接閱讀第三部分的內(nèi)容,等讀到關聯(lián)的知識點,再回到前面學習指定的知識點,這種學習方式也未嘗不可。
劉曉倫
資深技術專家,有10余年研發(fā)經(jīng)驗,是Electron及其相關技術在企業(yè)應用領域的早期實踐者,GitHub/Gitee優(yōu)秀開源項目作者。作者還為Electron項目提交過數(shù)個Issue和Pull Request均被官方接納。
原遠傳研發(fā)中心負責人、小遠機器人研發(fā)總監(jiān),F(xiàn)在擔任一家創(chuàng)業(yè)公司的技術負責人,負責的產(chǎn)品以Electron為主要技術方向。
除此之外,作者還有著十余年的前端及C (Qt)的開發(fā)經(jīng)驗,深入研究過Chromium的源碼及相關的協(xié)議(DevTools Protocol和V8 Debugger Protocol),其主導研發(fā)的產(chǎn)品為數(shù)家世界五百強企業(yè)提供服務。
【第1部分 原理】
第1章 Electron包原理解析 3
1.1 安裝失敗 3
1.2 npm鉤子 4
1.3 鏡像策略 6
1.4 緩存策略 9
1.5 注入命令 11
1.6 共享環(huán)境變量 13
1.7 合適的版本 15
第2章 Electron原理解析 17
2.1 Chromium原理 17
2.2 Node.js原理 20
2.3 源碼結(jié)構 23
2.4 主進程Node.js環(huán)境 25
2.5 公開API 27
2.6 不同進程不同的API 31
2.7 加載應用入口腳本 32
2.8 提供系統(tǒng)底層支持 34
2.9 解析asar文件 37
2.10 渲染進程Node.js環(huán)境 41
2.11 支持不同的操作系統(tǒng) 42
2.12 進程間通信 45
2.13 頁面事件 48
第3章 electron-builder原理解析 52
3.1 使用方法 52
3.2 原理介紹 53
3.3 偽交叉編譯 57
3.4 輔助工具app-builder 59
3.5 為生產(chǎn)環(huán)境安裝依賴 61
3.6 生成asar 62
3.7 修改可執(zhí)行程序 63
3.8 NSIS介紹 66
3.9 生成安裝包 68
第4章 electron-updater原理解析 71
4.1 使用方法 71
4.2 如何校驗新版本的安裝包 73
4.3 Windows應用升級原理 75
4.4 Mac應用升級原理 78
第5章 其他重要原理 80
5.1 緩存策略與控制 80
5.2 V8腳本執(zhí)行原理 83
5.3 V8垃圾收集原理 87
【第2部分 工程】
第6章 使用Vite構建Electron項目 91
6.1 Vite為什么如此之快 91
6.2 大型Electron工程結(jié)構 92
6.3 定義啟動腳本 93
6.4 啟動開發(fā)服務 95
6.5 設置環(huán)境變量 96
6.6 構建主進程代碼 98
6.7 啟動Electron子進程 100
6.8 配置調(diào)試環(huán)境 102
6.9 打包源碼 104
6.10 打包依賴 106
6.11 制成安裝程序 108
6.12 引入TypeScript支持 111
第7章 使用webpack構建Electron項目 113
7.1 需求起源 113
7.2 準備環(huán)境 114
7.3 編譯主進程代碼 116
7.4 啟動多入口頁面調(diào)試服務 117
7.5 啟動Electron子進程 120
7.6 制成安裝包 121
7.7 注冊應用內(nèi)協(xié)議 123
第8章 使用Rollup構建Electron項目 125
8.1 Rollup與Svelte 125
8.2 準備開發(fā)環(huán)境 127
8.3 制成安裝包 130
第9章 自動化測試 134
9.1 集成Spectron及Spectron原理 134
9.2 在Jest測試框架中使用Spectron 137
第10章 編譯與調(diào)試Electron源碼 141
10.1 build-tools構建工具介紹 141
10.2 手工構建Electron源碼 142
10.3 構建不同版本的Electron 150
10.4 調(diào)試Electron源碼 151
10.5 調(diào)試崩潰報告 156
第11章 應用分發(fā) 162
11.1 源碼混淆 162
11.2 應用簽名 165
11.3 靜默安裝與開機自啟 168
11.4 自定義安裝畫面 170
11.5 軟件防殺 173
第12章 逆向分析 174
12.1 用戶安裝目錄 174
12.2 用戶數(shù)據(jù)目錄 175
12.3 注冊表鍵值 177
12.4 自研逆向調(diào)試工具 178
第13章 其他工程要點 183
13.1 使用D8調(diào)試工具 183
13.2 內(nèi)存消耗監(jiān)控 185
13.3 子應用管控 189
【第3部分 實踐】
第14章 跨進程消息總線 195
14.1 前端事件機制 195
14.2 Node.js的事件機制 197
14.3 Electron進程間通信 198
14.4 跨進程事件 200
14.5 使用Promise封裝事件 203
14.6 基于HTML API的跨進程事件 205
14.7 跨進程通信帶來的問題 207
第15章 窗口池 209
15.1 窗口渲染過慢 209
15.2 構建窗口池 210
15.3 構建窗口實例 212
15.4 通用的窗口標題欄 214
15.5 消費窗口池中的窗口 215
15.6 模擬模態(tài)窗口 216
第16章 原生模塊 219
16.1 需求起源 219
16.2 原生模塊開發(fā)方式 221
16.3 傳統(tǒng)原生模塊開發(fā) 223
16.4 使用Node-API開發(fā)原生模塊 225
16.5 Node-API進階 229
16.6 Electron環(huán)境下的原生模塊 233
第17章 應用控制 236
17.1 應用單開 236
17.2 注冊喚起協(xié)議 237
17.3 喚起外部應用 238
17.4 常規(guī)截圖方案介紹 239
17.5 使用第三方截圖庫 241
第18章 Electron與Qt的整合 245
18.1 需求起源 245
18.2 命名管道服務端 247
18.3 命名管道客戶端 250
18.4 通信協(xié)議 253
18.5 入口應用配置 256
18.6 應用退出的事件順序 258
18.7 關閉窗口的問題 260
第19章 大數(shù)據(jù)渲染 262
19.1 常規(guī)無限滾動方案介紹 262
19.2 DOM結(jié)構與樣式 265
19.3 模擬滾動條 267
19.4 處理滾動事件 268
19.5 滾動條的顯隱動效 270
19.6 內(nèi)置的數(shù)據(jù)持久化能力 271
第20章 點對點通信 274
20.1 WebRTC原理 274
20.2 構建WebRTC服務器 275
20.3 發(fā)送超大文件 276
20.4 接收超大文件 280
第21章 加密信息提取 283
21.1 需求起源 283
21.2 分析調(diào)試源碼 284
21.3 暴露解密方法 286
21.4 轉(zhuǎn)發(fā)請求 287
21.5 注入腳本 288
21.6 監(jiān)控cookie 289
第22章 其他實踐指導 292
22.1 分析首屏加載時間 292
22.2 模擬弱網(wǎng)環(huán)境 294
22.3 數(shù)據(jù)存儲方案性能對比 296
22.4 加載本地圖片 302
22.5 桌面端編程的生態(tài)演化 302
22.6 Electron的競爭對手 304