O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Paul valery et les Web components

414 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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

×