Successfully reported this slideshow.

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

55

Share

1 of 32
1 of 32

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

55

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

  1. 1. Polymer で作る
 次世代ウェブサイト Eiji Kitamura @agektmr
  2. 2. 17世紀 名誉革命
  3. 3. 18世紀 フランス革命
  4. 4. 19世紀 産業革命
  5. 5. 21世紀 Web Components 革命
  6. 6. Web Components で 開発効率は 劇的に向上する
  7. 7. Full-bleed, photo-only
 slides are great noricumtschörda Template
  8. 8. <template id="template"> <style> ... </style> <div id="container"> <img src="http://webcomponents.org/img/logo.svg"> </div> </template> HTML
  9. 9. Full-bleed, photo-only
 slides are great noricumGerdacoofdy on Flickr Shadow DOM
  10. 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. 11. Full-bleed, photo-only
 slides are great noricumGerdaAnja Jonsson Custom Elements
  12. 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. 13. mental.masala on Flickr HTML Imports
  14. 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. 15. Polymer とは?
  16. 16. Polymer とは何か • Web Components のラッパーライブラリ · コンポーネント定義の枠組み、Declarative な (宣言的) 記法、データバ インディング等 • Web Components の Polyfill · 未実装のブラウザで Web Components を利用可能に • Polymer 要素群 · core-elements, paper-elements, google-webcomponents
  17. 17. Browser Components JavaScript ShadowDOM Template Custom Elements HTMLImports webcomponents.js Polymer Polymer elements (core-elements, paper-elements, etc)
  18. 18. ライブコーディング
  19. 19. 開発効率向上の ポイント1 データバインディングで 楽できる
  20. 20. • チェックボックス - クリックでタスク完了・解除 • タスク名 - 変更可能な文字列 • 削除ボタン - クリックでタスク削除
  21. 21. var items = [ { done: true, task: 'first task name comes here' }, { done: false, task: 'second task name comes here' } ]
  22. 22. 開発効率向上の ポイント2 コンポーネントの 再利用ができる
  23. 23. 開発効率向上の ポイント3 自分の担当範囲に フォーカスできる
  24. 24. まとめ
  25. 25. Polymer を使うことで 開発効率は劇的に向上する • データバインディングで楽できる · JavaScript のコード量が減らせる • コンポーネントの再利用ができる · 世界中の人とコンポーネントを共有し、再利用できる • 自分の担当範囲にフォーカスできる · 疎結合なため、集中できる
  26. 26. 最後に
  27. 27. 今後の計画 • 0.8 - プレビュー中 • 0.9 "ベータ" - Q1 2015 • 1.0 - Q2 sfantti on Flickr
  28. 28. 21世紀 Web Components 革命
  29. 29. おしらせ • Google for モバイル アプリ · http://bit.ly/GoogleForMobileApp • Polytechnic コードラボ · http://bit.ly/polymer_codelab_jp • プレゼント · Chrome キーチェーン・ストラップ
  30. 30. Eiji Kitamura @agektmr Thank you! #html5j

×