Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Paul valery et les Web components

415 views

Published on

Introduction aux web components et ébauche d'une stratégie à ce sujet

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Paul valery et les Web components

  1. 1. 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
  2. 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. 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 20, 2015"> $('#defaultPopup,#defaultInline').datepick(); PHP ou Java… ? JSF ou JSP ? Incomplet Pas mal… Késako ?
  4. 4. U n c o m p o s a n t ? Une structure Un comportement Un style 4
  5. 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. 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. 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. 8. Un premier pro blème… Les navigateurs, même dans leurs dernières versions, ne supportent pas toutes normes desWeb Components…
  9. 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/
  10. 10. Catalogues de composants https://customelements.io/ … Catalogue <google-map> 10
  11. 11. Un exemple
  12. 12. 12 Inclusion webcomponent.js Index.html Hello-world.html Inclusion polymer HTML import Template Comportement dynamique Custom element
  13. 13. H e l l o U n i c o r n 13
  14. 14. «Le javascript c’est tout pourri à coder» PaulValery
  15. 15. 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
  16. 16. Un exemple
  17. 17. We b C o m p o n e n t G W T 17 Le composant est essentiellement développé en GWT
  18. 18. We b C o m p o n e n t G W T 18 Le composant est enrobé dans un web component (Polymer)
  19. 19. We b C o m p o n e n t G W T 19 Le composant est ajouté normalement dans la page web
  20. 20. The next big thing ?
  21. 21. 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
  22. 22. 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, …)
  23. 23. «Faudrait peut-être prendre un stagiaire ?» PaulValery
  24. 24. M erci www.aeris-data.fr Modèle de présentation : ttp://thepopp.com/ - Jun Akizak

×