vivo 互聯(lián)網(wǎng)前端團(tuán)隊(duì)-Yang Kun
一研底、背景
在團(tuán)隊(duì)中，我們因業(yè)務(wù)發(fā)展透罢，需要用到桌面端技術(shù)榜晦，如離線可用、調(diào)用桌面系統(tǒng)能力羽圃。什么是桌面端開發(fā)乾胶？一句話概括就是：以 Windows 、macOS 和 Linux 為操作系統(tǒng)的軟件開發(fā)朽寞。對此我們做了詳細(xì)的技術(shù)調(diào)研识窿，桌面端的開發(fā)方式主要有 Native 、 QT 脑融、 Flutter 届囚、 NW 全谤、 Electron 不跟、 Tarui 刷袍。其各自優(yōu)劣勢如下表格所示：
我們最終的桌面端技術(shù)選型是 Electron ，Electron 是一個(gè)可以使用 Web 技術(shù)來開發(fā)跨平臺桌面應(yīng)用的開發(fā)框架妓布。
其技術(shù)組成如下：
Electron = Chromium + Node.js + Native API
各技術(shù)能力如下圖所示：
整體架構(gòu)如下圖所示：
Electron 是多進(jìn)程架構(gòu)姻蚓，架構(gòu)具有以下特點(diǎn)：
- 由一個(gè)主進(jìn)程和 N 個(gè)渲染進(jìn)程組成
- 主進(jìn)程承擔(dān)主導(dǎo)作用，用于完成各種跨平臺和原生交互
- 渲染進(jìn)程可以是多個(gè)秋茫，使用 Web 技術(shù)開發(fā)史简，通過瀏覽器內(nèi)核渲染頁面
- 主進(jìn)程和渲染進(jìn)程通過進(jìn)程間通信來完成各種功能
這里說下 Electron 進(jìn)程間通信技術(shù)原理：
electron 使用 IPC （interprocess communication） 在進(jìn)程之間進(jìn)行通信，如下圖所示：
其提供了 IPC 通信模塊肛著，主進(jìn)程的 ipcMain 和渲染進(jìn)程的 ipcRenderer。
從 electron 源碼中可以看出跺讯， ipcMain 和 ipcRenderer 都是 EventEmitter 對象枢贿，源碼如下圖所示：
看到源碼實(shí)現(xiàn)，是不是覺得 IPC 不難理解了刀脏。知其本質(zhì)局荚，方可游刃有余。
看到這愈污，我們回顧上文技術(shù)表格耀态，看到 Electron 應(yīng)用包體積大，那體積大的根本原因是什么呢暂雹？
其實(shí)這和 chromium 的框架設(shè)計(jì)有關(guān)首装，其對很多功能都沒有宏控制，導(dǎo)致很難把龐大復(fù)雜的細(xì)節(jié)功能去除掉杭跪，也造成了基于 chromium 的開發(fā)框架仙逻，如 electron 驰吓、 nwjs 打出的包起步就是 100 多 M 。
綜上系奉，electron 具有跨端檬贰、基于 Web 、超強(qiáng)生態(tài)等優(yōu)點(diǎn)缺亮，是桌面端開發(fā)的優(yōu)秀方案之一翁涤。下文將介紹 electron 應(yīng)用開發(fā)實(shí)踐經(jīng)驗(yàn)，包括應(yīng)用技術(shù)選型和常用功能萌踱。
二迷雪、應(yīng)用技術(shù)選型
2.1 編程語言 Typescript
理由如下：
- 針對開發(fā)者
- Javascript 的超集 - 無縫支持所有的 es2020+ 所有的特性，學(xué)習(xí)成本小
- 編譯生成的 JavaScript 的代碼保持很好的可讀性
- 可維護(hù)性明顯增強(qiáng)
- 完整的 OOP 的支持 - extends, interface虫蝶， private章咧， protect， public等
- 類型即文檔
- 類型的約束能真，更少的單元測試的覆蓋
- 更安全的代碼
- 針對工具
- 更好的重構(gòu)能力
- 靜態(tài)分析自動導(dǎo)包
- 代碼錯(cuò)誤檢查
- 代碼跳轉(zhuǎn)
- 代碼提示補(bǔ)齊
- 社區(qū)
大量的社區(qū)的類型定義文件 提升開發(fā)效率
2.2 構(gòu)建工具 Electron-Forge
理由：簡單而又強(qiáng)大赁严，目前 electron 應(yīng)用最好的構(gòu)建工具之一。
這里提一下 electron-builder 其和 electron-forge 的介紹和區(qū)別粉铐，看下圖所示：
兩者最大的區(qū)別在于自由度疼约，兩者在能力上基本沒什么差異了，從官方組織中的排序看蝙泼，有意優(yōu)先推薦 electron-forge 程剥。
2.3 Web 方案 Vue3 + Vite
我們采用的是 Vue3 ，同時(shí)使用 Vite 作為構(gòu)建工具汤踏，具體優(yōu)點(diǎn)织鲸，大家可以查看官網(wǎng)介紹，這套組合是目前主流的 Web 開發(fā)方案溪胶。
2.4 monorepo方案 pnpm + turbo
目前的 monorepo 生態(tài)百花齊放搂擦，正確的實(shí)踐方法應(yīng)該是集大成法，也就是取各家之長哗脖，目前的趨勢也是如此瀑踢，各開源 monorepo 工具達(dá)成默契，專注自己擅長的能力才避。
如 pnpm 擅長依賴管理橱夭， turbo 擅長構(gòu)建任務(wù)編排。遂在 monorepo 技術(shù)選型上桑逝，我選擇了 pnpm 和 turbo 棘劣。
pnpm 理由如下：
- 目前最好的包管理工具， pnpm 吸收了 npm 肢娘、 yarn 呈础、 lerna 等主流工具的精華舆驶，并去其糟粕。
- 生態(tài)而钞、社區(qū)活躍且強(qiáng)大
- 結(jié)合 workspace 可以完成 monorepo 最佳設(shè)計(jì)和實(shí)踐
- 在管理多項(xiàng)目的包依賴沙廉、代碼風(fēng)格、代碼質(zhì)量臼节、組件庫復(fù)用等場景下撬陵，表現(xiàn)出色
- 在框架、庫的開發(fā)网缝、調(diào)試巨税、維護(hù)方面，表現(xiàn)出色
相比于 vue 官網(wǎng)粉臊，在使用 pnpm 上草添，我加了 workspace 。
turbo 理由如下：
- 它是一個(gè)高性能構(gòu)建系統(tǒng)扼仲，擁有增量構(gòu)建远寸、云緩存、并行執(zhí)行屠凶、運(yùn)行時(shí)零開銷驰后、任務(wù)管道、精簡子集等特性
- 具有非常優(yōu)秀的任務(wù)編排能力矗愧，可以彌補(bǔ) pnpm 在任務(wù)編排上的短板
2.5 數(shù)據(jù)庫 lowdb
electron 應(yīng)用數(shù)據(jù)庫有非常多的選擇如 lowdb 灶芝、 sqlite3 、 electron-store 唉韭、 pouchdb 夜涕、 dedb 、 rxdb 纽哥、 dexie 钠乏、 ImmortalDB 等。這些數(shù)據(jù)庫都有一個(gè)特性春塌，那就是無服務(wù)器。
electron 應(yīng)用數(shù)據(jù)庫技術(shù)選型考慮因素主要有以下3點(diǎn)：
- 生態(tài)（使用者數(shù)量簇捍、維護(hù)頻率只壳、版本穩(wěn)定度）
- 能力
- 性能
- 其他（和使用者技術(shù)匹配度）
我們通過以下渠道進(jìn)行了相關(guān)調(diào)研
- github 的 issues、commit暑塑、fork吼句、star
- sourcegraph 關(guān)鍵字搜索結(jié)果數(shù)
- npm 包下載量、版本發(fā)布
- 官網(wǎng)和博客
給出四個(gè)最優(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)秀，缺點(diǎn)是基本不維護(hù)了养泡，但底子還在嗜湃，尤其操作是 MongoDB 的子集，對于熟悉 MongoDB 的使用者來說是絕佳選擇瓤荔。
- electron-store： 生態(tài)表現(xiàn)優(yōu)秀净蚤，輕量級持久化方案，簡單易用
我們使用的數(shù)據(jù)庫選型是 lowdb 方案输硝。
PS：提一下 pouchdb 今瀑，如果需要將本地?cái)?shù)據(jù)同步到遠(yuǎn)端數(shù)據(jù)庫，可以使用 pouchdb 点把，其和 couchdb 可以輕松完成同步橘荠。
2.6 腳本工具 zx
軟件開發(fā)過程中，將一些流程和操作通過腳本來完成郎逃，可以有效地提高開發(fā)效率和幸福度哥童。
依賴 node runtime 的優(yōu)秀選擇就兩個(gè)：shelljs 和 zx ， 選擇 zx 的理由如下：
- 自帶 fetch 褒翰、 chalk 等常用庫贮懈，使用方便快捷
- 多個(gè)子進(jìn)程方便快捷、執(zhí)行遠(yuǎn)端腳本优训、解析 md 朵你、 xml 文件腳本、支持 ts 揣非，功能豐富且強(qiáng)大
- 谷歌出品抡医，大廠背景，生態(tài)非吃缇矗活躍
至此忌傻，技術(shù)選型就介紹完了大脉，下面我將介紹electron 應(yīng)用的常用功能。
三水孩、構(gòu)建
此部分主要介紹以下5點(diǎn)內(nèi)容：
- 應(yīng)用圖標(biāo)生成
- 二進(jìn)制文件構(gòu)建
- 按需構(gòu)建
- 性能優(yōu)化
- 跨平臺兼容
3.1 應(yīng)用圖標(biāo)生成
不同尺寸圖標(biāo)的生成有以下方法：
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 二進(jìn)制文件構(gòu)建
本章節(jié)內(nèi)容是基于 electron-forge 闡述的镰矿，不過原理是一樣的。
在開發(fā)桌面端應(yīng)用時(shí)荷愕，會有場景要用到第三方的二進(jìn)制程序衡怀，比如 ffmpeg 這種。在構(gòu)建二進(jìn)制程序時(shí)安疗，要關(guān)注以下兩個(gè)注意項(xiàng)：
（1）二進(jìn)制程序不能打包進(jìn) asar 中 可以在構(gòu)建配置文件（forge.config.js）進(jìn)行如下設(shè)置：
const os = require('os')
const platform = os.platform()
const config = {
packagerConfig: {
// 可以將 ffmpeg 目錄打包到 asar 目錄外面
extraResource: [`./src/main/ffmpeg/`]
}
}
（2）開發(fā)和生產(chǎn)環(huán)境抛杨，獲取二進(jìn)制程序路徑方法是不一樣的 可以采用如下代碼進(jì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 二進(jìn)制程序路徑
const ffmpegPath = path.join(basePath, `${platform}`, `ffmpeg${isWin ? '.exe' : ''}`)
3.3 按需構(gòu)建
如何對跨平臺二進(jìn)制文件進(jìn)行按需構(gòu)建呢荐类？
比如桌面應(yīng)用中用到了 ffmpeg 怖现， 它需要有 windows 、 mac 和 linux 的下載二進(jìn)制玉罐。在打包的時(shí)候屈嗤，如果不做按需構(gòu)建，則會將 3 個(gè)二進(jìn)制文件全部打到構(gòu)建中吊输，這樣會讓應(yīng)用體積增加很多饶号。
可以在 forge.config.js 配置文件中進(jìn)行如下配置，即可完成按需構(gòu)建季蚂，代碼如下：
const platform = os.platform()
const config = {
packagerConfig: {
extraResource: [`./src/main/ffmpeg/${platform}`]
},
}
通過 platform 變量來把對應(yīng)系統(tǒng)的二進(jìn)制打到構(gòu)建中茫船，即可完成對二進(jìn)制文件的按需構(gòu)建。
3.4 性能優(yōu)化
主要是構(gòu)建速度和構(gòu)建體積優(yōu)化扭屁，構(gòu)建速度這塊不好優(yōu)化算谈。本文重點(diǎn)說下構(gòu)建體積優(yōu)化，這里拿 mac 系統(tǒng)舉例說明料滥， 在 electron 應(yīng)用打包后然眼，查看應(yīng)用包內(nèi)容，如下圖所示：
可以看到有一個(gè) app.asar 文件,這個(gè)文件用 asar 解壓后可以看到有以下內(nèi)容：
可以看出 asar 中的文件葵腹，就是我們構(gòu)建后的項(xiàng)目代碼高每，從圖中可以看到有 node_modules 目錄， 這是因?yàn)樵?electron 構(gòu)建機(jī)制中践宴，會自動把 dependencies 的依賴全部打到 asar 中觉义。
所以結(jié)合上述分析，我們的優(yōu)化措施有以下4點(diǎn)：
- 將 web 端構(gòu)建所需的依賴全部放到 devDependencies 中浴井，只將在 electron 端需要的依賴放到 dependencies
- 將和生產(chǎn)無關(guān)的代碼和文件從構(gòu)建中剔除
- 對跨平臺使用的二進(jìn)制文件，如 ffmpeg 進(jìn)行按需構(gòu)建（上文按需構(gòu)建已介紹）
- 對 node_modules 進(jìn)行清理精簡
這里提下第 4 點(diǎn)霉撵，如何對 node_modules 進(jìn)行清理精簡呢磺浙？
如果是 yarn 安裝的依賴洪囤，我們可以在根目錄使用下面命令進(jìn)行精簡：
yarn autoclean -I
yarn autoclean -F
如果是 pnpm 安裝的依賴，第 4 點(diǎn)應(yīng)該不起作用了撕氧。我在項(xiàng)目中使用 yarn 安裝依賴瘤缩，然后執(zhí)行上述命令后，發(fā)現(xiàn)打包體積減少了 6M 伦泥， 雖然不多剥啤，但也還可以。
至此不脯，構(gòu)建功能就介紹完了府怯。
四、更新
本章節(jié)主要分為以下兩個(gè)方面：
- 全量更新
- 增量更新
下面將依次介紹上述兩種更新
4.1 全量更新
通過下載最新的包或者 zip 文件防楷，進(jìn)行軟件更新牺丙，需要替換所有的文件。
整體設(shè)計(jì)流程圖如下：
按照流程圖去實(shí)現(xiàn)复局，我們需要做以下事情：
- 開發(fā)服務(wù)端接口冲簿，用來返回應(yīng)用最新版本信息
- 渲染進(jìn)程使用 axios 等工具請求接口，獲取最新版本信息
- 封裝更新邏輯亿昏，用來對接口返回的版本信息進(jìn)行綜合比較峦剔，判斷是否更新
- 通過 ipc 通信將更新信息傳遞給主進(jìn)程
- 主進(jìn)程通過 electron-updater 進(jìn)行全量更新
- 將更新信息通過 ipc 推送給渲染進(jìn)程
- 渲染進(jìn)程向用戶展示更新信息，若更新成功角钩，則彈出彈窗告訴用戶重啟應(yīng)用吝沫，完成軟件更新
4.2 增量更新
通過拉取最新的渲染層打包文件，覆蓋之前的渲染層代碼彤断，完成軟件更新野舶，此方案只需替換渲染層代碼，無需替換所有文件宰衙。
按照流程圖去實(shí)現(xiàn)平道，我們需要做以下事情
- 渲染進(jìn)程定時(shí)通知主進(jìn)程檢測更新
- 主進(jìn)程檢測更新
- 需要更新，則拉取線上最新包
- 刪除舊版本包供炼，復(fù)制線上最新包一屋，完成增量更新
- 通知渲染進(jìn)程，提示用戶重啟應(yīng)用完成更新
全量更新和增量更新各有優(yōu)勢袋哼，多數(shù)情況下冀墨，采用增量更新來提高用戶更新體驗(yàn)，同時(shí)使用全量更新作為兜底更新方案涛贯。
至此诽嘉，更新功能就介紹完了。
五、性能優(yōu)化
分為以下3個(gè)方面：
- 構(gòu)建優(yōu)化
- 啟動時(shí)優(yōu)化
- 運(yùn)行時(shí)優(yōu)化
構(gòu)建優(yōu)化在上文內(nèi)容中虫腋，已經(jīng)詳細(xì)介紹過了骄酗，這里不再介紹，下面將介紹 啟動時(shí)優(yōu)化 和 運(yùn)行時(shí)優(yōu)化悦冀。
5.1 啟動時(shí)優(yōu)化
- 使用 v8-compile-cache 緩存編譯代碼
- 優(yōu)先加載核心功能趋翻，非核心功能動態(tài)加載
- 使用多進(jìn)程，多線程技術(shù)
- 采用 asar 打包：會加快啟動速度
- 增加視覺過渡：loading + 骨架屏
5.1.1 使用 v8-compile-cache 緩存編譯代碼
使用 V8 緩存數(shù)據(jù)盒蟆，為什么要這么做呢踏烙？
因?yàn)?electorn 使用 V8 引擎運(yùn)行 js ， V8 運(yùn)行 js 時(shí)历等，需要先進(jìn)行解析和編譯讨惩，再執(zhí)行代碼。其中募闲，解析和編譯過程消耗時(shí)間多步脓，經(jīng)常導(dǎo)致性能瓶頸。而 V8 緩存功能浩螺，可以將編譯后的字節(jié)碼緩存起來靴患，省去下一次解析、編譯的時(shí)間要出。
主要使用 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ùn)行時(shí)優(yōu)化
- 對渲染進(jìn)程 進(jìn)行 Web 性能優(yōu)化
- 對主進(jìn)程進(jìn)行輕量瘦身
5.2.1 對渲染進(jìn)程 進(jìn)行 Web 性能優(yōu)化
用一個(gè)思維導(dǎo)圖來完整闡述如何進(jìn)行 Web 性能優(yōu)化患蹂，如下圖所示：
上圖基本包含了性能優(yōu)化的核心關(guān)鍵點(diǎn)和內(nèi)容或颊，大家可以以此作為參考，去做性能優(yōu)化传于。
5.2.2 對主進(jìn)程進(jìn)行輕量瘦身
核心方案就是將運(yùn)行時(shí)耗時(shí)囱挑、計(jì)算量大的功能交給新開的 node 進(jìn)程去執(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)
通過以上代碼沼溜，將耗時(shí)平挑、計(jì)算量大的功能，放在 server.js 系草，然后再 fork 到新開 node 進(jìn)程中進(jìn)行處理通熄。
至此，性能優(yōu)化就介紹完了找都。
六唇辨、質(zhì)量保障
質(zhì)量保障的全流程措施如下圖所示：
本章節(jié)主要介紹以下3個(gè)方面：
- 自動化測試
- 崩潰監(jiān)控
- 崩潰治理
下面將會依次介紹上述內(nèi)容。
6.1 自動化測試
自動化測試是什么能耻？
上圖是做自動化測試一個(gè)完整步驟赏枚，大家可以看圖領(lǐng)會亡驰。
自動化測試主要分為 單元測試、集成測試嗡贺、端到端測試隐解，三者關(guān)系如下圖所示：
一般情況下，作為軟件工程師诫睬，我們做到一定的單元測試就可以了。而且從我目前經(jīng)驗(yàn)來說帕涌，如果是寫業(yè)務(wù)性質(zhì)的項(xiàng)目摄凡，基本上不會編寫測試相關(guān)的代碼。自動化測試主要是用來編寫庫蚓曼、框架亲澡、組件等需要作為單獨(dú)個(gè)體提供給他人使用的。
electron 的測試工具推薦 vitest 纫版、 spectron 床绪。具體用法參考官網(wǎng)文檔即可，沒什么特別的技巧其弊。
6.2 崩潰監(jiān)控
對于 GUI 軟件癞己，尤其桌面端軟件來說，崩潰率非常重要梭伐，因此需要對崩潰進(jìn)行監(jiān)控痹雅。
崩潰監(jiān)控原理如下圖所示：
崩潰監(jiān)控技巧
- 渲染進(jìn)程崩潰后，提示用戶重新加載
- 通過 preload 統(tǒng)一初始化崩潰監(jiān)控
- 主進(jìn)程糊识、渲染進(jìn)程通過 process.crash() 進(jìn)行模擬崩潰
- 對崩潰日志進(jìn)行收集分析
崩潰監(jiān)控做好后绩社，如果發(fā)生崩潰，該如何治理崩潰呢赂苗？
6.3 崩潰治理
崩潰治理難點(diǎn)：
- 定位出錯(cuò)棧困難：Native 錯(cuò)誤棧愉耙，無操作上下文
- 調(diào)試門檻高：C++ 、 IIdb/GDB
- 運(yùn)行環(huán)境復(fù)雜：機(jī)器型號拌滋、系統(tǒng)朴沿、其他軟件
崩潰治理技巧：
- 及時(shí)升級 electron
- 用戶操作日志和系統(tǒng)信息
- 復(fù)現(xiàn)和定位問題比治理重要
- 把問題交給社區(qū)解決，社區(qū)響應(yīng)快
- 善于用 devtool 分析和治理內(nèi)存問題
七鸠真、安全
俗話說的好悯仙，安全大于天，保證 electron 應(yīng)用的安全也是一項(xiàng)重要的事情吠卷，本章節(jié)將安全分為以下 5 個(gè)方面：
- 源碼泄漏
- asar
- 源碼保護(hù)
- 應(yīng)用安全
- 編碼安全
下面將會依次介紹上述內(nèi)容锡垄。
7.1 源碼泄漏
目前 electron 在源碼安全做的不好，官方只用 asar 做了一下很沒用的源碼保護(hù)祭隔，到底有多沒用呢货岭？
你只需要下載 asar 工具路操，然后對 asar 文件進(jìn)行解壓就可以得到里面的源碼了，如下圖所示：
通過圖中操作即可看到語雀應(yīng)用的源碼千贯。上面提到的 asar 是什么呢屯仗？
7.2 asar
asar 是一種將多個(gè)文件合并成一個(gè)文件的類 tar 風(fēng)格的歸檔格式。Electron 可以無需解壓整個(gè)文件搔谴，即可從其中讀取任意文件內(nèi)容魁袜。
asar 技術(shù)原理：
可以直接看 electron 源碼，都是 ts 代碼敦第，容易閱讀峰弹，源碼如下圖所示：
從圖中可以看出， asar 的核心實(shí)現(xiàn)就是對 nodejs 的 fs 模塊進(jìn)行重寫芜果。
7.3 源碼保護(hù)
避免源碼泄漏鞠呈，按照從低到高的源碼安全，可以分為以下程度
- asar
- 代碼混淆
- WebAssembly
- Language bindings
其中右钾，Language bindings 是最高的源碼安全措施蚁吝，其實(shí)使用 C++ 或 Rust 代碼來編寫 electron 應(yīng)用代碼，通過將 C++ 或 Rust 代碼編譯成二進(jìn)制代碼后舀射，破譯的難度會變高窘茁。這里我說下如何使用 Rust 去編寫 electron 應(yīng)用代碼。
方案：使用 napi-rs 作為工具去編寫后控，如下圖所示：
我們采用 pnpm-workspace 去管理 Rust 代碼庙曙，使用 napi-rs ，比如我們寫一個(gè) sum 函數(shù)浩淘，rs代碼如下：
fn sum(a: f64, b: f64) -> f64 {
a + b
}
此時(shí)我們加上 napi 裝飾代碼捌朴，如下所示：
use napi_derive::napi;
#[napi]
fn sum(a: f64, b: f64) -> f64 {
a + b
}
在通過 napi-cli 將上述代碼編譯成 node 可以調(diào)用的二進(jìn)制代碼。
編譯后张抄，在electron使用上述代碼砂蔽，如下所示：
import { sum as rsSum } from '@rebebuca/native'
// 輸出 7
console.log(rsSum(2, 5))
napi-rs 的使用請閱讀官方文檔，地址是：https://napi.rs/(opens new window)
至此署惯，language bindings 的闡述就完成了左驾。我們通過這種方式，可以完成對重要功能的源碼保護(hù)极谊。
7.4 應(yīng)用安全
目前熟知的一個(gè)安全問題是克隆攻擊诡右，此問題的主流解決方案是將用戶認(rèn)證信息和應(yīng)用設(shè)備指紋進(jìn)行綁定，整體流程如如下圖所示：
應(yīng)用設(shè)備指紋生成：可以用上文闡述的 napi-rs 方案去實(shí)現(xiàn)
用戶認(rèn)證信息和設(shè)備指紋綁定：使用服務(wù)端去實(shí)現(xiàn)
7.5 編碼安全
主要有以下措施：
- 常用的 web 安全轻猖，比如防 xss 帆吻、 csrf
- 設(shè)置 node 可執(zhí)行環(huán)境
- 窗體開啟安全選項(xiàng)
- 限制鏈接跳轉(zhuǎn)
以上具體細(xì)節(jié)不再介紹，自行搜索上述方案咙边。除此之外猜煮，還有個(gè)官方推薦的最佳安全實(shí)踐次员，有空可以看看，地址如下：https://www.electronjs.org/docs/latest/tutorial/security(opens new window)
至此王带，安全這塊就介紹完了淑蔚。
八、總結(jié)
本文介紹了我們對桌面端技術(shù)的調(diào)研愕撰、確定技術(shù)選型刹衫，以及用 electron 開發(fā)過程中，總結(jié)的實(shí)踐經(jīng)驗(yàn)盟戏，如構(gòu)建绪妹、性能優(yōu)化、質(zhì)量保障柿究、安全等。希望對讀者在開發(fā)桌面應(yīng)用過程中有所幫助黄选，文章難免有不足和錯(cuò)誤的地方蝇摸，歡迎讀者在評論區(qū)交流。
