Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Components の期待と実情、未来 — 2年のライブラリ開発経験から
Search
Naoki Matagawa
June 17, 2017
Programming
1
5.3k
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
15k
Onsen UI 2 開発における JS フレームワーク衝突事例集
n_matagawa
3
910
10分で分かる Monaca と Onsen UI
n_matagawa
0
540
JS モバイルアプリの世界と Onsen UI
n_matagawa
0
510
Onsen UIの最近とこれから Onsen UI の最近とこれから 〜 国内サポートはじめました
n_matagawa
0
270
Other Decks in Programming
See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
100
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
510
人には人それぞれのサービス層がある
shimabox
3
440
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
190
AI Coding Agent Enablement in TypeScript
yukukotani
17
6.7k
がんばりすぎないコーディングルール運用術
tsukakei
1
160
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
Doma で目指す ORM 最適解
nakamura_to
1
160
Agent Rules as Domain Parser
yodakeisuke
1
270
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
360
Featured
See All Featured
Optimizing for Happiness
mojombo
378
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
523
40k
The Cult of Friendly URLs
andyhume
78
6.4k
Making Projects Easy
brettharned
116
6.2k
Statistics for Hackers
jakevdp
799
220k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Why Our Code Smells
bkeepers
PRO
336
57k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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 の未来に 乞うご期待!!