Polymer で作る次世代ウェブサイト

Eiji Kitamura @agektmr

17世紀 名誉革命

18世紀 フランス革命

19世紀 産業革命

21世紀 Web Components 革命

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

Full-bleed, photo-onlyslides are great

noricumtschörda

Template

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

HTML

Full-bleed, photo-onlyslides are great

noricumGerdacoofdy on Flickr

Shadow DOM

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>

Full-bleed, photo-onlyslides are great

noricumGerdaAnja Jonsson

Custom Elements

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

mental.masala on Flickr

HTML Imports

<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

Polymer とは？

Polymer とは何か

• Web Components のラッパーライブラリ · コンポーネント定義の枠組み、Declarative な (宣言的) 記法、データバインディング等

• Web Components の Polyfill · 未実装のブラウザで Web Components を利用可能に

• Polymer 要素群 · core-elements, paper-elements, google-webcomponents

Browser

Components

JavaScript

Shad

ow D

OM

Tem

plat

e

Cust

om

Elem

ents

HTM

L Im

port

s

webcomponents.js

Polymer

Polymer elements (core-elements, paper-elements,

etc)

ライブコーディング

開発効率向上の ポイント1 データバインディングで

楽できる

• チェックボックス - クリックでタスク完了・解除

• タスク名 - 変更可能な文字列

• 削除ボタン - クリックでタスク削除

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

開発効率向上の ポイント2

コンポーネントの 再利用ができる

開発効率向上の ポイント3

自分の担当範囲に フォーカスできる

まとめ

Polymer を使うことで 開発効率は劇的に向上する• データバインディングで楽できる · JavaScript のコード量が減らせる

• コンポーネントの再利用ができる · 世界中の人とコンポーネントを共有し、再利用できる

• 自分の担当範囲にフォーカスできる · 疎結合なため、集中できる

最後に

今後の計画

• 0.8 - プレビュー中

• 0.9 "ベータ" - Q1 2015

• 1.0 - Q2

sfantti on Flickr

21世紀 Web Components 革命

おしらせ

• Google for モバイル アプリ · http://bit.ly/GoogleForMobileApp

• Polytechnic コードラボ · http://bit.ly/polymer_codelab_jp

• プレゼント · Chrome キーチェーン・ストラップ

Eiji Kitamura @agektmr

Thank you!

#html5j