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

Web ComponentsとAngular

ponday
December 19, 2018

Web ComponentsとAngular

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

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

ponday

December 19, 2018
Tweet

More Decks by ponday

Other Decks in Programming

Transcript

  1. Web ComponentsとAngular
    ng-japan OnAir #3 / Dec 19th, 2018 ponday (@ponday_dev)

    View Slide

  2. Profile
    - ponday (Honda, Yusuke)
    - 株式会社ベガコーポレーション エンジニア
    - Like : TypeScript / Elixir / Python etc…
    - 日曜フロントエンドエンジニア

    View Slide

  3. View Slide

  4. View Slide

  5. Frontend Conference Fukuoka 2019 ...?

    View Slide

  6. Web Components

    View Slide

  7. Web Components
    - Web標準の技術で、再利用可能な部品を作るAPI
    - いくつかの仕様の総称
    - Custom Elements
    - Shadow DOM
    - ES Modules

    View Slide

  8. Custom Elements
    - 独自のHTMLタグ名を定義するAPI
    - window.customElements.define
    - class構文を用いて定義
    - HTMLElementオブジェクトを継承
    - class構文をトランスパイルしてしまうとエラー
    (adapterを利用して回避可能)

    View Slide

  9. Shadow DOM
    - グローバルから独立したDOMツリー
    - カスタム要素がそれぞれDOMツリーを持つ
    - CSSやJSの影響範囲を限定する
    - Scoped CSS

    View Slide

  10. ES Modules
    - HTML importsの代わりに利用
    - import/export
    -

    View Slide

  11. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API

    View Slide

  12. これから
    DOM API
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    Web Components

    View Slide

  13. https://www.webcomponents.org/

    View Slide

  14. Angular Elements

    View Slide

  15. Angular Elements
    - Angularを使ってCustom Elementsを作る
    - createCustomElement
    - 要素の登録は標準API (window.customElement.define)を利用
    - v6の頃から提供

    View Slide

  16. ng new

    View Slide

  17. ng add @angular/elements

    View Slide

  18. ソース修正①:AppModule
    - bootstrap: [...] を削除
    - entryComponents: [...] を追加
    - InjectorオブジェクトをDI
    - ngDoBootstrapでcreateCustomElement

    View Slide

  19. View Slide

  20. ソース修正②:AppComponent
    - selector: ‘...’ を削除

    View Slide

  21. View Slide

  22. ng build --prod

    View Slide

  23. レンダリング結果

    View Slide

  24. レンダリング結果

    View Slide

  25. スタイリング

    View Slide

  26. ?
    スタイリング

    View Slide

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

    View Slide

  28. encapsulation: ViewEncapsulation.ShadowDom

    View Slide

  29. View Slide

  30. レンダリング結果

    View Slide

  31. レンダリング結果
    Shadow DOMが有効に

    View Slide

  32. レンダリング結果
    エミュレーションではなく、
    Shadow DOMによる本物のScoped CSS

    View Slide

  33. Angular Elementsのメリット
    - 既存のAngularアプリがほぼそのまま使える
    - Angularにとらわれない適用範囲
    - React/Vue.jsとの共存
    - 静的なサイトへの組み込みも可能
    - 汎用的な部品としてのAngularアプリケーション

    View Slide

  34. Angular Elementsの現状の課題
    - バンドルサイズが大きい
    - シンプルな例でも200KB超え(productionビルド時)
    - Angularのランタイムが丸々バンドルされてしまうため

    View Slide

  35. ng-conf 2018 Keynote

    View Slide

  36. Ivy
    - Angularの新しいレンダリングエンジン
    - Smaller
    - Faster
    - Simpler
    - バンドルサイズの削減が期待できる

    View Slide

  37. Angular Elementsの使い所
    - 既存のAngular資産を別プロダクトに流用したい
    - そのプロダクトがAngularアプリでなくても使える
    - 利用者はAngularの動作を意識しなくても良い
    - リッチな機能を持ったコンポーネントが作りたい
    - 標準のCustom Elementsでリッチなものを作るのは少しつらい
    - Polymerという選択肢もある(技術スタック次第?)

    View Slide

  38. まとめ
    - Web Componentsは再利用可能な部品を作るAPI
    - Angular ElementsでAngularを使って
    Custom Elementsが作れる
    - 現状バンドルサイズは課題
    - Angular Elements + Ivyに期待

    View Slide