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.

2. Polymer and the
Web Components Revolution
Image:

3. About Me
+Matthew McNulty
@mattsmcnulty

4. About This Talk
Overview of Polymer
The Polymer Ecosystem
Material Design

5. But first…

6. …Topeka?

7. Topeka.

8. polymer-project.org/apps/topeka
or
http://goo.gl/4UYwXQ

9. Demo Time.

11. Now that you are all distracted…

12. This isn’t supposed to be possible.

13. The web is for content
documents
the boring part of a hybrid app

14. So how did we do this?

16. What is Polymer?

17. What is Polymer?
Polymer is a library that makes
building applications easier

18. Polymer is different than what
has come before
What is Polymer?

19. Polymer was built differently
What is Polymer?

20. +
What is Polymer?

21. Polymer doesn't
fight the platform
What is Polymer?

22. If you see something (broken),
say something
What is Polymer?

23. (to the person at the next desk)
What is Polymer?

24. Polymer is the first of its kind
What is Polymer?

25. Polymer is built on Web Components
What is Polymer?

26. Web Components are standards
What is Polymer?

27. Web Components
change the web
What is Polymer?

28. interoperable with
custom elements
What is Polymer?

29. composable with
Shadow DOM
What is Polymer?

30. consumable with
HTML Imports
What is Polymer?

31. Native in Chrome 36! (Beta)

32. What does Polymer do?

33. What does Polymer do?
Polymer makes
web components
sweeter
Image:

34. What does Polymer do?
Primitives are
Primitive
Image:

35. What does Polymer do?
Polymer does a lot that
reduces boilerplate
that you have to write
over and over and over

36. What does Polymer do?
<polymer-is-declarative>
</polymer-is-declarative>

37. What does Polymer do?
Image:
Polymer makes everything
work together better

38. What does Polymer do?
Image:
Polymer has an opinion

39. How do you use Polymer?

40. How do you use Polymer?
1. Using Elements
2. Creating Elements

41. Using Elements
1. Find the element you want

42. Using Elements
2. Import it
<link rel="import" href=“my-button.html”>

43. Using Elements
3. Use it.
<my-button label=“Press Me!”></my-button>

44. Using Elements
That’s it.

45. Using Elements
Polymer elements are “just” HTML

46. Using Elements
With Polymer the framework is DOM

47. Creating Elements
1. Register new tag & prototype
2. Define view
3. Handle events
4. Sync view with data
5. Respond to attribute changes

48. Creating Elements
<my-counter>Users</my-counter>
<my-counter counter="20">Developers</my-counter>

49. 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

50. 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

51. Creating Elements
<polymer-element name="my-counter">
</polymer-element>

52. Creating Elements
<polymer-element name="my-counter">
<template>
</template>
</polymer-element>

53. 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>

54. 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;
}

55. 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>

56. 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>

57. 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>

58. 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>

59. What can you make with Polymer?

60. What can you make with Polymer?
Image:
Everything

61. What can you make with Polymer?
Image:
Quiz Apps

62. What can you make with Polymer?
Apps out of
Elements out of
Elements out of
Elements out of

63. What can you make with Polymer?
Sets of elements

64. What can you make with Polymer?
Image:
Elements can be visual

65. What can you make with Polymer?
Image:
Elements can be utility

66. What can you make with Polymer?
Image:
Polymer Core Elements

67. Polymer Core Elements
Image:
<core-icon>
<core-ajax>
<core-localstorage>
<core-style>
<core-tooltip>

68. Polymer Core Elements
Image:
<core-route>
<core-localized>
…?

69. What can you make with Polymer?
Image:
Polymer Paper Elements
material
design

70. Polymer Paper Elements
Buttons
Inputs
Tabs
Cards
Panels
…

71. Polymer Paper Elements
Fancy.

72. Polymer Paper Elements

73. The Web Components revolution

74. The Web Components revolution
Polymer is at the forefront
of a revolution

75. The Web Components revolution
But Polymer is not alone

76. The Web Components revolution
<x-tags>

77. The Web Components revolution
Polymer is bootstrapping
an ecosystem of
interoperable components
Image:

78. The Web Components ecosystem
webcomponents.org

79. The Web Components revolution
This is a big job
Image:

80. The Web Components revolution
A new ecosystem
needs new tools

81. The Web Components revolution
Polymer Designer

82. The Web Components revolution
$./tools/vulcanize index.html
--inline --strip
-o build.html
Polymer Vulcanizer

83. The Web Components revolution
Testing
Image:

84. The Web Components revolution
Documentation
Image:

85. Demo: Polymer &
The Web Components Ecosystem

87. What have we learned?

88. Web Components
Polymer
Core, Paper Elements
What have we learned?
Ecosystem

89. This ecosystem is
just getting started

90. Join the revolution

91. Join the revolution
• Build an element
• Wrap an API
• Build an app
• Stay put for Eric’s talk
• Come check out Rob @4

92. We’re just getting started

93. Polymer Developer Preview
Paper Elements
Public today
Designer, Tutorials & more

94. polymer-project.org

96. 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

97. +Matthew McNulty
@mattsmcnulty
Thank you!
@polymer
FEEDBACK
QR CODE
(provided by I/O team)
FEEDBACK
http://goo.gl/UhIJMk