Introduction aux web components

A E R I S
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
27 mai 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 13, 2017">
$('#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

Eternel conflit de génération
Existe aussi en version Java vs Php, Java vs Python, …
GWT
Javascript
15

G W T E v i d e m m e n t
16
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
18
Le composant est essentiellement développé en GWT

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

20
Le composant est ajouté normalement dans la page web

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

Q u i c k l o o k e t s i t e s d e c a m p a g n e
23
Réponse Html
Génération de
l’affichage
Requête Http
Traitement de
La requête

A r c h i t e c t u r e R E S T ( O p e n S e a r c h )
24
RequêteAjax
Réponse du web-service
Génération de
l’affichage

R é s u l t a t
25
1 - Importation
2 - Utilisation
3 - Résultat

1 Indépendance de la technologie
2 Intégrables dans n’importe
quelle page Web
3 Légers et rapides
4 Composants réutilisables
A v a n t a g e s
26
5 Facilité de distribution (Bower)

A s u i v r e …
- Rapidité de développement
- Conception personnalisée afin de répondre précisément aux besoins
Développement de nouveaux composants1
Amélioration du composant web-service2
Mise en place d’outils de création de sites3
27

Inconvénients
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 t ages
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, …)

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

Introduction aux web components

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à Introduction aux web components

Similaire à Introduction aux web components (20)

Introduction aux web components