【51CTO.com快譯】隨著前端技術的發展，針對此類架構的解決方案也不斷涌現。如下圖所示，前端架構領域的主要思路是將前端分別獨立出來，以便后期組合一個更大的整體，同時也方便獨立的團隊對其進行維護。

讓我們先來總結一下微服務，給開發應用帶來的好處：

• 解耦的代碼庫。
• 自治的團隊。
• 與技術和框架無關。
• 能夠獨立部署。
• 具有可擴展性。
• 具有可重用性。

什么是微前端

如下圖所示，微前端(Micro-frontends)延續了上述僅在后端實現的微服務的各項優勢，能夠讓不同的團隊實現端到端的代碼交付。

使用微前端的場景：

• 不同團隊疲于應付大量的代碼庫。
• 代碼的所有權頻繁發生變更。
• 產品的部署被應用程序的其他部分拖延。
• 希望使用不同的前端(FE)框架。

編排(Orchestration)

借助業務流程，我們可以在服務器端和客戶端上，利用不同的方法將不同的微前端組合成為一個功能完備的應用程序，以發揮最佳性能。

在此，我們介紹一種方案--構建時間整合(Build time integration)。其特點是：

• 每個微前端應用程序都代表一個npm軟件包。
• 主應用程序(orchestrator/container)將自身構建為具有所有依賴項(微前端)的最終捆綁包。

JavaScript

{ 
  "name": "@super-app/container", 
  "version": "1.0.0", 
  "description": "My super app", 
  "dependencies": { 
   "@super-app/products-list": "2.0.0", 
   "@super-app/header": "4.5.2", 
   "@super-app/order": "1.0.0" 
  } 
} 

上述代碼似乎符合邏輯，但實際上卻暗藏著一個巨大的缺陷：每當微前端應用程序發生變更時，整個orchestrator及其所有的依賴項都必須隨即重建，以創建出新的版本。那么，這樣會導致每個微前端的潛在延遲、回滾、甚至是錯誤。與此同時，由于每個團隊都對相同的軟件包版本存在著依賴性，因此這實際上會導致新版本的創建更加困難。下面，我們來看看如何避免此類情況的發生。

1.客戶端編排

• 客戶端路由。
• 狀態共享。
• 注冊所有的應用程序。
• 如果有可能的話，盡量解決共享依賴項。
• 初始化主應用程序。
• 編寫來自不同微前端應用的程序片段。

為了達到上述功能，您可以使用如下程序庫：

• single-spa：一種頂級的路由器。
• hinclude：包含了HTML程序片段。
• h-include：包括使用各種Web組件的HTML片段。

我們可以通過對不同API的簡單Ajax調用，來完成程序片段的編寫。為了返回預先渲染(pre-rendered)的HTML，API可以在前端被合并，或者僅返回所需的腳本標簽，以及帶有ID的特定HTML標簽，以方便加載那些程序片段可以呈現的ID。

此外，您也可以使用Vanilla JS、或其他類型的框架，來自行實現編排的目的。

1.1路由

• 使用History API，來初始化應用內的路由器。
• 自定義瀏覽器事件、或PubSub庫。
• 將路由保留在Orchestrator應用上。

1.2共享全局狀態，并在應用之間進行通信

• 每個微前端都具有公開狀態的Observable模式。RxJS非常適用于這種模式。
• 自定義瀏覽器事件。
• 實現Cookie、會話或本地存儲。

1.3共享主要UI庫的代碼

• 在選擇第三方庫時，應選擇一個在微前端中能夠支持所有可能用到的框架類型的庫。
• 如果您想自行開發庫，則可以使用Web組件，以保持通用性。
• 團隊成員各司其職對庫進行開發與維護，而不必專門創建某個特定的團隊。

1.4樣式沖突

• 為每個團隊確定不同CSS類的特定前綴。
• 使用BEM樣式。
• 使用JSS等樣式組件(styled-components)，以避免在使用CSS和JS庫時發生沖突。
• 使用Web組件中的Shadow DOM。

1.5 SEO和UX

• Skeleton UI是一種在未加載內容之前的預定義初始化屏幕。
• 在ESI或SSI的幫助下，進行服務器端的渲染。

1.6 Web組件

它們包括4個規范定義：

1.6.1自定義元素(Custom Element)

• https://w3c.github.io/webcomponents/spec/custom/。

通過使用自定義元素的API，您可以使用各種生命周期、屬性變更處理程序、事件處理程序等方法，來創建功能齊全的自定義HTML元素。

如下是創建自定義元素的過程：

• 創建一個擴展HTMLElement的類。
• 自定義生命周期方法、及其屬性。
• 在connectedCallback()生命周期方法的內部，將新元素與HTML模板相關聯。
• 使用自定義元素API注冊該元素。
• 在HTML中使用此元素。

JavaScript

class MyIcon extends HTMLElement { 
  constructor() { 
    super(); 
    this._iconCode = null; 
  } 
 
 
  static get observedAttributes() { 
    return ["code"]; 
  } 
  attributeChangedCallback(name, oldValue, newValue) { 
    // name will always be "code" due to observedAttributes 
    this._iconCode = newValue; 
    this._render(); 
  } 
  connectedCallback() { 
    this._render(); 
  } 
  get code() { 
    return this._iconCode; 
  } 
  set code(value) { 
    this.setAttribute("code", value); 
  } 
  _render() { 
    // append needed elements to the DOM or the shadow DOM 
  } 
} 
customElements.define("my-icon", MyIcon); 
// Usage: <my-icon code="flower"></my-icon> 

1.6.2 Shadow DOM

• https://w3c.github.io/webcomponents/spec/shadow/。
• https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM。

JavaScript

Element.attachShadow(); 

上述的attachShadow方法僅采用了一個屬性為mode的對象作為參數。據此，您可以使用open和closed兩種模式，來創建在作用域樣式和獨立組件上隔離的DOM樹。其中，Open意味著您可以使用在主頁上下文中編寫的JavaScript，去訪問Shadow DOM。而closed則意味著僅使用自定義元素上下文中的Javascript，去訪問Shadow DOM。可見，當您必須隔離CSS時，此法非常實用。

JavaScript

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
class MyCusotomElement extends HTMLElement { 
  constructor() { 
    super(); 
    this.shadow = this.attachShadow({ mode: 'closed' }); // Or open 
  } 
  connectedCallback() { 
    ReactDOM.render(<App />, this.shadow); 
  } 
} 
customElements.define("my-custom-element", MyCusotomElement); 

1.6.3 ES模塊

• https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system。

在此，我們只需要導入、導出JS模塊即可。

1.6.4 HTML模板

• https://html.spec.whatwg.org/multipage/scripting.html#the-template-element/。
• https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element。

使用HTML模板(如下面代碼中的)，您可以創建在加載時未能呈現的HTML片段。當然，您也可以在運行時，使用JavaScript對其進行初始化。

HTML

<div id="example"></div> 
<template id="example-template"> 
  <table> 
    <tr> 
      <td>What is this?</td> 
      <td>My example template.</td> 
    </tr> 
  </table> 
</template>  

JavaScript

// Find our template  
var template = document.querySelector('#example-template'); 
// Find our target element 
var target = document.querySelector('#example'); 
// Clone the content of our template 
var content = document.importNode(template.content, true); 
// Append the template content to our target element 
target.appendChild(content); 

如下面的代碼所示，另一個實用的元素是。它是Web組件技術的一部分，可用作Web組件內的占位符，您可以使用自己的標記來填充它。

HTML

<template id="example-template"> 
  <div class="attributes"> 
    <h4><span>Attributes</span></h4> 
    <slot name="attributes"><p>None</p></slot> 
  </div> 
</template> 
<element-attributes> 
  <span slot="attributes">Attributes from web component.</span>
</element-attributes> 

JavaScript

customElements.define('element-attributes', 
  class extends HTMLElement { 
    constructor() { 
      super(); 
      const template = document 
        .getElementById('example-template') 
        .content; 
      this.attachShadow({ mode: 'open' }) 
        .appendChild(template.cloneNode(true)); 
    } 
  } 

其結果模板為：

具有slot屬性的已定義span元素,將在具有name屬性的slot元素內被呈現，其值與我們在span元素上的slot屬性值相匹配。

2.服務器端編排

• 具有代理請求的服務器路由。
• 注冊所有應用程序。
• 如果有的話，可解決共享依賴項。
• 服務與組合那些來自不同的微前端應用的程序片段。

2.2 引導程序應用

通常，我們可以將服務器端業務流程的方案，稱為Bootstrap應用。由于它們比較復雜，因此我們往往會用到如下兩個典型的方案。

2.2.1 Zalandos解決方案

Project Mosaic9(https://www.mosaic9.org/)。

用戶只需進入其頁面，通過瀏覽器點擊其路由器，以決定是采用API調用、還是布局式調用。對于API調用而言，路由器會將請求代理到所需的API處。而在布局調用中，路由器會調用布局服務，以了解所有可能的布局，進而從不同的端點加載它們。

下圖展示了如何通過微前端工作流程，來創建一個開源項目的完整步驟：

2.2.2 Facebook解決方案

上述Zalando中Tailor.js的靈感，實際上來源于Facebook的BigPipe。由于具有相似之處，我們不做過多的介紹，您可以參閱：https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/，以獲悉其工作原理。

2.3片段組成的可能性

針對服務器端的片段組成，我們可以使用Server side include(SSI)和Edge side include(ESI)，這兩種傳統技術，來輕松地將不同的HTML標記組合為一個。當然，這兩種技術，都需要我們維護一個對應著靜態HTML文件的URL映射。

2.3.1 Server side include(SSI)

• http://www.alticore.eu/wasd_root/doc/env/env_0400.html。
• https://www.owasp.org/index.php/Server-Side_Includes_(SSI)_Injection。
• https://www.w3.org/Jigsaw/Doc/User/SSI.html。
• http://httpd.apache.org/docs/current/howto/ssi.html#basic。
• 是一種簡單的解釋型服務器端腳本語言。
• 得到了Apache和Nginx的支持。

下面是其主HTML文件的代碼：

HTML

<html lang="en">  
  <head> 
    <meta charset="utf-8">
    <title>SSI</title> 
  </head> 
  <body> 
    <!--# include file="$PAGE.html" --> 
  </body> 
</html> 

在Nginx中的配置為：

Java

server { 
  listen 8080; 
  server_name localhost; 
  root /usr/share/nginx/html;
  index index.html; 
  # Turn on the SSI ferature 
  ssi on; 
  # Set the $PAGE variable used inside the main HTML 
  location /browse { 
    set $PAGE 'browse'; 
  } 
  location /profile { 
    set $PAGE 'profile' 
  } 
} 

2.3.2 Edge side include(ESI)

• https://www.w3.org/TR/esi-lang。
• 使用到了小標記(Small markup)語言。
• 目前只是建議，并非標準。
• 由包括Nginx和Varnish等不同的技術或庫，來提供支持。
• 對于NodeJS而言，具有nodei的npm軟件包。

HTML

<html lang="en"> 
    <head> 
      <meta charset="utf-8"> 
       <title>ESI</title> 
     </head> 
     <body> 
      <esi:include src="http://example.com/1.html" alt="http://example.com/2.html" /> 
     </body> 
</html> 

2.3.3自行實現

當然，您也可以在服務器端實現自己的解析器、或某種標記幫助器。幾乎每一個模板庫都可以實現自定義的標簽解析。

結論

您可以根據自己所面對的問題，通過分析，來選擇適合自己的微前端。常見的實現方式有如下兩種：

完全獨立

• 每個團隊都選擇自己的技術棧，且不共享代碼。
• 每個片段都進行自己的API調用。
• 每個視圖都由功能齊全的片段所組成。
• 每個微前端應用都有自己的CI/CD。

戰略合作

• 大家同意技術棧，并共享公共庫。
• API調用流需經過bootstrap應用。
• 共享UI庫。
• 共享CI/CD。

原文標題：Introduction to Micro-Frontend Architecture，作者：Mayur Ingle

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】