polymer 1.0 par cyril balit - jug orléans
TRANSCRIPT
Polymer 1.0@cbalit
Moi...
Cyril Balit CTO Front
@cbalit
Des composants
@polymer #itshackademic
<paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>
Less Code. Less confusion.Web Components
WEB COMPONENTS
HTMLIMPORTS
SHADOWDOM
TEMPLATES CUSTOMELEMENTS
CUSTOM ELEMENT
To define your own HTML tag
SHADOW DOM
To encapsulate subtree and style in an element
HTML IMPORTS
To include an html page in another one
TEMPLATE
To have clonable document template
But ...
Polyfills ...
Photo: http://bit.ly/1CeBPyN
Polymer elements
<paper-checkbox></paper-checkbox>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
A simple container with a headersection and a content section
<paper-header-panel>
<paper-header-panel flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div>…</div>
</paper-header-panel>
MY APP
<paper-drawer-panel>
<paper-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</paper-drawer-panel>
Créer un composant
Polyfills
<html>
<head>
<script src="webcomponents/webcomponents-lite.min.js"></script>
</head>
<body>
</body>
</html>
Importer l’élément
<html>
<head>
<script src="webcomponents/webcomponents-lite.min.js"></script>
<link rel=”import” href="paper-card.html">
</head>
<body>
</body>
</html>
Utiliser l’élément
<html>
<head>
<script src="webcomponents/webcomponents-lite.min.js"></script>
<link rel=”import” href="paper-card.html">
</head>
<body>
<paper-card heading=”hello my friend”>
<img src=”avatar.svg”>
</paper-card>
</body>
</html>
<dom-module id="paper-card"> <style> :host { border-radius: 2px; } .card-header ::content img { width: 70px; border-radius: 50%; } paper-material { border-radius: 2px; } </style> <template> <paper-material elevation="{{elevation}}" animated on-tap=”tapAction”> <div class="card-header layout horizontal center”> <content select="img"></content> <h3>{{heading}}</h3> </div> <content></content> </paper-material> </template></dom-module><script> Polymer({ is:'paper-card', properties: { heading: {type: String, reflectToAttribute: true, value: “”}, elevation: {type: Number, reflectToAttribute: true, value: 1} }, attached: function() { /* your initialisations here */ }, tapAction: function (e) { /* your event handling here */ } });</script>
script: called on init
content injection using select= polymer expression
injecting all other content
scrip
t / p
roto
type
the name must have a “-”
event binding
published attributes
data binding
tags
/ sh
adow
DO
M a
nd s
tyle
Lifecycle
MyElement = Polymer({
is: 'my-element',
created: function() {},
attached: function() {},
detached: function() {},
attributeChanged: function(name, type) {}
ready: function() {}
});
1. created callback
2. local DOM initialized
3. ready callback
4. attached callback
Distribution du DOM: la composition
Light Dom and Shadow Dom
Light Dom and Shadow Dom
<my-component> <span class="title">Hello too</span> <span>Bla Bla Bla</span></my-component>
Dom & Light Dom
<h1>In Shadow</h1><h2>
<content select=".title"></content></h2><section>
<content></content></section>
Shadow Dom
<my-component><h1>In Shadow</h1><h2>
<span class="title">Hello too</span></h2><section>
<span>Bla Bla Bla</span></section>
</my-component>
Composed Dom
And Shady Dom ...
Problèmes liés au Polyfill (proxy des nodes)● beaucoup de code● performance pour wrapper l’API● Certains éléments ne peuvent être surchargés (window.document,
windo.document.body,document.documentElement..)
Shady Dom propose une API pour émuler l’encapsulation
Propriétés
Properties: configuration
● type.● valeur par défaut● observers● read-only● notification● Computed property
Polymer({
is: 'x-custom',
properties: {
userName: String,
isHappy: Boolean,
count: {
type: Number,
readOnly: true,
notify: true
}
}
...
});
<x-custom user-name="Scott"></x-custom>
Data binding
Data binding
Lié une propriété d’un élément à un attribut ou une propriété d’un élément fils.
<dom-module id="host-element">
<template>
<child-element name="{{myName}}"></child-element>
</template>
</dom-module>
2 types
● [[]] : one-way bindings ou host to child● {{}} : automatic binding (one way or two way selon la configuration)
Pour faire du 2 way databinding
● utiliser {{}}● La propriété fille doit être configurée avec un flag notify:true● La propriété fille ne doit pas être configurée avec un flag readOnly
Les expressions
● Références à une proriétés● Peut utiliser !● Compute bindings
<dom-module id="x-custom">
<template>
<div hidden="{{!enabled}}"></div>
<span>{{computeFullName(first, last)}}</span>
</template>
</dom-module>
<script>
Polymer({
is: 'x-custom',
properties: {
first: String,
last: String
},
computeFullName: function(first, last) {
return first + ' ' + last;
}
Helpers: dom-repeat
● itérer sur une liste● peut être filtré et trié
<dom-module id="employee-list">
<template>
<template is="dom-repeat" items="{{employees}}">
<div># <span>{{index}}</span></div>
<div>First name: <span>{{item.first}}</span></div>
</template>
</template>
…
</dom-module>
Helpers: dom-if
● Template conditionnel<dom-module id="user-page">
<template>
<template>
All users will see this:
<div>{{user.name}}</div>
<template is="dom-if" if="{{user.isAdmin}}">
Only admins will see this.
<div>{{user.secretAdminStuff}}</div>
</template>
</template>
…
</dom-module>
Styling
CSS et Shadow Dom
Nouveau sélécteurs● :host● ::content● Cross scope Styiling
○ ::shadow et /deep/
source :http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
Custom CSS properties/mixins
compatible avec le futur standards W3C
<dom-module id="my-button">
<template>
<style>
.title {
color: var(--my-toolbar-title-color,red);
}
:host {
@apply(--my-button-theme);
}
</style>
</template>
</dom-module>
<style>
.submit {
--my-toolbar-title-color: green;
}
.special {
--my-button-theme:{
padding:20px;
backgound-color:red;
}
</style>
<my-button class="submit"></my-button>
<my-button class="special"></my-button>
Cas réels
Une mire d’authentification pré-connectée
<frf-login>
<frf-login loginurl=“/login"
logouturl=“/logout">
<span>C’est qui ?</span>
</frf-login>
Architecture
frf-login
frf-user
frf-login-form
frf-confirm
html5-paper-input
frf-login-service
core-ajax
Une implémentation du composant google-recaptcha
<re-captcha>
<re-captcha sitekey="yoursitekey"
></re-captcha>
source: https://github.com/cbalit/re-captcha
LES OUTILS
Bower
bower install --save Polymer/polymer#^1.0.0
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
bower install --save PolymerElements/gold-elements
Yeoman
npm install -g generator-polymer
yo polymer (polymer:app)
yo polymer:el
yo polymer:seed
yo polymer:gh
Web Components Tester
npm install -g web-component-tester
wtc
OU
bower install Polymer/web-component-tester --save
<script src="../../web-component-tester/browser.js"></script>
An exemple
https://github.com/cbalit/re-captcha
Et aussi
● PolyUp● PolyServe● PolyLint● Vulcanize● Crisper● PolyBuild● ...
Merci ! Cyril Balit@cbalit