文章出處：EAWorld

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

你需要有網絡的基本知識，和常見的API接口例如HTTP／REST／GraphQL

你需要知道瀏覽器的兼容性，什么IE，Chrome，Safari，Firefox，等等

你需要知道應用如何打包，了解 Webpack ，還有gulp， Babel， Parcel， Browserify， and Grunt等是怎么工作的

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

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

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

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

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

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

目錄：

1．什么是微前端

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

3．如何實現微前端架構

4．運行時微前端的具體實現方式

5．微前端的問題和缺點

一、什么是微前端

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

前端架構經歷了從單體，到前后端分離，再到微服務，最終發(fā)展到現在的微前端的過程如下圖所示：

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

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

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

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

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

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

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

組件是底層UI庫的構建單元

模塊是相應運行時的構建單元

包是依賴性解析器的構建單元

微前端是所提出的應用程序的構建塊

二、為什么需要微前端？

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

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

那么微前端有什么好處，為什么要采用微前端架構呢？

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

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

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

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

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

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