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
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Communicating Effectively As A Tech Lead
addyosmani
4
4.4k
The Future Of Performance Tooling
addyosmani
2
660
Picture Perfect - How To Instantly Load Images
addyosmani
1
560
Polyfilling The Web Forward
addyosmani
1
400
Picture Perfect - An Image Optimization Talk
addyosmani
2
540
Learning Patterns
addyosmani
29
73k
Optimizing For Core Web Vitals
addyosmani
0
730
Adaptive Loading - Improving the UX for billions on low-end devices
addyosmani
0
360
Other Decks in Programming
See All in Programming
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
REXML改善のその後
naitoh
0
190
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
670
Patched fetch did not work
quramy
4
410
How to Break into Reading Open Source
kaspth
2
220
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
260
Jakarta EE meets AI
ivargrimstad
1
540
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Ruby Parser progress report 2024
yui_knk
2
230
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
The Language of Interfaces
destraynor
153
23k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
The Mythical Team-Month
searls
218
43k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
3.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Atom: Resistance is Futile
akmur
261
25k
Adopting Sorbet at Scale
ufuk
73
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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