文章出處：EAWorld

前端開發(fā)在程序猿中無疑是一個比較苦逼的存在，作為一個前端開發(fā)，你必須要掌握Javascript，HTML，CSS這三大基礎(chǔ)。Javascript作為網(wǎng)絡(luò)時代最為重要的開發(fā)語言，由于其設(shè)計上的限制，一直在演進，經(jīng)歷了ES3，ES5，ES6（ECMAScript 2015）……而簡單的CSS也無法完成你復雜的需求，你需要Less／Sass／Sytlus來增強你的CSS的功能。這些還遠遠只是一小部分，你還需要了解：

你需要有網(wǎng)絡(luò)的基本知識，和常見的API接口例如HTTP／REST／GraphQL

你需要知道瀏覽器的兼容性，什么IE，Chrome，Safari，F(xiàn)irefox，等等

你需要知道應(yīng)用如何打包，了解 Webpack ，還有g(shù)ulp， Babel， Parcel， Browserify， and Grunt等是怎么工作的

你需要熟悉HTML的DOM操作，和相關(guān)的工具庫例如jquery和d3js

需要了解不同的框架和他們的優(yōu)缺點 例如React，AngularJS和VueJS，這三大框架都不兼容，而且各自都有自己龐大的生態(tài)

雖然NodeJS主要用于后端開發(fā)，但是很多前端的工具鏈和這個相關(guān)，例如構(gòu)建工具 npm，yarn ……

如果你的項目足夠復雜，你需要引入Monorepo，使用例如lerna，nx等工具來管理多個項目的包和依賴

你需要掌握基本的前端測試工具和框架，例如：Jasmin，Jest，Selenium，Mocha等等

最可怕的是，這些東西都在飛快地發(fā)展和變化中，當你正忙于學習ES8，ES9，ES10的新特性的時候，今天我要和大家分享的希望不是壓死前端開發(fā)小駱駝的最后一根稻草－－微前端。

目錄：

1．什么是微前端

2．為什么需要微前端，它有什么優(yōu)勢

3．如何實現(xiàn)微前端架構(gòu)

4．運行時微前端的具體實現(xiàn)方式

5．微前端的問題和缺點

一、什么是微前端

而提到微前端就離不開微服務(wù)，大家對微服務(wù)都比較熟悉了，微服務(wù)允許后端體系結(jié)構(gòu)通過松散耦合的代碼庫進行擴展，每個代碼庫負責自己的業(yè)務(wù)邏輯，并公開一個API，每個API均可獨立部署，并且各自由不同的團隊擁有和維護。

前端架構(gòu)經(jīng)歷了從單體，到前后端分離，再到微服務(wù)，最終發(fā)展到現(xiàn)在的微前端的過程如下圖所示：

微前端的思路是把微服務(wù)的架構(gòu)引入到前端，其核心都是要能夠以業(yè)務(wù)為單元構(gòu)建端到端的垂直架構(gòu)，使得單個的團隊能夠獨立自主的進行相關(guān)的開發(fā)，同時又具備相當?shù)撵`活性，按需求來組成交付應(yīng)用。

“微前端”一詞最早于2016年底在ThoughtWorks 技術(shù)雷達中提出的。它將微服務(wù)的概念擴展到了前端世界。當前的趨勢是構(gòu)建一個功能強大且功能強大的瀏覽器應(yīng)用程序（也稱為單頁應(yīng)用程序），該應(yīng)用程序位于微服務(wù)架構(gòu)之上。隨著時間的流逝，通常由一個單獨的團隊開發(fā)的前端層會不斷增長，并且變得更加難以維護。

微前端背后的想法是將網(wǎng)站或Web應(yīng)用程序視為由獨立團隊擁有的功能的組合。每個團隊都有自己關(guān)心和專長的不同業(yè)務(wù)或任務(wù)領(lǐng)域。一個團隊是跨職能的，并且從數(shù)據(jù)庫到用戶界面，端到端地開發(fā)其功能。

但是，這個想法并不新鮮。它與“單體系統(tǒng)”概念有很多共同點。在過去，類似的方法被稱為“垂直系統(tǒng)的前端集成”。但是微前端顯然是一個更友好，更輕巧的術(shù)語。

在微服務(wù)的架構(gòu)中，后臺的服務(wù)已經(jīng)按照業(yè)務(wù)進行了分離，而前端仍然是一個單體構(gòu)建，通過網(wǎng)關(guān)來調(diào)用不同的后臺服務(wù)。這個微服務(wù)的思路是相違背的，這也就造成了你的后端團隊是按照業(yè)務(wù)分割的，但是前端團隊仍然是一個整體。微前端可以有效地改進這一點。

微前端的核心思路其實是遠程應(yīng)用程序，包含組件／模塊／包的運行時加載。

如上圖，對于用戶而言，訪問的是一個微前端的容器（container），容器加載運行在遠程服務(wù)上的應(yīng)用，把這些遠程應(yīng)用作為組件／模塊／包在本地瀏覽器中加載。

組件是底層UI庫的構(gòu)建單元

模塊是相應(yīng)運行時的構(gòu)建單元

包是依賴性解析器的構(gòu)建單元

微前端是所提出的應(yīng)用程序的構(gòu)建塊

二、為什么需要微前端？

它有什么優(yōu)勢？

在前面我們看到的微前端之前的架構(gòu)，所有的前端還是一個單體，前端團隊會依賴所有的服務(wù)或者后臺的API，前端開發(fā)會成為整個系統(tǒng)的瓶頸。使用微前端，就是要讓前端業(yè)務(wù)從水平分層變?yōu)榇怪睉?yīng)用的一部分，進入業(yè)務(wù)團隊，剝離耦合。

那么微前端有什么好處，為什么要采用微前端架構(gòu)呢？

各個團隊獨立開發(fā)，相互不影響，獨立開發(fā)、獨立部署，微應(yīng)用倉庫獨立，前后端可獨立開發(fā)，部署完成后主框架自動完成同步更新

增量升級，在面對各種復雜場景時，通常很難對一個已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級或重構(gòu)，而微前端是一種非常好的實施漸進式重構(gòu)的手段和策略。因為是運行時加載，可以在沒有重建的情況下添加，刪除或替換前端的各個部分。

不受技術(shù)影響，每個團隊都應(yīng)該能夠選擇和升級其技術(shù)棧，而無需與其他團隊進行協(xié)調(diào)。也就是說A應(yīng)用可以用React，而B應(yīng)用使用Vue，大家可以通過同一個微前端來加載

獨立運行時，每個微應(yīng)用之間狀態(tài)隔離，運行時狀態(tài)不共享。隔離團隊代碼，即使所有團隊都使用相同的框架，也不要共享運行時。構(gòu)建自包含的獨立應(yīng)用程序。不要依賴共享狀態(tài)或全局變量。

建立團隊命名空間，對于CSS，事件，本地存儲和Cookies，可以避免沖突并闡明所有權(quán)。

因此，微前端和微服務(wù)的本質(zhì)都是關(guān)于去耦合。而只有當應(yīng)用程序達到一定規(guī)模時，這才開始變得更有意義。