polymerで作る次世代ウェブサイト
TRANSCRIPT
<template id="template"> <style> ... </style> <div id="container"> <img src="http://webcomponents.org/img/logo.svg"> </div> </template>
HTML
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>
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
<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 とは何か
• 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)
var items = [ { done: true, task: 'first task name comes here' }, { done: false, task: 'second task name comes here' }]
Polymer を使うことで 開発効率は劇的に向上する• データバインディングで楽できる · JavaScript のコード量が減らせる
• コンポーネントの再利用ができる · 世界中の人とコンポーネントを共有し、再利用できる
• 自分の担当範囲にフォーカスできる · 疎結合なため、集中できる
おしらせ
• Google for モバイル アプリ · http://bit.ly/GoogleForMobileApp
• Polytechnic コードラボ · http://bit.ly/polymer_codelab_jp
• プレゼント · Chrome キーチェーン・ストラップ