建站
咨詢
售后
建站咨詢
新聞中心
什么是微前端
根據(jù)Micro-Frontend 官網(wǎng)的定義，微前端是將網(wǎng)站或者 web 應(yīng)用程序視為由獨立團(tuán)隊擁有的功能組合。這么說你可能會感到難以理解，通俗地講，微前端就是各個倉庫組件獨立，彼此可以獨立開發(fā)和部署，它們彼此之間互不影響，通過通信進(jìn)行溝通，它們整體對外提供一個完整的服務(wù)。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鄂溫克網(wǎng)站建設(shè)、鄂溫克做網(wǎng)站、鄂溫克網(wǎng)站設(shè)計、鄂溫克網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鄂溫克企業(yè)網(wǎng)站模板建站服務(wù)，十多年鄂溫克做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
提到微前端，就不得不提微服務(wù)，可以說很多前端的想法或者邏輯概念，都是從后端演變出來的，曾經(jīng)有人開玩笑地說，正是從那些原來做后端的人開始轉(zhuǎn)向前端之后，前端就開始變得越來越復(fù)雜了。
微服務(wù)是一種開發(fā)軟件的架構(gòu)和組織方法，其中軟件由通過明確定義的 API 進(jìn)行通信的小型獨立服務(wù)組成。這些服務(wù)由各個小型獨立團(tuán)隊負(fù)責(zé)。
微服務(wù)架構(gòu)使應(yīng)用程序更易于擴(kuò)展和更快地開發(fā)，從而加速創(chuàng)新并縮短新功能的上市時間。
為什么要微前端
之前我們的web應(yīng)用都屬于胖服務(wù)器，也就說所有處理都有服務(wù)器進(jìn)行，而前端只是負(fù)責(zé)簡單的展示，而現(xiàn)在的情況是，服務(wù)器處理的內(nèi)容很少，很多時候都需要前端進(jìn)行各種計算和處理。在這種情況下，就需要我們采用微前端來加快前端產(chǎn)品的開發(fā)和迭代。
微前端優(yōu)點
- 更容易和更快的功能開發(fā)。
- 獨立部署；
- 跨職能團(tuán)隊；
- 平行發(fā)展；
- 松耦合；
- 明確的合同；
- 更容易添加、更改或刪除任何代碼；
- 更容易測試。
構(gòu)建微前端應(yīng)用程序有不同的方法，但主要我們可以將它們分為四個重要方面：
- 路由微前端
- 組成微前端
- 微前端通信
- 定義微前端
微前端的組合
微前端由客戶端，服務(wù)器端，邊緣測組合而成。
- 客戶端：所有微前端都是在構(gòu)建時組合和捆綁的。
- 服務(wù)器端：最初加載一個容器，微前端在 URL 更改時延遲加載：內(nèi)容由服務(wù)器返回。
- 邊緣側(cè)：視圖在 CDN 級別組裝。許多 CDN 提供商為我們提供了使用基于 XML 的標(biāo)記語言的選項，稱為 Edge Side Includes (ESI)。
微前端的路由
路由主要取決于組合的類型。在服務(wù)器端組合中，路由是通過服務(wù)器端完成的，因為整個應(yīng)用程序邏輯都在服務(wù)器上。在邊緣組合中，CDN 是突出的參與者，因為它通過基于請求的頁面 URL 在邊緣級別通過嵌入將它們組裝在一起來為微前端提供服務(wù)。
在客戶端組合中，微前端是根據(jù)需求和應(yīng)用程序的當(dāng)前狀態(tài)加載的。例如，如果用戶即將認(rèn)證，則會加載認(rèn)證微前端或加載登陸頁面。
除了上述路由技術(shù)，我們還可以根據(jù)需要使用智能路由來配置應(yīng)用程序。例如，如果我們使用將微前端加載為單頁應(yīng)用程序的應(yīng)用程序外殼。然后，app shell 是所有路由邏輯的中心命令。app shell 將管理所有路由邏輯，然后根據(jù)其配置決定加載哪個微前端。當(dāng)我們有復(fù)雜的路由時，這是最好的方法之一，因為只有一個故障點或配置。
微前端之間的通信
與路由一樣，微前端之間的通信也取決于組合的類型。當(dāng)我們在相同或不同頁面上使用多個微前端時，我們總是希望可以和其他微前端用戶交互。
不同微前端之間的溝通可能不是那么微不足道，尤其是當(dāng)有不同的團(tuán)隊構(gòu)建它們時。為了維持獨立部署的原則，我們需要確保每個微前端都不知道其他微前端，即使它們是水平分割的并且是同一頁面的一部分。
在這種情況下，我們有幾個選項可以更好地溝通。
我們可以在前端開發(fā)中注入事件總線機(jī)制，允許解耦的組件通過在同一視圖中發(fā)出事件或總線和不同的微前端來相互通信。如果組件感興趣，它們可以監(jiān)聽這些事件并做出反應(yīng)。
我們可以通過添加一個容器來實例化事件總線并將其注入頁面的所有微前端來創(chuàng)建它。
或者，我們也可以使用自定義事件。這些是具有自定義負(fù)載的自定義事件。有效負(fù)載包括標(biāo)識事件的字符串和為事件自定義的可選對象。這些自定義事件通過一個常見的類似對象的窗口進(jìn)行調(diào)度，以便所有微前端都可以使用它。
定義微前端
在微前端我們可以使用不同的技術(shù)棧，我們可以將vue和react進(jìn)行結(jié)合使用。其中可以單獨為vue構(gòu)建自己的single-spa，為react構(gòu)建自己的single-spa，最后兩者通過webpack共同引入使用，并且兩者也可以獨立訪問。具體的代碼在github上有很多實例。
結(jié)論
無論是微前端還是微服務(wù)，本質(zhì)上都是為了讓項目開發(fā)迭代變得更快，如果因為采用了某個技術(shù)而導(dǎo)致項目本身出現(xiàn)了各種問題，我們就是在本末倒置。
本文名稱：聊聊微前端那些事兒
轉(zhuǎn)載來源：http://m.5511xx.com/article/cdpgeed.html
