Paul valery et les Web components

A T E L I E R T E C H N I Q U E
I N T R O D U C T I O N A U X W E B C O M P O N E N T S
22 mars 2016

L e p r o b l è m e d u d é v e l o p p e m e n t W E B
« Ce qui est simple est faux »
PaulValery
La réalité
« Ce qui est compliqué est inutilisable »
PaulValery
Programmation Objet
« J’ai tout fait avec des balises Div »
Anonyme
Développement Web
2

1 2
3 4
Frameworks serveurs
HTML
Frameworks clients
Web components
Réponses
3
PrimeFaces
<p:calendar value="#{calendarView.date1}"
mode="inline" />
<input type="datetime">
<paper-date-picker date="April 20, 2015">
<paper-date-picker
date="April 20, 2015">
$('#defaultPopup,#defaultInline').datepick();
PHP ou Java… ?
JSF ou JSP ?
Incomplet
Pas mal…
Késako ?

U n c o m p o s a n t ?
Une structure
Un comportement
Un style
4

B a c k t o t h e t r e e
5
Balises HTML : <body>, <div>, …
Mes balises : <ma-balise1>, <ma-balise1>, …
Autres balises : <google-map>, <ckeditor>
<DOM>
Un composant est indépendant de la technologie serveur
Encapsulation

B a c k t o t h e t r e e
6
Client Serveur
Json Rest (PHP, Java,
Node.js…)
Javascript
Définir des composants  Définir des interfaces de services

W E B C o m p o n e n t s
HTML Imports Custom Elements Templates Shadow DOM
Objectif: permettre d’inclure des
fichiers html au sein de fichiers
html.
Objectif: permettre de définir ses
propres balises
Objectif: définir des parties
d’arborescence du DOM à réutiliser
Objectif : définir des limites pour
les styles au sein du DOM.
4 NormesW3C
7
http://w3c.github.io/webcomponen
ts/spec/imports/
ts/spec/custom/
https://html.spec.whatwg.org/mult
ipage/scripting.html#the-
template-element
ts/spec/shadow/

Un premier pro blème…
Les navigateurs, même dans leurs dernières versions, ne supportent pas toutes normes desWeb Components…

webco mpo nent.js - http://webco mpo nents .o rg/
Plusieurs librairies complémentaires ont été développées pour faciliter le développement de web components
Polymer : https://www.polymer-project.org (Google) X-Tag : http://x-tag.github.io/ (Mozilla) Bosonic : http://bosonic.github.io/

Catalogues de composants
https://customelements.io/
…
Catalogue
<google-map>
10

12
Inclusion webcomponent.js
Index.html
Hello-world.html
Inclusion polymer
HTML import
Template
Comportement dynamique
Custom element

«Le javascript c’est
tout pourri à coder»
PaulValery

G W T E v i d e m m e n t
15
Avec GWT 2.7 la frontière entre Java et Javascript s'amenuise
Javascript vers GWT
 Il est possible, dans du code GWT de manipuler desWeb components
GWT vers Javascript
 Il est possible de développer des web components à partir de widgets GWT
Article :
https://vaadin.com/blog/-/blogs/use-gwt-widget-as-polymer-web-component

We b C o m p o n e n t G W T
17
Le composant est essentiellement développé en GWT

18
Le composant est enrobé dans un web component (Polymer)

19
Le composant est ajouté normalement dans la page web

In co n vén ien ts
Questions globales
Incertitude sur l’adoption de la norme par les
développeurs
 Quelle librairie utiliser (polymer, x-tag,…) ?
 Organisation de l’écosystème des web components
Questions liées à GWT
 Compatibilité réelle des navigateurs ?
Débuggage via SDGB

Avan tages
Avantages globaux
 Mutualisation de code indépendant de la technologie
serveur
 Mutualisation entre les applications et les CDS
 Nombreuses idées de composants intéressants :
 Métadonnées
 Quicklooks
…
Avantages liées à GWT
 Utilisation du code dans les applications GWT
 Réutilisation des librairies GWT
Utilisation des outils de développement classiques
(maven, eclipse, …)

«Faudrait peut-être
prendre un stagiaire ?»
PaulValery

M erci
www.aeris-data.fr
Modèle de présentation : ttp://thepopp.com/ - Jun Akizak

Paul valery et les Web components

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Paul valery et les Web components

Similaire à Paul valery et les Web components (20)

Paul valery et les Web components