本文由京東技術(shù)王澤知分享，原題“基于Web的跨平臺(tái)桌面應(yīng)用開發(fā)”，下文進(jìn)行了排版和內(nèi)容優(yōu)化。1、引言
近些年來，跨平臺(tái)跨端一直是比較熱門的話題，Write once, run anywhere一直是開發(fā)者所期望的，跨平臺(tái)方案的優(yōu)勢十分明顯。
對于開發(fā)者而言，可以做到一次開發(fā)、多端復(fù)用，一套代碼就能夠運(yùn)行在不同設(shè)備上，這在很大程度上能夠降低研發(fā)成本，同時(shí)能夠在產(chǎn)品效能上做到快速驗(yàn)證和快速上線。
如今跨端跨平臺(tái)的優(yōu)秀技術(shù)方案也比較多：
- 1）移動(dòng)端：React Native，F(xiàn)lutter，Weex；
- 2）小程序端：Taro，Uniapp；
- 3）桌面端：NW.js，Electron，F(xiàn)lutter for desktop，Tauri，Wails。
本文主要介紹了目前比較流行的桌面應(yīng)用跨平臺(tái)開發(fā)技術(shù)及其架構(gòu)，并以實(shí)戰(zhàn)的方式對比了 Electron 和 Tauri 的優(yōu)勢和劣勢，以及桌面跨平臺(tái)應(yīng)用開發(fā)的技術(shù)趨勢。
2、系列文章
本文是系列文章中的第 13篇，本系列總目錄如下：
3、什么是跨平臺(tái)
泛指編程語言、軟件或硬件設(shè)備可以在多種操作系統(tǒng)或不同硬件架構(gòu)的電腦上運(yùn)作。
一般來說，有這幾種場景，分別是跨設(shè)備平臺(tái)（如 PC 端和移動(dòng)端），跨操作系統(tǒng)（移動(dòng)端中分Android，IOS，PC端中分 Windows，macOS，Linux），國內(nèi)的小程序（微信，京東，百度，支付寶，字節(jié)跳動(dòng)等等）。
4、跨平臺(tái)技術(shù)方案盤點(diǎn)
4.1概述
跨平臺(tái)編程不是一件容易的事情，這是由于在不同平臺(tái)之間，有許多小而復(fù)雜的差異，這都需要考慮周全。
目前已經(jīng)有了較多成熟的跨平臺(tái)技術(shù)方案，能夠減小開發(fā)者的開發(fā)成本及跨平臺(tái)的難易程度。
比如：
- 1）NW.js；
- 2）Electron；
- 3）Flutter for Desktop；
- 4）Tauri；
- 5）Wails；
4.2NW.js
NW.js 官網(wǎng)描述：
NW.js概況：
NW.js（node-webkit ）是一個(gè)基于 Chromium 和 Node.js 的 Web 運(yùn)行環(huán)境，可直接在 DOM 中調(diào)用 Node.js 模塊，并可使用任何現(xiàn)有的 Web 技術(shù)來編寫本地應(yīng)用。
4.3Electron
Electron 官網(wǎng)描述：
Electron概況：
Electron 的前身叫做 Atom-Shell，本來是 GitHub 發(fā)布開源編輯器 Atom 時(shí)一并發(fā)布的副產(chǎn)物，但是后來這個(gè)副產(chǎn)物的影響力遠(yuǎn)遠(yuǎn)的超過了 Atom 本身，于是便改名為一個(gè)獨(dú)立專案，也就是現(xiàn)在的 Electron。Electron 的本質(zhì)很簡單，就是 Chromium + Node.js 的組合，兩者之間通過 IPC 通訊。
類似于 NW.js，表面上，它們似乎非常相似，但是這兩個(gè)項(xiàng)目有本質(zhì)上的區(qū)別，使得 Electron 和 NW.js 成為兩個(gè)完全獨(dú)立的產(chǎn)品。
比如：
- 1）應(yīng)用入口不同：NW.js 主入口是一個(gè) HTML，Electron 中是 JavaScript，可操作性更強(qiáng)；
- 2）Node 集成方式不同：在 NW.js 中網(wǎng)頁中的 Node 需要通過給 Chromium 打補(bǔ)丁來實(shí)現(xiàn)，Electron 則是通過各個(gè)平臺(tái)的消息循環(huán)與 libuv 的循環(huán)集成，避免了直接在 Chromium 上做改動(dòng)；
- 3）支持的功能數(shù)量上有明顯的差距：Electron 有著較大的社區(qū)及社區(qū)活躍度，大量成熟的 npm 功能模塊。
4.4Tauri
Tauri 官網(wǎng)描述：
Tauri概況：
Tauri 是 2021年 JavaScript 明星項(xiàng)目的最受歡迎項(xiàng)目中排名第5，在 stateofjs 2021 中 滿意度和關(guān)注度排名第1， 由于 Vite，esbuild，swc，Rome 等工具的大火，讓基于 Go、Rust 的高效率構(gòu)建類工具進(jìn)入爆發(fā)期，加上 Bundleless 的構(gòu)建體驗(yàn)，讓 Rust、Go 成為前端開發(fā)者的又一扇門。由于 Tauri 的 Rust 背景，加上構(gòu)建產(chǎn)物小，內(nèi)存占用低，還是值得長期關(guān)注的。
Tauri 在 JavaScript 明星項(xiàng)目和 stateofjs 中的排名：
題外話：Rust 前景還是非常不錯(cuò)的，如 Linux內(nèi)核接納 Rust，deno采用 Rust，微軟擁抱Rust，fuchsia 的 Rust 代碼占比超50%，Apple 在底層 all-in rust，連續(xù)6年的 stackoverflow 最受歡迎語言，但學(xué)習(xí)門檻較高。
4.5Wails
Wails 官網(wǎng)描述：
Wails概況：
Wails 是一個(gè)可讓您使用 Go 和 Web 技術(shù)編寫桌面應(yīng)用的項(xiàng)目。可以將其看作為 Go 的快并且輕量的 Electron 替代品。可以使用 Go 的靈活性和強(qiáng)大功能，結(jié)合豐富的現(xiàn)代前端，輕松的構(gòu)建應(yīng)用程序。
與 Tauri 類似，Windows 上使用的是 Webview2。
4.6Flutter for Desktop
Flutter 官網(wǎng)描述：
Flutter概況：
從渲染原理看 Flutter 是 skia 自繪性能優(yōu)于 Electron，但需要考慮下穩(wěn)定性和生態(tài)。
5、典型跨平臺(tái)架構(gòu)的技術(shù)原理
5.1概述
本節(jié)將討論使用較多的 Electron 和較有前景的 Tauri 的架構(gòu)原理。
Electron 架構(gòu)組成：
通過 Web 技術(shù)寫 UI，賦予了底層能力，達(dá)到跨平臺(tái)的能力及體驗(yàn)。
5.2Chromium 多進(jìn)程架構(gòu)
大多數(shù)現(xiàn)代 Web 瀏覽器都為多進(jìn)程架構(gòu)，主要有瀏覽器主進(jìn)程、渲染進(jìn)程、插件進(jìn)程、網(wǎng)絡(luò)進(jìn)程、GPU 進(jìn)程，Chromium 也是如此。
IPC = Inter-Process Communication 進(jìn)程間通信
Chromium 架構(gòu)圖：
Chromium 是 Chrome 的開源版，同時(shí)也是一個(gè)瀏覽器：
- 1）主進(jìn)程的 RenderProcessHost 和渲染進(jìn)程的 RenderProcess 負(fù)責(zé)處理 IPC 事件；
- 2）渲染進(jìn)程的 RenderView，頁面的展示會(huì)在這里基于 Webkit 排版出來；
- 3）ResourceDispatcher 處理資源請求，當(dāng)頁面需要請求資源時(shí)，通過 ResourceDispather 創(chuàng)建一個(gè)請求 ID 轉(zhuǎn)發(fā)到 IPC，在 Browser 進(jìn)程中處理后返回。
5.3Electron 架構(gòu)
Election 架構(gòu)圖：
如上圖所示：
- 1）在每個(gè)進(jìn)程中暴露了 Native API（Main Native API，Renderer Native API）；
- 2）引入 Node.js；
- 3）Web 技術(shù)實(shí)現(xiàn) UI。
5.4Electron 進(jìn)程模型
Electron 繼承了來自 Chromium 的多進(jìn)程架構(gòu)，這使得此框架在架構(gòu)上非常相似于一個(gè)現(xiàn)代的網(wǎng)頁瀏覽器。
為何采用多進(jìn)程架構(gòu)？
網(wǎng)頁瀏覽器是個(gè)極其復(fù)雜的應(yīng)用程序。除了顯示網(wǎng)頁內(nèi)容的主要能力之外，它還有許多次要的職責(zé)，例如：管理眾多窗口 ( 或標(biāo)簽頁) 和加載第三方擴(kuò)展。
在早期，瀏覽器通常使用單個(gè)進(jìn)程來處理這些功能。這種模式雖然能減小打開每個(gè)標(biāo)簽頁的開銷，但也同時(shí)意味著一個(gè)網(wǎng)站的崩潰或無響應(yīng)會(huì)影響到整個(gè)瀏覽器。
為了解決這個(gè)問題，Chrome 團(tuán)隊(duì)決定讓每個(gè)標(biāo)簽頁在自己的進(jìn)程中渲染， 從而限制一個(gè)網(wǎng)頁上的有誤或惡意代碼可能導(dǎo)致的對整個(gè)應(yīng)用程序造成的傷害，然后用單個(gè)瀏覽器進(jìn)程控制這些標(biāo)簽頁進(jìn)程，以及整個(gè)應(yīng)用程序的生命周期。
多進(jìn)程架構(gòu)：
Electron 也是如此，作為應(yīng)用開發(fā)者，控制著兩種類型的進(jìn)程，主進(jìn)程和渲染進(jìn)程：
- 1）主進(jìn)程負(fù)責(zé)應(yīng)用程序窗口管理，應(yīng)用程序的生命周期，原生API等；
- 2）渲染進(jìn)程負(fù)責(zé)UI的展示，這部分可以選擇任意前端框架 Vue、React、Svelte、Preact。
5.5Tauri 進(jìn)程模型
Tauri 采用了一種類似 Electron 和大多數(shù)現(xiàn)代Web瀏覽器那樣的多進(jìn)程架構(gòu)。包括主進(jìn)程和 WebView進(jìn)程，單個(gè)主進(jìn)程管理一個(gè)或多個(gè) WebView 進(jìn)程。
Tauri 進(jìn)程模型：
5.6進(jìn)程間通信
Electron 的進(jìn)程通信：（渲染器進(jìn)程 -> 主進(jìn)程）
- 1）（雙向）ipcRenderer.invoke 與 ipcMain.handle 搭配使用來完成；
- 2）（單向）ipcRenderer.send API 發(fā)送消息，然后使用 ipcMain.on API 接收。
大多數(shù)現(xiàn)代 Web 瀏覽器都為多進(jìn)程架構(gòu)，主要有瀏覽器主進(jìn)程、渲染進(jìn)程、插件進(jìn)程、網(wǎng)絡(luò)進(jìn)程、GPU 進(jìn)程，Chromium 也是如此。
6、Electron和Tauri的實(shí)戰(zhàn)對比
為了對比 Electron 和 Tauri 差異性，可以分別用 Electron 和 Tauri 做一個(gè)簡單的實(shí)戰(zhàn)應(yīng)用——導(dǎo)航啟動(dòng)器，類似于 Alfred、Spotlight。
6.1功能描述
首先來描述下這個(gè)應(yīng)用的功能，啟動(dòng)應(yīng)用后，通過快捷鍵 Ctrl/Command + K 喚起應(yīng)用界面——一個(gè)輸入框，在輸入框輸入關(guān)鍵詞 git 會(huì)展示 git 相關(guān)的系統(tǒng)名稱列表，選擇后回車即可打開 github.com，相當(dāng)于另類的書簽。
6.2設(shè)計(jì)思路
導(dǎo)航啟動(dòng)工具流程圖：
6.3項(xiàng)目結(jié)構(gòu)及實(shí)現(xiàn)
Electron 使用的是 Electron React Boilerplate 腳手架，使用 webpack 構(gòu)建 UI 部分。
Tauri 是使用官方的腳手架工具——create-tauri-app，內(nèi)置了 Vite，在前端框架上選了 React。
Electron 與 Tauri 項(xiàng)目結(jié)構(gòu)圖：
這個(gè)導(dǎo)航啟動(dòng)器主要涉及的功能點(diǎn)有：
- 1） 整個(gè)應(yīng)用不展示關(guān)閉，最小化，最大化的按鈕及整個(gè)菜單欄（menuBar），無邊框窗口；
- 2） 視覺上整個(gè)應(yīng)用是一個(gè)輸入框，應(yīng)用窗口的高度是根據(jù)網(wǎng)頁內(nèi)容的高度自適應(yīng)；
- 3） 注冊全局快捷鍵，顯示應(yīng)用，隱藏應(yīng)用；
- 4） 監(jiān)聽按鍵，并使用默認(rèn)瀏覽器打開鏈接。
7、Electron和Tauri具體功能點(diǎn)的代碼實(shí)現(xiàn)對比
7.1功能點(diǎn)一
Electron 通過對主窗口初始化時(shí)修改配置，frame 設(shè)置成 false 可實(shí)現(xiàn)無邊框窗口。
Election 配置：
在 Tauri 中，實(shí)現(xiàn)無邊框窗口有 3 種方式：
- 1）通過 tauri.conf.json 配置；
- 2）通過 Tauri 提供的 JS API - @tauri-apps/api；
- 3）通過 Rust 原生修改 window。
這里我們選用在 tauri.config.json 中配置。
Tauri 配置：
7.2功能點(diǎn)二
其輸入框部分均由 React 實(shí)現(xiàn)，主要的差異在窗體根據(jù)內(nèi)容高度動(dòng)態(tài)調(diào)整窗體的高度，根據(jù) document.body.offsetHeight 的高度設(shè)置 mainWindow 的高度；在 Electron 中，可以在渲染進(jìn)程中發(fā) IPC 通知主進(jìn)程去修改，主進(jìn)程監(jiān)聽到消息后進(jìn)行高度修改。
Electron IPC 通信修改：
在 Tauri 中，相對比較方便，對于常用的功能都封裝了 JS API，也就是前面提到的 @tauri-apps/api，直接導(dǎo)入方法調(diào)用即可。
Tauri 在渲染進(jìn)程修改：
7.3功能點(diǎn)三
注冊全局快捷鍵，控制 mainWindow 的顯示和隱藏。在 Electron 中，首先定義 registerGlobalShortcut 方法，在 app 啟動(dòng)后注冊快捷鍵，主要是在主進(jìn)程中操作。
Election 注冊快捷鍵：
在 Tauri 中，得益于 JS API 的便利性，在渲染進(jìn)程中就可以注冊，因此只需要在 React 生命周期中執(zhí)行注冊。
Tauri 注冊快捷鍵：
7.4功能點(diǎn)四
為了方便演示，將直接對 document.body 進(jìn)行 onkeydown 監(jiān)聽，上下光標(biāo)選擇對應(yīng)的選項(xiàng)，回車或點(diǎn)擊使用默認(rèn)瀏覽器打開對應(yīng)的鏈接，這里兩者的實(shí)現(xiàn)很相似。
Electron 與 Tauri 打開 URL：
至此，主要功能已經(jīng)完成，下一步將進(jìn)入打包多平臺(tái)的應(yīng)用方式。
8、Electron和Tauri的應(yīng)用打包對比
Electron 中比較常見的有兩種打包：
- 1）electron-packager；
- 2）electron-builder。
electron-builder 的生態(tài)更好，這里選擇 electron-builder。
Electron 打包：
PS：Electron的打包實(shí)踐可以看看《Electron初體驗(yàn)(快速開始、跨進(jìn)程通信、打包、踩坑等)》一文中的“7、打包發(fā)布”章節(jié)。
Tauri 中則是內(nèi)置在 cli 的打包方案，執(zhí)行 yarn tauri build 即可。
同一應(yīng)用對比，相同 React 版本，未使用 UI 框架：
內(nèi)存占用對比圖：
Tauri 官方對比圖：
9、Electron和Tauri的應(yīng)用更新對比
兩者都有對應(yīng)的解決方案，具體內(nèi)容可以查看官方文檔。
PS：關(guān)于Electron的版本列新實(shí)踐可以看看《vivo的Electron技術(shù)棧選型、全方位實(shí)踐總結(jié)》。
10、本文小結(jié)
NW.js 的時(shí)代已經(jīng)過去，考慮 NW.js 的可以優(yōu)先 Electron。
Tauri 表現(xiàn)不錯(cuò)，前景較好。它解決了 Electron 現(xiàn)有的很多問題，帶來了簡單便捷的開發(fā)體驗(yàn)，也期待 Tauri 的 roadmap 中集成 Deno 作為應(yīng)用的后端處理，這樣就可以繼續(xù)使用 JavaScript/TypeScrupt 來實(shí)現(xiàn)應(yīng)用后端邏輯，新項(xiàng)目可以考慮使用，但是還有一些問題需要改進(jìn)以及 Rust 的學(xué)習(xí)曲線曲折，有一定的學(xué)習(xí)成本。
Electron 目前仍是最多的選擇，得益于自身龐大的社區(qū)，豐富的功能及工程實(shí)踐，但性能優(yōu)化這部分比較考驗(yàn)開發(fā)者。
11、參考資料
[1] Electron官方開發(fā)者手冊
[2] Flutter官方手冊
[3] Tauri官方手冊
[4] React Native開發(fā)指南
[5] 快速了解新一代跨平臺(tái)桌面技術(shù)——Electron
[6] Electron初體驗(yàn)(快速開始、跨進(jìn)程通信、打包、踩坑等)
[7] vivo的Electron技術(shù)棧選型、全方位實(shí)踐總結(jié)
[8] 蘑菇街基于Electron開發(fā)IM客戶端的技術(shù)實(shí)踐
[9] 融云基于Electron的IM跨平臺(tái)SDK改造實(shí)踐總結(jié)
[10] 網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐
[11] 得物基于Electron開發(fā)客服IM桌面端的技術(shù)實(shí)踐
[12] 新QQ桌面版為何選擇Electron作為跨端框架
[13] 快速選型跨平臺(tái)框架Electron、Flutter、Tauri、React Native等
（本文已同步發(fā)布于：http://www.52im.net/thread-4675-1-1.html）