Web ComponentsとAngular

ng-japan OnAir（2018/12/19）にYouTubeライブで発表した資料です。

↓配信のアーカイブはコチラ
https://www.youtube.com/watch?v=ibbwzBdbQSQ

Transcript

1. Web ComponentsとAngular ng-japan OnAir #3 / Dec 19th, 2018 ponday (@ponday_dev)
2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like : TypeScript / Elixir / Python etc… - 日曜フロントエンドエンジニア
5. Frontend Conference Fukuoka 2019 ...?
6. Web Components
7. Web Components - Web標準の技術で、再利用可能な部品を作るAPI - いくつかの仕様の総称 - Custom Elements - Shadow DOM - ES Modules
8. Custom Elements - 独自のHTMLタグ名を定義するAPI - window.customElements.define - class構文を用いて定義 - HTMLElementオブジェクトを継承 - class構文をトランスパイルしてしまうとエラー （adapterを利用して回避可能）
9. Shadow DOM - グローバルから独立したDOMツリー - カスタム要素がそれぞれDOMツリーを持つ - CSSやJSの影響範囲を限定する - Scoped CSS
10. ES Modules - HTML importsの代わりに利用 - import/export - <script type="module" src="..."></script>
11. これまで Component Component Component State Management Routing State Management Routing State Management Routing DOM API
12. これから DOM API Component Component Component State Management Routing State Management Routing State Management Routing Web Components
13. https://www.webcomponents.org/
14. Angular Elements
15. Angular Elements - Angularを使ってCustom Elementsを作る - createCustomElement - 要素の登録は標準API (window.customElement.define)を利用 - v6の頃から提供
16. ng new <app_name>
17. ng add @angular/elements
18. ソース修正①：AppModule - bootstrap: [...] を削除 - entryComponents: [...] を追加 - InjectorオブジェクトをDI - ngDoBootstrapでcreateCustomElement
20. ソース修正②：AppComponent - selector: ‘...’ を削除
22. ng build --prod
23. レンダリング結果
24. レンダリング結果
25. スタイリング
26. ? スタイリング
27. Scoped CSS - Angularのデフォルトはエミュレーション - コンポーネントに自動で_nghost, _ngcontentを付与 - Angular Elementsにおいてもデフォルトはエミュレーション - Shadow DOMに切り替えも可能
28. encapsulation: ViewEncapsulation.ShadowDom
30. レンダリング結果
31. レンダリング結果 Shadow DOMが有効に
32. レンダリング結果 エミュレーションではなく、 Shadow DOMによる本物のScoped CSS
33. Angular Elementsのメリット - 既存のAngularアプリがほぼそのまま使える - Angularにとらわれない適用範囲 - React/Vue.jsとの共存 - 静的なサイトへの組み込みも可能 - 汎用的な部品としてのAngularアプリケーション
34. Angular Elementsの現状の課題 - バンドルサイズが大きい - シンプルな例でも200KB超え（productionビルド時） - Angularのランタイムが丸々バンドルされてしまうため
35. ng-conf 2018 Keynote
36. Ivy - Angularの新しいレンダリングエンジン - Smaller - Faster - Simpler - バンドルサイズの削減が期待できる
37. Angular Elementsの使い所 - 既存のAngular資産を別プロダクトに流用したい - そのプロダクトがAngularアプリでなくても使える - 利用者はAngularの動作を意識しなくても良い - リッチな機能を持ったコンポーネントが作りたい - 標準のCustom Elementsでリッチなものを作るのは少しつらい - Polymerという選択肢もある（技術スタック次第？）
38. まとめ - Web Componentsは再利用可能な部品を作るAPI - Angular ElementsでAngularを使って Custom Elementsが作れる - 現状バンドルサイズは課題 - Angular Elements + Ivyに期待