Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Reusable Polymer Elements
Search
Addy Osmani
August 11, 2014
Programming
45
2.1k
Creating Reusable Polymer Elements
In this talk, you'll learn how to create your own reusable elements using Polymer.
Addy Osmani
August 11, 2014
Tweet
Share
More Decks by Addy Osmani
See All by Addy Osmani
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Communicating Effectively As A Tech Lead
addyosmani
4
4.7k
The Future Of Performance Tooling
addyosmani
2
740
Picture Perfect - How To Instantly Load Images
addyosmani
2
630
Polyfilling The Web Forward
addyosmani
1
460
Picture Perfect - An Image Optimization Talk
addyosmani
2
640
Learning Patterns
addyosmani
29
75k
Optimizing For Core Web Vitals
addyosmani
0
820
Other Decks in Programming
See All in Programming
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
450
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
DMMオンラインサロンアプリのSwift化
hayatan
0
190
Beyond ORM
77web
11
1.6k
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
Scaling your build logic
antalmonori
1
100
return文におけるstd::moveについて
onihusube
1
1.4k
Package Traits
ikesyo
1
210
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
Flatt Security XSS Challenge 解答・解説
flatt_security
0
740
情報漏洩させないための設計
kubotak
5
1.3k
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rails Girls Zürich Keynote
gr2m
94
13k
Embracing the Ebb and Flow
colly
84
4.5k
It's Worth the Effort
3n
183
28k
Faster Mobile Websites
deanohume
305
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
Polymer Google Developer Group Hackathon.
Creating Reusable Elements +AddyOsmani @addyosmani
Apps should be composed of reusable, responsive & testable elements.
Examples
Bad Reusable <google-map>
Bad Reusable <core-toolbar>
Not
Not
None
<awesome-element> Today you might write an
Element Docs Tests
Element Create a component we’ve all written before.
Tabs http://drbl.in/bAsu http://drbl.in/esYL
None
None
None
None
PILE ON THE JAVASCRIPT
https://www.flickr.com/photos/ darkismus/4179361946
https://www.flickr.com/photos/ goodspeed/2669719176
http://goo.gl/lKk7iT
Tabs using web components
! <my-tabs> <my-tab>Tab 1</my-tab> <my-tab>Tab 2</my-tab> <my-tab>Tab 3</my-tab> </my-tabs> HTML
None
None
! <paper-tabs selected=“0”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs>
HTML
Building a tabs element
None
None
None
Start with <seed-element> github.com/PolymerLabs/seed-element
None
Download Boilerplate
/development /seed-element /tests .bowerrc bower.json demo.html index.html README.md seed-element.css seed-element.html
Unzip it locally Workspace Element
/development /seed-element /tests .bowerrc bower.json demo.html index.html README.md seed-element.css seed-element.html
Boilerplate files Rename for my-tabs
/development /my-tabs /tests .bowerrc bower.json demo.html index.html README.md my-tabs.css my-tabs.html
Renamed files
bower.io
$ npm install -g bower Terminal
$ npm install -g bower ! npm http GET https://registry.npmjs.org/bower
npm http 200 https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http 200 https://registry.npmjs.org/bower/-/bower-1.3.3.tgz npm http GET https://registry.npmjs.org/bower-endpoint-parser npm http GET https://registry.npmjs.org/bower-json npm http GET https://registry.npmjs.org/bower-config npm http GET https://registry.npmjs.org/bower-logger npm http GET https://registry.npmjs.org/bower-registry-client npm http GET https://registry.npmjs.org/insight … Terminal
~/development/my-tabs $ bower install Terminal
~/development/ $ ls ! core-action-icons core-component-page my-tabs platform polymer chai
mocha Terminal
~/development/ $ ls ! core-action-icons core-component-page my-tabs platform polymer chai
mocha Terminal Avoids nested dependency trees my-tabs / bower_components my-toolbar / bower_components my-button / bower_components
! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" attributes=“notitle author"> !
<template> <link href="seed-element.css" rel="stylesheet" /> </template> ! <script> Polymer(‘seed-element’, {…}); </script> </polymer-element> my-tabs.html
! <link rel="import" href="../polymer/polymer.html"> ! <polymer-element name="seed-element" noscript> ! <template>
<link href="seed-element.css" rel="stylesheet" /> </template> ! </polymer-element> my-tabs.html noscript if not using JS
RE-USING ELEMENTS
polymer-project.org/docs/elements/
http://polymer.github.io/core-docs/ #core-selector
http://polymer.github.io/core-docs/ #core-selector
http://polymer.github.io/core-docs/ #core-selector
! $ bower install Polymer/core-selector —save Terminal
! $ bower install Polymer/core-selector —save ! bower cached git://github.com/Polymer/core-selector.git#0.3.0
bower 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.0 bower resolve git://github.com/Polymer/core-selection.git#>=0.3.0 <1.0.0 bower not-cached git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 bower resolve git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0 Terminal
! <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../core-selector/core-selector.html"> ! ! <!--
Element providing solution to no problem in particular. ! ##### Example ! <my-tabs></my-tabs> my-tabs.html
! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css"
rel="stylesheet" /> <content></content> ! </template> ! </polymer-element> my-tabs.html
! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css"
rel="stylesheet" /> ! </template> ! </polymer-element> 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
! <my-tabs selected=“0”> <span>Tab 1</span> <span>Tab 2</span> <span>Tab 3</span> </my-tabs>
Ideal usage
! <my-tabs selected=“0”> <span>Tab 1</span> <span>Tab 2</span> <span>Tab 3</span> </my-tabs>
Ideal usage
! <polymer-element name="my-tabs" extends="core-selector" noscript> ! <template> ! <link href="my-tabs.css"
rel="stylesheet" /> <div horizontal layout> <shadow></shadow> </div> </template> ! </polymer-element> my-tabs.html
<html> <head> <title>my-tabs Demo</title> <script src="../platform/platform.js"></script> <link rel="import" href=“my-tabs.html"> !
</head> <body unresolved> ! <my-tabs></my-tabs> ! </body> </html> demo.html
<html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span>
<span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html
<html> <head> ... </head> <body unresolved> ! <my-tabs selected=“0”> <span>One</span>
<span>Two</span> <span>Three</span> </my-tabs> ! </body> </html> demo.html selected=“0” selects the first tab
! $ python -m SimpleHTTPServer 8000 Terminal
None
None
Deployment
ELEMENTS CAN BE SHARED
None
None
Push <my-tabs> to master!
Push docs, demos, landing page to gh-pages! Next
~/development/my-tabs $ cd .. Terminal
$ mkdir temp && cd temp Terminal
$ 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 <username> my-tabs Terminal
http://bit.ly/NZmXRP
http://addyosmani.github.io/my-tabs
None
None
None
None
Docs Automatically scraped and generated from source.
None
None
None
None
https://www.flickr.com/photos/ bensutherland/2274353620
Tests Unit testing your elements
None
! 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
None
Elements ! Docs ! Tests !
None
GO COMPONENTIZE THE WEB TODAY
Thank you! #componentizetheweb +AddyOsmani @addyosmani
<seed-element> github.com/PolymerLabs/seed-element