一. 什麼是微前端？
Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends
微前端是一種多個團隊通過獨立發佈功能的方式來共同構建現代化 web 應用的技術手段及方法策略。
上面是阿里的qiankun框架中引用的微前端定義，微前端第一次提出於2016年底的 ThoughtWorks Technology Radar 。
那微前端出現爲了解決什麼問題呢？
筆者看了很多資料認爲微前端是爲了解決不同版本及不同框架的多個應用共存及增量部署問題。
Tom Söderlund在這篇文章中提到了如何實現微前端的七種方式：
Here’s a few different approaches to implementing micro frontends:
- The best solution I’ve seen is the Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo that combines React, Vue, Angular 1, Angular 2, etc). See Bret Little’s explanation here.
- Multiple single-page apps that live at different URLs. The apps use NPM/Bower components for shared functionality.
- Isolating micro-apps into IFrames using libraries and Window.postMessage APIs to coordinate. IFrames share APIs exposed by their parent window.
- Make the different modules communicate over a shared events bus (e.g. chrisdavies/eev). Each module can be built using its own framework, as long as it handles incoming and outgoing events.
- Using Varnish Cache to integrate different modules.
- Web Components as the integration layer.
- “Blackbox” React components.
微前端要解決的問題及應該包含的內容如下圖所示：
二. 微前端的價值：
1.技術棧無關。主框架不限制接入應用的技術棧，微應用具備完全自主權
2.獨立開發、獨立部署。微應用倉庫獨立，前後端可獨立開發，部署完成後主框架自動完成同步更新
3.增量升級。在面對各種複雜場景時，我們通常很難對一個已經存在的系統做全量的技術棧升級或重構，而微前端是一種非常好的實施漸進式重構的手段和策略
4.獨立運行時。每個微應用之間狀態隔離，運行時狀態不共享
三. 微前端的基本工作原理：
四.微前端應用
Single-spa 是一個將多個單頁面應用聚合爲一個整體應用的 javascript 微前端框架。這裏面有很多single-spa的例子：single-sap-demo。
使用 single-spa 進行前端架構設計可以帶來很多優點：
- 在同一頁面上使用多個前端框架 而不用刷新頁面 (React, AngularJS, Angular, Ember, jQuery)
- 獨立部署每一個單頁面應用
- 新功能使用新框架，舊的單頁應用不用重寫可以共存
- 改善初始加載時間，遲加載代碼
qiankun 是螞蟻金服開源的一套完整的微前端解決方案。具體描述可查看 文檔 和 Github,另外它是基於single-apa的。
不說了，去看代碼了，微前端真香。。。
五.參考資料：
3. qiankun官網
4. Micro frontends—a microservice approach to front-end web development
6. Micro Frontends from martinfowler.com
7. 微前端的核心價值
13. single-spa-react