HTML5 Conference 2015 でお話した「Polymer で作る次世代ウェブサイト」のスライドです。途中にライブコーディングを挟むため、動画もご覧下さい。http://youtu.be/qzh56Ja1eaw?t=3h20m16s

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

2. 17世紀
名誉革命

3. 18世紀
フランス革命

4. 19世紀
産業革命

5. 21世紀
Web Components 革命

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

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

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

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

11. 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>

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

13. 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

14. mental.masala on Flickr
HTML Imports

15. <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

16. Polymer とは？

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

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

19. ライブコーディング

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

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

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

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

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

26. まとめ

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

28. 最後に

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

30. 21世紀
Web Components 革命

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

32. Eiji Kitamura @agektmr
Thank you!
#html5j