Introduction aux web components

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/ 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

Check these out next

Introduction aux web components

Recommandé

Contenu connexe

Présentations pour vous(20)

Similaire à Introduction aux web components(20)

Plus de Francois ANDRE(8)

Dernier(20)

Introduction aux web components