Weitere ähnliche Inhalte Ähnlich wie Polymer & the web components revolution 6:25:14 (20) Kürzlich hochgeladen (20) 13. The web is for content
documents
the boring part of a hybrid app
22. If you see something (broken),
say something
What is Polymer?
35. What does Polymer do?
Polymer does a lot that
reduces boilerplate
that you have to write
over and over and over
40. How do you use Polymer?
1. Using Elements
2. Creating Elements
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
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>
62. What can you make with Polymer?
Apps out of
Elements out of
Elements out of
Elements out of
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
69. What can you make with Polymer?
Image:
Polymer Paper Elements
material
design
77. The Web Components revolution
Polymer is bootstrapping
an ecosystem of
interoperable components
Image:
82. The Web Components revolution
$./tools/vulcanize index.html
--inline --strip
-o build.html
Polymer Vulcanizer
91. Join the revolution
• Build an element
• Wrap an API
• Build an app
• Stay put for Eric’s talk
• Come check out Rob @4
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
