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

by Naoki Matagawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ୈ෦ 8FC$PNQPOFOUTͷޫ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ୈ෦ 8FC$PNQPOFOUTͷҋ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ྫʢTMJNKTʣ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ୈ෦ ͡Ό͋ɺԿͷ໾ʹཱͭͷʁ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

࠷ޙʹ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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