1.
Polymer で作る
次世代ウェブサイト
Eiji Kitamura @agektmr

2.
17世紀
名誉革命

3.
18世紀
フランス革命

4.
19世紀
産業革命

5.
21世紀
Web Components 革命

6.
Web Components で
開発効率は
劇的に向上する

7.
Full-bleed, photo-only
slides are great
noricumtschörda
Template

8.
<template id="template">
<style>
...
</style>
<div id="container">
<img src="http://webcomponents.org/img/logo.svg">
</div>
</template>
HTML

9.
Full-bleed, photo-only
slides are great
noricumGerdacoofdy on Flickr
Shadow DOM

10.
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div);
JavaScript
HTML
<div id="host"></div>

11.
Full-bleed, photo-only
slides are great
noricumGerdaAnja Jonsson
Custom Elements

12.
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var root = this.createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
var XComponent = document.registerElement('x-component', {
prototype: proto
});
JavaScript

13.
mental.masala on Flickr
HTML Imports

14.
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="core-component-page/core-component-page.html">
<link rel="import" href="core-icon-button/core-icon-button.html">
<link rel="import" href="core-toolbar/core-toolbar.html">
<link rel="import" href="core-header-panel/core-header-panel.html">
<link rel="import" href="core-menu/core-submenu.html">
<link rel="import" href="core-item/core-item.html">
HTML

15.
Polymer とは？

16.
Polymer とは何か
• Web Components のラッパーライブラリ
·
コンポーネント定義の枠組み、Declarative な (宣言的) 記法、データバ
インディング等
• Web Components の Polyfill
·
未実装のブラウザで Web Components を利用可能に
• Polymer 要素群
·
core-elements, paper-elements, google-webcomponents

17.
Browser
Components
JavaScript
ShadowDOM
Template
Custom
Elements
HTMLImports
webcomponents.js
Polymer
Polymer elements
(core-elements,
paper-elements,
etc)

18.
ライブコーディング

19.
開発効率向上の
ポイント1
データバインディングで
楽できる

20.
• チェックボックス - クリックでタスク完了・解除
• タスク名 - 変更可能な文字列
• 削除ボタン - クリックでタスク削除

21.
var items = [
{
done: true,
task: 'first task name comes here'
},
{
done: false,
task: 'second task name comes here'
}
]

22.
開発効率向上の
ポイント2
コンポーネントの
再利用ができる

23.
開発効率向上の
ポイント3
自分の担当範囲に
フォーカスできる

24.
まとめ

25.
Polymer を使うことで
開発効率は劇的に向上する
• データバインディングで楽できる
·
JavaScript のコード量が減らせる
• コンポーネントの再利用ができる
·
世界中の人とコンポーネントを共有し、再利用できる
• 自分の担当範囲にフォーカスできる
·
疎結合なため、集中できる

26.
最後に

27.
今後の計画
• 0.8 - プレビュー中
• 0.9 "ベータ" - Q1 2015
• 1.0 - Q2
sfantti on Flickr

28.
21世紀
Web Components 革命

29.
おしらせ
• Google for モバイル アプリ
·
http://bit.ly/GoogleForMobileApp
• Polytechnic コードラボ
·
http://bit.ly/polymer_codelab_jp
• プレゼント
·
Chrome キーチェーン・ストラップ

30.
Eiji Kitamura @agektmr
Thank you!
#html5j