![Page 1: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/1.jpg)
![Page 3: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/3.jpg)
About Me
+Matthew McNulty @mattsmcnulty
![Page 4: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/4.jpg)
About This Talk
Overview of Polymer
The Polymer Ecosystem
Material Design
![Page 5: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/5.jpg)
But first…
![Page 6: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/6.jpg)
…Topeka?
![Page 7: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/7.jpg)
Topeka.
![Page 8: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/8.jpg)
polymer-project.org/apps/topeka or
http://goo.gl/4UYwXQ
![Page 9: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/9.jpg)
Demo Time.
![Page 10: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/10.jpg)
![Page 11: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/11.jpg)
Now that you are all distracted…
![Page 12: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/12.jpg)
This isn’t supposed to be possible.
![Page 13: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/13.jpg)
The web is for contentdocuments the boring part of a hybrid app
![Page 14: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/14.jpg)
So how did we do this?
![Page 15: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/15.jpg)
![Page 16: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/16.jpg)
What is Polymer?
![Page 17: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/17.jpg)
What is Polymer?
Polymer is a library that makes building applications easier
![Page 18: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/18.jpg)
Polymer is different than what has come before
What is Polymer?
![Page 19: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/19.jpg)
Polymer was built differently
What is Polymer?
![Page 20: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/20.jpg)
+
What is Polymer?
![Page 21: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/21.jpg)
Polymer doesn't fight the platform
What is Polymer?
![Page 22: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/22.jpg)
If you see something (broken), say something
What is Polymer?
![Page 23: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/23.jpg)
(to the person at the next desk)
What is Polymer?
![Page 24: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/24.jpg)
Polymer is the first of its kind
What is Polymer?
![Page 25: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/25.jpg)
Polymer is built on Web Components
What is Polymer?
![Page 26: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/26.jpg)
Web Components are standards
What is Polymer?
![Page 27: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/27.jpg)
Web Components change the web
What is Polymer?
![Page 28: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/28.jpg)
interoperable with custom elements
What is Polymer?
![Page 29: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/29.jpg)
composable with Shadow DOM
What is Polymer?
![Page 30: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/30.jpg)
consumable with HTML Imports
What is Polymer?
![Page 31: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/31.jpg)
Native in Chrome 36! (Beta)
![Page 32: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/32.jpg)
What does Polymer do?
![Page 35: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/35.jpg)
What does Polymer do?
Polymer does a lot that reduces boilerplate
that you have to write over and over and over
![Page 36: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/36.jpg)
What does Polymer do?
<polymer-is-declarative> </polymer-is-declarative>
![Page 39: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/39.jpg)
How do you use Polymer?
![Page 40: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/40.jpg)
How do you use Polymer?
1. Using Elements 2. Creating Elements
![Page 41: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/41.jpg)
Using Elements
1. Find the element you want
![Page 42: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/42.jpg)
Using Elements
2. Import it
<link rel="import" href=“my-button.html”>
![Page 43: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/43.jpg)
Using Elements
3. Use it.
<my-button label=“Press Me!”></my-button>
![Page 44: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/44.jpg)
Using Elements
That’s it.
![Page 45: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/45.jpg)
Using Elements
Polymer elements are “just” HTML
![Page 46: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/46.jpg)
Using Elements
With Polymer the framework is DOM
![Page 47: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/47.jpg)
Creating Elements
1. Register new tag & prototype 2. Define view 3. Handle events 4. Sync view with data 5. Respond to attribute changes
![Page 48: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/48.jpg)
Creating Elements
<my-counter>Users</my-counter> <my-counter counter="20">Developers</my-counter>
![Page 49: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/49.jpg)
Creating Elements <template> <style> /* ... */ </style> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> ! <script> (function() { var tmpl = document.querySelector('template'); var MyCounterProto = Object.create(HTMLElement.prototype); MyCounterProto.createdCallback = function() { var self = this; var root = this.createShadowRoot(); root.appendChild(document.importNode(tmpl.content, true)); var counterValue = this.getAttribute('counter') || 0; var counter = root.querySelector('#counter'); counter.innerText = counterValue; root.querySelector('#inc').addEventListener('click', function() { counter.innerText = ++counterValue; }); new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName == 'counter') { counter.innerText = counterValue = self.getAttribute('counter') || 0; } }); }).observe(this, {attributes: true}); }; MyCounter = document.registerElement('my-counter', { prototype: MyCounterProto }); })(); </script>
!
Using Standard API’s !
That’s a lot of typing
![Page 50: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/50.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer('my-counter', { publish: { counter: 0 }, increment: function() { this.counter++; }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
!
Using Polymer !
Aaaah, nice and DRY
![Page 51: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/51.jpg)
Creating Elements <polymer-element name="my-counter"> </polymer-element>
![Page 52: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/52.jpg)
Creating Elements <polymer-element name="my-counter"> <template> </template> </polymer-element>
![Page 53: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/53.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> </polymer-element>
![Page 54: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/54.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */ </style> <div id="label"><content></content></div> Value: <span id="counter"></span><br> <button id="inc">Increment</button> </template> </polymer-element>
!:host { background: lightgray; padding: 10px; display: inline-block; } #label { font-weight: bold; }
![Page 55: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/55.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id=“counter"></span><br> <button id="inc">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
![Page 56: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/56.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
![Page 57: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/57.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer({ publish: { counter: 0 }, counterChanged: function() { console.log("counter: " + this.counter); }, increment: function() { this.counter++; } }); </script> </polymer-element>
![Page 58: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/58.jpg)
Creating Elements <polymer-element name="my-counter"> <template> <style> /* ... */</style> <div id="label"><content></content></div> Value: <span id="counter">{{counter}}</span><br> <button id="inc" on-tap="{{increment}}">Increment</button> </template> <script> Polymer('my-counter', { publish: { counter: 0 }, increment: function() { this.counter++; }, counterChanged: function() { console.log("counter: " + this.counter); } }); </script> </polymer-element>
![Page 59: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/59.jpg)
What can you make with Polymer?
![Page 62: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/62.jpg)
What can you make with Polymer?
Apps out of Elements out of Elements out of Elements out of
![Page 63: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/63.jpg)
What can you make with Polymer?
Sets of elements
![Page 67: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/67.jpg)
Polymer Core Elements
Image:
<core-icon> <core-ajax> <core-localstorage> <core-style> <core-tooltip>
![Page 70: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/70.jpg)
Polymer Paper Elements
Buttons Inputs Tabs Cards Panels …
![Page 71: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/71.jpg)
Polymer Paper Elements
Fancy.
![Page 72: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/72.jpg)
Polymer Paper Elements
![Page 73: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/73.jpg)
The Web Components revolution
![Page 74: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/74.jpg)
The Web Components revolution
Polymer is at the forefront of a revolution
![Page 75: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/75.jpg)
The Web Components revolution
But Polymer is not alone
![Page 76: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/76.jpg)
The Web Components revolution
<x-tags>
![Page 77: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/77.jpg)
The Web Components revolution
Polymer is bootstrapping an ecosystem of interoperable components
Image:
![Page 78: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/78.jpg)
The Web Components ecosystem
webcomponents.org
![Page 80: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/80.jpg)
The Web Components revolution
A new ecosystem needs new tools
![Page 81: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/81.jpg)
The Web Components revolution
Polymer Designer
![Page 82: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/82.jpg)
The Web Components revolution
$./tools/vulcanize index.html --inline --strip -o build.html
Polymer Vulcanizer
![Page 85: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/85.jpg)
Demo: Polymer & The Web Components Ecosystem
![Page 86: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/86.jpg)
![Page 87: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/87.jpg)
What have we learned?
![Page 88: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/88.jpg)
Web Components
Polymer
Core, Paper Elements
What have we learned?
Ecosystem
![Page 89: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/89.jpg)
This ecosystem is just getting started
![Page 90: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/90.jpg)
Join the revolution
![Page 91: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/91.jpg)
Join the revolution
• Build an element • Wrap an API • Build an app • Stay put for Eric’s talk • Come check out Rob @4
![Page 92: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/92.jpg)
We’re just getting started
![Page 93: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/93.jpg)
Polymer Developer Preview
Paper Elements
Public today
Designer, Tutorials & more
![Page 94: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/94.jpg)
polymer-project.org
![Page 95: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/95.jpg)
![Page 96: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/96.jpg)
What’s next?Polymer & Web Components Change Everything You Know About Web Development Eric Bidelman - Same room, in a few minutes
Unlock the next era of UI development with Polymer Rob Dodson - 4pm, Room 4
![Page 97: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/97.jpg)
+Matthew McNulty @mattsmcnulty
Thank you!
@polymer
FEEDBACK QR CODE
(provided by I/O team)
FEEDBACKhttp://goo.gl/UhIJMk
![Page 98: Polymer & the web components revolution 6:25:14](https://reader031.vdocument.in/reader031/viewer/2022012922/53fe1c8b8d7f72d92d8b45c9/html5/thumbnails/98.jpg)