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.

Web components

676 views

Published on

Introduccion al uso de webComponents, shadowDom, imports, templates, customElements, Polymer

Published in: Technology
  • Be the first to comment

Web components

  1. 1. 0 @roci_munoz rocimunoz@gmail.com WebComponents https://github.com/rocimunoz
  2. 2. Sobre Rocio Muñoz ZYLK (BILBAO) Empresa de Software Libre Trabajo en entornos Java (Spring, Maven, Ibatis, Oracle, Mysql, Sonar, Jenkins, Vaadin …) Web en mi tiempo libre (Node, Grunt, Bower, Sass, Javascript, Css … ) Colaboro en Cantabriatic http://www.cantabriatic.com INDRA (MADRID) Departamento Financiero BBVA CIC CONSUTING (SANTANDER) Sector Eléctrico Viesgo Distribución
  3. 3. WebComponents  Problemas actuales en la web  Evolución de los webcomponents  WebComponents: Qué son  Shadow DOM  Custom Elements  Html Imports  Templates  Polymer: Ejemplo
  4. 4. 1. Problemas actuales en el mundo web
  5. 5. 1.Problemas actuales Antes el peso de una web estaba en el servidor Ahora el cliente es cada vez más complejo Surgen nuevos problemas 1)Encapsulamiento (iframes, !important) 2)Modularidad 3)Extensibilidad 4)Templates
  6. 6. 1.Problemas: Encapsulamiento Especificidad de selectores: Abusamos de iframes o !important
  7. 7. 1.Problemas: Modularidad CSS: Smacss, OOCCS, variables, mixins, preprocesadores CSS Javascript: Backbone, Angular, Ember, Grunt, Yeoman, Bower, preprocesadores javascript Html: No puedo reutilizar código Html escrito en otros ficheros
  8. 8. 1.Problemas: Extensibilidad Etiquetas básicas <div><span><p> <table><tr><td> … <font><b><i><small><bold>... <form><input><label><button> … <video><img src=””> ¿Y si necesito elementos nuevos? <grafico-3d>,<grid>, <paleta-colores>, <album-fotos>, <tarjeta-contacto>
  9. 9. 1.Problemas: Templates ● Si existen templates en lenguajes de tipo servidor ● Php, Python, Ruby on Rails … ● En cliente aplicamos javascript para usar templates ● Angular, Backbone, Ember ... ● No podemos aplicar templates en el HTML
  10. 10. 2. WebComponents
  11. 11. 2. WebComponents. Evolución
  12. 12. 2. WebComponents. Qué son ● Conjunto de estandares que nos permitirán crear nuestros propios elementos Html ● Formado por 4 estandares: ● Shadow DOM → Encapsulamiento ● HTML Imports → Modularidad ● Templates → Templates ● Custom Elements → Extensibilidad
  13. 13. 2. WebComponents. Shadow DOM ● Nueva especificación dentro de webComponents que resuelve los problemas de “encapsulamiento” del CSS/JS ● Es un árbol DOM encapsulado que convive con el DOM padre de una web ● shadow Host: nodo donde se inserta un shadowRoot ● shadow Root: subarbol aislado de la web que cuelga de Host document.getSelector(“div”).createShadowRoot();
  14. 14. 2. WebComponents. Shadow DOM
  15. 15. 2. WebComponents. API Shadow DOM Crear un arbol ShadowDOM document.querySelector('#selector').createShadowRoot(); Comunicación entre arbol DOM y Shadow DOM <content select=''></content> Gestion LIFO entre arboles DOM <shadow></shadow> Nuevas etiquetas css :host, :host(), ::shadow, deep
  16. 16. 2. Compatibilidad Shadow DOM Chrome y Opera trabajan con Shadow DOM Firefox: about:config (dom.webcomponents.enabled)
  17. 17. 2. WebComponents. CustomElements ● Nueva especificación que resuelve los problemas de extensibilidad ● Permite al usuario definir nuevas etiquetas HTML ● Nomenclatura: usar un guion <my-tag></my-tag> ● Registro de un Custom Element var myTag = document.registerElement('my-tag'); document.body.appendChild(new myTag());
  18. 18. 2. Compatibilidad. CustomElements Chrome y Opera trabajan con Custom Elements Firefox: about:config (dom.webcomponents.enabled)
  19. 19. 2. WebComponents. Html Imports ● Nueva especificación que nos resuelven los problemas de modularidad ● Permite incluir y reutilizar Html en otros documentos Html Sincrono <link rel="import" href="component1.html"> Asincrono <link rel="import" href="component2.html" async>
  20. 20. 2. WebComponents. Html Imports imports a una misma URL solo se cargan 1 vez Vulcanize herramienta de polymer para reducir las peticiones de red mezclando todos los imports en un único fichero
  21. 21. 2. Compatibilidad. Html Imports
  22. 22. 2. WebComponents. Templates ● Nueva especificación dentro de webComponents ● Nos permiten utilizar patrones y formas comunes de trabajar entre los desarrolladores ● Templates no son visibles en el DOM hasta que se invocan <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template>
  23. 23. 2. WebComponents. Templates var t = document.querySelector('#mytemplate'); t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone); <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> Activamos un template
  24. 24. 2. Compatibilidad. Templates
  25. 25. 2. WebComponents. Polyfills ¿Está lista la web para usar webcomponents? ¿Funcionarán mis aplicaciones en todos los navegadores? POLYFILL Trozos de código que permiten añadir funcionalidades nuevas a navegadores que no lo soportan. webcomponents.js: Conjunto de polyfills webcomponents-lite.js: Conjunto más ligero de polyfills sin soporte para shadow DOM
  26. 26. 2. WebComponents. Frameworks Polymer Framework para trabajar con web components. Es un proyecto de Google X-Tag Pequeña libreria de javascript para trabajar con WebComponents. Creado y soportado por Mozilla Bosonic Conjunto de herramientas para construir webcomponents.
  27. 27. 3. Polymer y Polymer Starter Kit
  28. 28. 3. Polymer Librería/Framework javascript sobre el estándar de webcomponents Polymer 1.0 se encuentra en producción desde Mayo 2015
  29. 29. 3. Polymer Componentes listos para usar en Polymer 1.0 ● paper-elements: elementos UI con estilo Material Design ● iron-elements: elementos básicos para crear aps ● google-web-components: servicios de google encapsulados en forma de webcomponents ● platinium-elements: notificaciones, cache ... ● gold-elements: componentes para eccommerce ● neon-elements: animaciones
  30. 30. 3. Polymer: Repositorios Custom Elements io https://customelements.io/ Catalogo Polymer https://elements.polymer-project.org/
  31. 31. 3. Polymer Starter Kit Google Developer ● Polymer-starter-kit-light ● Polymer-starter-kit https://developers.google.com/web/tools/polymer-starter-kit/ Yeoman Polymer npm install -g generator-polymer yo polymer GIT HUB Polymer https://github.com/PolymerElements/polymer-starter-kit/
  32. 32. 3. Polymer Starter Kit
  33. 33. Gracias!! @roci_munoz rocimunoz@gmail.com https://github.com/rocimunoz

×