ExplainThis 全端開發雙週報 #34
微前端架構指南
前陣子 AWS 的前端架構團隊，釋出了《AWS Prescriptive Guidance: Understanding and implementing microfrontends on AWS》指南 (連結)，談了一些微前端的架構與實務技術考量。在本期的全端雙週報，將為大家摘要其中設計理念區塊的重點。
在進到本期主題前，想與讀者們分享，最近 ExplainThis 籌劃的 E+ 成長計畫，在下週將舉辦《軟體工程師：海外求職與英文面試實戰》的直播工作坊，對這個主題感興趣的讀者，千萬不要錯過了 (連結)。
[前端] 微前端架構指南
微前端是一種目前業界相當流行的前端架構，這個架構模式的重點是「微」，而這個「微」是借鏡於微服務 (micro-service) 的架構模式。就像是微服務會把原本單體 (monolith) 拆成多個微小的服務，微前端也是採用類似的形式。
微前端架構把前端拆解成多個不同的應用程式，每個前端應用程式都可以獨立開發、獨立部署。當把前端拆成多個不同應用程式後，商業邏輯也能夠被封裝，進而減少彼此的相互依賴。
當採用微前端的架構，團隊能獲得以下的好處
開發者的自主性提升：在微前端架構下，因為商業邏輯被封裝在子應用中，只要是不涉及主應用的部分，子應用可以自己決定實作細節，想怎麼開發就怎麼開發 (例如這個子應用選 React，另一個覺得更適合用 Vue，兩邊可以獨立選擇)
部署能夠獨立進行：當某個子應用要更新時，版本控制、建構、部屬都能獨立，交付功能的迭代速度因而獲得提升
故障隔離：當某個子應用出問題時，可以確保問題的影響範圍，會限縮在該子應用中，只要不是涉及主應用的錯誤，都不會影響到其他的子應用
啟發微服務的設計理念
前面提到，微前端的「微」是借鏡於微服務 (micro-service) 的架構模式。事實上，微前端不只借鏡於微服務架構。從技術設計的角度來看，微前端還受其他的設計理念啟發。
領域驅動設計 (domain-driven design)
第一個有借助的設計理念是領域驅動設計 (domain-driven design)，俗稱 DDD。
DDD 是由 Eric Evans 提出的一種設計理念。在該設計理念下，軟體開發應該是由商業驅動 (by business concern)，而不是由技術驅動 (not by technical concern)。 在商業驅動下，應用的領域劃分，會是以商業的需求來劃分。
具體來說，而在微前端的架構下，不同的子應用，會是用領域 (domain) 的角度來拆分。舉例來說，在電商的應用中，商品、訂單、支付、物流等不同的領域，會被拆成不同的子應用來維護。
對比來看，在單體前端 (monoliths) 的架構下，由於不同領域的程式碼，都會在同一個程式碼庫中，如果沒有特別細心地維護，很容易把不同程式碼寫得彼此耦合，導致可維護性大幅降低 (備註：雖然理論上可以避免，但在實務中，這是很常見到的問題)。
不過你可能會問，如果想把一個單體前端，拆成微前端，該如何拆呢? 在 AWS 團隊分享的指南中提到，可以從依賴的角度看，在拆分時，要讓分出來的子應用之間，彼此做到依賴最小化 (minimal dependencies)，所以如果在拆的時候，發現兩個子應用還彼此有依賴，那可能拆法就需要調整。
上面提到的依賴，是指彼此之間的依賴。但很可能這些不同的子應用，都需要共同用某個元件，這時從架構的角度，可以另外切分出工具 (widget) 來做到共用。
模組化 (modularization)
除了借助於 DDD，微前端還受模組化 (modularization) 的設計所啟發。模組聯邦 (Module Federation) 是現代微前端的關鍵技術之一，在微前端的架構下，我們可以把主應用當成本地模組，來消費不同的遠端模組，而這些遠端模組正是指不同的子應用。
模組化的概念，跟 DDD 的理念不謀而合。在 DDD 的框架下，系統中的每個子應用都是不同的模組，都專注於解決特定的商業領域 (意即某個子領域) 的問題，並在清楚界定好的範圍中獨立運作，不依賴於其他領域的模組。這種切分方法，讓整體架構更清楚，且更能對應到商業邏輯。
在這個概念下，微前端架構也更偏好盡可能做到不共享 (share nothing, where possible)。不同的子應用是獨立建構、獨立部署，換句話說可能兩個子應用有重複安裝某個兩邊都有用的套件，這雖然是種冗餘 (因為在單體架構下，只需用安裝一次，不用兩邊都安裝)，但這是微前端架構做的取捨。換句話說，雖然這樣有冗餘，但因為能讓不同模組獨立性提高、相互依賴減少，冗餘成為取捨下選擇接受的成本。
閱讀更多
如果你對為前端的架構、技術細節，以及更完整的 AWS 微前端指南摘要感興趣，我們在 E+ 當中有更完整的版本。
E+ 的詳細介紹可以在這看到 https://explainthis.io/zh-hant/e-plus
[本期推薦]
前陣子原本宣布將棄用第三方 cookies 的 Google，說不打算棄用了；這引起社群的軒然大波，而 W3C 也發表立場表示堅定反對繼續用這個方向，因為第三方 cookies 帶來的隱私問題，長遠來看避害太大 (連結)
最近 ExplainThis 彙整了推薦給軟體工程師的英文 Podcast，讓想要提升技術能力，又想練英文的讀者們，能夠透過零碎時間自我提升 (連結)
前陣子讀到《The Making of a TypeScript Feature: Inferring Type Predicates》一文，如果對於「程式語言如何決策要不要加入某個功能」的過程感興趣，很推薦讀這篇 (連結)
近期有幾個不錯的拖曳相關套件，包含 Atlassian 的 Pragmatic drag and drop (連結) 以及 Swappy (連結)，推薦給想實作基於拖曳功能的讀者
不管是用 JavaScript 寫前端或後端，效能優化都是相當重要的《Optimizing Javascript for fun and for profit》一文寫得非常有洞見 (連結)
HTML 串流已經推行許多年，不過近年來討論度越來越高《Streaming Over the Wire 🥳: A Deep Dive》這篇文章深入地探討這個概念 (連結)
Uber 首席招募員 Samantha Shulman 先前分享了談如何回答「為什麼想離開現在的工作」這個常見的面試題，即使同樣的內容，換個角度描述就會有很不同的笑過 (連結)