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
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
770
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Communicating Effectively As A Tech Lead
addyosmani
5
4.9k
The Future Of Performance Tooling
addyosmani
3
830
Picture Perfect - How To Instantly Load Images
addyosmani
4
730
Polyfilling The Web Forward
addyosmani
2
520
Picture Perfect - An Image Optimization Talk
addyosmani
2
740
Learning Patterns
addyosmani
30
78k
Optimizing For Core Web Vitals
addyosmani
0
930
Other Decks in Programming
See All in Programming
CDK引数設計道場100本ノック
badmintoncryer
2
590
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
680
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
Jakarta EE Meets AI
ivargrimstad
0
460
TypeScriptでDXを上げろ! Hono編
yusukebe
3
890
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
iOS開発スターターキットの作り方
akidon0000
0
230
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.4k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
3
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
The Cult of Friendly URLs
andyhume
79
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Facilitating Awesome Meetings
lara
54
6.5k
Code Review Best Practice
trishagee
69
19k
Practical Orchestrator
shlominoach
190
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Designing for humans not robots
tammielis
253
25k
Building Applications with DynamoDB
mza
95
6.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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