try web components

39
Try Web Components!

Upload: -

Post on 08-Sep-2014

3.244 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Try Web Components

Try Web Components!

Page 2: Try Web Components

Hiroki TaniFront-end Developer

Page 3: Try Web Components

2013-11-30(SAT.)

Page 4: Try Web Components

Goal

Page 5: Try Web Components

Goal

$ yo polymer

Page 6: Try Web Components

Web Components?

Page 7: Try Web Components

HTML Templates Scaffolding

Shadow DOM Encapsulation

Custom Elements Extensions

HTML Imports Packaging

Page 8: Try Web Components

<x-calendar></x-calendar>

http://mozilla.github.io/brick/demos/x-tag-calendar/index.html

Page 9: Try Web Components

<x-calendar view="2013-06-09" controls></x-calendar>

http://mozilla.github.io/brick/demos/x-tag-calendar/index.html

Page 10: Try Web Components

<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

Page 11: Try Web Components

<button is="mega-button">Mega button</button>

http://www.webcomponentsshift.com/#10

Page 12: Try Web Components

<gangnam-style></gangnam-style>

http://www.webcomponentsshift.com/#9

Page 13: Try Web Components

<gangnam-style></gangnam-style>

http://www.webcomponentsshift.com/#9

Page 14: Try Web Components
Page 15: Try Web Components

Fail!

Fail!

Page 16: Try Web Components
Page 17: Try Web Components

Fail!

Fail!

Page 18: Try Web Components

Try Web Components!

Page 19: Try Web Components

Try Web Components!w/ Polymer

Page 21: Try Web Components

http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

Page 22: Try Web Components

http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

Page 23: Try Web Components

$ 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/

Page 24: Try Web Components

<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>

Page 25: Try Web Components

<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>

Page 26: Try Web Components

<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!...

Page 27: Try Web Components

<x-switch></x-switch>

https://github.com/hiloki/demo/tree/master/frontrend_chrome/switch.html

Page 28: Try Web Components

<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>

Page 29: Try Web Components

<x-switch></x-switch>

Page 31: Try Web Components

<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>

Page 32: Try Web Components

<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>

Page 33: Try Web Components

<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>

Page 34: Try Web Components

<x-like class="the-article-feedback-like"></x-like>

index.html

Page 35: Try Web Components

<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

Page 36: Try Web Components

<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

Page 37: Try Web Components

<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

Page 38: Try Web Components

Web Componentsmakes

Web developmentmore fun!

Page 39: Try Web Components

Thanks!Hiroki Tani

@hiloki,@hiloki_eninkdesign.jp

html5experts.jp/hiloki/