如何實現前端微服務化

譯者按: 微服務在後端開發中大行其道，其實對於愈來愈複雜的前端應用來講，微服務也是一種不錯的選擇。

• 原文: 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都使用前端微服務化技術來構架他們的網頁應用。

實現方案

我總結了一下幾種實現方案：

1. 我認爲最好的方案是Single-SPA "meta framework"能夠在一個頁面將多個不一樣的框架整合，甚至在切換的時候都不須要刷新頁面(這個是demo，支持React, Vue, Angular 1, Angular 2, etc)。能夠看Bret Little的介紹。
2. 多個單一頁面應用分管不一樣的URL。該方法使用了NPM/Bower來共享某些功能。
3. 將微服務包裝到IFrames中，而後使用一些庫和Window.postMessageAPI來交互。
4. 不一樣的模塊使用共享事件總線(好比，chrisdavies/eev)來交流。每個模塊使用獨自開發，並處理全部模塊間的交互事件。
5. 使用Varnish Cache來整合不一樣的模塊。
6. 使用Web Components來做爲一個整合層整合所喲模塊。
7. 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/