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

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

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

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

Naoki Matagawa

June 17, 2017
Tweet

More Decks by Naoki Matagawa

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ •⼜川 尚樹 (@n_matagawa) • アシアル株式会社(2016年4⽉〜) • Web エンジニア 2年⽬

    •Onsen UI 2 (2015年10⽉〜) • 純 Web Components 製の UI ライブラリ • AngularJS, Angular, React, Vue に対応 • https://onsen.io/
  2. ͳͥ "OHVMBSͷ৔Ͱ 8FC$PNQPOFOUTΛʁ •Angular と Web Components は 無関係ではない!!! •

    フレームワークと Web Components は 切っても切り離せない関係
  3. ͳͥ 8FC$PNQPOFOUT͕࿩୊ʹͳ͔ͬͨʁ • メジャーブラウザに搭載され始めたから • デフォルトで使えるようになった • 特に、2017年3⽉に iOS 10.3

    に搭載されたのが⼤きい • フレームワーク戦争が収束して話題が枯渇したから • 各フレームワークを掘り下げる流れになった • そこに Web Components が割って⼊ってきた
  4. ϑϨʔϜϫʔΫϢʔβʹͱͬͯ ੜͷ 8FC$PNQPOFOUT͸ػೳෆ଍ × データバインディング × Input/Output × DI ×

    パイプ × モジュール •あらゆるものが無い!! • ⽣の Web Components は使えたものではない × 繰り返しレンダリング × アニメーション × …
  5. ੜͷ 8FC$PNQPOFOUTΛ XSBQͯ͠࢖͍΍͘͢͢Δ (1) フレームワークで機能を補填 • X-Tag (2012年〜) Vue チック

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

    • Polymer (2013年〜) 独⾃路線 • Skate (2014年〜) React チック • slim.js (2016年〜) Angular チック • ランタイムライブラリを読み込む必要がある • ブラウザの機能以外(⾮標準)に頼ることになる
  7. ੜͷ 8FC$PNQPOFOUTΛ XSBQͯ͠࢖͍΍͘͢͢Δ (2) 別の形式で書いて⽣の Web Components に変換 • (2017/06

    現在、そういったライブラリは無し) • ランタイムライブラリは不要 • しかし⼿元にビルド環境(⾮標準)を⽤意することになる
  8. ଞਓ͕ 8FC$PNQPOFOUTͰॻ͍ͨίϯϙʔωϯτΛ ࢖͏ͷ΋؆୯Ͱ͸ͳ͍ • ブラウザ標準の <input> はそのままでは使いにくい • なので @angular/forms

    が作られた • それと同じことが <x-hoge> にも起こる • @angular/forms のようなものが提供されていないと使いにくい • Onsen UI 2 では ngx-onsenui を作る⽻⽬になった
  9. ϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ 8FC$PNQPOFOUT •⽣の Web Components(+その wrapper)に フレームワークユーザの求めているものは無い • Web Components

    は あくまでフレームワークに依存しない・再利⽤可能な コンポーネントを作るためのもの •Q. どうすれば良いか? • A. 引き続きフレームワークを使いましょう!!
  10. ϥΠϒϥϦఏڙऀʹͱͬͯͷ 8FC$PNQPOFOUT • 複数のフレームワークに ライブラリを提供できる最⾼のツール • Web Components でコア(共通部分)を実装してしまえば、 あとは

    @angular/forms のようなものを⽣やすだけ • 今後この設計を持つライブラリは増えていく Web Components 層 angular- onsenui ngx- onsenui react- onsenui vue- onsenui ember- onsenui aurelia- onsenui フレームワーク 層 (onsenui)