try web components

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.polymer-project.org/

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/