SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
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/
http://w3c.github.io/webcomponen
ts/spec/custom/
https://html.spec.whatwg.org/mult
ipage/scripting.html#the-
template-element
http://w3c.github.io/webcomponen
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
Un exemple
12
Inclusion webcomponent.js
Index.html
Hello-world.html
Inclusion polymer
HTML import
Template
Comportement dynamique
Custom element
H e l l o U n i c o r n
13
«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
Un exemple avec GWT
We b C o m p o n e n t G W T
18
Le composant est essentiellement développé en GWT
We b C o m p o n e n t G W T
19
Le composant est enrobé dans un web component (Polymer)
We b C o m p o n e n t G W T
20
Le composant est ajouté normalement dans la page web
Un exemple avec
Javascript
«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
The next big thing ?
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

Contenu connexe

Tendances

Tendances (20)

Java Fx
Java FxJava Fx
Java Fx
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Outillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLOutillage pour Windows 8 XAML
Outillage pour Windows 8 XAML
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
In01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introductionIn01 - Programmation Android - 01 - introduction
In01 - Programmation Android - 01 - introduction
 
Cv Mame Mbarou Ndaw
Cv Mame Mbarou NdawCv Mame Mbarou Ndaw
Cv Mame Mbarou Ndaw
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
JavaFX et le JDK9
JavaFX et le JDK9JavaFX et le JDK9
JavaFX et le JDK9
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
 
Adobe flex®
Adobe flex®Adobe flex®
Adobe flex®
 
CV Julien Verney LeadDev
CV Julien Verney LeadDevCV Julien Verney LeadDev
CV Julien Verney LeadDev
 
Presentation platform flash
Presentation platform flashPresentation platform flash
Presentation platform flash
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Tk08 Silverlight Une Cure De Jouvence Pour Vos Applications Asp Fr
Tk08 Silverlight Une Cure De Jouvence Pour Vos Applications Asp FrTk08 Silverlight Une Cure De Jouvence Pour Vos Applications Asp Fr
Tk08 Silverlight Une Cure De Jouvence Pour Vos Applications Asp Fr
 
Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5Les nouveautés du Framework .NET 4.5
Les nouveautés du Framework .NET 4.5
 

En vedette

En vedette (10)

Panorama citation des donnees
Panorama citation des donneesPanorama citation des donnees
Panorama citation des donnees
 
Présentation normes OGC
Présentation normes OGCPrésentation normes OGC
Présentation normes OGC
 
Recommandations rda sur la citation des données
Recommandations rda sur la citation des donnéesRecommandations rda sur la citation des données
Recommandations rda sur la citation des données
 
Cas d'utilisation de la citation de données
Cas d'utilisation de la citation de donnéesCas d'utilisation de la citation de données
Cas d'utilisation de la citation de données
 
Introduction à GWT
Introduction à GWTIntroduction à GWT
Introduction à GWT
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
GWT- Google Web Toolkit
GWT- Google Web ToolkitGWT- Google Web Toolkit
GWT- Google Web Toolkit
 
Service WEB de type REST avec Java
Service WEB de type REST avec JavaService WEB de type REST avec Java
Service WEB de type REST avec Java
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
 
Tutoriel GIT
Tutoriel GITTutoriel GIT
Tutoriel GIT
 

Similaire à Introduction aux web components

Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 

Similaire à Introduction aux web components (20)

Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014 JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Paris Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascriptParis Web 2015 - Atelier desendettement javascript
Paris Web 2015 - Atelier desendettement javascript
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
 
Concevoir une preuve de concept web sémantique
Concevoir une preuve de concept web sémantiqueConcevoir une preuve de concept web sémantique
Concevoir une preuve de concept web sémantique
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 

Introduction aux web components

  • 1. 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
  • 2. 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
  • 3. 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 ?
  • 4. U n c o m p o s a n t ? Une structure Un comportement Un style 4
  • 5. 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
  • 6. 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
  • 7. 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/ http://w3c.github.io/webcomponen ts/spec/custom/ https://html.spec.whatwg.org/mult ipage/scripting.html#the- template-element http://w3c.github.io/webcomponen ts/spec/shadow/
  • 8. Un premier pro blème… Les navigateurs, même dans leurs dernières versions, ne supportent pas toutes normes desWeb Components…
  • 9. 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/
  • 12. 12 Inclusion webcomponent.js Index.html Hello-world.html Inclusion polymer HTML import Template Comportement dynamique Custom element
  • 13. H e l l o U n i c o r n 13
  • 14. «Le javascript c’est tout pourri à coder» PaulValery
  • 15. Eternel conflit de génération Existe aussi en version Java vs Php, Java vs Python, … GWT Javascript 15
  • 16. 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
  • 18. We b C o m p o n e n t G W T 18 Le composant est essentiellement développé en GWT
  • 19. We b C o m p o n e n t G W T 19 Le composant est enrobé dans un web component (Polymer)
  • 20. We b C o m p o n e n t G W T 20 Le composant est ajouté normalement dans la page web
  • 22. «Faudrait peut-être prendre un stagiaire ?» PaulValery
  • 23. 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
  • 24. 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
  • 25. R é s u l t a t 25 1 - Importation 2 - Utilisation 3 - Résultat
  • 26. 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)
  • 27. 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
  • 28. The next big thing ?
  • 29. 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
  • 30. 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, …)
  • 31. Merci www.aeris-data.fr Modèle de présentation : ttp://thepopp.com/ - Jun Akizak