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.

Try Web Components

4,540 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/

×