Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,177 views

Published on

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

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×