如何實現前端微服務化
阿新 • • 發佈：2018-11-21
var arch css 分享圖片 term uil .sh lan one 譯者按:** 微服務在後端開發中大行其道，其實對於越來越復雜的前端應用來說，微服務也是一種不錯的選擇。
- 原文: Micro frontends—a microservice approach to front-end web development
- 譯者: Fundebug
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
**
對於網頁應用，現代的開發方法使得前端部分變得越來越大，與之對應的後端反而變小。我們的網站Weld的代碼中90%都是前端相關。我可以想象大多數現代的網頁應用都類似。
網頁應用一直在演化，網頁開發的技術也在不斷進步。現代的開發甚至依賴於在同一個項目中使用多個不同的框架。比如我們使用一些依賴於jQuery、AngularJS 1.x的舊的模塊，和React、Vue裏面的新模塊。
單一框架無法應對大型網頁應用
我們需要一種方法可以把一個大的項目拆分成很多個小的模塊，讓它們獨自運行。
舉個例子：
myapp.com：使用靜態HTML技術構建的靜態頁面。myapp.com/settings：使用AngularJS 1.x 構建的舊的設置頁面。myapp.com/dashboard：使用React構建的新的控制面板。
能夠想象我們需要如下技術：
- 一個共享的JavaScript代碼庫比如用於管理路由和用戶會話，以及一些共享的CSS。當然要越少越好。
- 一堆獨立的模塊，也就是微應用(‘mini-app‘)。每一個使用各自的框架搭建，使用不同的代碼庫管理。
- 一個可以將所有模塊連接起來的發布系統，可以將整個服務運行。任何模塊的更新都會觸發服務的重啟。
前端微服務化
正如大家想到的，那就是前端微服務化。像Spotify, Klarna, Zalando, Upwork和Allegro都使用前端微服務化技術來構架他們的網頁應用。
實現方案
我總結了一下幾種實現方案：
- 我認為最好的方案是Single-SPA "meta framework"可以在一個頁面將多個不同的框架整合，甚至在切換的時候都不需要刷新頁面(這個是demo，支持React, Vue, Angular 1, Angular 2, etc)。可以看Bret Little的介紹。
- 多個單一頁面應用分管不同的URL。該方法使用了NPM/Bower來共享某些功能。
- 將微服務包裝到IFrames中，然後使用一些庫和Window.postMessageAPI來交互。
- 不同的模塊使用共享事件總線(比如，chrisdavies/eev)來交流。每一個模塊使用獨自開發，並處理所有模塊間的交互事件。
- 使用Varnish Cache來整合不同的模塊。
- 使用Web Components來作為一個整合層整合所喲模塊。
- React部件黑盒技術。
資源
- Hacker New提問: 你是用什麽構建前端微服務？
- Zalando公司開發的Mosaic項目，提供了一些列的庫來構建微服務架構，該架構可以支撐大型網站。可以看看這個演講。
- Micro Frontends包含了一些技術、策略和方法構建現代網頁應用來服務於多個獨立團隊開發的情況。
更多
- ThoughtWorks公司的技術分享：前端微服務化
- Upword前端的微服務化
- 前端微服務化入門
- 如何多個團隊同時開發前端: 前端微服務化
- 微服務網格化和前端微服務化
- 微服務架構中的微前端
- 使用為服務架構管理前端
- 前端組件微服務化
關於Fundebug
Fundebug專註於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！
版權聲明
轉載時請註明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/02/micro_frontend_development/
如何實現前端微服務化