Polymer

PolymerPolymer ou comment AngularJS 2 est devenu ringard avant sa sortie
@XavMarin
https://github.com/Giwi

2
Petite histoire
Client lourds :
● Assemblage de Widgets
● Encapsulation / réutilisation

3
Client légers :
● HTML/CSS/Js ne gèrent pas les widgets, la page est la brique
de base
Petite histoire

4
GWT utilise le paradigme de développement du client lourd
● Widgets, propriétés, événements
Petite histoire

5
On est en 2016, on fait des Single Page App
C’est plus riche mais les faire sans widgets, c’est risqué!
● GWT
● React
● AngularJS 1 et 2
● Backbone
● Meteor
● ...
Petite histoire

6
Rappel sur la forge Javascript
Javascript Java
Gestion de dépendance
Construction / packaging
Scaffolding

7
Imaginons le bouton Google +
Les Web Components

<div class="g-plusone" data-annotation="inline" data-width="300"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

8
Ce serai plus sympa de taper :
<g:plusone></g:plusone>
Les Web Components

9
en fait c’est déjà possible :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"
></script>
<g:plusone></g:plusone>
Google a créé une “directive” avec javascript pour émuler un
composant
● Approche du type AngularJS
● Respecte l’esprit des futurs standards
● Marche avec les navigateurs actuels … non standards
Les Web Components

10
Avec la plupart des frameworks JS d’aujourd’hui, on peut déjà
créer ces composants
Le W3C essayer de standardiser cette approche
● support natif dans les navigateurs
● permettant la ré-utilisabilité
● mettra des années (décennies) à accoucher (cf HTML5)
Les Web Components

11
Les 3 principes du Web Component :
● Template
● canevas de mise en page
● aujourd’hui on utilise des balises non interprétées
● Shadow DOM
● le navigateur masque le sous-arbre du DOM
● déjà utilisé aujourd’hui par les navigateurs pour leurs besoins
internes
● Custom elements
● widget réutilisable associant template et comportement
● balise HTML custom et héritage
● Imports : <link rel="import" href="goodies.html">
Les Web Components

14
J’ai lu dans 01Informatique
ou Marie-Claire, je ne sais plus,
que le HTML6 serait du
Web Component.
Super, mais comment qu’on fait du
Web Component aujourd’hui avant
tout le monde?
Polymer

15
Un projet Google
● Présenté au Google I/O de 2013
● Nouveau framework Web
● bon hein, comme toutes les semaines il y en a un autre…
● Construit dans l’esprit Web Component
Polymer

16
Une approche modulaire
Polymer

17
Principes
● Tout est composant
● Pragmatisme extrême
● Boilerplate c’est le mal
● Tout ce qui est dupliqué doit être refactoré sous forme de
composant
– soit géré par Polymer
– soit ajouté au navigateur
● Modulaire
● On ne charge que ce qu’on a besoin :
– tu veux du plolyfill ? importe polymer-all/platform/platform.js
– tu veux faire de l’Ajax? importe PolymerElements/iron-ajax
– tu veux faire du material-design, importe
PolymerElements/paper-elements
Polymer

18
●
Bon, ok, AngularJS 1.x c’est super cool
●
Transpilable de ES6 -> ES5
●
Angular2 apporte TypeScript -> Transpilation !
●
on peut toujours faire du JS
<!doctype html>
<html>
<head>
<title>Directive Test</title>
<script type="text/javascript" src="jquery.min.js"
></script>
<script type="text/javascript"
src="angular.min.js"></script>
<script type="text/javascript"
src="mydirectives.js"></script>
</head>
<body ng-app>
<div test-elem></div>
</body>
</html>
Et AngularJS ?

19
● Librairies JS lourdes
● Dépendance JQuery
● quoique ce n’est pas tout
à fait vrai ;)
● Assez verbeux
● Angular 1 en fin de vie
● TypeScript : un langage
fortement typé traduit en
javascript?
● pas sur que la
communauté l’adopte
Et AngularJS ?
import {Component} from 'angular2/core';
import {Todo} from './todo';
import {TodoList} from './todo_list';
import {TodoForm} from './todo_form';
@Component({
selector: 'todo-app',
template: `
<h2>Todo</h2>
<span>{{remaining}} of {{todos.length}} remaining</span>
[ <a (click)="archive()">archive</a> ]
<todo-list [todos]="todos"></todo-list>
<todo-form (newTask)="addTask($event)"></todo-form>`,
styles:['a { cursor: pointer; cursor: hand; }'],
directives: [TodoList, TodoForm]
})
import {Component} from 'angular2/core';
import {Todo} from './todo';
import {TodoList} from './todo_list';
import {TodoForm} from './todo_form';
@Component({
selector: 'todo-app',
template: `
<h2>Todo</h2>
<span>{{remaining}} of {{todos.length}} remaining</span>
[ <a (click)="archive()">archive</a> ]
<todo-list [todos]="todos"></todo-list>
<todo-form (newTask)="addTask($event)"></todo-form>`,
styles:['a { cursor: pointer; cursor: hand; }'],
directives: [TodoList, TodoForm]
})

20
On veut du code !!!
Polymer

21

<script src="bower_components/webcomponentsjs/webcomponents-
lite.min.js"></script>

<link rel="import" href="bower_components/google-map/google-
map.html">

<google-map latitude="47.205403" longitude="-1.5631069"
zoom="17"></google-map>
Polymer

22
<dom-module name="x-my-module">
<template>
<style>
@host { /*...*/ }
</style>
<div id="box">
<h1>Bonjour les gens !</h1>
<p><content></content></p>
</div>
</template>
</dom-module>
<script>
Polymer({ is: 'x-my-module'});
</script>
Polymer

23
<!DOCTYPE html>
<html>
<head>

<script
src="bower_components/webcomponentsjs/webcomponents.js"></script>

<link rel="import" href="x-my-module.html">
</head>
<body>

<x-my-mudule>Comment ça va?</x-my-module>
</body>
</html>
Polymer
Bonjour les gens !
Comment ça va?

24
Bonjour les gens !
Comment ça va?
Click me!
Your name here ...
Polymer
<dom-module id="x-my-module">
<template>
<style> /.../ </style>
<div id="box">
<h1>{{greet}}</h1>
<p><content></content></p>
<div>
<button on-click="alertHello">Click me!</button>
</div>
<input is="iron-input" bind-value="{{whoami}}"
placeholder="Your name here..." />
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-my-module',
properties: {
whoami: { type: String, value: "DSIday", notify: true},
greet: { type: String, computed: 'doGreet(whoami)' }
},
alertHello: function() { alert("Bonjour" + this.whoami);},
doGreet: function(who) { return "Bonjour " + who}
});
</script>

25
<polymer-element name="user-gravatar" attributes="email">
<template>
<img src="https://secure.gravatar.com/avatar/{{gid}}" />
</template>
<script>
Polymer('user-gravatar', {
ready: function() {
this.gid = md5(this.email);
}
});
</script>
</polymer>
app.directive('user-gravatar', ['md5', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.gid = md5(attrs.email);
},
template: '<img src="https://gravatar.com/avatar/{{gid}}" />'
};
}]);
Comparaison avec Angular
Polymer = déclaration
AngularJS = programmation

26
Feature Polymer Angular
Templates x x
Web Components x
Material Components x
Data Binding x x
Filters x x
Animations x x
Events Handling x x
Touch and Gestures x
Routing librairie tierce x
AJAX / REST x x
Comparaison avec Angular

27
Le catalogue des éléments

28

29

32
http://www.google.com/design/spec/material-design/
Paper-Elements
Du Material Design !!!!! chouette
● Responsive Web Design
● Best practices pour les designers
● Comment faire de belles applications même si on a aucun
goût...
● Bon, tous les sites vont se ressembler (cf Bootstrap, Flat
design, etc …)

34
https://www.polymer-project.org/apps/topeka/
Paper-Elements : Paper-toolbar

36
Nouveau paradigme
Le webcomponent est la nouvelle brique de
base d'un développement web
Polymer est construit autour de ce paradigme

37
1 ligne 2 ligne 3 ligne 4 ligne
0
2
4
6
8
10
12
1 colonne
2 colonne
3 colonne
« Si vous avez compris ce que je viens
de vous dire, c’est que je me suis
probablement mal exprimé »
A. Greenspan

Polymer

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Polymer

Semelhante a Polymer (20)

Mais de Xavier MARIN

Mais de Xavier MARIN (7)

Último

Último (8)

Polymer