掘力計劃22期-字節(jié)跳動架構(gòu)中臺提效之路

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

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

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

　　1.申請所有機房的基礎(chǔ)設(shè)施

　　2.處理 BFF

　　3.處理 SSO

　　4.權(quán)限管理

　　5.增刪改查

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

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

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

　　3.極高的溝通成本，當中后臺越來越多，溝通成本隨之上漲。

　　4.接口合理性，這會涉及到一些接口規(guī)范以及和后端開發(fā)同學的對接問題。

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

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

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

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

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

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

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

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

　　同時，我們也遇到了一些團隊的項目有 100 個以上的頁面，但并不是所有頁面的修改頻率、維護者都一樣，所以引入了路由按需編譯功能，來對開發(fā)進行提效。

　　架構(gòu)中后臺的第二個階段就是：降低框架接入門檻，做最佳實踐：

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

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

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

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

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

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

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

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

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

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

　　在代碼生成頁面，架構(gòu)中后臺也選擇了 Procode 和 低代碼，因為在不同業(yè)務(wù)復雜度下，兩種方式的復雜度也有不同：

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

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

　　3. 架構(gòu)中臺未來思考

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

　　GPT探索

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

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

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

　　深耕場景搭建

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

　　新工具整合

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

　　關(guān)于掘力計劃

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