Using Polymer, today
Sam Beckham
@samdbeckham
What is a web component?
"Web Components are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements."
tl;dr
Custom HTML elements
<video controls poster="poster.png">
<source src="devstories.mp4" type='video/mp4' />
<source src="devstories.webm" type='video/webm' />
</video>
SHADOW DOM
SHADOW DOM
So, What's Polymer then?
Web component framework
Web component easierifier
Polymer Element Catalogue
There's an element for that.
(Pretty much everyone at Google I/O)
They sound hard to make
<bill-murray/>
<bill-murray w="800" h="320"/>
<link
rel="import"
href=".../polymer.html">Import Polymer
<link rel="import" href=".../polymer.html">
<dom-module
id="bill-murray">
</dom-module>Add element
<link rel="import" href=".../polymer.html">
<dom-module id="bill-murray">
<template>
<img src="http://fillmurray.com/300/300">
</template>
</dom-module>Add template
<link rel="import" href=".../polymer.html">
<dom-module id="bill-murray">
<template>
<img src="http://fillmurray.com/300/300">
</template>
<script>
Polymer({
is: 'bill-murray'
});
</script>
</dom-module>Add javascript
<dom-module id="bill-murray">
<template>
<img src="http://fillmurray.com/300/300">
</template>
<script>
Polymer({
is: 'bill-murray',
properties: {
w: { value: 300 },
h: { value: 300 }
}
});
</script>
</dom-module>Add attributes
<dom-module id="bill-murray">
<template>
<img src="[[url]]">
</template>
<script>
Polymer({
is: 'bill-murray',
properties: { ... },
ready: function() {
this.url = 'http://fillmurray.com/'
+ this.width + '/'
+ this.height;
}
});
</script>
</dom-module>Inject attributes
<dom-module id="bill-murray">
<template>
<img src="[[url]]" width="[[w]]" height="[[h]]">
</template>
<script>
Polymer({
is: 'bill-murray',
properties: { ... },
ready: function() { ... }
});
</script>
</dom-module>Inject attributes
<dom-module id="bill-murray">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<template>
<img src="[[url]]" width="[[w]]" height="[[h]]">
</template>
<script>
Polymer({
is: 'bill-murray',
properties: { ... },
ready: function() { ... }
});
</script>
</dom-module>Add styles
That's it
http://samdbeckham.github.io/bill-murray/
Thanks!
Sam Beckham
@samdbeckham
BROWSER SUPPORT
Copy of Using Polymer, an introduction (10 min)
By Sam Beckham
Copy of Using Polymer, an introduction (10 min)
Polymer has been brewing in the Google labs for a the last few years. It's an awesome framework, but it's not been stable enough to use in production; until now. With the release of Polymer v1.0, we can finally start using it in the real world. It's time to take another look. In this talk I'll run through a quick overview of what Polymer is and what it does. I'll go over the re-vamped Polymer elements that get you up and running with a slick looking web app really quickly and I'll also dive in to how you can go about creating your own components.
