你真的懂Monorepo?五分鐘帶你認識前端大型架構

2022/08/06閱讀時間約 4 分鐘
你真的懂Monorepo?五分鐘帶你認識前端大型架構
未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文英文日文簡體中文

大型架構

什麼是大型架構?

大型(large scale)是一個有點模糊的詞彙,什麼是大型?
100人以上的前端大型開發專案?還是超過一千個頁面的大型專案?或是跨國部門的前端大型開發專案呢?
說實話,大型開發專案每個人心中的答案不同,但是不可否認的,當程式碼數量一累積,不管是哪一類型的大型專案都是相當難以管理的。

從幾個角度來舉例:

前端技術:有的前端頁面系統使用Vue.js、Jest,有的前端使用React.js、Cypress,維護起來相當費時。
前端架構:幾百幾千個的功能前端元件散落在各個不同的檔案,彼此之間的耦合性以及相依性複雜。
團隊:團隊彼此間都有自己的程式碼風格,以及習慣使用的技術,在不同團隊合作上可能專注在自己團隊的規則,忽略溝通。
為了解決上述的問題,Monorepo前端大型架構就這樣誕生了。

Monorepo

Monorepo 簡介

前端技術近幾年快速演變,ES6,、SCSS 前處理、npm,、前端框架、CI/CD、Docker… 等等。如果要完成一個小型的應用程式,除了上述列舉的技術以外,可能還需要維護比較大型且複雜的平台。
Monorepository 是一個架構的概念,從字面上的意思來看Mono(one)repo(repository),可以得知這樣的(Monorepo)架構是將大量的程式碼全部放在同一個 Code base 下做管理,不同於舊有的分離式概念,Google 是優先採用Monorepo 的公司之一。
從以下 Monorepo架構圖可以大致上知道Monorepo與其他不同的架構差異。
https://www.toptal.com/front-end/guide-to-monorepos

Monorepo優缺點

Monorepo 前端大型架構有什麼優點呢?
1. 程式可重用性高,可避免重工
2. 程式碼更透明,更好進行重構
3. 所有套件使用相同版本,包含測試以及設定檔
4. 所有程式碼風格一致
5. 不同團隊間溝通更頻繁
Monorepo 前端大型架構有什麼缺點呢?
1. 沒辦法針對部分程式碼,設定權限
2. 當進行大型專案時,Git 效能沒有這麼的好
3. 建置應用程式時間較長

Monorepo 文化

其實Monorepo這個概念已有一段時間了,在三十年前就有FreeBSD一詞並且使用CVS以及跟Monorepo相關概念的知識以及技術。
也有相當多的開源專案也是因Monorepo概念而成功的,例如:
Laravel:其中一個PHP的網頁框架
Babel:相當知名的JavaScript的網頁編譯器。Monorepo也間接的幫助Babel完成多種專案的打包。
React、Angular、Vue:知名的前端框架也因Monorepo的出現,讓各種前端框架系統可以存在於同一個大型專案裡面。

Monorepo 適合投資嗎?

以一言以蔽之來說,Monorep是一個「前人種樹,後人乘涼」的概念。
以前端舉例:當要在多個不同系統以及產品中,共用相同的元件,Monorepo是一個相當好的選擇。雖然一開始在設定以及成功運行上需要花費一些時間,但是未來不同團隊間如果有遇到類似的元件,是可以直接去做使用的。
或許有些人認為Monorepo會因為各種因素而選擇不使用,諸如:程式碼權限問題、總檔案量越來越大… 但讀者還是可以根據不同情況去做抉擇。

結語

Monorepo 只是一個工具。雖然面對各式各樣的問題都有不同的解決方法,Monorepo也不一定是最佳解法,但是未來這樣的概念也會持續進步,並且幫助我們處理更龐大且複雜的問題

引用

為什麼會看到廣告
希望能透過「React框架白話文運動」系列文章,利用口語化語表以及簡單的程式碼範例,能讓讀者更明白React的各種應用。 系列文章會講述以下: 1. 了解 ES6 JavaScript 語法 2. 了解 React 的運作原理 3. 了解 React 的狀態管理 4. 使用 React Hook管理狀態並且存取資料
留言0
查看全部
發表第一個留言支持創作者!
從 Google News 追蹤更多 vocus 的最新精選內容