Introduction aux web components
0 j'aime351 vues
Le document traite des web components, en abordant leur structure, leur comportement et les technologies associées. Il discute également des problèmes de compatibilité des navigateurs et des différentes bibliothèques disponibles pour faciliter leur développement. Enfin, il présente les avantages et les inconvénients liés à l'adoption des web components, ainsi que leur intégration avec des frameworks comme GWT.
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/
- 11. Un exemple
- 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
- 17. Un exemple avec GWT
- 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