?????♀? 編者按：本文作者是螞蟻集團(tuán)前端工程師維駿，介紹了語雀在做桌面端時(shí)的一些技術(shù)架構(gòu)思考和實(shí)踐，同時(shí)分享沉淀的一些通用桌面應(yīng)用解決方案和經(jīng)驗(yàn)，歡迎一起交流～

語雀桌面端作為語雀為用戶提供的生產(chǎn)力工具，上線兩年多來一直保持高頻的迭代和健康的業(yè)務(wù)增長。本次主要介紹我們?cè)谧鲎烂娑藭r(shí)的一些技術(shù)架構(gòu)思考和實(shí)踐，同時(shí)也將分享我們沉淀的一些通用桌面應(yīng)用解決方案和經(jīng)驗(yàn)。

文章會(huì)分為四部分，首先會(huì)簡(jiǎn)單介紹語雀桌面端，然后介紹當(dāng)前語雀桌面端的應(yīng)用架構(gòu)以及關(guān)鍵點(diǎn)，之后介紹架構(gòu)中的幾個(gè)架構(gòu)重點(diǎn)項(xiàng)，最后再進(jìn)行總結(jié)。

語雀桌面端介紹

語雀是孵化自螞蟻體驗(yàn)技術(shù)部的一款筆記與文檔知識(shí)庫工具。我們?cè)趦赡昵?，針?duì)語雀用戶特點(diǎn)，以及后續(xù)發(fā)展策略，旨在為創(chuàng)作者提供更好的創(chuàng)作體驗(yàn)，推出語雀桌面客戶端。

相較于現(xiàn)有瀏覽器提供的產(chǎn)品服務(wù)而言，我們提供的桌面端產(chǎn)品主要考慮以下幾點(diǎn)：

無干擾

給用戶一個(gè)沉浸式的創(chuàng)作體驗(yàn)，而不像瀏覽器有其他窗口、tab 進(jìn)行干擾，以及用完即走的用戶心智。

系統(tǒng)級(jí)常駐

打開速度更快，可以一鍵啟動(dòng)或者利用各類快捷工具喚起。

集成更多操作系統(tǒng)能力

提升創(chuàng)作效率的多窗口、系統(tǒng)菜單和快捷鍵、對(duì)文件讀寫、與系統(tǒng)軟件集成等。

離線

期望能在離線或弱網(wǎng)的情況下，無障礙的進(jìn)行創(chuàng)作。

桌面端架構(gòu)概覽

研發(fā)側(cè)主要分為左邊三層，最底層是語雀的基礎(chǔ)設(shè)施，依賴了語雀后臺(tái)提供或封裝的大量云服務(wù)，以及底層依賴的安全能力和存儲(chǔ)模塊。

中間一層是比較偏應(yīng)用架構(gòu)的一些能力封裝，上面是代碼層面用的的輔助能力，還有主進(jìn)程的模塊，然后有給應(yīng)用提供的一些管理能力和一些跟 UI 相關(guān)的功能模塊，最上層就是基于底層架構(gòu)搭建的業(yè)務(wù)應(yīng)用。包括桌面端應(yīng)用比較核心的幾個(gè)模塊，以及一些由子應(yīng)用方式承接的業(yè)務(wù)模塊（后面也會(huì)詳細(xì)介紹子應(yīng)用這個(gè)概念）

同時(shí)最右側(cè)也有很多輔助研發(fā)的依賴能力，來完成語雀桌面端的發(fā)布、質(zhì)量和穩(wěn)定性管理。

架構(gòu)概覽 - 關(guān)鍵點(diǎn)

相比較普通 web 應(yīng)用來說，我們覺得桌面端有以下幾個(gè)能力比較重要：包括安全、軟件升級(jí)、以及桌面端通用的的基礎(chǔ)能力：

架構(gòu)概覽 - 安全

安全是一個(gè)生產(chǎn)力工具軟件的生命線，特別是語雀作為一款知識(shí)管理工具，對(duì)于安全是非常看重。

基礎(chǔ)安全

• 下載安裝包時(shí)，需要有安全管理機(jī)制，避免下載過程中被惡意替換；

• 升級(jí)到最新的 Electron 版本（語雀目前緊跟官方大版本，同時(shí)也會(huì)參考微軟的頭部應(yīng)用 (vscode)，避免有沒考慮到的場(chǎng)景；

• 同時(shí)用戶離線下載到本地的文件，包括圖片，附件等，也需要經(jīng)過加密。

啟動(dòng)安全

• 殺毒軟件：啟動(dòng)安全主要是在啟動(dòng)軟件時(shí)的一些安全問題，例如二進(jìn)制模塊是否有加簽名，避免被殺毒軟件查殺導(dǎo)致無法啟動(dòng)，也可以聯(lián)系安全廠商加白名單，同時(shí)還能提升啟動(dòng)速度。

• 禁止調(diào)試：因?yàn)檐浖a都會(huì)下載到客戶端，可以禁止軟件在客戶端瀏覽器進(jìn)行調(diào)試。

• 數(shù)據(jù)庫密鑰管理：本地?cái)?shù)據(jù)庫文件需要保證即使被惡意拿到，也要保證無法查看到里面的內(nèi)容。我們通過生成內(nèi)存安全級(jí)別的方案，確保其他非當(dāng)前電腦的語雀軟件即使拿到數(shù)據(jù)庫文件后也無法打開。

應(yīng)用安全

• 渲染容器設(shè)置白名單來控制不被引入惡意頁面；

• 渲染進(jìn)程關(guān)閉 Node 功能以及開啟隔離模式，避免渲染進(jìn)程權(quán)限過高；

• Electron 本身是 web 開發(fā)模式，所以 web 中遇到的安全問題，在 Electron 同樣會(huì)遇到，可以統(tǒng)一處理；

架構(gòu)概覽 - 軟件升級(jí)

客戶端軟件相比較于 web 來說，還有一個(gè)非常大的區(qū)別就是有功能更新時(shí)，有一個(gè)升級(jí)過程，不像 web 直接刷新頁面即可。語雀桌面端作為迭代迅速的產(chǎn)品，對(duì)于升級(jí)這塊也是踩了不少坑。

語雀桌面端由兩大部分組成：包括 Electron 和 Node.js 等基礎(chǔ)模塊的軟件包 + 以及自己的業(yè)務(wù)代碼。

Mac OS：Mac 下的升級(jí)流程比較簡(jiǎn)單，軟件下載完成后，利用 hdiutil來模擬用戶手動(dòng)安裝流程，用戶重啟即可完成安裝。

Windows：Windows 下因?yàn)榄h(huán)境特殊性，需要下載安裝包后，通過主進(jìn)程自動(dòng)打開安裝界面，引導(dǎo)用戶進(jìn)行手動(dòng)一步一步安裝。

其實(shí)這種方案很好的滿足的我們?cè)缙诘墓δ艿?，但是隨著用戶量上漲，也遇到了很多問題。

比如：

每次升級(jí)帶寬消耗巨大：對(duì)于每次安裝每個(gè) UV 都有近 100M 的下載，每次推送版本時(shí)，都會(huì)遇到 OSS 流量告警，這背后都對(duì)應(yīng)著成本。

安裝體驗(yàn)差：Windows 下因?yàn)槊看紊?jí)幾乎都是一次新的安裝流程，所以體驗(yàn)也是比較差的，經(jīng)常收到用戶吐槽。

所以我們就調(diào)研了一種增量更新的方案，一個(gè) Electron 程序包括 Electron 核心包以及業(yè)務(wù)代碼，其實(shí)每次變更的僅僅是業(yè)務(wù)代碼，所以理論上每次更新只需要增量更新業(yè)務(wù)代碼即可。

Mac 下增量直接下載到增量代碼后，替換掉即可。

Windows 下比較復(fù)雜，我們主要遇到兩個(gè)問題：

文件占用問題：由于 Windows 系統(tǒng)特性，如果某個(gè)文件在使用，會(huì)無法刪除。所以說如果要替換，肯定關(guān)閉程序，然后進(jìn)行刪除操作后再啟動(dòng)。

所以我們寫了一個(gè) ?.exe 可執(zhí)行文件來做關(guān)閉程序、更新文件、啟動(dòng)語雀。

UAB 權(quán)限控制：文件寫入另一個(gè)問題是 C 盤文件一般是需要授權(quán)才可以操作的。我們軟件啟動(dòng)沒辦法拿到這么高權(quán)限。不過還在 Windows 7 及以后新增了一個(gè) PowerShell 功能，通過這個(gè)功能執(zhí)行，能引導(dǎo)用戶授權(quán)，拿到更高級(jí)的權(quán)限。

當(dāng)然過程中還碰到不少細(xì)節(jié)問題，比如替換過程中路徑中英文問題、用戶自定義過環(huán)境變量位置問題等等

架構(gòu)概覽 - 基礎(chǔ)能力沉淀

另外我們?cè)谧鲕浖倪^程中，也沉淀了一些與業(yè)務(wù)無耦合的組件：

• 多窗口管理：當(dāng)給用戶提供提供更方便的多窗口編輯能力時(shí)，如何去管理這些窗口打開，關(guān)閉，性能監(jiān)控等；

• Webview：不同編輯器以及子應(yīng)用都是通過 Webview 來承載的，需要有一個(gè)通用的模塊來維護(hù)系統(tǒng)中用到的各個(gè) webview 的生命周期等。

• 離線在線：電腦離線和在線狀態(tài)獲取，雖然瀏覽器有提供這個(gè)狀態(tài)的獲取和事件監(jiān)聽，但是 Windows 下不太準(zhǔn)確。我們封裝了一個(gè)比較通用的模塊。

桌面端架構(gòu)重點(diǎn)

從架構(gòu)上來說，相較于用了多酷炫的技術(shù)，更重要的是研發(fā)交付效率高不高，性能怎么樣，穩(wěn)定性高不高。我們認(rèn)為以下三點(diǎn)是架構(gòu)好壞評(píng)判的重要標(biāo)準(zhǔn)。

架構(gòu)重點(diǎn) - 交付效率

從桌面端功能上來說，包括編輯器在內(nèi)，有超過 60% 的功能模塊都是與 web 一致的，所以開始是用到了同構(gòu)的方案。

同構(gòu)過程中的一些經(jīng)驗(yàn)：

• 通用代碼移動(dòng)到 Common 目錄：語雀代碼倉庫是 monorepo模式，如果沒有很清晰的目錄劃分，很容易造成跨端兼容問題。有了這個(gè)約定以后，業(yè)務(wù)研發(fā)同學(xué)就會(huì)注意到這個(gè)會(huì)用在移動(dòng)端或者桌面端

• 通過 webpack alias 適配多端：這個(gè)方式比較常見，比如各端有不同的網(wǎng)絡(luò)請(qǐng)求庫，在組件層面使用 adapter/request。webpack 在構(gòu)建時(shí)，adapter 映射到不同的端實(shí)現(xiàn)。

• 定義多端代碼研發(fā)規(guī)范：梳理出不同端的一些差異點(diǎn)，在研發(fā)時(shí)避免踩坑。
  

架構(gòu)重點(diǎn) - 交付效率(同構(gòu)問題)

雖然同構(gòu)模式可以解決我們當(dāng)時(shí)遇到的一些問題，但是隨著業(yè)務(wù)規(guī)模和功能增加，陸續(xù)有些問題暴露出來：

遷移到 Common 目錄，各種依賴問題：很多功能在桌面端之前已經(jīng)上線，有些復(fù)雜組件遷移到 Common 下本身也需要耗費(fèi)不少時(shí)間。

缺少動(dòng)態(tài)化能力，迭代滯后（web 與桌面端功能不一致）：組件在 web 發(fā)布上線后，桌面端需要發(fā)布才支持，所以經(jīng)常會(huì)碰到 web 和桌面端不一致的吐槽。

容易出現(xiàn)多端兼容問題（環(huán)境依賴等）：雖然我們定義了一些規(guī)范，但很難徹底避免出現(xiàn)環(huán)境依賴問題。

缺少獨(dú)立沙箱，容易影響主應(yīng)用(內(nèi)存泄漏、樣式)：web 可能用完即走，可以刷新等，不太容易遇到問題，但是桌面端因?yàn)槭浅ｑv的，如果有些內(nèi)存泄漏或者樣式污染問題，就直接影響到整體可用性。

架構(gòu)重點(diǎn) - 交付效率（子應(yīng)用）

考慮到上述原因，我們將代碼復(fù)用架構(gòu)升級(jí)成子應(yīng)用模式，利用桌面端容器，嵌套一個(gè) html 在線或者離線頁面。

簡(jiǎn)單來說，子應(yīng)用模式可以理解為支付寶九宮格進(jìn)去的各個(gè)小程序模塊。

快速迭代：提供獨(dú)立的發(fā)布迭代能力，所以無需跟隨桌面端整體發(fā)布。而且直接由業(yè)務(wù)同學(xué)跟進(jìn)整個(gè)交付流程，無需桌面端同學(xué)參與，提升交付效率。

具備端相關(guān)能力：每個(gè)子應(yīng)用默認(rèn)就能使用桌面端提供的 JSBridge 能力，天然能做到跟桌面端模塊一樣的能力。

獨(dú)立沙箱：獨(dú)立于桌面端主窗口，利用桌面端的容器來完成渲染，所以能完全做到進(jìn)程級(jí)別隔離，相互之間的內(nèi)存開銷一目了然，更好的做到管控，保證整體應(yīng)用穩(wěn)定性。

加載初始化：除了上述的一些優(yōu)勢(shì)，也會(huì)到來一些問題，比如加載速度慢等，我們通過 webview 預(yù)熱、緩存等方式，一定程度上解決了這個(gè)問題。

架構(gòu)重點(diǎn) - 性能

性能是一個(gè)桌面端軟件必須要面對(duì)的問題，是需要持續(xù)在不同角度進(jìn)行優(yōu)化的

主要包括這幾個(gè)方面：

啟動(dòng)速度優(yōu)化：啟動(dòng)速度是用戶第一映像，我們主要是將主進(jìn)程代碼進(jìn)行緩存，盡早展示 loading 避免白屏，主窗口和渲染進(jìn)程的部分任務(wù)同時(shí)執(zhí)行，達(dá)到并發(fā)效果。

主進(jìn)程優(yōu)化：主進(jìn)程和渲染進(jìn)程執(zhí)行是同步的，如果主進(jìn)程做了太多任務(wù)，會(huì)導(dǎo)致用戶使用起來卡頓，甚至閃退。所以盡量減少主進(jìn)程所做的事情。

Web 優(yōu)化：同時(shí)，之前很多在 web 上做的優(yōu)化，一樣可以拿過來使用。例如懶加載，合并模塊等（組合多個(gè)模塊本身也有開銷）

Webview 優(yōu)化：例如預(yù)熱 webview、并進(jìn)行一些性能管控措施，避免失控。

架構(gòu)重點(diǎn) - 性能（持續(xù)性任務(wù)）

性能優(yōu)化其實(shí)不是說做完哪些事情就可以徹底解決，而是一個(gè)長期過程。可能我們后續(xù)新增功能時(shí)，代碼里有某一個(gè)內(nèi)存泄漏問題，就很容易導(dǎo)致性能拉胯下來。所以我們也建立了一些持續(xù)性的機(jī)制：

主要包括：

日常觀測(cè)：在開發(fā)模式下，建立觀測(cè)性能指標(biāo)能力，做到心中有數(shù)；

自動(dòng)化任務(wù)：日常也會(huì)有自動(dòng)化任務(wù)，模擬真實(shí)用戶長時(shí)間使用，及時(shí)發(fā)現(xiàn)內(nèi)存泄漏等問題；

性能大盤：對(duì)于線上性能水位，能有一個(gè)全盤的感知能力，灰度發(fā)布過程中可重點(diǎn)關(guān)注。

架構(gòu)重點(diǎn) - 穩(wěn)定性

相比較于 web 而言，桌面端的穩(wěn)定性也是要求更高的

從研發(fā)流程上看，我們主要有兩塊事情：

單測(cè)、集成測(cè)試：利用代碼測(cè)試來輔助整體穩(wěn)定性

UIA：通過模擬用戶行為的 UIA 自動(dòng)化測(cè)試回歸來提升穩(wěn)定性，及時(shí)發(fā)現(xiàn)異常。

注：UIA 是語雀工程師自研的自動(dòng)化方案，詳見 ：Macaca MacOS

另外建立了穩(wěn)定性大盤和實(shí)時(shí)告警，來感知到線上性能情況。

為了保證每次發(fā)布的穩(wěn)定性，減少回歸成本，我們利用每周一次預(yù)覽版發(fā)布的敏捷研發(fā)模式，來分解大版本發(fā)布帶來的集成風(fēng)險(xiǎn)。

總結(jié)

• 針對(duì)當(dāng)前的業(yè)務(wù)體量和團(tuán)隊(duì)經(jīng)驗(yàn)，選擇合適的技術(shù)架構(gòu)；

• 現(xiàn)在肯定有比 Electron 更新的桌面端架構(gòu)，比如 flutter、tauri 等，要綜合看比如團(tuán)隊(duì)積累以及穩(wěn)定性，是否有成熟的商業(yè)化產(chǎn)品等。

• 性能和穩(wěn)定性優(yōu)化是持續(xù)性的過程，先建立度量和感知；

• 交付效率和交付質(zhì)量最容易被忽視，但卻是架構(gòu)方案的重要考量；

• 架構(gòu)好壞的評(píng)判標(biāo)準(zhǔn)一定是由業(yè)務(wù)效果決定的，交付效率和交付質(zhì)量是衡量業(yè)務(wù)效果的手段之一。