Slide 1
Slide 1 text
Web Components 2016 & Polymer v2
2016.10.09 DevFest Tokyo 2016
Web Components 2016 & Polymer v2 by @1000ch 1
Slide 2
Slide 2 text
@1000ch
Web アプリケーション開発を専門とするソフトウェア
エンジニア。企業で働く傍ら、技術顧問として複数企業
のエンジニアリングに関わり、高品質で維持しやすい
Web アプリケーションを作るための活動を続けてい
る。
Web Components 2016 & Polymer v2 by @1000ch 2
Slide 3
Slide 3 text
アジェンダ
Web Components おさらい
最近の Web Components 事情
Polymer v2 is coming!!
Web Components 2016 & Polymer v2 by @1000ch 3
Slide 4
Slide 4 text
Web Components のおさらい
Web Components 2016 & Polymer v2 by @1000ch 4
Slide 5
Slide 5 text
「Web におけるコンポーネント」の難しさ
長らく Web 開発者が向き合ってきた
Web Components 2016 & Polymer v2 by @1000ch 5
Slide 6
Slide 6 text
再利用可能な Web のコンポーネント
それを 作る難しさ と 使うコスト
特定のライブラリへの依存問題
エコシステムが醸成されない問題
容赦なくグローバルを汚染する問題
Web Components 2016 & Polymer v2 by @1000ch 6
Slide 7
Slide 7 text
CSS だけはどうにもならない
CSS はつらい。本当につらい。 Web Components 2016 & Polymer v2 by @1000ch 7(╯°□°）╯︵ SSƆ
— 1000ch (@1000ch) 2016年7月11日
Slide 8
Slide 8 text
Web 標準技術を組み合わせて実現する（重要）
アプローチはどれも特定のツールや手法に依存してきた
Web のコンポーネント を作る手法が一般化される
「そうだ、 Extensible Web だ」
Web Components 2016 & Polymer v2 by @1000ch 8
Slide 9
Slide 9 text
Web Components を支える技術
Custom Elements: 新たな要素の定義
Shadow DOM: 隔離された DOM スコープ
HTML Imports: 断片化した HTML のロード
Templates: 不活性な HTML 要素
Web Components 2016 & Polymer v2 by @1000ch 9
Slide 10
Slide 10 text
最近の Web Components 事情
Web Components 2016 & Polymer v2 by @1000ch 10
Slide 11
Slide 11 text
Shadow DOM v1 と Custom Elements v1
これまでのものを v0、新たなものを v1 として、改めて仕様の策定が進んでいる
Web Components 2016 & Polymer v2 by @1000ch 11
Slide 12
Slide 12 text
Shadow DOM v1
createShadowRoot()
から attachShadow()
へ
Opened な Shadow DOM と Closed な Shadow DOM
複数 Shadow Root
の廃止
Shadow Root をホストできる要素が限定的に
から
へ
Web Components 2016 & Polymer v2 by @1000ch 12
Slide 13
Slide 13 text
createShadowRoot()
から attachShadow()
へ
const div = document.querySelector('div');
const shadowRoot = div.attachShadow({
mode: 'open' // or 'close'
});
// readonly
な shadowRoot
プロパティの追加
console.log(div.shadowRoot);
引数に open か close かどうかを指定する（必須）
Web Components 2016 & Polymer v2 by @1000ch 13
Slide 14
Slide 14 text
Opened Shadow DOM と Closed Shadow DOM
外部からアクセスできる Shadow DOM と、アクセスできない Shadow DOM。 Closed
Shadow DOM であれば shadowRoot
プロパティは null
を返す
Web Components 2016 & Polymer v2 by @1000ch 14
Slide 15
Slide 15 text
複数 Shadow Root
の廃止
Though multiple shadow roots were originally introduced to support an Inheritance
Model for components, Blink has already deprecated this feature even in v0. Do not
use multiple shadow roots.
ある要素の attachShadow()
を2回以上実行すると例外が発生する
Web Components 2016 & Polymer v2 by @1000ch 15
Slide 16
Slide 16 text
制限された Shadow Host になれる要素
article
, aside
, blockquote
, body
, div
, footer
, h1
, h2
, h3
, h4
, h5
, h6
,
header
, nav
, p
, section
, span
Web Components 2016 & Polymer v2 by @1000ch 16
Slide 17
Slide 17 text
から
へ
で指定していた Insertion Points は、
に代わり Slots と表現されるよ
うになる。セレクタで指定していたのが、
のようなスロット名の
完全一致で挿入される。
Web Components 2016 & Polymer v2 by @1000ch 17
Slide 18
Slide 18 text
::content input { background: skyblue; }
Button
Web Components 2016 & Polymer v2 by @1000ch 18
Slide 19
Slide 19 text
による挿入へ
::slotted(input) { background: skyblue; }
Button
Web Components 2016 & Polymer v2 by @1000ch 19
Slide 20
Slide 20 text
What's New in Shadow DOM v1 (by examples)
更なる詳細はこちらの資料を参照のこと
Web Components 2016 & Polymer v2 by @1000ch 20
Slide 21
Slide 21 text
Custom Elements v1
ES2015 class ベースの要素定義
ライフサイクルコールバックの見直し
document.registerElement
から window.customElements
へ
Web Components 2016 & Polymer v2 by @1000ch 21
Slide 22
Slide 22 text
Custom Elements v0
const FooElement = Object.create(HTMLElement.prototype);
FooElement.createdCallback = () => { ... };
FooElement.attachedCallback = () => { ... };
FooElement.detachedCallback = () => { ... };
FooElement.attributeChangedCallback = () => { ... };
document.registerElement('foo-element', {
prototype: FooElement
});
Web Components 2016 & Polymer v2 by @1000ch 22
Slide 23
Slide 23 text
Custom Elements v1
class FooElement extends HTMLElement {
constructor() { ... }
connectedCallback() { ... }
disconnectedCallback() { ... }
attributeChangedCallback() { ... }
adoptedCallback() { ... }
}
window.customElements.define('foo-element', FooElement);
Web Components 2016 & Polymer v2 by @1000ch 23
Slide 24
Slide 24 text
window.customElements
//
コンストラクタの参照
const FooElement = customElements.get('foo-element');
//
が定義されたタイミング
customElements.whenDefined('foo-element').then(() => {
console.log('foo-element is defined');
});
Web Components 2016 & Polymer v2 by @1000ch 24
Slide 25
Slide 25 text
カスタム要素が定義されるタイミングを待ちたい？
不完全な状態でページが表示されるのを避けるには、 :defined
擬似クラスだけでは難しい
Issue #427 · w3c/webcomponents
Web Components 2016 & Polymer v2 by @1000ch 25
Slide 26
Slide 26 text
is
属性の行方…
今のところ WebKit は
のような Custom Elements による
ネイティブ要素の拡張をしない方針を示している
Web Components 2016 & Polymer v2 by @1000ch 26
Slide 27
Slide 27 text
HTML Imports はどうなった
Mozilla は ES6 Modules を意識して見送っている。The state of Web Components でも触れ
ているように、ES Modules で解決することを支持している
Web Components 2016 & Polymer v2 by @1000ch 27
Slide 28
Slide 28 text
ブラウザサポート状況
Shadow DOM v0: Chrome, Firefox w/flag, Safari 10, Opera
Shadow DOM v1: Chrome 53, Opera 40, Safari 10
Custom Elements v0: Chrome, Firefox w/flag, Opera
Custom Elements v1: Chrome 54, Opera 41, Safari TP 14
HTML Imports: Chrome, Firefox w/flag, Opera
Templates: Chrome, Firefox, Safari, Opera, Edge
Web Components 2016 & Polymer v2 by @1000ch 28
Slide 29
Slide 29 text
Safari 10 に Shadow DOM v1 が実装された！
iOS 10 のシェア次第だが、時間の問題
Web Components 2016 & Polymer v2 by @1000ch 29
Slide 30
Slide 30 text
Web Components 2016 & Polymer v2 by @1000ch 30
Slide 31
Slide 31 text
Safari TP 14 に Custom Elements v1 が実装された ( )
メニューの Develop → Experimental Features → Custom Elements
Web Components 2016 & Polymer v2 by @1000ch 31
Slide 32
Slide 32 text
Web Components 2016 & Polymer v2 by @1000ch 32
Slide 33
Slide 33 text
Safari の実装が進むことは、開発者にとってかなり大きい
モバイルでの利用は現実的になってきた
あとは Firefox と Edge を応援するだけ
IE... (´・ω・`).;:...(´・ω...:.;::..(´・;::: .:.;: ...
Web Components 2016 & Polymer v2 by @1000ch 33
Slide 34
Slide 34 text
Edgeに実装を進めてもらおう
みんなで Shadow DOM (unprefixed) と Custom Elements に投票しよう！
Web Components 2016 & Polymer v2 by @1000ch 34
Slide 35
Slide 35 text
Polymer v2 is coming !!
Web Components 2016 & Polymer v2 by @1000ch 35
Slide 36
Slide 36 text
Polymer 2.0 Preview
Polymer/polymer リポジトリの 2.0-preview ブランチ Web Components 2016 & Polymer v2 by @1000ch 36Polymer 2.0 is just starting to come together. For a very early look at what's coming, check out: https://t.co/w6U7L4I0OZ
— Polymer (@polymer) 2016 年9月9日
Slide 37
Slide 37 text
日本語訳
Web Components 2016 & Polymer v2 by @1000ch 37Polymer 2.0 Preview が公開されていますが、その時のアナウンス内容を日本語訳してみました。興味のあ る方はぜひお読みください。 https://t.co/Y9EEERPKCR #polymer #html5j
— Yoichiro Tanaka (@yoichiro) 2016 年9月24日
Slide 38
Slide 38 text
Polymer Summit 2016 in London on October 17-18 Web Components 2016 & Polymer v2 by @1000ch 38Polymer Summit 2016 registration is now open! Join us in London on October 17-18. https://t.co/gWSEOpy3Sb pic.twitter.com/Noj4kAsdqd
— Polymer (@polymer) 2016 年8月15日
Slide 39
Slide 39 text
Polymer v2 のロードマップ
Web Components "v1" の機能のフルサポート
Polymer v1.x
からのスムースなマイグレーション
標準にそぐわない "leaky" な抽象化を排除
Polymer 内部のデータシステムの改善
Web Components 2016 & Polymer v2 by @1000ch 39
Slide 40
Slide 40 text
Polymer v1.x
const MyElement = Polymer({
is: 'my-element',
created: function () {},
attached: function() {},
detached: function() {},
attributeChanged: function() {},
ready: function() {}
});
Web Components 2016 & Polymer v2 by @1000ch 40
Slide 41
Slide 41 text
Polymer v2
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
static get config() {
return { /* properties, observers meta data */ };
}
constructor() { super(); }
connectedCallback() { super.connectedCallback(); }
}
customElements.define(MyElement.is, MyElement);
Web Components 2016 & Polymer v2 by @1000ch 41
Slide 42
Slide 42 text
Polymer v1.x の API も一応使える
polymer.html
が引き続き提供され、 Polymer.dom()
や Polymer.CompatElement
とい
った Polymer v1.x で提供されてきた API も含まれる
Web Components 2016 & Polymer v2 by @1000ch 42
Slide 43
Slide 43 text
ネイティブ API へ移行を強く推奨
Polymer で抽象化してきた API が排除されネイティブの API を使うように。例えば、Shady
DOM v1 が提供されることで DOM 操作に関しても Polymer.dom()
が不要になる
Web Components 2016 & Polymer v2 by @1000ch 43
Slide 44
Slide 44 text
Polymer v2 は is=""
をサポートしない
Polymer v1.x の機能は引き続き提供されるが、Type Extension ( is="..."
) の雲行きが怪し
いので…
...
...
Web Components 2016 & Polymer v2 by @1000ch 44
Slide 45
Slide 45 text
Web Components "v1" の API に依存する
故に、サポートされていない環境で使うには webcomponentsjs によるポリフィルが必要で
ある。そして新たなスペックに対応するポリフィルを提供する v1 ブランチの開発が進められ
ている
Web Components 2016 & Polymer v2 by @1000ch 45
Slide 46
Slide 46 text
Polymer Elements
v2 のリリースに伴いアップデートされるが、使う側に影響はない（はず）
Web Components 2016 & Polymer v2 by @1000ch 46
Slide 47
Slide 47 text
Polymer v2-preview を今すぐ試したい？
$ bower install --save Polymer/polymer#2.0-preview
Web Components 2016 & Polymer v2 by @1000ch 47
Slide 48
Slide 48 text
まとめ
Web Components 2016 & Polymer v2 by @1000ch 48
Slide 49
Slide 49 text
スペックに関して
Shadow DOM v1 も Custom Elements v1 も順当にリデザインされてる
Shadow DOM は既に v2 に関する議論がはじまっている
HTML Imports だけは先行きが若干不安だが、ひとまず webcomponentsjs のポリフィ
ルに頼る
WebKit の実装進捗によって モバイル利用が現実的になりつつある
まとめ
Web Components 2016 & Polymer v2 by @1000ch 49
Slide 50
Slide 50 text
使い方に関して
スコープを解決するためのツールは沢山でてきたが、ツールありきのアプローチでは可
搬性が担保されない
今こそみんなで使っていこう（流行らなければ過去の遺物になってしまう
）
開発の未来は C omponent D riven D evelopment
まとめ
Web Components 2016 & Polymer v2 by @1000ch 50
Slide 51
Slide 51 text
おわり
Web Components 2016 & Polymer v2 by @1000ch 51