Polymer で作る

次世代ウェブサイト
Eiji Kitamura @agektmr
17世紀
名誉革命
18世紀
フランス革命
19世紀
産業革命
21世紀
Web Components 革命
Web Components で
開発効率は
劇的に向上する
Full-bleed, photo-only

slides are great
noricumtschörda
Template
<template id="template">
<style>
...
</style>
<div id="container">
<img src="http://webcomponents.org/img/logo.svg">
</div...
Full-bleed, photo-only

slides are great
noricumGerdacoofdy on Flickr
Shadow DOM
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var div = document.createElement('div');
d...
Full-bleed, photo-only

slides are great
noricumGerdaAnja Jonsson
Custom Elements
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var root = this.createShadowRoot();...
mental.masala on Flickr
HTML Imports
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="core-component-page/core-component-page.html">
<l...
Polymer とは?
Polymer とは何か
• Web Components のラッパーライブラリ
·
コンポーネント定義の枠組み、Declarative な (宣言的) 記法、データバ
インディング等
• Web Components の Polyfill
·...
Browser
Components
JavaScript
ShadowDOM
Template
Custom
Elements
HTMLImports
webcomponents.js
Polymer
Polymer elements
(co...
ライブコーディング
開発効率向上の
ポイント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
• プレゼ...
Eiji Kitamura @agektmr
Thank you!
#html5j
Polymerで作る次世代ウェブサイト
Polymerで作る次世代ウェブサイト
of 32

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

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


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

  • 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

Related Documents