iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

前端也可以搞微服務?!前端最複雜的一種架構 系列

或許你聽過或是沒聽過以下詞彙,「微前端」、「微應用」、「前端微服務」,這些都是相同的東西。

微前端可以讓單一應用程式有自己的開發、部署、執行的生命週期,透過某種機制來達到相互溝通的能力。微前端是一個很好的切分單位,可以更容易讓更大的團隊溝組織通協作開發。

但微前端並不容易,我會把這來龍去脈和心酸血淚逐條逐項分享,讓想嘗試這架構的你可以少走點彎路,其中也包含很多就算不是實作微前端也會遇到的前端基礎建設問題,讓我們各個擊破吧!

鐵人鍊成 | 共 30 篇文章 | 33 人訂閱 訂閱系列文 RSS系列文
DAY 11

(十一) 微前端在不同 Repository 架構中的 CI/CD 策略

微前端在不同 Repository 架構中的 CI/CD 策略 專案架構 這個議題又可以分以下幾種來說明 Monolith Repo Mono Repo Mu...

DAY 12

(十二) 使用 WebComponent 建立微前端

使用 WebComponent 建立微前端 在使用微前端時,Web Component 常常被提及,他們雖然不是綁定的,但要徹底解耦脫鉤,它是很好用的手段。 建...

DAY 13

(十三) WebComponent 的微前端溝通

WebComponent 的微前端溝通 WebComponent 不只可以脫離框架建立組件,還可以做多種形式的溝通。 Attribute WebComponen...

DAY 14

(十四) Module Federation

Module Federation 前面講那麼多關於微前端的相關技術,但說到微前端的打包前溝通就不得不談談 ModuleFederation,這篇開始就要隆重介...

DAY 15

(十五) Reference Shared

Reference Shared 前面談了那麼多的觀念與理論,還是要來講點實務應用上的東西。 記憶體共享問題在哪? 我們過去在 Monolith 都覺得共用是程...

DAY 16

(十六) 伺服器渲染

伺服器渲染 伺服器渲染(Server Side Render,以下簡稱 SSR),真的是微前端中尷尬又難搞的存在。一般的情況,如果微前端只是單純提供純粹 HTM...

DAY 17

(十七) Monorepo

Monorepo 這是一種專案的架構方式,但依然要從這幾種來分門別類。 Monolith Repo Multi Repo Mono Repo Monolit...

DAY 18

(十八) 插件系統

插件系統 先來聊聊何謂「插件系統」,就是利用一個 context 物件攜帶相關方法資訊,進而去觸動主程式去執行某些行為。常見有插件系統的各種套件,諸如 webp...

DAY 19

(十九) 狀態管理器

狀態管理器 這其實完全可以講很長一篇,但我基本上長話短說(其實是不想寫那麼多,好累...) 這是一個現在前端常見的狀態管理器架構,一個狀態管理器最基本需要幾個...

DAY 20

(二十) 微前端的優化-模組切割

微前端的優化-模組切割 模組切割這件事幾乎是微前端的核心,所以怎麼切分模組就決定微前端能產生的價值。 為甚麼不要用元件切分? 前面提到,微前端就像是微服務,但又...