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.2k
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
Context Engineering - Making Every Token Count
addyosmani
5
200
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
The Cost Of JavaScript in 2023
addyosmani
53
9k
Communicating Effectively As A Tech Lead
addyosmani
5
5k
The Future Of Performance Tooling
addyosmani
3
860
Picture Perfect - How To Instantly Load Images
addyosmani
4
770
Polyfilling The Web Forward
addyosmani
3
550
Picture Perfect - An Image Optimization Talk
addyosmani
2
770
Learning Patterns
addyosmani
31
79k
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
250
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.5k
Model Pollution
hschwentner
1
190
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
240
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
420
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
930
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
350
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
950
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
How to Think Like a Performance Engineer
csswizardry
27
2k
Thoughts on Productivity
jonyablonski
70
4.9k
Done Done
chrislema
185
16k
The Invisible Side of Design
smashingmag
301
51k
4 Signs Your Business is Dying
shpigford
185
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Balancing Empowerment & Direction
lara
4
680
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Agile that works and the tools we love
rasmusluckow
331
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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