微服務架構通常從伺服器端處理數據和邏輯開始，但在許多情況下，UI 仍然採用單體架構。 不過，稱為 微前端的更進階方法是根據微服務來設計應用程式 UI。 這表示具有微服務所產生的複合UI，而不是在伺服器上擁有微服務，而只是取用微服務的整合型用戶端應用程式。 透過這種方法，您建置的微服務可以透過邏輯和視覺表示來完成。
圖 4-20 顯示從整合型用戶端應用程式取用微服務的更簡單方法。 當然，在產生 HTML 和 JavaScript 之間，您可能會有 ASP.NET MVC 服務。 此圖是簡化，強調您有單一（整合型）用戶端 UI 取用微服務，其只著重於邏輯和數據，而不是 UI 圖形（HTML 和 JavaScript）。
圖 4-20： 統一式的 UI 應用程式，取用後端微服務
相反地，複合 UI 是由微服務本身所精確產生和撰寫。 某些微服務會驅動UI特定區域的視覺形狀。 主要差異在於您有以範本為基礎的用戶端 UI 元件（例如 TypeScript 類別），而這些範本的數據成形-UI ViewModel 則來自每個微服務。
在用戶端應用程式啟動時，每個用戶端UI元件（例如TypeScript類別）都會向可針對指定案例提供 ViewModel 的基礎結構微服務註冊自己。 如果微服務變更圖形，UI 也會變更。
圖 4-21 顯示此複合 UI 方法的版本。 這種方法已簡化，因為您可能有其他微服務會匯總以不同技術為基礎的細微元件。 這取決於您要建置傳統的 Web 方法（ASP.NET MVC）還是 SPA（單頁應用程式）。
圖 4-21： 後端微服務所塑造的複合UI應用程式範例
每個UI組合微服務都會類似於小型 API 閘道。 但在此情況下，每個人都負責一個小型UI區域。
由微服務驅動的複合UI方法可能會更具挑戰性或更少，視您使用的UI技術而定。 例如，您不會使用相同的技術來建置用於建置 SPA 或原生行動應用程式的傳統 Web 應用程式（這種方法可能更具挑戰性）。
eShopOnContainers 範例應用程式會基於多種原因使用整合型 UI 方法。 首先，這是微服務和容器的簡介。 複合UI更進階，但設計及開發UI時也需要進一步的複雜度。 其次，eShopOnContainers 也提供了一款基於 Xamarin 的原生行動應用程式（自 2024 年 5 月起不再支援），這將使客戶端的 C# 部分變得更加複雜。
不過，建議您使用下列參考，深入瞭解以微服務為基礎的複合UI。
其他資源
微前端 （馬丁·福勒的博客）https://martinfowler.com/articles/micro-frontends.html
微前端（邁克爾·吉爾斯網站）https://micro-frontends.org/
使用 ASP.NET 複合 UI （特定研討會）https://github.com/Particular/Workshop/tree/master/demos/asp-net-core
魯本·奧斯丁加 微服務架構中的整合型前端 https://xebia.com/blog/the-monolithic-frontend-in-the-microservices-architecture/
Mauro Servienti. 更好的UI組合秘密 https://particular.net/blog/secret-of-better-ui-composition
維克托·法契奇 將 Front-End Web 元件納入微服務 https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/
在微服務架構中管理前端https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html
