行云部署前端架構(gòu)解析-前言 | 京東云技術(shù)團(tuán)隊(duì)
一個(gè)簡(jiǎn)單的自我介紹
項(xiàng)目規(guī)模
截止目前上萬(wàn)次代碼提交，總代碼行數(shù)1 超過(guò)21萬(wàn)行，其中人工維護(hù)的代碼超過(guò) 13萬(wàn)行，近千個(gè)文件。
前端線上服務(wù)直接對(duì)接的后端服務(wù)，達(dá)十多個(gè)。
跟很多應(yīng)用一樣, 它有行云的入口, 也有獨(dú)立的服務(wù), 還有單獨(dú)的插件接口
它是行云的子應(yīng)用, 也是其它應(yīng)用的主應(yīng)用
技術(shù)棧
代碼本身是 monorepo 的結(jié)構(gòu)，通過(guò) nx + pnpm 進(jìn)行管理
-
nx 是一個(gè)優(yōu)秀的項(xiàng)目管理工具，可以自動(dòng)分析項(xiàng)目依賴、構(gòu)建緩存(package 級(jí)別)等;
-
pnpm 相比npm, 可以更省空間、更快安裝, 重要的是, 包版本管理更穩(wěn)定.
項(xiàng)目直接通過(guò) webpack 進(jìn)行構(gòu)建，而非 vue 官方的 cli-service；
后者雖提供了良好的封裝, 適于大多數(shù)項(xiàng)目, 但如果需要進(jìn)行精細(xì)化構(gòu)建過(guò)程管理，其學(xué)習(xí)成本與坑量也翻倍了。
項(xiàng)目框架采用 vue2 + JModule
JModule 可以幫助我將項(xiàng)目拆分為多個(gè)模塊, 這對(duì)于這個(gè)大型項(xiàng)目的管理帶來(lái)了諸多裨益, 其中細(xì)節(jié)在后續(xù)章節(jié)闡述.
似乎有很多項(xiàng)目因?yàn)镴Module執(zhí)行了兩次構(gòu)建，一份自己獨(dú)立部署使用，一份對(duì)接行云應(yīng)用，從而導(dǎo)致構(gòu)建時(shí)間直接翻倍，這應(yīng)該沒(méi)有必要. 相反用好了可以通過(guò)拆分模塊來(lái)加速構(gòu)建，而這也是本項(xiàng)目的處理方案。
monorepo 下的包構(gòu)成與依賴關(guān)系
主要包含3部分:
-
API SDK
@jindowin/api-jdos* -
公用組件庫(kù)
@jindowin/common -
業(yè)務(wù)模塊
@jindowin/jdos3*
其依賴關(guān)系可以通過(guò) nx 工具直觀的看到:
項(xiàng)目分兩層，底層為基礎(chǔ)包(1和2)，上層為業(yè)務(wù)模塊(3), 這其中還有些細(xì)節(jié):
-
單向引用: 只允許存在代碼上層對(duì)下層的依賴, 反之不行.
-
無(wú)橫向引用: 每層包之間不存在代碼上的橫向依賴關(guān)系, 互相隔離
-
@jindowin/jdos3 這個(gè)包是主入口，通過(guò) JModule 將其它模塊進(jìn)行組合
架構(gòu)設(shè)計(jì)的來(lái)由
回憶一個(gè)項(xiàng)目的成長(zhǎng):
框架設(shè)計(jì)者準(zhǔn)備了模板, 只需要一行 create 命令
她五臟俱全, 結(jié)構(gòu)統(tǒng)一
項(xiàng)目啟動(dòng)很快
很順利
不用擔(dān)心端口沖突, 它能自動(dòng)檢測(cè)并調(diào)整
不用時(shí)刻刷新頁(yè)面, 它內(nèi)置了熱加載
不用擔(dān)心代碼規(guī)范, 它提供了構(gòu)建時(shí)校驗(yàn)
后來(lái)
我們加入了 host, 單點(diǎn)登錄解決了
我們寫(xiě)好了 proxyTable, 數(shù)據(jù)就有了
到這里, 世界更加美好了
再后來(lái)
項(xiàng)目逐漸長(zhǎng)大, 而最初的美好
也開(kāi)始慢慢消散
直到有一天
電腦風(fēng)扇發(fā)出八級(jí)大風(fēng)的哀嚎
引以為傲的 proxyTable 開(kāi)始頻繁沖突
代碼校驗(yàn)失效了
產(chǎn)品問(wèn), 這倆站點(diǎn)的功能要合并
開(kāi)發(fā)問(wèn), 昨天還好好的, 今天就跨域了
測(cè)試問(wèn), 我要部署一套測(cè)試環(huán)境
設(shè)計(jì)問(wèn), 這個(gè)頁(yè)面的標(biāo)題咋比另一個(gè)頁(yè)面大呢
領(lǐng)導(dǎo)問(wèn), 服務(wù)掛了怎么辦
用戶問(wèn), 網(wǎng)頁(yè)真白, 不知道還要再白多久
...
我開(kāi)始懷念
我開(kāi)始行動(dòng)
我需要沉淀
架構(gòu)設(shè)計(jì)的細(xì)節(jié)
在不久前, 我在草圖上寫(xiě)下了一個(gè)粗糙的結(jié)構(gòu), 原計(jì)劃一篇寫(xiě)完
有性格測(cè)試說(shuō), 我是一個(gè)P人, 不愛(ài)做計(jì)劃
后來(lái), 計(jì)劃真的破產(chǎn)了, 一周過(guò)去了我只寫(xiě)完了《前言》
沒(méi)有拖延, 但真的低估了它的細(xì)節(jié)與難度
梳理了一下分支, 從TODO開(kāi)始, 分別來(lái)寫(xiě):
模塊設(shè)計(jì)
模塊化是一個(gè)常規(guī)的設(shè)計(jì)方案, 但在具體實(shí)現(xiàn)層面, 仍有一些細(xì)節(jié)可以探討, 比如:
-
設(shè)計(jì)時(shí)的基本原則
-
如何界定一個(gè)模塊?
-
預(yù)期能獲得哪些收益?
-
模塊間是否存在依賴、層級(jí)關(guān)系?
-
模塊的分類?
-
模塊間的通信方式?
詳情: 行云部署前端架構(gòu)解析-模塊設(shè)計(jì)
開(kāi)發(fā)體驗(yàn)
如何優(yōu)化構(gòu)建速度?
新成員介入開(kāi)發(fā)時(shí),如何做最少的配置來(lái)啟動(dòng)項(xiàng)目?
多人協(xié)作時(shí), 如何減少公共配置的沖突?
如何減輕電腦的負(fù)擔(dān), 讓編碼更加順暢?
微前端的項(xiàng)目, 如何順暢進(jìn)行開(kāi)發(fā)聯(lián)調(diào)?
詳情: 行云部署前端架構(gòu)-開(kāi)發(fā)體驗(yàn)
首屏加載
TODO
這是一個(gè)很常見(jiàn)的問(wèn)題, 不解釋
權(quán)限模型
TODO
這可能涉及角色的系統(tǒng)可能都逃不過(guò)的一個(gè)坎. 主要關(guān)注路由權(quán)限、菜單權(quán)限、具體功能的權(quán)限.
我們?nèi)绾喂芾磉@些權(quán)限?
如何應(yīng)對(duì)微前端模型?
多站點(diǎn)管理
TODO
-
多個(gè)站點(diǎn), 需要多套服務(wù)嗎
-
如何應(yīng)對(duì)站點(diǎn)合并
-
如何區(qū)分站點(diǎn)功能
-
涉及站點(diǎn)時(shí)編碼的基本原則
-
多個(gè)入口還是一個(gè)入口
多入口
TODO
這也是不少團(tuán)隊(duì)遇到的問(wèn)題, 對(duì)于多數(shù)應(yīng)用一個(gè) if 執(zhí)行不同的 bootstrap 代碼可能就夠了.
但有時(shí)候事情偏偏就很復(fù)雜...
我需要提供一些獨(dú)立的組件, 理想情況下, 一個(gè) exports 也就可以了
但當(dāng)情況不理想的時(shí)候...
你要用提供的組件及其所有依賴組件, 依賴了 router
還有它與多站點(diǎn)的化學(xué)反應(yīng), 事情開(kāi)始更加復(fù)雜
應(yīng)用雙生
TODO
這是一個(gè)奇怪的概念, 我造的.
它描述了這樣一個(gè)現(xiàn)象: 一個(gè)應(yīng)用, 兩種形態(tài). 或者該叫: 多態(tài)?
一般不會(huì)出現(xiàn)
一般出現(xiàn)也是過(guò)渡態(tài)
但真正的困難, 往往都是過(guò)渡態(tài)
行云部署與持續(xù)交付, 就是行云的兩個(gè)子應(yīng)用, 有不同的入口進(jìn)入.
問(wèn)題是: 同一套代碼, 如何正常工作在兩種模式下? 尤其是里面的路由
接口異常
TODO
-
從用戶遇到問(wèn)題, 反饋到研發(fā)看到異常, 日志已經(jīng)融入了大海
-
服務(wù)掛了, 異常提示在屏幕上爭(zhēng)相顯示, 那隊(duì)伍, 比瓦罐湯的隊(duì)伍還長(zhǎng)
配置管理
TODO
我們有一個(gè)功能的配置, 它有800多行
我們有一套服務(wù)的配置, 這個(gè)簡(jiǎn)單一點(diǎn), 加起來(lái)也就 300 行左右
如何開(kāi)發(fā)不亂、上線不慌?
服務(wù)維護(hù)
TODO
這是一個(gè)簡(jiǎn)單的問(wèn)題, 因?yàn)槲也粚I(yè)
我猜, 我可以在10行以內(nèi)講清楚.
但是, 現(xiàn)在不忙講...
以上內(nèi)容, 可能跟據(jù)后續(xù)寫(xiě)作情況增減
爭(zhēng)取早日清理掉里面的 TODO 標(biāo)簽
[1] 統(tǒng)計(jì)范圍為倉(cāng)庫(kù)內(nèi) jdos 項(xiàng)目相關(guān)的 js\ts\jsx\tsx\css\less 文件
作者：京東科技 林光輝
來(lái)源：京東云開(kāi)發(fā)者社區(qū) 轉(zhuǎn)載請(qǐng)注明來(lái)源
浙公網(wǎng)安備 33010602011771號(hào)