Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web ComponentsとAngular

52604f94a6d2172df2cad5ab45189940?s=47 ponday
December 19, 2018

Web ComponentsとAngular

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

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

52604f94a6d2172df2cad5ab45189940?s=128

ponday

December 19, 2018
Tweet

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… - 日曜フロントエンドエンジニア
  3. None
  4. None
  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
  19. None
  20. ソース修正②:AppComponent - selector: ‘...’ を削除

  21. None
  22. ng build --prod

  23. レンダリング結果

  24. レンダリング結果

  25. スタイリング

  26. ? スタイリング

  27. Scoped CSS - Angularのデフォルトはエミュレーション - コンポーネントに自動で_nghost, _ngcontentを付与 - Angular Elementsにおいてもデフォルトはエミュレーション

    - Shadow DOMに切り替えも可能
  28. encapsulation: ViewEncapsulation.ShadowDom

  29. None
  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に期待