electron 應(yīng)用開發(fā)優(yōu)秀實踐
一、背景
在團隊中，我們因業(yè)務(wù)發(fā)展，需要用到桌面端技術(shù)，如離線可用、調(diào)用桌面系統(tǒng)能力。什么是桌面端開發(fā)？一句話概括就是： 以 Windows 、macOS 和 Linux 為操作系統(tǒng)的軟件開發(fā) 。對此我們做了詳細的技術(shù)調(diào)研，桌面端的開發(fā)方式主要有 Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui 。其各自優(yōu)劣勢如下表格所示：
我們最終的桌面端技術(shù)選型是 Electron ，Electron 是一個可以使用 Web 技術(shù)來開發(fā)跨平臺桌面應(yīng)用的開發(fā)框架。
其技術(shù)組成如下：
Electron = Chromium + Node.js + Native API
各技術(shù)能力如下圖所示：
整體架構(gòu)如下圖所示：
Electron 是多進程架構(gòu)，架構(gòu)具有以下特點：
- 由一個主進程和 N 個渲染進程組成
- 主進程承擔(dān)主導(dǎo)作用，用于完成各種跨平臺和原生交互
- 渲染進程可以是多個，使用 Web 技術(shù)開發(fā)，通過瀏覽器內(nèi)核渲染頁面
- 主進程和渲染進程通過進程間通信來完成各種功能
這里說下 Electron 進程間通信技術(shù)原理：
electron 使用 IPC （interprocess communication） 在進程之間進行通信，如下圖所示：
其提供了 IPC 通信模塊，主進程的 ipcMain 和渲染進程的 ipcRenderer。
從 electron 源碼中可以看出， ipcMain 和 ipcRenderer 都是 EventEmitter 對象，源碼如下圖所示：
看到源碼實現(xiàn)，是不是覺得 IPC 不難理解了。知其本質(zhì)，方可游刃有余。
看到這，我們回顧上文技術(shù)表格，看到 Electron 應(yīng)用包體積大，那體積大的根本原因是什么呢？
其實這和 chromium 的框架設(shè)計有關(guān)，其對很多功能都沒有宏控制，導(dǎo)致很難把龐大復(fù)雜的細節(jié)功能去除掉，也造成了基于 chromium 的開發(fā)框架，如 electron 、 nwjs 打出的包起步就是 100 多 M 。
綜上，electron 具有跨端、基于 Web 、超強生態(tài)等優(yōu)點，是桌面端開發(fā)的優(yōu)秀方案之一。下文將介紹 electron 應(yīng)用開發(fā)實踐經(jīng)驗，包括應(yīng)用技術(shù)選型和常用功能。
二、應(yīng)用技術(shù)選型
2.1 編程語言 Typescript
理由如下：
- 針對開發(fā)者
- Javascript 的超集 - 無縫支持所有的 es2020+ 所有的特性，學(xué)習(xí)成本小
- 編譯生成的 JavaScript 的代碼保持很好的可讀性
- 可維護性明顯增強
- 完整的 OOP 的支持 - extends, interface， private， protect， public等
- 類型即文檔
- 類型的約束，更少的單元測試的覆蓋
- 更安全的代碼
- 針對工具
- 更好的重構(gòu)能力
- 靜態(tài)分析自動導(dǎo)包
- 代碼錯誤檢查
- 代碼跳轉(zhuǎn)
- 代碼提示補齊
- 社區(qū)
大量的社區(qū)的類型定義文件 提升開發(fā)效率
2.2 構(gòu)建工具 Electron-Forge
理由：簡單而又強大，目前 electron 應(yīng)用最好的構(gòu)建工具之一。
這里提一下 electron-builder 其和 electron-forge 的介紹和區(qū)別，看下圖所示：
兩者最大的區(qū)別在于自由度，兩者在能力上基本沒什么差異了，從官方組織中的排序看，有意優(yōu)先推薦 electron-forge 。
2.3 Web 方案 Vue3 + Vite
我們采用的是 Vue3 ，同時使用 Vite 作為構(gòu)建工具，具體優(yōu)點，大家可以查看官網(wǎng)介紹，這套組合是目前主流的 Web 開發(fā)方案。
2.4 monorepo方案 pnpm + turbo
目前的 monorepo 生態(tài)百花齊放，正確的實踐方法應(yīng)該是集大成法，也就是取各家之長，目前的趨勢也是如此，各開源 monorepo 工具達成默契，專注自己擅長的能力。
如 pnpm 擅長依賴管理， turbo 擅長構(gòu)建任務(wù)編排。遂在 monorepo 技術(shù)選型上，我選擇了 pnpm 和 turbo 。
pnpm 理由如下：
- 目前最好的包管理工具， pnpm 吸收了 npm 、 yarn 、 lerna 等主流工具的精華，并去其糟粕。
- 生態(tài)、社區(qū)活躍且強大
- 結(jié)合 workspace 可以完成 monorepo 最佳設(shè)計和實踐
- 在管理多項目的包依賴、代碼風(fēng)格、代碼質(zhì)量、組件庫復(fù)用等場景下，表現(xiàn)出色
- 在框架、庫的開發(fā)、調(diào)試、維護方面，表現(xiàn)出色
相比于 vue 官網(wǎng)，在使用 pnpm 上，我加了 workspace 。
turbo 理由如下：
- 它是一個高性能構(gòu)建系統(tǒng)，擁有增量構(gòu)建、云緩存、并行執(zhí)行、運行時零開銷、任務(wù)管道、精簡子集等特性
- 具有非常優(yōu)秀的任務(wù)編排能力，可以彌補 pnpm 在任務(wù)編排上的短板
2.5 數(shù)據(jù)庫 lowdb
electron 應(yīng)用數(shù)據(jù)庫有非常多的選擇如 lowdb 、 sqlite3 、 electron-store 、 pouchdb 、 dedb 、 rxdb 、 dexie 、 ImmortalDB 等。這些數(shù)據(jù)庫都有一個特性，那就是無服務(wù)器。
electron 應(yīng)用數(shù)據(jù)庫技術(shù)選型考慮因素主要有以下3點：
- 生態(tài)（使用者數(shù)量、維護頻率、版本穩(wěn)定度）
- 能力
- 性能
- 其他（和使用者技術(shù)匹配度）
我們通過以下渠道進行了相關(guān)調(diào)研
- github 的 issues、commit、fork、star
- sourcegraph 關(guān)鍵字搜索結(jié)果數(shù)
- npm 包下載量、版本發(fā)布
- 官網(wǎng)和博客
給出四個最優(yōu)選擇，分別是 lowdb 、 sqlite3 、 nedb 、 electron-store ， 理由如下：
- lowdb：生態(tài)、能力、性能三方面表現(xiàn)優(yōu)秀， json 形式的存儲結(jié)構(gòu)， 支持 lodash 、 ramda 等 api 操作，利于備份和調(diào)用
- sqlite3：生態(tài)、能力、性能三方面表現(xiàn)優(yōu)秀， Nodejs 關(guān)系型數(shù)據(jù)庫第一選擇方案
- nedb：能力、性能三方面表現(xiàn)優(yōu)秀，缺點是基本不維護了，但底子還在，尤其操作是 MongoDB 的子集，對于熟悉 MongoDB 的使用者來說是絕佳選擇。
- electron-store：生態(tài)表現(xiàn)優(yōu)秀，輕量級持久化方案，簡單易用
我們使用的數(shù)據(jù)庫選型是 lowdb 方案。
PS：提一下 pouchdb ，如果需要將本地數(shù)據(jù)同步到遠端數(shù)據(jù)庫，可以使用 pouchdb ，其和 couchdb 可以輕松完成同步。
2.6 腳本工具 zx
軟件開發(fā)過程中，將一些流程和操作通過腳本來完成，可以有效地提高開發(fā)效率和幸福度。
依賴 node runtime 的優(yōu)秀選擇就兩個：shelljs 和 zx ， 選擇 zx 的理由如下：
- 自帶 fetch 、 chalk 等常用庫，使用方便快捷
- 多個子進程方便快捷、執(zhí)行遠端腳本、解析 md 、 xml 文件腳本、支持 ts ，功能豐富且強大
- 谷歌出品，大廠背景，生態(tài)非?；钴S
至此，技術(shù)選型就介紹完了，下面我將介紹electron 應(yīng)用的常用功能。
三、構(gòu)建
此部分主要介紹以下5點內(nèi)容：
- 應(yīng)用圖標生成
- 二進制文件構(gòu)建
- 按需構(gòu)建
- 性能優(yōu)化
- 跨平臺兼容
3.1 應(yīng)用圖標生成
不同尺寸圖標的生成有以下方法：
Windows
- 軟件生成：icofx3
網(wǎng)頁生成：
https://tool.520101.com/diannao/ico/(opens new window)
MacOS
- 軟件生成：icofx3
網(wǎng)頁生成：
https://tool.520101.com/diannao/ico/(opens new window)
- 命令行生成：使用 sips 和 iconutil 生成
3.2 二進制文件構(gòu)建
本章節(jié)內(nèi)容是基于 electron-forge 闡述的，不過原理是一樣的。
在開發(fā)桌面端應(yīng)用時，會有場景要用到第三方的二進制程序，比如 ffmpeg 這種。在構(gòu)建二進制程序時，要關(guān)注以下兩個注意項：
（1）二進制程序不能打包進 asar 中 可以在構(gòu)建配置文件（forge.config.js）進行如下設(shè)置：
const os = require('os')
const platform = os.platform()
const config = {
packagerConfig: {
// 可以將 ffmpeg 目錄打包到 asar 目錄外面
extraResource: [`./src/main/ffmpeg/`]
}
}
（2）開發(fā)和生產(chǎn)環(huán)境，獲取二進制程序路徑方法是不一樣的 可以采用如下代碼進行動態(tài)獲取：
import { app } from 'electron'
import os from 'os'
import path from 'path'
const platform = os.platform()
const dir = app.getAppPath()
let basePath = ''
if(app.isPackaged) basePath = path.join(process.resourcesPath)
else basePath = path.join(dir, 'ffmpeg')
const isWin = platform === 'win32'
// ffmpeg 二進制程序路徑
const ffmpegPath = path.join(basePath, `${platform}`, `ffmpeg${isWin ? '.exe' : ''}`)
3.3 按需構(gòu)建
如何對跨平臺二進制文件進行按需構(gòu)建呢？
比如桌面應(yīng)用中用到了 ffmpeg ， 它需要有 windows 、 mac 和 linux 的下載二進制。在打包的時候，如果不做按需構(gòu)建，則會將 3 個二進制文件全部打到構(gòu)建中，這樣會讓應(yīng)用體積增加很多。
可以在 forge.config.js 配置文件中進行如下配置，即可完成按需構(gòu)建，代碼如下：
const platform = os.platform()
const config = {
packagerConfig: {
extraResource: [`./src/main/ffmpeg/${platform}`]
},
}
通過 platform 變量來把對應(yīng)系統(tǒng)的二進制打到構(gòu)建中，即可完成對二進制文件的按需構(gòu)建。
3.4 性能優(yōu)化
主要是構(gòu)建速度和構(gòu)建體積優(yōu)化，構(gòu)建速度這塊不好優(yōu)化。本文重點說下構(gòu)建體積優(yōu)化，這里拿 mac 系統(tǒng)舉例說明， 在 electron 應(yīng)用打包后，查看應(yīng)用包內(nèi)容，如下圖所示：
可以看到有一個 app.asar 文件,這個文件用 asar 解壓后可以看到有以下內(nèi)容：
可以看出 asar 中的文件，就是我們構(gòu)建后的項目代碼，從圖中可以看到有 node_modules 目錄， 這是因為在 electron 構(gòu)建機制中，會自動把 dependencies 的依賴全部打到 asar 中。
所以結(jié)合上述分析，我們的優(yōu)化措施有以下4點：
- 將 web 端構(gòu)建所需的依賴全部放到 devDependencies 中，只將在 electron 端需要的依賴放到 dependencies
- 將和生產(chǎn)無關(guān)的代碼和文件從構(gòu)建中剔除
- 對跨平臺使用的二進制文件，如 ffmpeg 進行按需構(gòu)建（上文按需構(gòu)建已介紹）
- 對 node_modules 進行清理精簡
這里提下第 4 點，如何對 node_modules 進行清理精簡呢？
如果是 yarn 安裝的依賴，我們可以在根目錄使用下面命令進行精簡：
yarn autoclean -I
yarn autoclean -F
如果是 pnpm 安裝的依賴，第 4 點應(yīng)該不起作用了。我在項目中使用 yarn 安裝依賴，然后執(zhí)行上述命令后，發(fā)現(xiàn)打包體積減少了 6M ， 雖然不多，但也還可以。?
至此，構(gòu)建功能就介紹完了。
四、更新
本章節(jié)主要分為以下兩個方面：
- 全量更新
- 增量更新
下面將依次介紹上述兩種更新
4.1 全量更新
通過下載最新的包或者 zip 文件，進行軟件更新，需要替換所有的文件。
整體設(shè)計流程圖如下：
?
?
按照流程圖去實現(xiàn)，我們需要做以下事情：
- 開發(fā)服務(wù)端接口，用來返回應(yīng)用最新版本信息
- 渲染進程使用 axios 等工具請求接口，獲取最新版本信息
- 封裝更新邏輯，用來對接口返回的版本信息進行綜合比較，判斷是否更新
- 通過 ipc 通信將更新信息傳遞給主進程
- 主進程通過 electron-updater 進行全量更新
- 將更新信息通過 ipc 推送給渲染進程
- 渲染進程向用戶展示更新信息，若更新成功，則彈出彈窗告訴用戶重啟應(yīng)用，完成軟件更新
4.2 增量更新
通過拉取最新的渲染層打包文件，覆蓋之前的渲染層代碼，完成軟件更新，此方案只需替換渲染層代碼，無需替換所有文件。
按照流程圖去實現(xiàn)，我們需要做以下事情
- 渲染進程定時通知主進程檢測更新
- 主進程檢測更新
- 需要更新，則拉取線上最新包
- 刪除舊版本包，復(fù)制線上最新包，完成增量更新
- 通知渲染進程，提示用戶重啟應(yīng)用完成更新
全量更新和增量更新各有優(yōu)勢，多數(shù)情況下，采用增量更新來提高用戶更新體驗，同時使用全量更新作為兜底更新方案。
至此，更新功能就介紹完了。
五、性能優(yōu)化
分為以下3個方面：
- 構(gòu)建優(yōu)化
- 啟動時優(yōu)化
- 運行時優(yōu)化
構(gòu)建優(yōu)化在上文內(nèi)容中，已經(jīng)詳細介紹過了，這里不再介紹，下面將介紹 啟動時優(yōu)化 和 運行時優(yōu)化。
5.1 啟動時優(yōu)化
- 使用 v8-compile-cache 緩存編譯代碼
- 優(yōu)先加載核心功能，非核心功能動態(tài)加載
- 使用多進程，多線程技術(shù)
- 采用 asar 打包：會加快啟動速度
- 增加視覺過渡：loading + 骨架屏
5.1.1 使用 v8-compile-cache 緩存編譯代碼
使用 V8 緩存數(shù)據(jù)，為什么要這么做呢？
因為 electorn 使用 V8 引擎運行 js ， V8 運行 js 時，需要先進行解析和編譯，再執(zhí)行代碼。其中，解析和編譯過程消耗時間多，經(jīng)常導(dǎo)致性能瓶頸。而 V8 緩存功能，可以將編譯后的字節(jié)碼緩存起來，省去下一次解析、編譯的時間。
主要使用 v8-compile-cache 來緩存編譯的代碼，做法很簡單：在需要緩存的地方加一行
require('v8-compile-cache')
其他使用方法請查看此鏈接文檔
https://www.npmjs.com/package/v8-compile-cache(opens new window)
5.1.2 優(yōu)先加載核心功能，非核心功能動態(tài)加載
偽代碼如下：
export function share() {
const kun = require('kun')
kun()
}
5.2 運行時優(yōu)化
- 對渲染進程 進行 Web 性能優(yōu)化
- 對主進程進行輕量瘦身
5.2.1 對渲染進程 進行 Web 性能優(yōu)化
用一個思維導(dǎo)圖來完整闡述如何進行 Web 性能優(yōu)化，如下圖所示：
上圖基本包含了性能優(yōu)化的核心關(guān)鍵點和內(nèi)容，大家可以以此作為參考，去做性能優(yōu)化。
5.2.2 對主進程進行輕量瘦身
核心方案就是將運行時耗時、計算量大的功能交給新開的 node 進程去執(zhí)行處理。
偽代碼如下：
const { fork } = require('child_process')
let { app } = require('electron')
function createProcess(socketName) {
process = fork(`xxxx/server.js`, [
'--subprocess',
app.getVersion(),
socketName
])
}
const initApp = async () => {
// 其他初始化代碼...
let socket = await findSocket()
createProcess(socket)
}
app.on('ready', initApp)
通過以上代碼，將耗時、計算量大的功能，放在 server.js ，然后再 fork 到新開 node 進程中進行處理。
至此，性能優(yōu)化就介紹完了。
六、質(zhì)量保障
質(zhì)量保障的全流程措施如下圖所示：
本章節(jié)主要介紹以下3個方面：
- 自動化測試
- 崩潰監(jiān)控
- 崩潰 治理
下面將會依次介紹上述內(nèi)容。
6.1 自動化測試
自動化測試是什么？
上圖是做自動化測試一個完整步驟，大家可以看圖領(lǐng)會。
自動化測試主要分為 單元測試、集成測試、端到端測試，三者關(guān)系如下圖所示：
一般情況下，作為軟件工程師，我們做到一定的單元測試就可以了。而且從我目前經(jīng)驗來說，如果是寫業(yè)務(wù)性質(zhì)的項目，基本上不會編寫測試相關(guān)的代碼。自動化測試主要是用來編寫庫、框架、組件等需要作為單獨個體提供給他人使用的。
electron 的測試工具推薦 vitest 、 spectron 。具體用法參考官網(wǎng)文檔即可，沒什么特別的技巧。
6.2 崩潰監(jiān)控
對于 GUI 軟件，尤其桌面端軟件來說，崩潰率非常重要，因此需要對崩潰進行監(jiān)控。
崩潰監(jiān)控原理如下圖所示：
崩潰監(jiān)控技巧
- 渲染進程崩潰后，提示用戶重新加載
- 通過 preload 統(tǒng)一初始化崩潰監(jiān)控
- 主進程、渲染進程通過 process.crash() 進行模擬崩潰
- 對崩潰日志進行收集分析
崩潰監(jiān)控做好后，如果發(fā)生崩潰，該如何治理崩潰呢？
6.3 崩潰治理
崩潰治理難點：
- 定位出錯棧困難：Native 錯誤棧，無操作上下文
- 調(diào)試門檻高：C++ 、 IIdb/GDB
- 運行環(huán)境復(fù)雜：機器型號、系統(tǒng)、其他軟件
崩潰治理技巧：
- 及時升級 electron
- 用戶操作日志和系統(tǒng)信息
- 復(fù)現(xiàn)和定位問題比治理重要
- 把問題交給社區(qū)解決，社區(qū)響應(yīng)快
- 善于用 devtool 分析和治理內(nèi)存問題
七、安全
俗話說的好，安全大于天，保證 electron 應(yīng)用的安全也是一項重要的事情，本章節(jié)將安全分為以下 5 個方面：
- 源碼泄漏
- asar
- 源碼保護
- 應(yīng)用安全
- 編碼安全
下面將會依次介紹上述內(nèi)容。
7.1 源碼泄漏
目前 electron 在源碼安全做的不好，官方只用 asar 做了一下很沒用的源碼保護，到底有多沒用呢？
你只需要下載 asar 工具，然后對 asar 文件進行解壓就可以得到里面的源碼了，如下圖所示：
?
?
通過圖中操作即可看到語雀應(yīng)用的源碼。上面提到的 asar 是什么呢？
7.2 asar
asar 是一種將多個文件合并成一個文件的類 tar 風(fēng)格的歸檔格式。Electron 可以無需解壓整個文件，即可從其中讀取任意文件內(nèi)容。
asar 技術(shù)原理：
可以直接看 electron 源碼，都是 ts 代碼，容易閱讀，源碼如下圖所示：
從圖中可以看出， asar 的核心實現(xiàn)就是對 nodejs 的 fs 模塊進行重寫。
7.3 源碼保護
避免源碼泄漏，按照從低到高的源碼安全，可以分為以下程度
- asar
- 代碼混淆
- WebAssembly
- Language bindings
其中，Language bindings 是最高的源碼安全措施，其實使用 C++ 或 Rust 代碼來編寫 electron 應(yīng)用代碼，通過將 C++ 或 Rust 代碼編譯成二進制代碼后，破譯的難度會變高。這里我說下如何使用 Rust 去編寫 electron 應(yīng)用代碼。
方案：使用 napi-rs 作為工具去編寫，如下圖所示：
我們采用 pnpm-workspace 去管理 Rust 代碼，使用 napi-rs ，比如我們寫一個 sum 函數(shù)，rs代碼如下：
fn sum(a: f64, b: f64) -> f64 {
a + b
}
此時我們加上 napi 裝飾代碼，如下所示：
use napi_derive::napi;
#[napi]
fn sum(a: f64, b: f64) -> f64 {
a + b
}
在通過 napi-cli 將上述代碼編譯成 node 可以調(diào)用的二進制代碼。
編譯后，在electron使用上述代碼，如下所示：
import { sum as rsSum } from '@rebebuca/native'
// 輸出 7
console.log(rsSum(2, 5))
napi-rs 的使用請閱讀官方文檔，地址是： https://napi.rs/(opens new window)
至此，language bindings 的闡述就完成了。我們通過這種方式，可以完成對重要功能的源碼保護。
7.4 應(yīng)用安全
目前熟知的一個安全問題是克隆攻擊，此問題的主流解決方案是將用戶認證信息和應(yīng)用設(shè)備指紋進行綁定，整體流程如如下圖所示：
- 應(yīng)用設(shè)備指紋生成：可以用上文闡述的 napi-rs 方案去實現(xiàn)
- 用戶認證信息和設(shè)備指紋綁定：使用服務(wù)端去實現(xiàn)
7.5 編碼安全
主要有以下措施：
- 常用的 web 安全，比如防 xss 、 csrf
- 設(shè)置 node 可執(zhí)行環(huán)境
- 窗體開啟安全選項
- 限制鏈接跳轉(zhuǎn)
以上具體細節(jié)不再介紹，自行搜索上述方案。除此之外，還有個官方推薦的最佳安全實踐，有空可以看看，地址如下：
https://www.electronjs.org/docs/latest/tutorial/security(opens new window)
至此，安全這塊就介紹完了。
八、總結(jié)
本文介紹了我們對桌面端技術(shù)的調(diào)研、確定技術(shù)選型，以及用 electron 開發(fā)過程中，總結(jié)的實踐經(jīng)驗，如構(gòu)建、性能優(yōu)化、質(zhì)量保障、安全等。希望對讀者在開發(fā)桌面應(yīng)用過程中有所幫助，文章難免有不足和錯誤的地方，歡迎讀者在評論區(qū)交流。
