你真的懂Monorepo？五分鐘帶你認識前端大型架構
更新於 發佈於 閱讀時間約 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與其他不同的架構差異。
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也不一定是最佳解法，但是未來這樣的概念也會持續進步，並且幫助我們處理更龐大且複雜的問題
引用
為什麼會看到廣告
18會員
13內容數
希望能透過「React框架白話文運動」系列文章，利用口語化語表以及簡單的程式碼範例，能讓讀者更明白React的各種應用。
系列文章會講述以下：
1. 了解 ES6 JavaScript 語法
2. 了解 React 的運作原理
3. 了解 React 的狀態管理
4. 使用 React Hook管理狀態並且存取資料
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
「所以，你想要用A框架，但又覺得B框架也不錯？」David挑眉問道，一臉的疑惑和一絲不易察覺的笑意。
....
David神秘地笑了笑，「技術選擇可不是簡單的喜好問題，它牽扯到技術轉移的成本、技術負債的累積，還有整個團隊的長期發展。先來聽聽我的想法吧。」
先從react開始：
其實市面上有許多前端框架像是react,angular,vue...
至於為什麼我會選擇react…
※ 單例模式介紹
※ 定義：單例模式是一種設計模式，確保一個class（類）只有一個實例，並提供一個存取它的全域存取點。無論如何取值，皆只對這個實例取值。
※ 目的：保證一個類別只會產生一個物件，而且提供存取該物件的統一方法。
※ 講解：單例模式確保一個類無論怎麼 new 或 get，都只能拿
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
※ OPP第三大核心-多型
※ 多型的基本定義：
多型是利用繼承的特性，讓不同的子類別可以實現相同的介面，但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性，避免了複雜的條件判斷式，同時促進了代碼的重用。
class Animal {
makeSound() {
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
※ 什麼是MongoDB？
MongoDB是一個開源、跨平台的非關聯式資料庫，屬於一種文件導向（Document-oriented database）的資料庫管理系統，也就是 NoSQL 數據庫管理系統（DBMS）。
※ 什麼是非關聯式資料庫（NoSQL）？
非關聯式資料庫（NoSQL）的意思
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
「所以，你想要用A框架，但又覺得B框架也不錯？」David挑眉問道，一臉的疑惑和一絲不易察覺的笑意。
....
David神秘地笑了笑，「技術選擇可不是簡單的喜好問題，它牽扯到技術轉移的成本、技術負債的累積，還有整個團隊的長期發展。先來聽聽我的想法吧。」
先從react開始：
其實市面上有許多前端框架像是react,angular,vue...
至於為什麼我會選擇react…
※ 單例模式介紹
※ 定義：單例模式是一種設計模式，確保一個class（類）只有一個實例，並提供一個存取它的全域存取點。無論如何取值，皆只對這個實例取值。
※ 目的：保證一個類別只會產生一個物件，而且提供存取該物件的統一方法。
※ 講解：單例模式確保一個類無論怎麼 new 或 get，都只能拿
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
※ OPP第三大核心-多型
※ 多型的基本定義：
多型是利用繼承的特性，讓不同的子類別可以實現相同的介面，但在呼叫這些介面的方法時會表現出不同的行為。這使得程式設計更具彈性和擴展性，避免了複雜的條件判斷式，同時促進了代碼的重用。
class Animal {
makeSound() {
樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
※ 什麼是MongoDB？
MongoDB是一個開源、跨平台的非關聯式資料庫，屬於一種文件導向（Document-oriented database）的資料庫管理系統，也就是 NoSQL 數據庫管理系統（DBMS）。
※ 什麼是非關聯式資料庫（NoSQL）？
非關聯式資料庫（NoSQL）的意思
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。