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

Transcript

• 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