Embed Size (px)
Citation preview
SPEAKER: Maurizio Mangione
★ Lead frontend developer @ Gild ★ Milano JS founder ★ Rock Climber, wannabe skater Twitter: @granze Github: https://github.com/Granze Website: http://granze.net
POLYMER & WEB COMPONENTS QUICK START
SPEAKER: Maurizio Mangione
AGENDA
HTML imports
Custom elements
Templates
Shadow DOM
v0.8
Element registration
Attributes & properties
Events
Tools
0.5 to 0.8 migration
and more...
DEMO INCLUDED!
SPEAKER: Maurizio Mangione
WHAT YOU NEED TO KNOW BEFORE WE START
Browser compatibility
⚑
SPEAKER: Maurizio Mangione
WHAT YOU NEED TO KNOW BEFORE WE START
Polymer 0.8 is in alpha!
SPEAKER: Maurizio Mangione
CUSTOM ELEMENTS
Create new HTML elements
<my-tabs>
<my-tab>tab 1</tab>
<my-tab>tab 2</tab>
<my-tab>tab 3</tab>
</my-tabs>
SPEAKER: Maurizio Mangione
HTML IMPORTS
Load custom element definitions and resources
<link rel="import" href="custom.html">
SPEAKER: Maurizio Mangione
SHADOW DOM
Scoped CSS + encapsulated markup
SPEAKER: Maurizio Mangione
TEMPLATES
Native templating in the browser
<template>
<h1>Hey there!</h1>
<img src="image.jpg" />
<script>
alert('whoooo!');
</script>
</template>
SPEAKER: Maurizio Mangione
HOW CAN I USE IT TODAY?
webcomponents.js
A set of polyfills built on top of the Web Components specifications. It makes it possible for developers to use these standards today across all modern browsers.
bower install --save webcomponentsjs
npm install --save webcomponentsjs
SPEAKER: Maurizio Mangione
INTRODUCING POLYMER
Polymer’s flavours
Polymer 0.8 is currently layered into 3 sets of features:
● polymer-micro.html: Polymer micro features (bare-minimum Custom Element sugaring)
● polymer-mini.html: Polymer mini features (template stamped into “local DOM” and tree
lifecycle) ● polymer.html: Polymer standard features (all other features: declarative data binding and
event handlers, property notification, computed properties, and experimental features)
Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Registering a custom element
<dom-module id="register-me">
<template>
<div>Hello from my local DOM</div>
</template>
</dom-module>
<script>
Polymer({is: "register-me"});
</script>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Extending a native element
Polymer({
is: 'super-button',
extends: 'button',
created: function() {
this.style.border = '1px solid red';
}
});
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Properties
Polymer({
is: 'my-name',
properties: {
firstName: {
type: String,
value: 'Granze'
}
}
});
<my-name first-name="Maurizio"></my-name>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Property change callbacks (observers)
Polymer({
is: 'my-name',
properties: {
firstName: {
type: String,
value: 'Granze',
observer: 'firstNameChanged'
}
}
});
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Default attributes
Polymer({
is: 'my-checkbox',
hostAttributes: {
checked: true,
tabindex: 0,
role: 'checkbox'
}
});
<my-checkbox></my-checkbox>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Local DOM
<dom-module id="my-name">
<template>
Hi, my name is <span>[[firstName]]</span>
</template>
</dom-module>
Polymer provides local DOM via a custom implementation called shady DOM
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Scoped styling
<dom-module id="my-name">
<style>
:host {border: 1px solid #666;}
</style>
<template>
Hi, my name is <span>[[firstName]]</span>
</template>
</dom-module>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Event listener
Polymer({
is: 'my-checkbox',
listeners: {
'click': 'handleClick'
},
handleClick: function(e) {
alert("Thank you for clicking");
}
});
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Annotated event listener
<dom-module id="x-custom">
<template>
<button on-click="handleClick">Click me!</button>
</template>
</dom-module>
<script>
Polymer({
is: 'x-custom',
handleClick: function() {
alert('Hi!');
}
});
</script>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Data Binding - textContent
<dom-module id="user-view">
<template>
First: <span>{{first}}</span>
</template>
</dom-module>
<script>
Polymer({
is: 'user-view',
properties: {firstName: String}
});
</script>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Attribute bindings
<input type="checkbox" checked$="[[isComplete]]">
SPEAKER: Maurizio Mangione
POLYMER FEATURES
One-way and/or Two-way
[[oneWay]] is different from {{twoWay}}
sometimes...
SPEAKER: Maurizio Mangione
POLYMER FEATURES
Property change notification and two-way binding
Polymer({
is: 'custom-element',
properties: {
prop: {
type: String,
notify: true
}
}
});
<!-- changes to "value" propagate downward to "prop" on child -->
<!-- changes to "prop" propagate upward to "value" on host -->
<custom-element prop="{{value}}"></custom-element>
SPEAKER: Maurizio Mangione
POLYMER FEATURES
One-way binding (downward)
Polymer({
is: 'custom-element',
properties: {
prop: {
type: String,
notify: true
}
}
});
<!-- changes to "value" propagate downward to "prop" on child -->
<!-- changes to "prop" are ignored by host -->
<custom-element prop="[[value]]"></custom-element>
SPEAKER: Maurizio Mangione
MIGRATION
0.5 to 0.8 migration
Official migration guide
SPEAKER: Maurizio Mangione
DEMO
<flip-clock></flip-clock>
flip-clock element repository on Github
SPEAKER: Maurizio Mangione
COMMUNITY
Polymer’s official channels
polymer-project.org
Polymer on GitHub
Polymer on Twitter
Polymer on G+
Slack channel
SPEAKER: Maurizio Mangione
TOOLS
Useful tools
★ Yeoman Generator ★ Polyserve ★ Vulcanize
SPEAKER: Maurizio Mangione
RESOURCES
Awesome Polymer
Website: training.codemotion.it E-mail: [email protected] Tw: @codemotionTR Mobile: 349 4400619 Address: Via G. Giolitti, 34, 00185 Roma
“L’istruzione è l’arma più potente che puoi usare per cambiare il mondo”
Nelson Mandela
Continuous Innovative Learning for Geeks
