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)
   

   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