polymer, a web component polyfill library
DESCRIPTION
A study and research report about polymer and Web Components.TRANSCRIPT
![Page 1: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/1.jpg)
Maeda Naohito
Welcome to the future.
2014/9/25
polymer
![Page 2: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/2.jpg)
Web Components Web標準
polymer?
polymer.js Web Componentsを便利に使うライブラリ
polymer elements 構築された(UI/非UI)エレメント郡
platform.js Web Componentsのpolyfill
![Page 3: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/3.jpg)
Web Components?W3Cで策定中の4つのWeb標準のコレクション
Custom Elements
HTMLImport Templates Shadow
DOM
![Page 4: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/4.jpg)
なにができるの?
![Page 5: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/5.jpg)
Webの(UI)部品をコンポーネント化できる
<google-map lat=’122’ lng=’23’></google-map>
<tweet-button></tweet-button>
<qr-code text=”hoge”></qr-code>
<mini-dora color=”yellow”></mini-dora>
![Page 6: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/6.jpg)
kwsk
![Page 7: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/7.jpg)
Custom Elements
var XElemProto = Object.create(HTMLElement.prototype);
var XElement = document.registerElement('x-element', {
prototype: XElemProto
});
カスタム要素を定義
registerElement()で登録。
prototypeを渡す。
ハイフンは必須。
![Page 8: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/8.jpg)
Custom Elements
var XElemProto = Object.create(HTMLElement.prototype);
XElemProto.foo = function() {…};
Object.defineProperty(XElemProto, "bar", {value:5});
var XElement = document.registerElement('x-element', {
prototype: XElemProto
});
カスタム要素にプロパティ・メソッドを定義
fooメソッドを定義
barプロパティを定義
![Page 9: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/9.jpg)
Custom Elements
var XElemProto = Object.create(HTMLElement.prototype);
XElemProto.foo = function() {…};
XElemProto.createdCallback = function() {
this.innerHTML = "<p>ほげほげ</p>";
};
Object.defineProperty(XElemProto, "bar", {value:5});
....
カスタム要素のライフサイクルコールバック
カスタム要素のインスタンスが作られたときに呼ばれるコールバック。要素にHTMLを追加。
![Page 10: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/10.jpg)
Custom Elements
var xElem = new XElement();
document.body.appendChild(xElem);
カスタム要素をインスタンス化
var xElem = document.createElement(`x-element`);
<x-element></x-element>
![Page 11: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/11.jpg)
Point
エレメントにプロパティ/メソッドを定義できる。
独自のエレメントを定義できる。
ライフサイクルコールバックと呼ばれる関数がある。
![Page 12: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/12.jpg)
Templates
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
<script>alert(“hoge”);</script>
</template>
Templateを宣言
<template>タグで宣言
<img>はsrcを読みにいかない
<script>も実行されない
![Page 13: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/13.jpg)
Templates
<template id="mytemplate">...</template>
<script>
var t = document.getElementById('mytemplate');
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>
TemplateをActivate
DOMとして扱える
Activateされて初めてsrcを取りに行ったり、scriptを実
行したりする。
![Page 14: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/14.jpg)
Templates
XElemProto.createdCallback = function() {
var t = document.getElementById('x-elem-template');
var clone = document.importNode(t.content, true);
this.appendChild(clone);
}
ライフサイクルコールバック内でTemplateを使う
カスタムエレメントがインスタンス化された時
点でtemplateを流し込む。
![Page 15: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/15.jpg)
Point● activateされるまで、動作しない。
● 文字列ではなくDOMとして扱えるので扱いやす
い。
![Page 16: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/16.jpg)
Shadow DOM
XElemProto.createdCallback = function() {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<b>ほげほげ</b>";
}
ShadowRootを作成
shadowRootを作成
shadowRoot下は別スコープと
なり、外部に影響しない。
![Page 17: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/17.jpg)
Shadow DOM
<template id="x-elem-template">
<style>p { color: orange; } </style>
...
var shadow = this.createShadowRoot();
var t = document.getElementById('x-elem-template');
var clone = document.importNode(t.content, true);
shadow.appendChild(clone)
ShadowRootにTemplateを展開
templateにstyleを含む
shadowDOM内に展開された
styleは外部に影響しない
![Page 18: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/18.jpg)
Point● Shadow Root内のスコープは外部に影響しない
● styleのカプセル化が可能
![Page 19: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/19.jpg)
HTML Import
<head>
<link rel="import" href="xelement.html">
</head>
htmlをimport
1つのURLをimportするのみ
importされるhtmlがcss/js等の
linkを含む
<link rel="import" href="xelement.html">
<script src="jquery.js"></script>
<template>...
xelement.html
main.html
![Page 20: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/20.jpg)
PointHTML/CSS/Javascriptを1つのURLでバンドリングできる
![Page 21: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/21.jpg)
結局なにがいいの?
![Page 22: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/22.jpg)
再利用できる
<mini-dora color=”yellow”></mini-dora><mini-dora color=”green”></mini-dora><mini-dora color=”red”></mini-dora><mini-dora color=”yellow”></mini-dora><mini-dora color=”green”></mini-dora>
![Page 23: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/23.jpg)
分業できる
プログラマ:コンポーネント開発(html, js)
デザイナー:デザイン(css)
コーダー
静的コーディング(html,css)
![Page 24: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/24.jpg)
標準
フレームワークによってバラバラ
UIのコンポーネント化の方法
Web標準
![Page 25: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/25.jpg)
Semantic!<div id=”blue-circle”>
<div class=”w-c”>...</div><div class=”w-c”>...</div><div id=”red-c”>...</div>
…
ドラ..えも..ん?
<x-doraemon></x-draemon>
ドラえもん!
![Page 26: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/26.jpg)
polymerの話は?
![Page 27: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/27.jpg)
Web Componentsを使いやすく
without polymer<template id=”xtemplate”>...</template><script> var XElm= document.registerElement(‘x-element’),{ prototype:{ createdCallback: function(){ var t = document.equalSelector(‘xtemplate’); var c = document.importNode(t.content, true); var shadow = this.createShadowRoot(); shadow.appendChild(c); } } });</script>
![Page 28: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/28.jpg)
Web Componentsを使いやすく
with polymer<polymer-element name=”x-element”> <template>...</template></polymer-element>
いい感じにwrapしてくれてる。
![Page 29: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/29.jpg)
Web Components+α
Web AnimationsTwo way bindingsLayout AttributesGestures
いろいろあるようですが割愛します.
![Page 30: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/30.jpg)
One More Thing
![Page 31: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/31.jpg)
polymer DesignerGUIでpolymer elementを作れるツール
![Page 32: Polymer, A Web Component Polyfill Library](https://reader033.vdocuments.site/reader033/viewer/2022060112/556c5d61d8b42acc228b509d/html5/thumbnails/32.jpg)
ARIGATO!