In this talk, you'll learn how to create your own reusable elements using Polymer.
PolymerGoogle Developer Group Hackathon.
View Slide
Creating ReusableElements+AddyOsmani@addyosmani
Apps should be composed ofreusable, responsive & testableelements.
Examples
BadReusable
Not
Today you might write an
Element Docs Tests
ElementCreate a component we’ve all written before.
Tabshttp://drbl.in/bAsuhttp://drbl.in/esYL
PILE ON THEJAVASCRIPT
https://www.flickr.com/photos/darkismus/4179361946
https://www.flickr.com/photos/goodspeed/2669719176
http://goo.gl/lKk7iT
Tabs using web components
!Tab 1Tab 2Tab 3HTML
Building a tabs element
Start with github.com/PolymerLabs/seed-element
DownloadBoilerplate
/development/seed-element/tests.bowerrcbower.jsondemo.htmlindex.htmlREADME.mdseed-element.cssseed-element.htmlUnzip it locally WorkspaceElement
/development/seed-element/tests.bowerrcbower.jsondemo.htmlindex.htmlREADME.mdseed-element.cssseed-element.htmlBoilerplate filesRenamefor my-tabs
/development/my-tabs/tests.bowerrcbower.jsondemo.htmlindex.htmlREADME.mdmy-tabs.cssmy-tabs.htmlRenamed files
bower.io
$ npm install -g bowerTerminal
$ npm install -g bower!npm http GET https://registry.npmjs.org/bowernpm http 200 https://registry.npmjs.org/bowernpm http GET https://registry.npmjs.org/bower/-/bower-1.3.3.tgznpm http 200 https://registry.npmjs.org/bower/-/bower-1.3.3.tgznpm http GET https://registry.npmjs.org/bower-endpoint-parsernpm http GET https://registry.npmjs.org/bower-jsonnpm http GET https://registry.npmjs.org/bower-confignpm http GET https://registry.npmjs.org/bower-loggernpm http GET https://registry.npmjs.org/bower-registry-clientnpm http GET https://registry.npmjs.org/insight…Terminal
~/development/my-tabs$ bower installTerminal
~/development/$ ls!core-action-iconscore-component-pagemy-tabsplatformpolymerchaimochaTerminal
~/development/$ ls!core-action-iconscore-component-pagemy-tabsplatformpolymerchaimochaTerminalAvoids nested dependency treesmy-tabs / bower_componentsmy-toolbar / bower_componentsmy-button / bower_components
!!!!<br/>Polymer(‘seed-element’, {…});<br/>my-tabs.html
!!!!my-tabs.htmlnoscriptif not using JS
RE-USINGELEMENTS
polymer-project.org/docs/elements/
http://polymer.github.io/core-docs/#core-selector
!$ bower install Polymer/core-selector —saveTerminal
!$ bower install Polymer/core-selector —save!bower cached git://github.com/Polymer/core-selector.git#0.3.0bower validate 0.3.0 against git://github.com/Polymer/core-selector.git#*bower not-cached git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0bower resolve git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0bower not-cached git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0bower resolve git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0Terminal
!!!
!!!!!my-tabs.html
:host { font-family: ‘Roboto’, ‘Arial’, sans-serif; }!polyfill-next-selector { content: ':host > .core-selected'; }::content > .core-selected {background: #5599FF;color: white;}!polyfill-next-selector { content: ':host > *'; }::content > * {min-width: 60px;height: 60px;line-height: 60px;text-align: center;padding: 0 8px;font-size: 14px;color: #999;}my-tabs.css
!Tab 1Tab 2Tab 3Ideal usage
!!!!my-tabs.html
my-tabs Demo!!!demo.html
...!OneTwoThree!demo.html
...!OneTwoThree!demo.htmlselected=“0”selects the first tab
!$ python -m SimpleHTTPServer 8000Terminal
Deployment
ELEMENTS CANBE SHARED
Push to master!
Push docs, demos, landing pageto gh-pages!Next
~/development/my-tabs$ cd ..Terminal
$ mkdir temp && cd tempTerminal
$ git clone git://github.com/Polymer/tools.git!Cloning into 'tools'...remote: Reusing existing pack: 1201, done.remote: Total 1201 (delta 0), reused 0 (delta 0)Receiving objects: 100% (1201/1201), 834.45 KiB | 277.00 KiB/s, done.Resolving deltas: 100% (476/476), done.Checking connectivity... done.!!Terminal
$ ./tools/bin/gp.sh my-tabsTerminal
http://bit.ly/NZmXRP
http://addyosmani.github.io/my-tabs
DocsAutomatically scraped and generated from source.
https://www.flickr.com/photos/bensutherland/2274353620
TestsUnit testing your elements
!var myEl = document.querySelector('seed-element');assert.equal(myEl.author, 'Dimitri Glazkov');Test properties
!var hello = myEl.sayHello();assert.equal(hello, 'seed-element says, Hello World!');!var greetings = myEl.sayHello('greetings Earthlings');assert.equal(greetings, 'seed-element says, greetings Earthlings');Test methods
!myEl.addEventListener('seed-element-lasers-success', function(event) {!assert.equal(event.detail.sound, 'Pew pew pew!');done();});!myEl.fireLasers();Test events
Elements!Docs!Tests!
GO COMPONENTIZETHE WEB TODAY
Thank you!#componentizetheweb+AddyOsmani@addyosmani
github.com/PolymerLabs/seed-element
addyosmani
maaretp
ffjlabo
manfredsteyer
yumakann
microcms
mukky620
koic
ymotongpoo
prof18
kinocoboy2
totto2727
naokimrmt
sonatard
michaelherold
andyhume
hatefulcrawdad
quramy
soudai
lynnandtonic
sachag
jrom
jensimmons
chriscoyier
kastner