Polymer, A Web Component Polyfill Library
32
Maeda Naohito Welcome to the future. 2014/9/25 polymer
-
Upload
naohito-maeda -
Category
Internet
-
view
297 -
download
3
description
A study and research report about polymer and Web Components.
Transcript of Polymer, A Web Component Polyfill Library
Maeda Naohito
Welcome to the future.
2014/9/25
polymer
Web Components Web標準
polymer?
polymer.js Web Componentsを便利に使うライブラリ
polymer elements 構築された（UI/非UI）エレメント郡
platform.js Web Componentsのpolyfill
Web Components?W3Cで策定中の４つのWeb標準のコレクション
Custom Elements
HTMLImport Templates Shadow
DOM
なにができるの?
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>
kwsk
Custom Elements
var XElemProto = Object.create(HTMLElement.prototype);
var XElement = document.registerElement('x-element', {
prototype: XElemProto
});
カスタム要素を定義
registerElement()で登録。
prototypeを渡す。
ハイフンは必須。
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プロパティを定義
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を追加。
Custom Elements
var xElem = new XElement();
document.body.appendChild(xElem);
カスタム要素をインスタンス化
var xElem = document.createElement(`x-element`);
<x-element></x-element>
Point
エレメントにプロパティ/メソッドを定義できる。
独自のエレメントを定義できる。
ライフサイクルコールバックと呼ばれる関数がある。
Templates
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
<script>alert(“hoge”);</script>
</template>
Templateを宣言
<template>タグで宣言
<img>はsrcを読みにいかない
<script>も実行されない
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を実
行したりする。
Templates
XElemProto.createdCallback = function() {
var t = document.getElementById('x-elem-template');
var clone = document.importNode(t.content, true);
this.appendChild(clone);
｝
ライフサイクルコールバック内でTemplateを使う
カスタムエレメントがインスタンス化された時
点でtemplateを流し込む。
Point● activateされるまで、動作しない。
● 文字列ではなくDOMとして扱えるので扱いやす
い。
Shadow DOM
XElemProto.createdCallback = function() {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<b>ほげほげ</b>";
｝
ShadowRootを作成
shadowRootを作成
shadowRoot下は別スコープと
なり、外部に影響しない。
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は外部に影響しない
Point● Shadow Root内のスコープは外部に影響しない
● styleのカプセル化が可能
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
PointHTML/CSS/Javascriptを１つのURLでバンドリングできる
結局なにがいいの?
再利用できる
<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>
分業できる
プログラマ:コンポーネント開発(html, js)
デザイナー:デザイン(css)
コーダー
静的コーディング(html,css)
標準
フレームワークによってバラバラ
UIのコンポーネント化の方法
Web標準
Semantic!<div id=”blue-circle”>
<div class=”w-c”>...</div><div class=”w-c”>...</div><div id=”red-c”>...</div>
…
ドラ..えも..ん?
<x-doraemon></x-draemon>
ドラえもん!
polymerの話は?
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>
Web Componentsを使いやすく
with polymer<polymer-element name=”x-element”> <template>...</template></polymer-element>
いい感じにwrapしてくれてる。
Web Components+α
Web AnimationsTwo way bindingsLayout AttributesGestures
いろいろあるようですが割愛します.
One More Thing
polymer DesignerGUIでpolymer elementを作れるツール
ARIGATO!
