起源
最近在做一個(gè)基于Web的商業(yè)應(yīng)用吴攒『晔蹋客戶希望這個(gè)應(yīng)用在架構(gòu)上能滿足以下需求：
1) 盡量簡(jiǎn)單滿足最初上線的基本功能與性能高求潮太；
2)具有良好的可擴(kuò)展性喳整∽还梗可以兼容現(xiàn)有服務(wù)并方便后期引入新的技術(shù)；
3)所采用架構(gòu)及其后期evolve需盡量減少后期維修成本框都。
架構(gòu)師的工作內(nèi)容除了溝通之外主要是權(quán)衡(trade-off)搬素。就是對(duì)各種架構(gòu)進(jìn)行評(píng)估和嘗試最后選擇一個(gè)相對(duì)更可行的架構(gòu)方案。
微服務(wù)架構(gòu)設(shè)計(jì)思想主要應(yīng)用在后端系統(tǒng)的設(shè)計(jì)并很好地應(yīng)用在很多商業(yè)場(chǎng)景瞬项。然而隨著前端組件在基于browser的應(yīng)用越來(lái)越復(fù)雜和沉重蔗蹋，有些公司開(kāi)始將微服務(wù)的技術(shù)思想應(yīng)用到瀏覽器端。即：Micro frontends【1】囱淋。
什么是微前端
簡(jiǎn)單地說(shuō)微前端的思路是將Web應(yīng)用切分成多少獨(dú)立的微前端應(yīng)用猪杭。每個(gè)微前端應(yīng)用擁有獨(dú)立的前端、后端及數(shù)據(jù)庫(kù)組件妥衣。并獨(dú)立開(kāi)發(fā)皂吮、部署、運(yùn)行與維護(hù)税手。以下是微前端架構(gòu)與其它架構(gòu)的對(duì)比：
應(yīng)用場(chǎng)景
每種技術(shù)與設(shè)計(jì)思想都是為了解決某類實(shí)際問(wèn)題蜂筹。微前端的架構(gòu)與技術(shù)適用于以下應(yīng)用場(chǎng)景：
1). 遺留系統(tǒng)的兼容與遷移：
技術(shù)的發(fā)展日新月異。采用更好更優(yōu)秀的技術(shù)支持業(yè)務(wù)是很多公司提高競(jìng)爭(zhēng)力的手段芦倒。大多數(shù)擁有已上線運(yùn)營(yíng)的軟業(yè)系統(tǒng)的商業(yè)公司的開(kāi)發(fā)團(tuán)隊(duì)面臨的一個(gè)實(shí)際問(wèn)題是： 如何在兼容現(xiàn)有系統(tǒng)的情況下采用更新更優(yōu)秀的技術(shù)與框架開(kāi)發(fā)新的功能艺挪。使用微前端是一個(gè)不錯(cuò)的選擇。
2). 應(yīng)用聚合
大多數(shù)公司內(nèi)部都部署了各種軟件應(yīng)用提供各種內(nèi)部與外部服務(wù)兵扬。如果能將這些軟件應(yīng)用聚合成一個(gè)可以提供統(tǒng)一用戶體驗(yàn)的應(yīng)用將會(huì)提高員工的工作效率及客戶的體驗(yàn)麻裳。采用微前端是一個(gè)不錯(cuò)的選擇口蝠。
3).單一職責(zé)與應(yīng)用自治
由于每個(gè)微前端應(yīng)用都是獨(dú)立的開(kāi)發(fā)與部署并且各應(yīng)用之間通過(guò)統(tǒng)一的接口規(guī)范與框架聚合在一起。這既可提高開(kāi)發(fā)團(tuán)隊(duì)的專注水平又保證各團(tuán)隊(duì)之間的協(xié)作津坑。比如：亞馬遜內(nèi)部就提倡：" you make it you own it"妙蔗。
架構(gòu)模式
微前端應(yīng)用可采用以下兩種架構(gòu)模式：
1) 管理式模式
2)自組織式模式
劃分方式
微前端應(yīng)用邊界可按以下方式劃分：
1) 按業(yè)務(wù)劃分
2) 按組織結(jié)構(gòu)劃分
3) 按權(quán)限劃分
4) 按變更頻率劃分
5) 按服務(wù)劃分
實(shí)現(xiàn)方式
1) 路由分發(fā)式
即通過(guò)反向代理或路由組件將服務(wù)請(qǐng)求分發(fā)到不同的獨(dú)立前端應(yīng)用上。
2)微應(yīng)用集成式
即先根據(jù)微應(yīng)用邊界劃分后獨(dú)立開(kāi)發(fā)及步驟一系列獨(dú)立的微應(yīng)用疆瑰。然后再集成到一個(gè)新的應(yīng)用上眉反。
3)微組件運(yùn)行時(shí)集成
指將業(yè)務(wù)服務(wù)分解并編譯成可以在集成應(yīng)用上直接可運(yùn)行的組件并保存與維護(hù)在相應(yīng)的組件倉(cāng)庫(kù)中。集成頁(yè)面在運(yùn)行時(shí)直接加載和調(diào)用相應(yīng)的組成提供相應(yīng)的服務(wù)穆役。
4)建立基于微容器的前端架構(gòu)
感覺(jué)這個(gè)思路和微軟的Sharepoint的Web Part及java的portlet的思路相近寸五。即將微應(yīng)用以微組件的形式存在。應(yīng)用通過(guò)微容器在集成應(yīng)用運(yùn)行時(shí)對(duì)微組件進(jìn)管理耿币。目前可使用的方法有：使用 iFrame 創(chuàng)建容器播歼、使用Web Components技術(shù)等。
幾種微前端框架
1) single-spa
2) stencil
3) mooa
4) single-spa-angular
5) single-spa-angular-cli
其中single-spa-angular|-cli是single-spa-angular的舊版本掰读。已不再維護(hù)秘狞。
1. https://www.thoughtworks.com/radar/techniques/micro-frontends
