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
4
330
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Communicating Effectively As A Tech Lead
addyosmani
4
4.7k
The Future Of Performance Tooling
addyosmani
2
750
Picture Perfect - How To Instantly Load Images
addyosmani
3
640
Polyfilling The Web Forward
addyosmani
1
470
Picture Perfect - An Image Optimization Talk
addyosmani
2
670
Learning Patterns
addyosmani
29
76k
Optimizing For Core Web Vitals
addyosmani
0
830
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
210
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
270
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
790
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Software Architecture
hschwentner
6
2.1k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
2
290
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Domain-Driven Transformation
hschwentner
2
1.9k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Thoughts on Productivity
jonyablonski
69
4.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
A Philosophy of Restraint
colly
203
16k
Designing Experiences People Love
moore
140
23k
Fireside Chat
paigeccino
34
3.2k
4 Signs Your Business is Dying
shpigford
182
22k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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