成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

講真！開發者要了解的微前端架構

譯文
作者：陳峻編譯
開發 架構
在本文中，我們將討論微前端體系結構背后的一些基礎知識，以幫助您更好管理開發與應用。

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

講真！開發者要了解的微前端架構

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

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

什么是微前端

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

使用微前端的場景：

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

編排(Orchestration)

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

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

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

JavaScript

  1. { 
  2.   "name": "@super-app/container", 
  3.   "version": "1.0.0", 
  4.   "description": "My super app", 
  5.   "dependencies": { 
  6.    "@super-app/products-list": "2.0.0", 
  7.    "@super-app/header": "4.5.2", 
  8.    "@super-app/order": "1.0.0" 
  9.   } 
  10. } 

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

1.客戶端編排

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

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

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

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

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

1.1路由

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

  1. class MyIcon extends HTMLElement { 
  2.   constructor() { 
  3.     super(); 
  4.     this._iconCode = null; 
  5.   } 
  6.  
  7.  
  8.   static get observedAttributes() { 
  9.     return ["code"]; 
  10.   } 
  11.   attributeChangedCallback(name, oldValue, newValue) { 
  12.     // name will always be "code" due to observedAttributes 
  13.     this._iconCode = newValue; 
  14.     this._render(); 
  15.   } 
  16.   connectedCallback() { 
  17.     this._render(); 
  18.   } 
  19.   get code() { 
  20.     return this._iconCode; 
  21.   } 
  22.   set code(value) { 
  23.     this.setAttribute("code", value); 
  24.   } 
  25.   _render() { 
  26.     // append needed elements to the DOM or the shadow DOM 
  27.   } 
  28. } 
  29. customElements.define("my-icon", MyIcon); 
  30. // 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

  1. Element.attachShadow(); 

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

JavaScript

  1. import React from 'react'; 
  2. import ReactDOM from 'react-dom'; 
  3. import App from './App'; 
  4. class MyCusotomElement extends HTMLElement { 
  5.   constructor() { 
  6.     super(); 
  7.     this.shadow = this.attachShadow({ mode: 'closed' }); // Or open 
  8.   } 
  9.   connectedCallback() { 
  10.     ReactDOM.render(<App />, this.shadow); 
  11.   } 
  12. } 
  13. 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

  1. <div id="example"></div> 
  2. <template id="example-template"> 
  3.   <table> 
  4.     <tr> 
  5.       <td>What is this?</td> 
  6.       <td>My example template.</td> 
  7.     </tr> 
  8.   </table> 
  9. </template>  

JavaScript

  1. // Find our template  
  2. var template = document.querySelector('#example-template'); 
  3. // Find our target element 
  4. var target = document.querySelector('#example'); 
  5. // Clone the content of our template 
  6. var content = document.importNode(template.content, true); 
  7. // Append the template content to our target element 
  8. target.appendChild(content); 

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

HTML

  1. <template id="example-template"> 
  2.   <div class="attributes"> 
  3.     <h4><span>Attributes</span></h4> 
  4.     <slot name="attributes"><p>None</p></slot> 
  5.   </div> 
  6. </template> 
  7. <element-attributes> 
  8.   <span slot="attributes">Attributes from web component.</span>
  9. </element-attributes> 

JavaScript

  1. customElements.define('element-attributes', 
  2.   class extends HTMLElement { 
  3.     constructor() { 
  4.       super(); 
  5.       const template = document 
  6.         .getElementById('example-template') 
  7.         .content; 
  8.       this.attachShadow({ mode: 'open' }) 
  9.         .appendChild(template.cloneNode(true)); 
  10.     } 
  11.   } 

其結果模板為：

具有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

  1. <html lang="en">  
  2.   <head> 
  3.     <meta charset="utf-8">
  4.     <title>SSI</title> 
  5.   </head> 
  6.   <body> 
  7.     <!--# include file="$PAGE.html" --> 
  8.   </body> 
  9. </html> 

在Nginx中的配置為：

Java

  1. server { 
  2.   listen 8080; 
  3.   server_name localhost; 
  4.   root /usr/share/nginx/html;
  5.   index index.html; 
  6.   # Turn on the SSI ferature 
  7.   ssi on; 
  8.   # Set the $PAGE variable used inside the main HTML 
  9.   location /browse { 
  10.     set $PAGE 'browse'; 
  11.   } 
  12.   location /profile { 
  13.     set $PAGE 'profile' 
  14.   } 
  15. } 

2.3.2 Edge side include(ESI)

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

HTML

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

2.3.3自行實現

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

結論

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

完全獨立

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

戰略合作

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

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

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

 

責任編輯：龐桂玉 來源： 51CTO
微服務前端架構
相關推薦

2016-12-26 17:53:05

Java開發者編程語言

2017-02-05 16:00:35

Java編程語言

2017-01-15 17:48:04

Java開發者編程語言

2017-06-26 15:32:59

前端編譯原理語言知識

2013-04-19 09:23:34

2013開發者開發趨勢和技能

2021-05-10 10:01:04

JavaScript開發技巧

2011-09-20 09:27:50

Web

2020-03-04 11:20:22

DSL開發領域特定語言

2016-08-05 16:28:05

javascripthtml前端

2018-06-15 08:43:33

Java堆外內存

2012-02-06 09:14:24

2015-08-11 08:41:58

游戲數據游戲開發

2013-07-10 11:11:05

PythonGo語言

2020-12-09 09:30:57

前端開發技術

2015-02-11 14:53:58

微信SDK

2017-10-29 06:50:30

前端開發CSSWeb

2014-12-15 10:25:21

移動開發像素設計

2019-03-12 10:38:18

前端開發Nginx

2010-08-12 14:13:01

Flex開發者

2011-08-01 16:39:21

Xcode 目錄結構
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 欧美一区二 | www.婷婷亚洲基地 | 成人精品在线观看 | 国产乡下妇女做爰 | 亚洲一区二区三区视频 | 日韩欧美国产一区二区三区 | 又黄又爽的网站 | 久久久久黑人 | 亚洲精品99 | 在线观看国产视频 | 精品亚洲一区二区三区四区五区 | 欧美亚洲在线视频 | 91亚洲国产成人久久精品网站 | 日本欧美国产在线 | 成人影院在线视频 | h视频在线观看免费 | 最新中文字幕第一页视频 | 亚洲人成网站777色婷婷 | 国产精品久久午夜夜伦鲁鲁 | 99在线观看视频 | 国产精品久久久久久久久久尿 | 欧美自拍第一页 | 国产精品a一区二区三区网址 | 久久精品国产99国产精品亚洲 | 亚洲精品一二三区 | 日韩欧美在线观看视频网站 | 日韩美女爱爱 | 日韩av在线不卡 | 欧美一区二区三区四区视频 | 国产精品久久久久久婷婷天堂 | 亚洲免费在线视频 | 日日摸日日碰夜夜爽2015电影 | 韩日一区二区 | 国产精品久久久久久久久久免费看 | av三级 | 国产成人精品一区二区 | 国产传媒在线观看 | 逼逼网 | 国产在线精品一区二区 | 国产一区二区三区高清 | 国产精品高潮呻吟 |