Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web Components の期待と実情、未来 — 2年のライブラリ開発経験から
Naoki Matagawa
June 17, 2017
Programming
1
4.2k
Web Components の期待と実情、未来 — 2年のライブラリ開発経験から
ng-japan 2017 (2017/06/17) での発表スライドです。
[イベントURL:
https://ngjapan.connpass.com/event/55210/
]
Naoki Matagawa
June 17, 2017
Tweet
Share
More Decks by Naoki Matagawa
See All by Naoki Matagawa
国産 OSS 立ち上げの事情
n_matagawa
20
14k
Onsen UI 2 開発における JS フレームワーク衝突事例集
n_matagawa
3
690
10分で分かる Monaca と Onsen UI
n_matagawa
0
430
JS モバイルアプリの世界と Onsen UI
n_matagawa
0
360
Onsen UIの最近とこれから Onsen UI の最近とこれから 〜 国内サポートはじめました
n_matagawa
0
170
Other Decks in Programming
See All in Programming
Modern Android Developer ~ 안내서
pluu
1
610
dotdotdot_in_predict_function
bk_18
1
180
シェーダー氷山発掘記
logilabo
0
140
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
cohalz
1
820
Springin‘でみんなもクリエイターに!
ueponx
0
180
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.7k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
io22 extended What's new in app performance
veronikapj
0
340
Independently together: better developer experience & App performance
bcinarli
0
170
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
170
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
120
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
540
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Practical Orchestrator
shlominoach
178
8.6k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Producing Creativity
orderedlist
PRO
333
37k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Music & Morning Musume
bryan
35
4.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
A designer walks into a library…
pauljervisheath
196
16k
Transcript
2017/06/17(⼟) ng-japan 2017 8FC$PNQPOFOUTͷظͱ࣮ɺະདྷ ͷϥΠϒϥϦ։ൃܦݧ͔Β ຢ ঘथ !O@NBUBHBXB
ࣗݾհ •⼜川 尚樹 (@n_matagawa) • アシアル株式会社(2016年4⽉〜) • Web エンジニア 2年⽬
•Onsen UI 2 (2015年10⽉〜) • 純 Web Components 製の UI ライブラリ • AngularJS, Angular, React, Vue に対応 • https://onsen.io/
σϞʢ0OTFO 6*ͷհʣ https://tutorial.onsen.io/
͜ͷൃදͷඪ •Web Components について知ってもらう!!! • 「今後も Angular を使って⼤丈夫なのか?」 • 「また
Web に⼀波くるのか?」 • ……といった疑問を解消
ͳͥ "OHVMBSͷͰ 8FC$PNQPOFOUTΛʁ •Angular と Web Components は 無関係ではない!!! •
フレームワークと Web Components は 切っても切り離せない関係
ୈ෦ 8FC$PNQPOFOUTͷޫ
8FC$PNQPOFOUTͱ (1) ブラウザの機能 • WebGL, Web Audio API, ... に並ぶもの
(2) 上記を使って作られたコンポーネント
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ • メジャーブラウザに搭載され始めたから • デフォルトで使えるようになった • 特に、2017年3⽉に iOS 10.3
に搭載されたのが⼤きい
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ http://caniuse.com/#feat=custom-elementsv1
ͳͥ 8FC$PNQPOFOUT͕ʹͳ͔ͬͨʁ • メジャーブラウザに搭載され始めたから • デフォルトで使えるようになった • 特に、2017年3⽉に iOS 10.3
に搭載されたのが⼤きい • フレームワーク戦争が収束して話題が枯渇したから • 各フレームワークを掘り下げる流れになった • そこに Web Components が割って⼊ってきた
ϒϥβͷػೳͱͯ͠ͷ 8FC$PNQPOFOUT •複数の機能の集まり • しかし、重要な機能は2つだけ
ॏཁػೳͦͷ 特定の名前を持つ要素 <x-hoge> が ⽣成された時、 DOM ツリーに追加された時、…に 指定した処理を実⾏する機能
σϞʢॏཁػೳͦͷ$VTUPN&MFNFOUTʣ
ॏཁػೳͦͷ DOM ツリーの⼀部分に対して 個別の DOM, CSS スコープを与える機能(+α)
σϞʢॏཁػೳͦͷ4IBEPX%0.ʣ
ͭͷॏཁػೳΛͬͯԿ͕Ͱ͖Δ͔ʁ •ブラウザが元々持っている <input>, <video>, <table> 等と同じ仕組みで <x-hoge>, <x-piyo> を動かすことができる •HTML5
に新しい機能が増えたかのような感覚で コンポーネントを使うことができる
8FC$PNQPOFOUT͕ඳ͘ະདྷ • 再利⽤可能なコンポーネントを ブラウザの機能だけで実装 • 特定のフレームワークに依存しないコンポーネントが 実装・シェア・利⽤される世界
ୈ෦ 8FC$PNQPOFOUTͷҋ
ϑϨʔϜϫʔΫϢʔβʹͱͬͯ ੜͷ 8FC$PNQPOFOUTػೳෆ × データバインディング × Input/Output × DI ×
パイプ × モジュール •あらゆるものが無い!! • ⽣の Web Components は使えたものではない × 繰り返しレンダリング × アニメーション × …
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (1) フレームワークで機能を補填 • X-Tag (2012年〜) Vue チック
• Polymer (2013年〜) 独⾃路線 • Skate (2014年〜) React チック • slim.js (2016年〜) Angular チック
ྫʢTMJNKTʣ
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (1) フレームワークで機能を補填 • X-Tag (2012年〜) Vue チック
• Polymer (2013年〜) 独⾃路線 • Skate (2014年〜) React チック • slim.js (2016年〜) Angular チック • ランタイムライブラリを読み込む必要がある • ブラウザの機能以外(⾮標準)に頼ることになる
ੜͷ 8FC$PNQPOFOUTΛ XSBQ͍ͯ͘͢͢͠Δ (2) 別の形式で書いて⽣の Web Components に変換 • (2017/06
現在、そういったライブラリは無し) • ランタイムライブラリは不要 • しかし⼿元にビルド環境(⾮標準)を⽤意することになる
ଞਓ͕ 8FC$PNQPOFOUTͰॻ͍ͨίϯϙʔωϯτΛ ͏ͷ؆୯Ͱͳ͍ • ブラウザ標準の <input> はそのままでは使いにくい • なので @angular/forms
が作られた • それと同じことが <x-hoge> にも起こる • @angular/forms のようなものが提供されていないと使いにくい • Onsen UI 2 では ngx-onsenui を作る⽻⽬になった
ୈ෦ ͡Ό͋ɺԿͷʹཱͭͷʁ
ඇϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ 8FC$PNQPOFOUT •世の中、 フレームワークを使っていない⼈の⽅が多い • データバインディングがない、 Input/Output がない、そんなのは苦痛ではない • ⾮フレームワークユーザにとっての魅⼒:
• ライブラリなしですぐに使える • コピペするだけですぐに使える
ϑϨʔϜϫʔΫϢʔβʹͱͬͯͷ 8FC$PNQPOFOUT •⽣の Web Components(+その wrapper)に フレームワークユーザの求めているものは無い • Web Components
は あくまでフレームワークに依存しない・再利⽤可能な コンポーネントを作るためのもの •Q. どうすれば良いか? • A. 引き続きフレームワークを使いましょう!!
ϥΠϒϥϦఏڙऀʹͱͬͯͷ 8FC$PNQPOFOUT • 複数のフレームワークに ライブラリを提供できる最⾼のツール • Web Components でコア(共通部分)を実装してしまえば、 あとは
@angular/forms のようなものを⽣やすだけ • 今後この設計を持つライブラリは増えていく Web Components 層 angular- onsenui ngx- onsenui react- onsenui vue- onsenui ember- onsenui aurelia- onsenui フレームワーク 層 (onsenui)
ϑϨʔϜϫʔΫఏڙऀʹͱͬͯͷ 8FC$PNQPOFOUT •フレームワークの構築に使える機能が揃っている •⾼速化に利⽤できる • Web Components は速い • Angular
は 既に Shadow DOM を使った⾼速化を実装済み • デフォルトでは無効
࠷ޙʹ
8FC$PNQPOFOUTΛୟ͘ʜʜͦͷલʹ •関係者は今も Web Components の未来に向けて 動いている •フレームワークの進化は速すぎた • Web Components
を置き去りにした •これからその溝が埋まっていく
Thank you for listening! Web Components の未来に 乞うご期待!!