Try Web Components

4,026 views
3,802 views

Published on

Frontrend x Chrome Tech Talk Night Extendedでのライトニングトークの資料です。

Published in: Technology, Design

Try Web Components

  1. 1. Try Web Components!
  2. 2. Hiroki Tani Front-end Developer
  3. 3. 2013-11-30(SAT.)
  4. 4. Goal
  5. 5. Goal $ yo polymer
  6. 6. Web Components?
  7. 7. Shadow DOM Encapsulation HTML Templates Scaffolding Custom Elements Extensions HTML Imports Packaging
  8. 8. <x-calendar></x-calendar> http://mozilla.github.io/brick/demos/x-tag-calendar/index.html
  9. 9. <x-calendar view="2013-06-09" controls></x-calendar> http://mozilla.github.io/brick/demos/x-tag-calendar/index.html
  10. 10. <x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox> http://mozilla.github.io/brick/demos/x-tag-flipbox/index.html
  11. 11. <button is="mega-button">Mega button</button> http://www.webcomponentsshift.com/#10
  12. 12. <gangnam-style></gangnam-style> http://www.webcomponentsshift.com/#9
  13. 13. <gangnam-style></gangnam-style> http://www.webcomponentsshift.com/#9
  14. 14. Fail! Fail!
  15. 15. Fail! Fail!
  16. 16. Try Web Components!
  17. 17. Try Web Components! w/ Polymer
  18. 18. http://www.polymer-project.org/
  19. 19. http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
  20. 20. http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
  21. 21. $ $ $ $ $ npm install -g yo npm install generator-polymer -g mkdir YOUR_PROJECT && cd $_ yo polymer yo polymer:element YOUR_ELEMENT http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
  22. 22. <polymer-element name="YOUR_ELEMENT-element" attributes=""> <template> <style> @host { :scope {display: block;} } </style> <span>I'm <b>YOURELEMENT-element</b>. This is my Shadow DOM.</span> </template> <script> Polymer('YOUR_ELEMENT-element', { //applyAuthorStyles: true, //resetStyleInheritance: true, created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } }); </script> </polymer-element>
  23. 23. <polymer-element name="YOUR_ELEMENT-element" attributes=""> <template> <style> @host { :scope {display: block;} } </style> <span>I'm <b>YOURELEMENT-element</b>. This is my Shadow DOM.</span> </template> <script> Polymer('YOUR_ELEMENT-element', { //applyAuthorStyles: true, //resetStyleInheritance: true, created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } }); </script> </polymer-element>
  24. 24. <polymer-element name="YOUR_ELEMENT-element" attributes=""> <template> <style> @host { :scope {display: block;} } </style> <span>I'm <b>YOURELEMENT-element</b>. This is my Shadow DOM.</span> </template> <script> Polymer('YOUR_ELEMENT-element', { //applyAuthorStyles: true, //resetStyleInheritance: true, created: function() { }, enteredView: function() { }, leftView: function() { }, attributeChanged: function(attrName, oldVal, newVal) { } }); </script> </polymer-element> Please...
  25. 25. <x-switch></x-switch> https://github.com/hiloki/demo/tree/master/frontrend_chrome/switch.html
  26. 26. <polymer-element name="x-switch" attributes="status"> <template> <style> ... input[type=checkbox] { -webkit-appearance: none; box-shadow: inset 0px 0px 0px 1px #e6e6e6; ... } input[type=checkbox]:checked { box-shadow: inset 0px 0px 0px 20px #53d76a; } ... </style> <input type="checkbox" /> </template> <script> ... </script> </polymer-element>
  27. 27. <x-switch></x-switch>
  28. 28. https://github.com/hiloki/demo/tree/master/frontrend_chrome
  29. 29. <x-appbar heading="Feed" class="the-header"> <a href="./home" class="appbar-left"> <x-icon type="fa-list" attr="fa-lg"></x-icon> </a> <a href="./gear" class="appbar-right"> <x-icon type="fa-gear" attr="fa-lg"></x-icon> </a> </x-appbar>
  30. 30. <x-tabs class="the-tabs"> <div> <x-icon type="fa-pencil" attr="fa-lg"></x-icon> Status </div> <div> <x-icon type="fa-camera" attr="fa-lg"></x-icon> Photo </div> <div> <x-icon type="fa-map-marker" attr="fa-lg"></x-icon> Check-in </div> </x-tabs>
  31. 31. <x-media src="/images/hiloki.jpg" width="50" height="50" class="author"> <p class="author-name">Hiroki Tani</p> <p><x-icon type="fa-map-marker" attr="fa-lg"></x-icon> Nagiso, Nagano</p> </x-media>
  32. 32. <x-like class="the-article-feedback-like"></x-like> index.html
  33. 33. <x-like class="the-article-feedback-like"></x-like> class="the-article-feedback-like"> <x-icon type="fa-thumbs-o-up" attr="fa-lg" on-click=""> <i class="fa fa-thumbs-o-up fa-lg"></i> </x-icon> <span></span> </x-like> index.html + Show Shadow DOM
  34. 34. <polymer-element name="x-like" attributes="type count"> <template> <x-icon type="{{type}}" attr="fa-lg" on-click="{{countup}}"></xicon> <span>{{count}}</span> </template> <script> Polymer('x-like', { type: "fa-thumbs-o-up", count: "", countup: function() { this.count++; this.type = "fa-thumbs-up"; } }); </script> </polymer-element> elements/x-like.html
  35. 35. <x-like class="the-article-feedback-like" type="fa-thumbs-up" count="3"> <x-icon type="fa-thumbs-up" attr="fa-lg" on-click=""> <i class="fa fa-thumbs-up fa-lg"></i> </x-icon> <span>3</span> </x-like> index.html + Show Shadow DOM
  36. 36. Web Components makes Web development more fun!
  37. 37. Thanks! Hiroki Tani @hiloki,@hiloki_en inkdesign.jp html5experts.jp/hiloki/

×