Angular Elementsで作るCustom Element

Slide 1

Slide 1 text

Angular Elementsで作るCustom Element 俺の話を聞け！！LT大会 #9 / May 24, 2018 ponday(@ponday_dev)

Slide 2

Slide 2 text

Profile Honda, Yusuke (@ponday_dev) 株式会社ベガコーポレーションエンジニア ng-fukuoka Like : TypeScript, RxJS, Angular, Python, Kotlin 元々サーバサイド趣味フロントエンドエンジニア最近の仕事では画像処理とか機械学習とかお仕事あればお声掛けください！

Slide 3

Slide 3 text

Custom Elements ?

Slide 4

Slide 4 text

Custom Elements - WebComponentsの仕様の一つ - 自分で独自にHTMLタグが作れる - 以前発表した資料があるので説明はそちらに

Slide 5

Slide 5 text

（ご参考） WebComponentsの現在地 https://speakerdeck.com/honda/web-componentsfalsexian-zai-di

Slide 6

Slide 6 text

@angular/elements - Angularを利用してCustom Elementが作れる - コンポーネントではなく、AngularアプリをそのままCustom Element化

Slide 7

Slide 7 text

準備ここまで通常のAngularプロジェクトと同じ

Slide 8

Slide 8 text

準備

Slide 9

Slide 9 text

ここからソースに手が入る

Slide 10

Slide 10 text

ソースを修正① AppModuleのデコレータ - 利用しないコンポーネントを削除 - bootstrap: [ … ]の表記を削除 - entryComponentsを追加し、利用したいコンポーネントを記述

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ソースを修正② AppModule - @angular/elementsからcreateCustomElementをインポート - Injector（@angular/core）をDI - ngDoBootstrapメソッドを作成 - Custom Elementを生成して登録

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ビルド ng build --prod --output-hashing=none 通常のビルドとコマンドは同じ ※ --output-hashingは必須ではない

Slide 17

Slide 17 text

ファイルを統合 - このままでも以下のファイルがあれば動く - main.js - polyfills.js - scripts.js - runtime.js - 複数ファイルに分かれていると面倒なのでまとめる cat dist/elements-demo/{runtime,polyfills,scripts,main}.js > element.js

Slide 18

Slide 18 text

使ってみる - 生成したelement.jsを読み込み - customElement.defineで定義したタグ名でカスタムタグを配置する

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

実行

Slide 21

Slide 21 text

良い点 - 普通のAngularアプリがほぼそのまま動かせる - 修正の大半はモジュールに対してなので、既存アプリも変換できるかも - Scoped CSSが使える - WebComponentsのみだとShadowDOM がサポートされていないブラウザでは Scoped CSSできない - React, Vueとの共存も可能

Slide 22

Slide 22 text

微妙な点 - 容量が（かなり）大きい - サンプルで200KBくらい - 複数個のCustom Elementを読み込んでしまうと致命的かも - Ivyを使って容量削減に期待 - encapsulation: ViewEncapsulation.Nativeが相変わらず Shadow DOM v0っぽい（？） - Safariで動かなかった

Slide 23

Slide 23 text

Thank you !!