微服務(wù)前端之微前端

分而治之是利用微件拆分來達(dá)到工程拆分治理的思路，可以解決業(yè)務(wù)快速擴(kuò)張、開發(fā)維護(hù)困難等問題。對(duì)于一個(gè)完整的產(chǎn)品來說，前端可視化層、后端服務(wù)層是必備的。

在后端，我們將原來的單體式應(yīng)用拆分成了不同的微服務(wù)模塊，微服務(wù)與微服務(wù)之間通過服務(wù)注冊(cè)等進(jìn)行通信和調(diào)用，共同對(duì)前端提供服務(wù)。而在前端，主要是通過后端接口獲取數(shù)據(jù)，展示不同的內(nèi)容給到用戶，有web端、h5端等形式。在以前的開發(fā)方案中，web端、h5端都是由獨(dú)立開發(fā)和維護(hù)，而實(shí)際上它們的業(yè)務(wù)邏輯基本一致，只是UI風(fēng)格差異比較大，那么我們是不是可以把“共用”的部分抽離出來呢，這樣可以避免重復(fù)開發(fā)與維護(hù)，極大的提高開發(fā)效率，這就是微前端的思想。

抽離出來的方案有兩種，即物理抽離、邏輯抽離。對(duì)于物理抽離來說，就是把共用的模塊放在一起，前端是通過common文件夾進(jìn)行引用，后端則是通過jar包、lib庫進(jìn)行引用。這會(huì)帶來一個(gè)問題是隨著業(yè)務(wù)變得越來越復(fù)雜，共用模塊內(nèi)容會(huì)越來越多，從而導(dǎo)致開發(fā)尋找到相應(yīng)的內(nèi)容會(huì)很困難，開發(fā)速度、構(gòu)建速度、部署速度也會(huì)越來越慢，等到上線后，線上出現(xiàn)故障，排錯(cuò)也比較困難。所以物理隔離不是長(zhǎng)期方案，長(zhǎng)期方案來說就是邏輯隔離，將整體業(yè)務(wù)進(jìn)行拆分，共用（比如子業(yè)務(wù)工程之間的路由注冊(cè)、路由切換）邏輯拆離出來，子業(yè)務(wù)之間單獨(dú)成一個(gè)工程進(jìn)行開發(fā)。

事實(shí)上，微前端架構(gòu)整體思路和微服務(wù)架構(gòu)演變一致。在以前的單體式前端、單體式后端應(yīng)用中，前端請(qǐng)求的分發(fā)路由是通過框架來完成的，即框架將路由指定到對(duì)應(yīng)的組件或內(nèi)部服務(wù)中，微前端就是把以前的應(yīng)用內(nèi)的組件調(diào)用拆分成了更細(xì)的應(yīng)用間的組件調(diào)用，通過路由來找到對(duì)應(yīng)的應(yīng)用，再由應(yīng)用分發(fā)到對(duì)應(yīng)的組件；后端請(qǐng)求把內(nèi)部之間的函數(shù)調(diào)用變成了遠(yuǎn)程調(diào)用。

所以微前端不過是把用于服務(wù)器端的思想用在了瀏覽器端，將web應(yīng)用由單一的單體應(yīng)用拆分為多個(gè)微前端應(yīng)用聚合而成的應(yīng)用，應(yīng)用與應(yīng)用之間可以獨(dú)立開發(fā)、獨(dú)立運(yùn)行、獨(dú)立部署。

目前在業(yè)內(nèi)有這幾種方式可以實(shí)現(xiàn)微前端：

1. 路由分發(fā)式，即使用http服務(wù)器的路由重定向應(yīng)用；

2. Iframe式，即通過組合多個(gè)獨(dú)立應(yīng)用，子應(yīng)用與子應(yīng)用之間設(shè)計(jì)通訊、加載機(jī)制；

3. 通用中心路由基座式，即子應(yīng)用與子應(yīng)用之間技術(shù)棧可以不一樣，可以是Augular、React、Vue中的任何一種，完全獨(dú)立，互不依賴，子應(yīng)用與子應(yīng)用之間的通信由基座工程進(jìn)行管理；

4. 特定中心路由基座式，即子應(yīng)用與子應(yīng)用之間的技術(shù)棧必須一致，子應(yīng)用可以使用基座的能力進(jìn)行通信。

在這些微服務(wù)前端方案中，業(yè)務(wù)可以根據(jù)自己的特點(diǎn)來選擇最適合的方案。目前最通用、最契合微服務(wù)思想的便是通用中心路由基座式了，我們也簡(jiǎn)單的介紹一下這種微前端方案。在具體實(shí)現(xiàn)上一般包含四個(gè)部分：動(dòng)態(tài)路由、動(dòng)態(tài)配置、子應(yīng)用接口設(shè)計(jì)、復(fù)用方案設(shè)計(jì)。

在動(dòng)態(tài)路由方案中，一般拆分成基座路由和子應(yīng)用路由，用戶請(qǐng)求先打到基座路由，然后加載子應(yīng)用入口文件，動(dòng)態(tài)注冊(cè)子工程路由即可，整個(gè)的流程如下，非常簡(jiǎn)單。在動(dòng)態(tài)配置方案中，要解決的是基座工程如何知道子應(yīng)用的資源路徑，從而加載js、css資源，通過在配置文件中標(biāo)識(shí)業(yè)務(wù)線的key、資源地址的value，在從基座到子應(yīng)用切換時(shí)拉取配置信息即可。在子應(yīng)用的接口設(shè)計(jì)中，暴露給注冊(cè)給基座應(yīng)用的對(duì)象即可。在復(fù)用方案設(shè)計(jì)中，把子應(yīng)用相同的依賴，如框架基本庫、業(yè)務(wù)組件等全都放在基座工程，這樣子應(yīng)用的代碼中主要導(dǎo)入這個(gè)庫就可以了。

通過將前端應(yīng)用拆分成微前端應(yīng)用，整個(gè)業(yè)務(wù)的可維護(hù)性得到了提高，實(shí)現(xiàn)了關(guān)聯(lián)部分高內(nèi)聚、不關(guān)聯(lián)部分低耦合。子應(yīng)用可以獨(dú)立開發(fā)、獨(dú)立部署、獨(dú)立上線，互不影響，子應(yīng)用的構(gòu)建、部署速度也提高了很多，減少了等待時(shí)間，加快了上線時(shí)間，提高了開發(fā)效率。

通過本文的介紹，想必你對(duì)微服務(wù)的思想更加了解了吧？它是一種軟件架構(gòu)設(shè)計(jì)思想，存在于前端、后端服務(wù)中，結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景，進(jìn)行合理的架構(gòu)設(shè)計(jì)、服務(wù)拆分，必定會(huì)更好的提高開發(fā)效率。