Polymer and the

Web Components Revolution
Image:
About Me
+Matthew McNulty
@mattsmcnulty
About This Talk
Overview of Polymer
The Polymer Ecosystem
Material Design
But first…
…Topeka?
Topeka.
polymer-project.org/apps/topeka
or
http://goo.gl/4UYwXQ
Demo Time.
Now that you are all distracted…
This isn’t supposed to be possible.
The web is for content
documents
the boring part of a hybrid app
So how did we do this?
What is Polymer?
What is Polymer?
Polymer is a library that makes
building applications easier
Polymer is different than what
has come before
What is Polymer?
Polymer was built differently
What is Polymer?
+
What is Polymer?
Polymer doesn't
fight the platform
What is Polymer?
If you see something (broken),
say something
What is Polymer?
(to the person at the next desk)
What is Polymer?
Polymer is the first of its kind
What is Polymer?
Polymer is built on Web Components
What is Polymer?
Web Components are standards
What is Polymer?
Web Components
change the web
What is Polymer?
interoperable with
custom elements
What is Polymer?
composable with
Shadow DOM
What is Polymer?
consumable with
HTML Imports
What is Polymer?
Native in Chrome 36! (Beta)
What does Polymer do?
What does Polymer do?
Polymer makes
web components
sweeter
Image:
What does Polymer do?
Primitives are
Primitive
Image:
What does Polymer do?
Polymer does a lot that
reduces boilerplate
that you have to write
over and over and over
What does Polymer do?
<polymer-is-declarative>
</polymer-is-declarative>
What does Polymer do?
Image:
Polymer makes everything
work together better
What does Polymer do?
Image:
Polymer has an opinion
How do you use Polymer?
How do you use Polymer?
1. Using Elements
2. Creating Elements
Using Elements
1. Find the element you want
Using Elements
2. Import it
<link rel="import" href=“my-button.html”>
Using Elements
3. Use it.
<my-button label=“Press Me!”></my-button>
Using Elements
That’s it.
Using Elements
Polymer elements are “just” HTML
Using Elements
With Polymer the framework is DOM
Creating Elements
1. Register new tag & prototype
2. Define view
3. Handle events
4. Sync view with data
5. Respond to att...
Creating Elements
<my-counter>Users</my-counter>
<my-counter counter="20">Developers</my-counter>
Creating Elements
<template>
<style> /* ... */ </style>
<div id="label"><content></content></div>
Value: <span id="counter...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */</style>
<div id="label"><content></cont...
Creating Elements
<polymer-element name="my-counter">
</polymer-element>
Creating Elements
<polymer-element name="my-counter">
<template>
</template>
</polymer-element>
Creating Elements
<polymer-element name="my-counter">
<template>
<div id="label"><content></content></div>
Value: <span id...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */ </style>
<div id="label"><content></con...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */</style>
<div id="label"><content></cont...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */</style>
<div id="label"><content></cont...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */</style>
<div id="label"><content></cont...
Creating Elements
<polymer-element name="my-counter">
<template>
<style> /* ... */</style>
<div id="label"><content></cont...
What can you make with Polymer?
What can you make with Polymer?
Image:
Everything
What can you make with Polymer?
Image:
Quiz Apps
What can you make with Polymer?
Apps out of
Elements out of
Elements out of
Elements out of
What can you make with Polymer?
Sets of elements
What can you make with Polymer?
Image:
Elements can be visual
What can you make with Polymer?
Image:
Elements can be utility
What can you make with Polymer?
Image:
Polymer Core Elements
Polymer Core Elements
Image:
<core-icon>
<core-ajax>
<core-localstorage>
<core-style>
<core-tooltip>
Polymer Core Elements
Image:
<core-route>
<core-localized>
…?
What can you make with Polymer?
Image:
Polymer Paper Elements
material
design
Polymer Paper Elements
Buttons
Inputs
Tabs
Cards
Panels
…
Polymer Paper Elements
Fancy.
Polymer Paper Elements
The Web Components revolution
The Web Components revolution
Polymer is at the forefront
of a revolution
The Web Components revolution
But Polymer is not alone
The Web Components revolution
<x-tags>
The Web Components revolution
Polymer is bootstrapping
an ecosystem of
interoperable components
Image:
The Web Components ecosystem
webcomponents.org
The Web Components revolution
This is a big job
Image:
The Web Components revolution
A new ecosystem 

needs new tools
The Web Components revolution
Polymer Designer
The Web Components revolution
$./tools/vulcanize index.html
--inline --strip
-o build.html
Polymer Vulcanizer
The Web Components revolution
Testing
Image:
The Web Components revolution
Documentation
Image:
Demo: Polymer &
The Web Components Ecosystem
What have we learned?
Web Components
Polymer
Core, Paper Elements
What have we learned?
Ecosystem
This ecosystem is
just getting started
Join the revolution
Join the revolution
• Build an element
• Wrap an API
• Build an app
• Stay put for Eric’s talk
• Come check out Rob @4
We’re just getting started
Polymer Developer Preview
Paper Elements
Public today
Designer, Tutorials & more
polymer-project.org
What’s next?
Polymer & Web Components Change Everything You Know About Web Development
Eric Bidelman - Same room, in a few...
+Matthew McNulty
@mattsmcnulty
Thank you!
@polymer
FEEDBACK

QR CODE
(provided by I/O team)
FEEDBACK
http://goo.gl/UhIJMk
Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14
Polymer & the web components revolution 6:25:14
of 98

Polymer & the web components revolution 6:25:14

Polymer & the Web Components Revolution from Google I/O on 6/25/14 by Matthew McNulty. An overview of Web Components, Polymer, and the ecosystem and tools being created surrounding them.
Published on: Mar 4, 2016
Published in: Software      Technology      
Source: www.slideshare.net


Transcripts - Polymer & the web components revolution 6:25:14

  • 1. Polymer and the
 Web Components Revolution Image:
  • 2. About Me +Matthew McNulty @mattsmcnulty
  • 3. About This Talk Overview of Polymer The Polymer Ecosystem Material Design
  • 4. But first…
  • 5. …Topeka?
  • 6. Topeka.
  • 7. polymer-project.org/apps/topeka or http://goo.gl/4UYwXQ
  • 8. Demo Time.
  • 9. Now that you are all distracted…
  • 10. This isn’t supposed to be possible.
  • 11. The web is for content documents the boring part of a hybrid app
  • 12. So how did we do this?
  • 13. What is Polymer?
  • 14. What is Polymer? Polymer is a library that makes building applications easier
  • 15. Polymer is different than what has come before What is Polymer?
  • 16. Polymer was built differently What is Polymer?
  • 17. + What is Polymer?
  • 18. Polymer doesn't fight the platform What is Polymer?
  • 19. If you see something (broken), say something What is Polymer?
  • 20. (to the person at the next desk) What is Polymer?
  • 21. Polymer is the first of its kind What is Polymer?
  • 22. Polymer is built on Web Components What is Polymer?
  • 23. Web Components are standards What is Polymer?
  • 24. Web Components change the web What is Polymer?
  • 25. interoperable with custom elements What is Polymer?
  • 26. composable with Shadow DOM What is Polymer?
  • 27. consumable with HTML Imports What is Polymer?
  • 28. Native in Chrome 36! (Beta)
  • 29. What does Polymer do?
  • 30. What does Polymer do? Polymer makes web components sweeter Image:
  • 31. What does Polymer do? Primitives are Primitive Image:
  • 32. What does Polymer do? Polymer does a lot that reduces boilerplate that you have to write over and over and over
  • 33. What does Polymer do? <polymer-is-declarative> </polymer-is-declarative>
  • 34. What does Polymer do? Image: Polymer makes everything work together better
  • 35. What does Polymer do? Image: Polymer has an opinion
  • 36. How do you use Polymer?
  • 37. How do you use Polymer? 1. Using Elements 2. Creating Elements
  • 38. Using Elements 1. Find the element you want
  • 39. Using Elements 2. Import it <link rel="import" href=“my-button.html”>
  • 40. Using Elements 3. Use it. <my-button label=“Press Me!”></my-button>
  • 41. Using Elements That’s it.
  • 42. Using Elements Polymer elements are “just” HTML
  • 43. Using Elements With Polymer the framework is DOM
  • 44. Creating Elements 1. Register new tag & prototype 2. Define view 3. Handle events 4. Sync view with data 5. Respond to attribute changes
  • 45. Creating Elements <my-counter>Users</my-counter> <my-counter counter="20">Developers</my-counter>
  • 46. 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
  • 47. 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
  • 48. Creating Elements <polymer-element name="my-counter"> </polymer-element>
  • 49. Creating Elements <polymer-element name="my-counter"> <template> </template> </polymer-element>
  • 50. 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>
  • 51. 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; }
  • 52. 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>
  • 53. 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>
  • 54. 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>
  • 55. 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>
  • 56. What can you make with Polymer?
  • 57. What can you make with Polymer? Image: Everything
  • 58. What can you make with Polymer? Image: Quiz Apps
  • 59. What can you make with Polymer? Apps out of Elements out of Elements out of Elements out of
  • 60. What can you make with Polymer? Sets of elements
  • 61. What can you make with Polymer? Image: Elements can be visual
  • 62. What can you make with Polymer? Image: Elements can be utility
  • 63. What can you make with Polymer? Image: Polymer Core Elements
  • 64. Polymer Core Elements Image: <core-icon> <core-ajax> <core-localstorage> <core-style> <core-tooltip>
  • 65. Polymer Core Elements Image: <core-route> <core-localized> …?
  • 66. What can you make with Polymer? Image: Polymer Paper Elements material design
  • 67. Polymer Paper Elements Buttons Inputs Tabs Cards Panels …
  • 68. Polymer Paper Elements Fancy.
  • 69. Polymer Paper Elements
  • 70. The Web Components revolution
  • 71. The Web Components revolution Polymer is at the forefront of a revolution
  • 72. The Web Components revolution But Polymer is not alone
  • 73. The Web Components revolution <x-tags>
  • 74. The Web Components revolution Polymer is bootstrapping an ecosystem of interoperable components Image:
  • 75. The Web Components ecosystem webcomponents.org
  • 76. The Web Components revolution This is a big job Image:
  • 77. The Web Components revolution A new ecosystem 
 needs new tools
  • 78. The Web Components revolution Polymer Designer
  • 79. The Web Components revolution $./tools/vulcanize index.html --inline --strip -o build.html Polymer Vulcanizer
  • 80. The Web Components revolution Testing Image:
  • 81. The Web Components revolution Documentation Image:
  • 82. Demo: Polymer & The Web Components Ecosystem
  • 83. What have we learned?
  • 84. Web Components Polymer Core, Paper Elements What have we learned? Ecosystem
  • 85. This ecosystem is just getting started
  • 86. Join the revolution
  • 87. Join the revolution • Build an element • Wrap an API • Build an app • Stay put for Eric’s talk • Come check out Rob @4
  • 88. We’re just getting started
  • 89. Polymer Developer Preview Paper Elements Public today Designer, Tutorials & more
  • 90. polymer-project.org
  • 91. 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
  • 92. +Matthew McNulty @mattsmcnulty Thank you! @polymer FEEDBACK
 QR CODE (provided by I/O team) FEEDBACK http://goo.gl/UhIJMk

Related Documents