try web components
DESCRIPTION
Frontrend x Chrome Tech Talk Night Extendedでのライトニングトークの資料です。TRANSCRIPT
Try Web Components!
Hiroki TaniFront-end Developer
2013-11-30(SAT.)
Goal
Goal
$ yo polymer
Web Components?
HTML Templates Scaffolding
Shadow DOM Encapsulation
Custom Elements Extensions
HTML Imports Packaging
<x-calendar></x-calendar>
http://mozilla.github.io/brick/demos/x-tag-calendar/index.html
<x-calendar view="2013-06-09" controls></x-calendar>
http://mozilla.github.io/brick/demos/x-tag-calendar/index.html
<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
<button is="mega-button">Mega button</button>
http://www.webcomponentsshift.com/#10
<gangnam-style></gangnam-style>
http://www.webcomponentsshift.com/#9
<gangnam-style></gangnam-style>
http://www.webcomponentsshift.com/#9
Fail!
Fail!
Fail!
Fail!
Try Web Components!
Try Web Components!w/ Polymer
http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/
$ 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/
<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>
<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>
<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>
Pl!as!...
<x-switch></x-switch>
https://github.com/hiloki/demo/tree/master/frontrend_chrome/switch.html
<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>
<x-switch></x-switch>
https://github.com/hiloki/demo/tree/master/frontrend_chrome
<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>
<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>
<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>
<x-like class="the-article-feedback-like"></x-like>
index.html
<x-like class="the-article-feedback-like"></x-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
<polymer-element name="x-like" attributes="type count"><template><x-icon type="{{type}}" attr="fa-lg" on-click="{{countup}}"></x-icon> <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
<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
Web Componentsmakes
Web developmentmore fun!
Thanks!Hiroki Tani
@hiloki,@hiloki_eninkdesign.jp
html5experts.jp/hiloki/