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

更新 發佈閱讀 5 分鐘
vocus|新世代的創作平台

目前文章已移至 你真的懂Monorepo?五分鐘帶你認識前端大型架構

未來文章一併更新於此網站 Hogan.B Lab

並且包含多語系 繁體中文英文日文簡體中文

觀看分類:React 白話文運動其他系列


大型架構

什麼是大型架構?

大型(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與其他不同的架構差異。

vocus|新世代的創作平台

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也不一定是最佳解法,但是未來這樣的概念也會持續進步,並且幫助我們處理更龐大且複雜的問題

引用

Guide to Monorepos for Front-end Code

留言
avatar-img
Hogan|軟體工程師沙龍
18會員
13內容數
希望能透過「React框架白話文運動」系列文章,利用口語化語表以及簡單的程式碼範例,能讓讀者更明白React的各種應用。 系列文章會講述以下: 1. 了解 ES6 JavaScript 語法 2. 了解 React 的運作原理 3. 了解 React 的狀態管理 4. 使用 React Hook管理狀態並且存取資料
2023/12/30
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
2023/12/30
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
2023/12/14
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
2023/12/14
建立React專案-React白話文運動:前一篇文章介紹了三個名詞,分別是:Babel 是什麼?Webpack 是什麼?Npm 是什麼?這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。這邊也包含:官方 CRA 建置環境以及自
Thumbnail
2023/12/11
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
2023/12/11
前言這一篇會針對三個名詞做一些解釋,這些名詞是建立 React 專案,需要會的工具,包含了:Babel 是什麼?Webpack 是什麼?Npm 是什麼?當然主要介紹的是使用這些工具的概念,但是還是有其他工具可以做選擇,例如:Npm 之於 Yarn。這一篇會針對三個名詞做一些解釋,這些名詞是建立 R
Thumbnail
看更多
你可能也想看
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
在我們使用的網站中,一個頁面會是由好幾個部份,例如按鈕、菜單、表格、卡片,這些部份可以在不同的畫面重複使用的就稱為元件(Component),今天要跟大家分享的「6個前端工程師私藏的元件庫」!
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta 開發。React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過,React 為 Angular 和 Vue 等框架提供了另一種解決方式,使我們可以與它一起完成覆雜的前端頁面功能。
Thumbnail
MongoDB 簡介 MongoDB是一種開源的NoSQL文件資料庫(Document Database),MongoDB中可以有多個Database,每個Database中可以有多個Collection,每個Collection中可以有多個Document。 Windows 安裝 MongoDB
Thumbnail
MongoDB 簡介 MongoDB是一種開源的NoSQL文件資料庫(Document Database),MongoDB中可以有多個Database,每個Database中可以有多個Collection,每個Collection中可以有多個Document。 Windows 安裝 MongoDB
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
不論我們使用Nodejs的Mongo Client還是Go語言甚至其他語言的套件, 應該都會看到連線選項中有poolSize這類的配置, 以下會介紹什麼是連線池、優點、應注意的事項。 首先來談談連接池之前的單一連接機制, 在配置正確的狀況下可能不會遇到任何問題, 但假設我們的應用同時間有100個用戶
Thumbnail
不論我們使用Nodejs的Mongo Client還是Go語言甚至其他語言的套件, 應該都會看到連線選項中有poolSize這類的配置, 以下會介紹什麼是連線池、優點、應注意的事項。 首先來談談連接池之前的單一連接機制, 在配置正確的狀況下可能不會遇到任何問題, 但假設我們的應用同時間有100個用戶
Thumbnail
上一篇我們有介紹「【Postman工具箱】 Mock Server簡介」,相信對於Mock Server的用途應該都具備一些基本概念了,那這次就來介紹一套免費開源的工具庫「Mockoon」並附帶安裝架設的方法,讓我們簡單輕鬆的上架我們的模擬API Server。 系統開發的過程中,假設前/後端分離的
Thumbnail
上一篇我們有介紹「【Postman工具箱】 Mock Server簡介」,相信對於Mock Server的用途應該都具備一些基本概念了,那這次就來介紹一套免費開源的工具庫「Mockoon」並附帶安裝架設的方法,讓我們簡單輕鬆的上架我們的模擬API Server。 系統開發的過程中,假設前/後端分離的
Thumbnail
為何大公司都使用Nx ? Monorepo的工具五分鐘快速建置 簡介:Nx 一個快速、有效、有相當好延展性的Monorepo工具 理念:Nx 與知名程式編輯器Visual Studio Code有著相同的設計哲學,以Nx核心來說,擁有著簡潔、不模糊、明瞭的特性。
Thumbnail
為何大公司都使用Nx ? Monorepo的工具五分鐘快速建置 簡介:Nx 一個快速、有效、有相當好延展性的Monorepo工具 理念:Nx 與知名程式編輯器Visual Studio Code有著相同的設計哲學,以Nx核心來說,擁有著簡潔、不模糊、明瞭的特性。
Thumbnail
長遠的角度來看,內部函式庫還是值得投資的公司資產,只是它需要時間、人力與管理才能做得好。若有不錯的內部函式庫也可以回饋給open-source社群,畢竟,現在開發軟體已經不太可能沒有用到任何open-source的東西。雖然說是將公司資產以 open-source 釋出,但換取的利益卻不見得是零。
Thumbnail
長遠的角度來看,內部函式庫還是值得投資的公司資產,只是它需要時間、人力與管理才能做得好。若有不錯的內部函式庫也可以回饋給open-source社群,畢竟,現在開發軟體已經不太可能沒有用到任何open-source的東西。雖然說是將公司資產以 open-source 釋出,但換取的利益卻不見得是零。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
資料庫複製 不知道大家有沒有聽過負載均衡或者水平擴展呢?在網站佈署中我們會透過這些技術把網站架在多台 server 上,以避免萬一某台 server 掛掉,讓網頁服務仍能維持運作,或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術,建立多個相同的 MongoDB service 在不同的
Thumbnail
資料庫複製 不知道大家有沒有聽過負載均衡或者水平擴展呢?在網站佈署中我們會透過這些技術把網站架在多台 server 上,以避免萬一某台 server 掛掉,讓網頁服務仍能維持運作,或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術,建立多個相同的 MongoDB service 在不同的
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News