2023年8月19日，掘金掘力計(jì)劃系列活動(dòng)第22場(chǎng)——《聊聊前端工程化實(shí)踐和未來(lái)》在杭州舉行，在本場(chǎng)前端工程化專(zhuān)題的分享活動(dòng)中，來(lái)自字節(jié)跳動(dòng)的資深前端張兆鑫做了題為《架構(gòu)中后臺(tái)提效之路》的分享。

　　1. 為什么需要架構(gòu)中后臺(tái)？

　　有一定規(guī)模的公司，往往會(huì)進(jìn)行開(kāi)發(fā)大量的中后臺(tái)，而每一次開(kāi)發(fā)一個(gè)中后臺(tái)都有一些通用能力的重復(fù)建設(shè)，需要處理以下問(wèn)題：

　　1.申請(qǐng)所有機(jī)房的基礎(chǔ)設(shè)施

　　2.處理 BFF

　　3.處理 SSO

　　4.權(quán)限管理

　　5.增刪改查

　　還有一些特殊場(chǎng)景下的重復(fù)成本，比如在字節(jié)跳動(dòng)非常重視數(shù)據(jù)合規(guī)，經(jīng)常會(huì)需要處理關(guān)于多機(jī)房相關(guān)的問(wèn)題，這些中后臺(tái)的重復(fù)建設(shè)帶來(lái)了以下幾個(gè)問(wèn)題：

　　1.大量的中后臺(tái)能力，每一塊小業(yè)務(wù)可能都需要一個(gè)對(duì)應(yīng)的中后臺(tái)。

　　2.重復(fù)的通用能力，比如權(quán)限、SSO、BFF還有我上面提到的機(jī)房問(wèn)題。

　　3.極高的溝通成本，當(dāng)中后臺(tái)越來(lái)越多，溝通成本隨之上漲。

　　4.接口合理性，這會(huì)涉及到一些接口規(guī)范以及和后端開(kāi)發(fā)同學(xué)的對(duì)接問(wèn)題。

　　在此背景下，就有盡可能的將這些中后臺(tái)系統(tǒng)的復(fù)雜度進(jìn)行收斂，畢竟復(fù)雜度不會(huì)憑空消失，在這個(gè)基礎(chǔ)上開(kāi)始嘗試架構(gòu)中后臺(tái)提效之路。

　　2. 架構(gòu)中后臺(tái)發(fā)展之路

　　整個(gè)架構(gòu)中后臺(tái)的發(fā)展其實(shí)可以分為三個(gè)階段。

　　在初期，其目標(biāo)是：提升效率 && 跑通鏈路，為了盡快打通整個(gè)鏈路，先做的是一個(gè)簡(jiǎn)單的命令行工具，通過(guò)命令行工具可以將項(xiàng)目直接發(fā)布，通過(guò)泛域名解析到四級(jí)域名來(lái)訪問(wèn)，發(fā)布上去后，用戶(hù)就可以結(jié)合身份、權(quán)限等信息來(lái)訪問(wèn)。Vercel 早期也有類(lèi)似的模式。

　　從上圖的可以看到前期的整個(gè)系統(tǒng)是分為兩塊：服務(wù)和框架。

　　在資源有限的情況下，我們需要去謀求一個(gè)平衡。完成滿(mǎn)足基本訴求的框架，我們一直在靈活和開(kāi)箱即用中尋找平衡。

　　我們首先挑選了一些領(lǐng)域，首先插件化是最重要的，在不修改核心的情況下修改運(yùn)行時(shí)和編譯時(shí)。我們定制化了 Tapable ，作為插件的底層實(shí)現(xiàn)，所有的業(yè)務(wù)定制功能都可以通過(guò)插件來(lái)完成。

　　接下來(lái)就是一套通用的開(kāi)箱即用的中后臺(tái)組件，希望盡可能開(kāi)箱即用，通過(guò)大組件降低使用和理解成本。但是不同的業(yè)務(wù)場(chǎng)景下對(duì)于組件細(xì)節(jié)的要求不一樣，所以這里借用了Docusaurus 的 Swizzling component 這個(gè)概念對(duì)所有組件進(jìn)行模塊拆分，將中后臺(tái)拆分成 10 幾個(gè)嵌套區(qū)域，所有模塊都可以通過(guò)插件系統(tǒng)動(dòng)態(tài)引入，可以利用這個(gè)插件系統(tǒng)對(duì)組件的細(xì)節(jié)進(jìn)行定制。內(nèi)部狀態(tài)可以通過(guò) Hook 拿到，這樣就做到了漸進(jìn)式自定義。

　　同時(shí)，我們也遇到了一些團(tuán)隊(duì)的項(xiàng)目有 100 個(gè)以上的頁(yè)面，但并不是所有頁(yè)面的修改頻率、維護(hù)者都一樣，所以引入了路由按需編譯功能，來(lái)對(duì)開(kāi)發(fā)進(jìn)行提效。

　　架構(gòu)中后臺(tái)的第二個(gè)階段就是：降低框架接入門(mén)檻，做最佳實(shí)踐：

　　從上圖的可以看到，在階段二通過(guò)降低環(huán)境配置復(fù)雜度、一系列配置可視化，降低框架的接入門(mén)檻。

　　通過(guò)一鍵環(huán)境監(jiān)測(cè)安裝腳本可以快速的將整個(gè)開(kāi)發(fā)過(guò)程中需要的環(huán)境一鍵配齊，有些公司是通過(guò) Docker 來(lái)做這件事，解決的問(wèn)題是一致的。

　　屏蔽腳手架細(xì)節(jié)，通過(guò)配置、插件的可視化操作，降低框架的使用門(mén)檻。

　　接下來(lái)通過(guò)引入可視化菜單編輯器、可視化頁(yè)面與常用模版，能夠很快的幫助開(kāi)發(fā)框架搭建以及基礎(chǔ)頁(yè)面的生成。

　　在這個(gè)階段遇到了兩個(gè)問(wèn)題：一個(gè)是服務(wù)穩(wěn)定性問(wèn)題，另一個(gè)是大量的 Oncall。

　　服務(wù)穩(wěn)定性的挑戰(zhàn)，這是一個(gè)需要不斷完善以及優(yōu)化的部分，目前已經(jīng)做了以下措施：

　　1.靜態(tài)資源容災(zāi)。

　　2.數(shù)據(jù)多級(jí)緩存容災(zāi)。

　　3.機(jī)房容災(zāi)。

　　架構(gòu)中后臺(tái)的第三個(gè)階段就是：Procode 與低代碼相結(jié)合

　　在代碼生成頁(yè)面，架構(gòu)中后臺(tái)也選擇了 Procode 和 低代碼，因?yàn)樵诓煌瑯I(yè)務(wù)復(fù)雜度下，兩種方式的復(fù)雜度也有不同：

　　從上圖可以看到，低代碼的復(fù)雜度是越來(lái)越高的，而 Procode 的復(fù)雜度是隨著業(yè)務(wù)變高的，對(duì)于低代碼來(lái)說(shuō)，其實(shí)更適合做一些垂直領(lǐng)域的應(yīng)用，在垂直領(lǐng)域低代碼的作用是最大的。

　　調(diào)研了一些業(yè)界產(chǎn)品：Landing Page 的解決方案、宜搭跟釘釘結(jié)合就能很好的解決工作流、供應(yīng)商管理等問(wèn)題。Builder.io 可以把渲染器引入到本地，把區(qū)塊做成低代碼，是一個(gè)非常優(yōu)秀的開(kāi)發(fā)結(jié)合方案。Retool 在內(nèi)部系統(tǒng)領(lǐng)域做的很好，在內(nèi)部實(shí)現(xiàn)了搭建與本地代碼結(jié)合的方案，參考下圖。

　　3. 架構(gòu)中臺(tái)未來(lái)思考

　　架構(gòu)中臺(tái)的未來(lái)發(fā)展方向目前主要是 GPT探索、深耕場(chǎng)景搭建和新工具整合：

　　GPT探索

　　通過(guò)與GPT(通用預(yù)訓(xùn)練語(yǔ)言模型)的問(wèn)答交互,可以高效地理解文檔中的內(nèi)容和總結(jié)常見(jiàn)問(wèn)題。

　　這種交互方式將問(wèn)題形式化,GPT則根據(jù)自身廣泛的語(yǔ)言知識(shí)生成對(duì)應(yīng)答案,實(shí)現(xiàn)對(duì)文檔關(guān)鍵信息的提取，相較于人工理解和總結(jié)文檔,這種人機(jī)協(xié)同的方式大大提高了工作效率。

　　同時(shí),預(yù)先設(shè)定好的問(wèn)答模板,可以使問(wèn)答更加標(biāo)準(zhǔn)化,快速鎖定問(wèn)題關(guān)鍵點(diǎn),避免不必要的重復(fù)勞動(dòng)。結(jié)合預(yù)置的文本生成模板,GPT生成的答案可直接用于各種文檔、報(bào)告等的撰寫(xiě),無(wú)需從零開(kāi)始創(chuàng)作,大幅減少重復(fù)性工作,使文檔寫(xiě)作快速高效。

　　深耕場(chǎng)景搭建

　　針對(duì)常見(jiàn)的CRUD、表單、詳情頁(yè)等場(chǎng)景,設(shè)置對(duì)應(yīng)快捷方式,如增刪改查指令,可以快速生成代碼框架。同時(shí),針對(duì)表單,可預(yù)設(shè)組件的快捷插入方式,僅需簡(jiǎn)單配置即可生成。詳情頁(yè)場(chǎng)景可以預(yù)置通用的布局和樣式代碼,開(kāi)發(fā)者只需填充數(shù)據(jù)。另外,針對(duì)分布式表單,可以抽象出公共邏輯代碼,然后根據(jù)不同需求組合生成。還需要提供多種數(shù)據(jù)鏈接能力,直接鏈接各類(lèi)數(shù)據(jù)庫(kù)、調(diào)用開(kāi)放API等,豐富數(shù)據(jù)源,減少數(shù)據(jù)處理工作,提升開(kāi)發(fā)效率。

　　新工具整合

　　隨著Rust語(yǔ)言生態(tài)越來(lái)越成熟,其工具鏈也在不斷發(fā)展,比如RSpack等。未來(lái) 架構(gòu)中臺(tái) 會(huì)考慮與Rust的工具鏈實(shí)現(xiàn)深度集成,從底層級(jí)別進(jìn)行打通。Rust的性能優(yōu)勢(shì)有望通過(guò)這種集成得到充分利用。比如實(shí)現(xiàn)Rust編寫(xiě)的底層組件在 架構(gòu)中臺(tái)中直接使用,無(wú)縫對(duì)接。這可以提升 架構(gòu)中臺(tái)的運(yùn)行效率與穩(wěn)定性。同時(shí),以Arco Studio作為 架構(gòu)中臺(tái)的資源管理中心,實(shí)現(xiàn)組件、模板、數(shù)據(jù)等資源的統(tǒng)一管理,使開(kāi)發(fā)者可以快速搜索、組合資源,大幅提升效率。

　　關(guān)于掘力計(jì)劃

　　掘力計(jì)劃由稀土掘金技術(shù)社區(qū)發(fā)起，致力于打造一個(gè)高品質(zhì)的技術(shù)分享和交流的系列品牌。聚集國(guó)內(nèi)外頂尖的技術(shù)專(zhuān)家、開(kāi)發(fā)者和實(shí)踐者，通過(guò)線(xiàn)下沙龍、閉門(mén)會(huì)、公開(kāi)課等多種形式分享最前沿的技術(shù)動(dòng)態(tài)。(作者：趙煥)