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

1. 按一下以編輯母片標題樣式
按一下以編輯母片子標題樣式
我是［黃保翕］
Will 保哥
多奇數位創意有限公司 技術總監
https://blog.miniasp.com
Find me at
https://www.facebook.com/will.fans

2. 按一下以編輯母片標題樣式
按一下以編輯母片子標題樣式
Micro-frontend with
Angular 10
Will 保哥

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. 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. 微前端 (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. 將頁面分割為不同的 Web 元件
https://www.toptal.com/front-end/micro-frontends-strengths-benefits

7. 套用微前端架構的 HTML 結構範例
可動態載入外部 JS 檔案
自訂元素 (Custom Elements)
Custom Elements (V1)

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. 初始化專案
• 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. 移除 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. 移除 AppModule 的 bootstrap 屬性
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: []
, bootstrap: [AppComponent]
})
export class AppModule { … }

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. 關於 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. 建置專案
• 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. 部署 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. 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. 非 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. 非 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. 從 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. 按一下以編輯母片標題樣式
按一下以編輯母片子標題樣式
歡迎將
講者照片
裁成圓形
置於此處
我是［黃保翕］
Will 保哥
多奇數位創意有限公司 技術總監
https://blog.miniasp.com
Find me at
https://www.facebook.com/will.fans