什么是微前端

根據(jù)Micro-Frontend 官網(wǎng)的定義，微前端是將網(wǎng)站或者 web 應(yīng)用程序視為由獨(dú)立團(tuán)隊(duì)擁有的功能組合。這么說(shuō)你可能會(huì)感到難以理解，通俗地講，微前端就是各個(gè)倉(cāng)庫(kù)組件獨(dú)立，彼此可以獨(dú)立開(kāi)發(fā)和部署，它們彼此之間互不影響，通過(guò)通信進(jìn)行溝通，它們整體對(duì)外提供一個(gè)完整的服務(wù)。

提到微前端，就不得不提微服務(wù)，可以說(shuō)很多前端的想法或者邏輯概念，都是從后端演變出來(lái)的，曾經(jīng)有人開(kāi)玩笑地說(shuō)，正是從那些原來(lái)做后端的人開(kāi)始轉(zhuǎn)向前端之后，前端就開(kāi)始變得越來(lái)越復(fù)雜了。

微服務(wù)是一種開(kāi)發(fā)軟件的架構(gòu)和組織方法，其中軟件由通過(guò)明確定義的 API 進(jìn)行通信的小型獨(dú)立服務(wù)組成。這些服務(wù)由各個(gè)小型獨(dú)立團(tuán)隊(duì)負(fù)責(zé)。

微服務(wù)架構(gòu)使應(yīng)用程序更易于擴(kuò)展和更快地開(kāi)發(fā)，從而加速創(chuàng)新并縮短新功能的上市時(shí)間。

為什么要微前端

之前我們的web應(yīng)用都屬于胖服務(wù)器，也就說(shuō)所有處理都有服務(wù)器進(jìn)行，而前端只是負(fù)責(zé)簡(jiǎn)單的展示，而現(xiàn)在的情況是，服務(wù)器處理的內(nèi)容很少，很多時(shí)候都需要前端進(jìn)行各種計(jì)算和處理。在這種情況下，就需要我們采用微前端來(lái)加快前端產(chǎn)品的開(kāi)發(fā)和迭代。

微前端優(yōu)點(diǎn)

• 更容易和更快的功能開(kāi)發(fā)。
• 獨(dú)立部署；
• 跨職能團(tuán)隊(duì)；
• 平行發(fā)展；
• 松耦合；
• 明確的合同；
• 更容易添加、更改或刪除任何代碼；
• 更容易測(cè)試。

構(gòu)建微前端應(yīng)用程序有不同的方法，但主要我們可以將它們分為四個(gè)重要方面：

• 路由微前端
• 組成微前端
• 微前端通信
• 定義微前端

微前端的組合

微前端由客戶端，服務(wù)器端，邊緣測(cè)組合而成。

• 客戶端：所有微前端都是在構(gòu)建時(shí)組合和捆綁的。

• 服務(wù)器端：最初加載一個(gè)容器，微前端在 URL 更改時(shí)延遲加載：內(nèi)容由服務(wù)器返回。
• 邊緣側(cè)：視圖在 CDN 級(jí)別組裝。許多 CDN 提供商為我們提供了使用基于 XML 的標(biāo)記語(yǔ)言的選項(xiàng)，稱為 Edge Side Includes (ESI)。

微前端的路由

路由主要取決于組合的類型。在服務(wù)器端組合中，路由是通過(guò)服務(wù)器端完成的，因?yàn)檎麄€(gè)應(yīng)用程序邏輯都在服務(wù)器上。在邊緣組合中，CDN 是突出的參與者，因?yàn)樗ㄟ^(guò)基于請(qǐng)求的頁(yè)面 URL 在邊緣級(jí)別通過(guò)嵌入將它們組裝在一起來(lái)為微前端提供服務(wù)。

在客戶端組合中，微前端是根據(jù)需求和應(yīng)用程序的當(dāng)前狀態(tài)加載的。例如，如果用戶即將認(rèn)證，則會(huì)加載認(rèn)證微前端或加載登陸頁(yè)面。

除了上述路由技術(shù)，我們還可以根據(jù)需要使用智能路由來(lái)配置應(yīng)用程序。例如，如果我們使用將微前端加載為單頁(yè)應(yīng)用程序的應(yīng)用程序外殼。然后，app shell 是所有路由邏輯的中心命令。app shell 將管理所有路由邏輯，然后根據(jù)其配置決定加載哪個(gè)微前端。當(dāng)我們有復(fù)雜的路由時(shí)，這是最好的方法之一，因?yàn)橹挥幸粋€(gè)故障點(diǎn)或配置。

微前端之間的通信

與路由一樣，微前端之間的通信也取決于組合的類型。當(dāng)我們?cè)谙嗤虿煌?yè)面上使用多個(gè)微前端時(shí)，我們總是希望可以和其他微前端用戶交互。

不同微前端之間的溝通可能不是那么微不足道，尤其是當(dāng)有不同的團(tuán)隊(duì)構(gòu)建它們時(shí)。為了維持獨(dú)立部署的原則，我們需要確保每個(gè)微前端都不知道其他微前端，即使它們是水平分割的并且是同一頁(yè)面的一部分。

在這種情況下，我們有幾個(gè)選項(xiàng)可以更好地溝通。

我們可以在前端開(kāi)發(fā)中注入事件總線機(jī)制，允許解耦的組件通過(guò)在同一視圖中發(fā)出事件或總線和不同的微前端來(lái)相互通信。如果組件感興趣，它們可以監(jiān)聽(tīng)這些事件并做出反應(yīng)。

我們可以通過(guò)添加一個(gè)容器來(lái)實(shí)例化事件總線并將其注入頁(yè)面的所有微前端來(lái)創(chuàng)建它。

或者，我們也可以使用自定義事件。這些是具有自定義負(fù)載的自定義事件。有效負(fù)載包括標(biāo)識(shí)事件的字符串和為事件自定義的可選對(duì)象。這些自定義事件通過(guò)一個(gè)常見(jiàn)的類似對(duì)象的窗口進(jìn)行調(diào)度，以便所有微前端都可以使用它。

定義微前端

在微前端我們可以使用不同的技術(shù)棧，我們可以將vue和react進(jìn)行結(jié)合使用。其中可以單獨(dú)為vue構(gòu)建自己的single-spa，為react構(gòu)建自己的single-spa，最后兩者通過(guò)webpack共同引入使用，并且兩者也可以獨(dú)立訪問(wèn)。具體的代碼在github上有很多實(shí)例。

結(jié)論

無(wú)論是微前端還是微服務(wù)，本質(zhì)上都是為了讓項(xiàng)目開(kāi)發(fā)迭代變得更快，如果因?yàn)椴捎昧四硞€(gè)技術(shù)而導(dǎo)致項(xiàng)目本身出現(xiàn)了各種問(wèn)題，我們就是在本末倒置。