1. 程式人生 > >前端應用的微服務式拆分

前端應用的微服務式拆分

本文分為以下四部分:

  • 前端微服務化思想介紹

  • 微前端的設計理念

  • 實戰微前端架構設計

  • 基於 Mooa 進行前端微服務化

前端微服化

對於前端微服化來說,有這麼一些方案:

  • Web Component 顯然可以一個很優秀的基礎架構。然而,我們並不可能去大量地複寫已有的應用。

  • iFrame。你是說真的嗎?

  • 另外一個微前端框架 Single-SPA,顯然是一個更好的方式。然而,它並非 Production Ready。

  • 通過路由來切分應用,而這個跳轉會影響使用者體驗。

  • 等等。

因此,當我們考慮前端微服務化的時候,我們希望:

  • 獨立部署

  • 獨立開發

  • 技術無關

  • 不影響使用者體驗

獨立開發

在過去的幾星期裡,我花費了大量的時間在學習 Single-SPA 的程式碼。但是,我發現它在開發和部署上真的太麻煩了,完全達不到獨立部署地標準。按 Single-SPA 的設計,我需要在入口檔案中聲名我的應用,然後才能去構建:

  1. declareChildApplication('inferno', () => import('src/inferno/inferno.app.js'), pathPrefix('/inferno'));

同時,在我的應用裡,我還需要去指定我的生命週期。這就意味著,當我開發了一個新的應用時,必須更新兩份程式碼:主工程和應用。這時我們還極可能在同一個原始碼裡工作。

當出現多個團隊的時候,在同一份原始碼裡工作,顯然變得相當的不可靠——比如說,對方團隊使用的是 Tab,而我們使用的是 2 個空格,隔壁的老王用的是 4 個空格。

獨立部署

一個單體的前端應用最大的問題是,構建出來的 js、css 檔案相當的巨大。而微前端則意味著,這個檔案被獨立地拆分成多個檔案,它們便可以獨立去部署應用。

我們真的需要技術無關嗎?

等等,我們是否真的需要技術無關?如果我們不需要技術無關的話,微前端問題就很容易解決了。

事實上,對於大部分的公司和團隊來說,技術無關只是一個無關痛癢的話術。當一家公司的幾個創始人使用了 Java,那麼極有可能在未來的選型上繼續使用 Java。除非,一些額外的服務來使用 Python 來實現人工智慧。因此,在大部分的情況下,仍然是技術棧唯一。

對於前端專案來說,更是如此:一個部門裡基本上只會選用一個框架。

於是,我們選擇了 Angular。

不影響使用者體驗

使用路由跳轉來進行前端微服務化,是一種很簡單、高效的切分方式。然而,路由跳轉地過程中,會有一個白屏的過程。在這個過程中,跳轉前的應用和將要跳轉的應用,都失去了對頁面的控制權。如果這個應用出了問題,那麼使用者就會一臉懵逼。

理想的情況下,它應該可以被控制。

微前端的設計理念

設計理念一:中心化路由

網際網路本質是去中心化的嗎?不,DNS 決定了它不是。TAB,決定了它不是。

微服務從本質上來說,它應該是去中心化的。但是,它又不能是完全的去中心化。對於一個微服務來說,它需要一個服務註冊中心

服務提供方要註冊通告服務地址,服務的呼叫方要能發現目標服務。

對於一個前端應用來說,這個東西就是路由。

640?wx_fmt=jpeg

Menu

從頁面上來說,只有我們在網頁上新增一個菜單鏈接,使用者才能知道某個頁面是可以使用的。

640?wx_fmt=jpeg

404

而從程式碼上來說,那就是我們需要有一個地方來管理我們的應用:**發現存在哪些應用,哪個應用使用哪個路由。

管理好我們的路由,實際上就是管理好我們的應用

設計理念二:標識化應用

在設計一個微前端框架的時候,為每個專案取一個名字的問題糾結了我很久——怎麼去規範化這個東西。直到,我再一次想到了康威定律:

系統設計(產品結構等同組織形式,每個設計系統的組織,其產生的設計等同於組織之間的溝通結構。

640?wx_fmt=png

康威定律

換句人話說,就是同一個組織下,不可能有兩個專案的名稱是一樣的。

所以,這個問題很簡單就解決了。

設計理念三:生命週期

Single-SPA 設計了一個基本的生命週期(雖然它沒有統一管理),它包含了五種狀態:

  • load,決定載入哪個應用,並繫結生命週期

  • bootstrap,獲取靜態資源

  • mount,安裝應用,如建立 DOM 節點

  • unload,刪除應用的生命週期

  • unmount,解除安裝應用,如刪除 DOM 節點

於是,我在設計上基本上沿用了這個生命週期。顯然,諸如 load 之類對於我的設計是多餘的。

設計理念四:獨立部署與配置自動化

從某種意義上來說,整個每系統是圍繞著應用配置進行的。如果應用的配置能自動化,那麼整個系統就自動化。

當我們只開發一個新的元件,那麼我們只需要更新我們的元件,並更新配置即可。而這個配置本身也應該是能自動生成的。

實戰微前端架構設計

基於以上的前提,系統的工作流程如下所示:

640?wx_fmt=jpeg

系統工作流

整體的工程流程如下所示:

  1. 主工程在執行的時候,會去伺服器獲取最新的應用配置。

  2. 主工程在獲取到配置後,將一一建立應用,併為應用繫結生命週期。

  3. 當主工程監測到路由變化的時候,將尋找是否有對應的路由匹配到應用。

  4. 當匹配對對應應用時,則載入相應的應用。

故而,其對應的架構如下圖所示:

640?wx_fmt=jpeg

Architecture

獨立部署與配置自動化

我們做的部署策略如下:我們的應用使用的配置檔案叫 apps.json,由主工程去獲取這個配置。每次部署的時候,我們只需要將 apps.json 指向最新的配置檔案即可。配置的檔案類如下所示:

  1. 96a7907e5488b6bb.json

  2. 6ff3bfaaa2cd39ea.json

  3. dcd074685c97ab9b.json

一個應用的配置如下所示:

  1. {

  2.  "name": "help",

  3.  "selector": "help-root",

  4.  "baseScriptUrl": "/assets/help",

  5.  "styles": [

  6.  "styles.bundle.css"

  7.  ],

  8.  "prefix": "help",

  9.  "scripts": [

  10.  "inline.bundle.js",

  11.  "polyfills.bundle.js",

  12.  "main.bundle.js"

  13.  ]

  14. }

這裡的 selector 對應於應用所需要的 DOM 節點,prefix 則是用於 URL 路由上。這些都是自動從 index.html 檔案和 package.json 中獲取生成的。

應用間路由——事件

由於現在的應用變成了兩部分:主工程和應用部分。就會出現一個問題:只有一個工程能捕獲路由變化。當由主工程去改變應用的二級路由時,就無法有效地傳達到子應用。在這時,只能通過事件的方式去通知子應用,子應用也需要監測是否是當前應用的路由。

  1. if (event.detail.app.name === appName) {

  2.  let urlPrefix = 'app'

  3.  if (urlPrefix) {

  4.  urlPrefix = `/${window.mooa.option.urlPrefix}/`

  5.  }

  6.  router.navigate([event.detail.url.replace(urlPrefix + appName, '')])

  7. }

相似的,當我們需要從應用 A 跳轉到應用 B 時,我們也需要這樣的一個機制:

  1. window.addEventListener('mooa.routing.navigate', function(event: CustomEvent) {

  2.  const opts = event.detail

  3.  if (opts) {

  4.  navigateAppByName(opts)

  5.  }

  6. })

剩下的諸如 Loading 動畫也是類似的。

使用 Mooa 進行

So,我們就有了前端微服務框架 Mooa。它基於 single-spa && single-spa-angular-cli,並且符合以上的設計思想。

GayHub 地址:https://github.com/phodal/mooa

對於主工程而言,只需要以下的幾行程式碼就可以完成上面的功能:

  1. http.get<any[]>('/assets/apps.json')

  2.  .subscribe(data => {

  3.  data.map((config) => {

  4.  that.mooa.registerApplication(config.name, config, mooaRouter.matchRoute(config.prefix));

  5.  });

  6.  this.mooa.start();

  7.  });

  8. this.router.events.subscribe((event: any) => {

  9.  if (event instanceof NavigationEnd) {

  10.  that.mooa.reRouter(event);

  11.  }

  12. });

並新增一個對應的子應用路由:

  1. {

  2.  path: 'app/:appName/:route',

  3.  component: HomeComponent

  4. }

則如上所述的四個步驟。

對於子工程而言,則只需要一個對應的 Hook 操作:

  1. mooaPlatform.mount('help').then((opts) => {

  2.  platformBrowserDynamic().bootstrapModule(AppModule).then((module) => {

  3.  opts['attachUnmount'](module);

  4.  });

  5. });

並設定好對應的 base_href:

  1. providers: [

  2.  {provide: APP_BASE_HREF, useValue: mooaPlatform.appBase()},

  3. ]

更多

嗯,就是這麼簡單。DEMO 視訊如下:

Demo 地址見:http://mooa.phodal.com/

GitHub 示例:https://github.com/phodal/mooa