polymerで作る次世代ウェブサイト

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


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>


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

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

polymerで作る次世代ウェブサイト

Internet