Web Components の期待と実情、未来 — 2年のライブラリ開発経験から

ng-japan 2017 (2017/06/17) での発表スライドです。
[イベントURL: https://ngjapan.connpass.com/event/55210/ ]

Transcript

1. 2017/06/17(⼟) ng-japan 2017
   8FC$PNQPOFOUTͷظ଴ͱ࣮৘ɺະདྷ
   ŠŠ ೥ͷϥΠϒϥϦ։ൃܦݧ͔Β
   ຢ઒ ঘथ !O@NBUBHBXB
   
   

   View Slide

2. ࣗݾ঺հ
   •⼜川 尚樹 (@n_matagawa)
   • アシアル株式会社（2016年4⽉〜）
   • Web エンジニア 2年⽬
   •Onsen UI 2 （2015年10⽉〜）
   • 純 Web Components 製の UI ライブラリ
   • AngularJS, Angular, React, Vue に対応
   • https://onsen.io/
   

   View Slide

3. σϞʢ0OTFO 6*ͷ঺հʣ
   https://tutorial.onsen.io/
   

   View Slide

4. ͜ͷൃදͷ໨ඪ
   •Web Components について知ってもらう!!!
   • 「今後も Angular を使って⼤丈夫なのか？」
   • 「また Web に⼀波くるのか？」
   • ……といった疑問を解消
   

   View Slide

5. ͳͥ "OHVMBSͷ৔Ͱ 8FC$PNQPOFOUTΛʁ
   •Angular と Web Components は
   無関係ではない!!!
   • フレームワークと Web Components は
   切っても切り離せない関係
   

   View Slide

6. ୈ෦
   8FC$PNQPOFOUTͷޫ
   

   View Slide

7. 8FC$PNQPOFOUTͱ͸
   (1) ブラウザの機能
   • WebGL, Web Audio API, ... に並ぶもの
   (2) 上記を使って作られたコンポーネント
   

   View Slide

8. ͳͥ 8FC$PNQPOFOUT͕࿩୊ʹͳ͔ͬͨʁ
   • メジャーブラウザに搭載され始めたから
   • デフォルトで使えるようになった
   • 特に、2017年3⽉に iOS 10.3 に搭載されたのが⼤きい
   

   View Slide

9. ͳͥ 8FC$PNQPOFOUT͕࿩୊ʹͳ͔ͬͨʁ
   http://caniuse.com/#feat=custom-elementsv1
   

   View Slide

10. ͳͥ 8FC$PNQPOFOUT͕࿩୊ʹͳ͔ͬͨʁ
    • メジャーブラウザに搭載され始めたから
    • デフォルトで使えるようになった
    • 特に、2017年3⽉に iOS 10.3 に搭載されたのが⼤きい
    • フレームワーク戦争が収束して話題が枯渇したから
    • 各フレームワークを掘り下げる流れになった
    • そこに Web Components が割って⼊ってきた
    

    View Slide

11. ϒϥ΢βͷػೳͱͯ͠ͷ 8FC$PNQPOFOUT
    •複数の機能の集まり
    • しかし、重要な機能は2つだけ
    

    View Slide

12. ॏཁػೳͦͷ
    特定の名前を持つ要素 が
    ⽣成された時、
    DOM ツリーに追加された時、…に
    指定した処理を実⾏する機能
    

    View Slide

13. σϞʢॏཁػೳͦͷ$VTUPN&MFNFOUTʣ
    

    View Slide

14. ॏཁػೳͦͷ
    DOM ツリーの⼀部分に対して
    個別の DOM, CSS スコープを与える機能（＋α）
    

    View Slide

15. σϞʢॏཁػೳͦͷ4IBEPX%0.ʣ
    

    View Slide

16. ͭͷॏཁػೳΛ࢖ͬͯԿ͕Ͱ͖Δ͔ʁ
    •ブラウザが元々持っている
    , , 等と同じ仕組みで
    , を動かすことができる
    •HTML5 に新しい機能が増えたかのような感覚で
    コンポーネントを使うことができる
    

    View Slide

17. 8FC$PNQPOFOUT͕ඳ͘ະདྷ
    • 再利⽤可能なコンポーネントを
    ブラウザの機能だけで実装
    • 特定のフレームワークに依存しないコンポーネントが
    実装・シェア・利⽤される世界
    

    View Slide

18. ୈ෦
    8FC$PNQPOFOUTͷҋ
    

    View Slide

19. ϑϨʔϜϫʔΫϢʔβʹͱͬͯ
    ੜͷ 8FC$PNQPOFOUT͸ػೳෆ଍
    × データバインディング
    × Input/Output
    × DI
    × パイプ
    × モジュール
    •あらゆるものが無い!!
    • ⽣の Web Components は使えたものではない
    × 繰り返しレンダリング
    × アニメーション
    × …
    

    View Slide

20. ੜͷ 8FC$PNQPOFOUTΛ XSBQͯ͠࢖͍΍͘͢͢Δ
    (1) フレームワークで機能を補填
    • X-Tag （2012年〜） Vue チック
    • Polymer （2013年〜） 独⾃路線
    • Skate （2014年〜） React チック
    • slim.js （2016年〜） Angular チック
    

    View Slide

21. ྫʢTMJNKTʣ
    

    View Slide

22. ੜͷ 8FC$PNQPOFOUTΛ XSBQͯ͠࢖͍΍͘͢͢Δ
    (1) フレームワークで機能を補填
    • X-Tag （2012年〜） Vue チック
    • Polymer （2013年〜） 独⾃路線
    • Skate （2014年〜） React チック
    • slim.js （2016年〜） Angular チック
    • ランタイムライブラリを読み込む必要がある
    • ブラウザの機能以外（⾮標準）に頼ることになる
    

    View Slide

23. ੜͷ 8FC$PNQPOFOUTΛ XSBQͯ͠࢖͍΍͘͢͢Δ
    (2) 別の形式で書いて⽣の Web Components に変換
    • （2017/06 現在、そういったライブラリは無し）
    • ランタイムライブラリは不要
    • しかし⼿元にビルド環境（⾮標準）を⽤意することになる
    

    View Slide

24. ଞਓ͕ 8FC$PNQPOFOUTͰॻ͍ͨίϯϙʔωϯτΛ
    ࢖͏ͷ΋؆୯Ͱ͸ͳ͍
    • ブラウザ標準の はそのままでは使いにくい
    • なので @angular/forms が作られた
    • それと同じことが にも起こる
    • @angular/forms のようなものが提供されていないと使いにくい
    • Onsen UI 2 では ngx-onsenui を作る⽻⽬になった
    

    View Slide

25. ୈ෦
    ͡Ό͋ɺԿͷ໾ʹཱͭͷʁ
    

    View Slide

26. ඇϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ
    8FC$PNQPOFOUT
    •世の中、
    フレームワークを使っていない⼈の⽅が多い
    • データバインディングがない、
    Input/Output がない、そんなのは苦痛ではない
    • ⾮フレームワークユーザにとっての魅⼒:
    • ライブラリなしですぐに使える
    • コピペするだけですぐに使える
    

    View Slide

27. ϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ
    8FC$PNQPOFOUT
    •⽣の Web Components（＋その wrapper）に
    フレームワークユーザの求めているものは無い
    • Web Components は
    あくまでフレームワークに依存しない・再利⽤可能な
    コンポーネントを作るためのもの
    •Q. どうすれば良いか？
    • A. 引き続きフレームワークを使いましょう!!
    

    View Slide

28. ϥΠϒϥϦఏڙऀʹͱͬͯͷ
    8FC$PNQPOFOUT
    • 複数のフレームワークに
    ライブラリを提供できる最⾼のツール
    • Web Components でコア（共通部分）を実装してしまえば、
    あとは @angular/forms のようなものを⽣やすだけ
    • 今後この設計を持つライブラリは増えていく
    Web Components 層
    angular-
    onsenui
    ngx-
    onsenui
    react-
    onsenui
    vue-
    onsenui
    ember-
    onsenui
    aurelia-
    onsenui
    フレームワーク 層
    (onsenui)
    

    View Slide

29. ϑϨʔϜϫʔΫఏڙऀʹͱͬͯͷ
    8FC$PNQPOFOUT
    •フレームワークの構築に使える機能が揃っている
    •⾼速化に利⽤できる
    • Web Components は速い
    • Angular は
    既に Shadow DOM を使った⾼速化を実装済み
    • デフォルトでは無効
    

    View Slide

30. ࠷ޙʹ
    

    View Slide

31. 8FC$PNQPOFOUTΛୟ͘ʜʜͦͷલʹ
    •関係者は今も Web Components の未来に向けて
    動いている
    •フレームワークの進化は速すぎた
    • Web Components を置き去りにした
    •これからその溝が埋まっていく
    

    View Slide

32. Thank you for listening!
    Web Components の未来に
    乞うご期待!!
    

    View Slide