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