Angular Elementsで作るCustom Element

俺の話を聞け！！LT大会 #9（2018/05/24）発表資料です。

Transcript

1. Angular Elementsで作るCustom Element 俺の話を聞け！！LT大会 #9 / May 24, 2018 ponday(@ponday_dev)
2. Profile Honda, Yusuke (@ponday_dev) 株式会社ベガコーポレーション エンジニア ng-fukuoka Like : TypeScript, RxJS, Angular, Python, Kotlin 元々サーバサイド 趣味フロントエンドエンジニア 最近の仕事では画像処理とか機械学習とか お仕事あればお声掛けください！
3. Custom Elements ?
4. Custom Elements - WebComponentsの仕様の一つ - 自分で独自にHTMLタグが作れる - 以前発表した資料があるので説明はそちらに
5. （ご参考） WebComponentsの現在地 https://speakerdeck.com/honda/web-componentsfalsexian-zai-di
6. @angular/elements - Angularを利用してCustom Elementが作れる - コンポーネントではなく、AngularアプリをそのままCustom Element化
7. 準備 ここまで通常のAngularプロジェクトと同じ
8. 準備
9. ここからソースに手が入る
10. ソースを修正① AppModuleのデコレータ - 利用しないコンポーネントを削除 - bootstrap: [ … ]の表記を削除 - entryComponentsを追加し、利用したいコンポーネントを記述
12. ソースを修正② AppModule - @angular/elementsからcreateCustomElementをインポート - Injector（@angular/core）をDI - ngDoBootstrapメソッドを作成 - Custom Elementを生成して登録
16. ビルド ng build --prod --output-hashing=none 通常のビルドとコマンドは同じ ※ --output-hashingは必須ではない
17. ファイルを統合 - このままでも以下のファイルがあれば動く - main.js - polyfills.js - scripts.js - runtime.js - 複数ファイルに分かれていると面倒なのでまとめる cat dist/elements-demo/{runtime,polyfills,scripts,main}.js > element.js
18. 使ってみる - 生成したelement.jsを読み込み - customElement.defineで定義したタグ名でカスタムタグを配置 する
20. 実行
21. 良い点 - 普通のAngularアプリがほぼそのまま動かせる - 修正の大半はモジュールに対してなので、既存アプリも変換できるかも - Scoped CSSが使える - WebComponentsのみだとShadowDOM がサポートされていないブラウザでは Scoped CSSできない - React, Vueとの共存も可能
22. 微妙な点 - 容量が（かなり）大きい - サンプルで200KBくらい - 複数個のCustom Elementを読み込んでしまうと致命的かも - Ivyを使って容量削減に期待 - encapsulation: ViewEncapsulation.Nativeが相変わらず Shadow DOM v0っぽい（？） - Safariで動かなかった
23. Thank you !!