Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Micro-frontends with Angular 10 (Modern Web 2020)

889 vues

Publié le

前端框架的複雜度與多元性,經常為團隊帶來許多難以掌握的變數,不同的框架、不同的寫作風格、不同的開發架構,都大大的增加技術債的風險。前端世界唯一的不變,就是不斷的改變,為了能夠以簡馭繁,我們大量擁抱元件化技術,降低日益增加的複雜度。本次演說將分享近期最夯的「微前端」技術,並以 Angular 10 為範例,告訴你如何為組織打造一個微前端框架。

Publié dans : Technologie
  • Soyez le premier à commenter

Micro-frontends with Angular 10 (Modern Web 2020)

  1. 1. 按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 我是[黃保翕] Will 保哥 多奇數位創意有限公司 技術總監 https://blog.miniasp.com Find me at https://www.facebook.com/will.fans
  2. 2. 按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 Micro-frontend with Angular 10 Will 保哥
  3. 3. Micro-frontends with Angular 10 使用 Angular 10 實現微前端 Implementing Micro-frontends with Angular 10 將元件整合進不同的前端框架 Integrate Angular 10 components into other frameworks 何謂微前端 What is Micro-frontends?
  4. 4. Micro-frontends with Angular 10 使用 Angular 10 實現微前端 Implementing Micro-frontends with Angular 10 將元件整合進不同的前端框架Integrate Angular 10 components into other frameworks 何謂微前端 What is Micro-frontends?
  5. 5. 微前端 (Micro Frontends) • 最早出現於 2016 年 ThoughtWorks 的技術雷達 • 借用 微服務架構 (Microservices) 許多概念與作法 • 有效解構大型前端架構下的各種相依、協作、整合等問題 • Be Technology Agnostic(不限定各團隊所採用的前端技術) • Isolate Team Code(不同的團隊代碼必須彼此隔離以降低相依性) • Establish Team Prefixes(建立團隊之間的命名規則以降低資源衝突) • Favor Native Browser Features over Custom APIs(使用原生 API 為 主) • Build a Resilient Site(建置有高度彈性、遇到錯誤可迅速回復的站台)
  6. 6. 將頁面分割為不同的 Web 元件 https://www.toptal.com/front-end/micro-frontends-strengths-benefits
  7. 7. 套用微前端架構的 HTML 結構範例 可動態載入外部 JS 檔案 自訂元素 (Custom Elements) Custom Elements (V1)
  8. 8. Micro-frontends with Angular 10 使用 Angular 10 實現微前端 Implementing Micro-frontends with Angular 10 將元件整合進不同的前端框架Integrate Angular 10 components into other frameworks 何謂微前端 What is Micro-frontends?
  9. 9. 初始化專案 • ng new --create-application=false mfdemo1 && cd mfdemo1 • ng g application mfdemo1 --routing --style=css • ng g application mf-element1 --routing=false --style=css • ng add @angular/elements --project=mf-element1 • ng add ngx-build-plus --project=mf-element1
  10. 10. 移除 AppComponent 的 selector 屬性 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'mf-element1'; }
  11. 11. 移除 AppModule 的 bootstrap 屬性 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [] , bootstrap: [AppComponent] }) export class AppModule { … }
  12. 12. 加入 AppModule 的 ngDoBootstrap() import { Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; @NgModule(…) export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap(): void { const customElement = createCustomElement(AppComponent, { injector: this.injector }); customElements.define('mf-element1', customElement); } }
  13. 13. 關於 Polyfills 設定 • 使用於 non-Angular 網頁環境需額外載入 zone.js 才能執行 • node_modules/zone.js/dist/zone.min.js • 針對不支援 Custom Elements (V1) 的瀏覽器提供 Polyfills (IE11) • 在執行 ng add @angular/elements 的時候會自動加入 document-register-element 套件 • node_modules/document-register-element/build/document-register-element.js • 其他可能需要的 Polyfills 套件 • ng g ngx-build-plus:wc-polyfill --project mf-element1 • npm install core-js@2
  14. 14. 建置專案 • ng build --project=mfdemo1 --prod --output-hashing=none • ng build --project=mf-element1 --prod --output-hashing=none --single-bundle mfdemo1 mf-element1 說明 3rdpartylicenses.txt 3rdpartylicenses.txt 所有套件的授權聲明 favicon.ico favicon.ico 網站的 Favicon 圖檔 index.html index.html 網站預設首頁 main.js main.js 主要程式 runtime.js 內容被合併至 main.js 執行 Angular 所需的共用程式 polyfills.js polyfills.js 支援舊版瀏覽器所需的 Polyfills styles.css styles.css 全站共用的 CSS 內容
  15. 15. 部署 Angular Elements 與 Polyfills • 複製主程式與 Polyfills • cp dist/mf-element1/main.js dist/mfdemo1/mf-element1.js • cp dist/mf-element1/polyfills.js dist/mfdemo1/mf-polyfills.js • 僅複製必要的 zone.js 與 document-register-element.js • cp node_modules/zone.js/dist/zone.min.js dist/mf-element1/zone.min.js • cp node_modules/document-register-element/build/document-register-element.js dist/mf- element1/document-register-element.js • 注意事項:請不要在 main.ts 匯入 zone.js • import 'zone.js/dist/zone'; • Configuring CommonJS dependencies
  16. 16. Micro-frontends with Angular 10 使用 Angular 10 實現微前端 Implementing Micro-frontends with Angular 10 將元件整合進不同的前端框架Integrate Angular 10 components into other frameworks 何謂微前端 What is Micro-frontends?
  17. 17. 非 Angular 網頁嵌入 Angular Elements <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mfdemo1</title> </head> <body> <mf-element1></mf-element1> <script src="mf-polyfills.js" defer></script> <script src="mf-element1.js" defer></script> </body> </html>
  18. 18. 非 Angular 網頁嵌入 Angular Elements <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Mfdemo1</title> </head> <body> <mf-element1></mf-element1> <script src="zone.min.js" defer></script> <script src="mf-element1.js" defer></script> </body> </html>
  19. 19. 從 Angular 載入 Angular Elements • 安裝 Angular Extensions Elements 套件 • npm i @angular-extensions/elements • 匯入 LazyElementsModule 至 AppModule 的 imports 屬性 • import { LazyElementsModule } from '@angular-extensions/elements'; • 加入 CUSTOM_ELEMENTS_SCHEMA 至 AppModule 的 schemas 屬性 • schemas: [CUSTOM_ELEMENTS_SCHEMA] • 使用 *axLazyElement 結構型指令 • <mf-element1 *axLazyElement="'/mf-element1.js'"></mf-element1> • The Best Way To Lazy Load Angular Elements | by Tomas Trajan • Angular Elements Demo
  20. 20. 按一下以編輯母片標題樣式 按一下以編輯母片子標題樣式 歡迎將 講者照片 裁成圓形 置於此處 我是[黃保翕] Will 保哥 多奇數位創意有限公司 技術總監 https://blog.miniasp.com Find me at https://www.facebook.com/will.fans

×