微型前端2020年狀態 -bitsrc
前端Web開發中最有爭議的主題之一是微前端。他們值得嗎?您是否應該真正拆分應用程式?你真的需要使用?
儘管有許多神話,但我們不能否認它們每天都越來越流行。讓我們看看誰在使用它們,為什麼要完全使用它們,以及存在哪些解決方案可以輕鬆上手。
什麼是微前端
微前端是將後端微服務概念帶到前端。
顯然,需要更復雜的方法來將一個獨立開發的較小的UI集合到一個一致的前端中。這可以看作是分散式Web應用程式發展的下一步。
微前端、元件和模組的關係:
- 元件是基礎UI庫的構建塊
- 模組是相應執行時的構建塊
- 包是依賴解析器的構建塊
- 微前端是提出的應用程式的構建塊
因此,微前端代表體內的器官,而包則分解後的更小細胞,模組分解為分子,而元件則分解為原子。
為什麼使用微前端
使用微前端有多種原因。通常,主要原因是本質上是技術性的,但是,理想情況下,使用微前端背後存在真實的業務案例(或增強UX的案例)。
微前端解決方案的核心是尋求以下特性:
- 前端的各個部分可以獨立開發,測試和部署
- 可以單獨新增,刪除或替換前端的各個部分,而無需重建
- 可以使用不同的技術來建立前端的不同部分
因此,微前端都與去耦有關。當應用程式達到一定大小時,它們開始變得有意義。好處之一是,可能會有更多潛在的團隊分裂,包括。建立較小的全棧團隊。
微前端好處:
- 多個團隊為前端做貢獻
- 個別部件應在特定使用者或組上啟用,停用或推出
- 外部開發人員應該能夠擴充套件UI
- 使用者介面的功能集每天或每週都在增長,而不會影響系統的其餘部分
- 儘管應用程式不斷增長,但開發速度應保持恆定
- 不同的團隊應該能夠使用自己的工具
誰在使用微前端
- DAZN
- Elsevier
- entando
- Fiverr
- Hello Fresh
- IKEA
- Bit.dev
- Microsoft
- Open Table
- OpenMRS
- Otto
- SAP
- Sixt
- Skyscanner
- smapiot
- Spotify
- Starbucks
- Thalia
- Zalando
- ZEISS
這個清單每天都在增長。從ThoughtWorks或HLC等諮詢公司到SalesPad或Apptio等SaaS提供程式。
一個例子就是德國隱藏冠軍霍夫曼集團。
霍夫曼集團的例子很好地說明了微前端不需要大型團隊,也不需要內部資源。他們之所以選擇微前端,是因為它們與多個服務提供商進行了互動。
如何建立微前端
不幸的是,這是一個有趣的問題,有一個模糊的答案:像微服務一樣,沒有一種方法可以適用於所有人或被確立為行業標準。
與微服務不同,微前端不僅在實現細節上有所不同,而且在非常基本的方面也有所不同。因此,我們需要區分主要使用領域。儘管某些伺服器端框架也允許客戶端組成,但在另一個方向上也是如此。
客戶端微前端的框架存在最大的變化。其中一些還允許伺服器端渲染。
以下框架實現了這種(或類似的)模式:
儘管微前端的模式越來越流行,但社群中的很大一部分仍存在疑問。
現有解決方案的可用數量及其在全球許多專案中的用途都發出了強烈的訊號:Microfrontends隨時可以使用!我建議在實際開始大型/生產級專案之前檢查各種模式和解決方案。
相關文章
- 前端狀態管理與有限狀態機前端
- 淺析前端狀態管理前端
- 前端狀態管理框架之Redux前端框架Redux
- 淺談前端的狀態管理,以及anguar的狀態管理庫前端
- 前端開發:HTTP狀態碼詳解前端HTTP
- 前端提交資料後http狀態碼400前端HTTP
- 前端 | Vue 路由返回恢復頁面狀態前端Vue路由
- [前端 · 面試 ]HTTP 總結(四)—— HTTP 狀態碼前端面試HTTP
- 前端狀態管理簡易實現(以vuex為例)前端Vue
- React新Context API在前端狀態管理的實踐ReactContextAPI前端
- 記前端狀態管理庫Akita中的一個坑前端
- 達到學習前端的一種心流狀態前端
- 關於前端元件化、狀態管理規範化的思考前端元件化
- 04 前端HTTP協議(圖解HTTP) 之 HTTP狀態碼前端HTTP協議圖解
- 通用的後端返回給前端的狀態資訊Result後端前端
- 鴻蒙前端開發4-ArkTS語言狀態管理鴻蒙前端
- React 狀態管理:狀態與生命週期React
- [prerender-spa-plugin]–微型Vue專案的靜態化利器PluginVue
- [prerender-spa-plugin]--微型Vue專案的靜態化利器PluginVue
- 狀態機
- 狀態列
- 狀態碼
- 狀態管理
- 對於“前端狀態”相關問題,如何思考比較全面前端
- 微型手術機器人同樣需要微型元件機器人元件
- Vuex 單狀態庫 與 多模組狀態庫Vue
- React-Keeper 前端路由快取 儲存狀態(大部分轉)React前端路由快取
- 論前端框架元件狀態抽象方案, 基於 ClojureScript 的 Respo 為例前端框架元件抽象
- 有限狀態機
- Vuex狀態管理Vue
- 調整狀態
- http狀態碼HTTP
- UML狀態圖
- Flink狀態妙用
- MongoDB狀態值MongoDB
- Hibernate物件狀態物件
- http 狀態碼HTTP
- USB LPM狀態