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

1. 0
@roci_munoz
rocimunoz@gmail.com
WebComponents
https://github.com/rocimunoz

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. WebComponents
 Problemas actuales en la web
 Evolución de los webcomponents
 WebComponents: Qué son
 Shadow DOM
 Custom Elements
 Html Imports
 Templates
 Polymer: Ejemplo

4. 1.
Problemas actuales en el mundo web

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. 1.Problemas: Encapsulamiento
Especificidad de selectores: Abusamos de iframes o !important

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. 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. 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. 2.
WebComponents

11. 2. WebComponents. Evolución

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. 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. 2. WebComponents. Shadow DOM

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. 2. Compatibilidad Shadow DOM
Chrome y Opera trabajan con Shadow DOM
Firefox: about:config (dom.webcomponents.enabled)

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. 2. Compatibilidad. CustomElements
Chrome y Opera trabajan con Custom Elements
Firefox: about:config (dom.webcomponents.enabled)

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. 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. 2. Compatibilidad. Html Imports

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. 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. 2. Compatibilidad. Templates

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. 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. 3.
Polymer y
Polymer Starter Kit

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. 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. 3. Polymer: Repositorios
Custom Elements io
https://customelements.io/
Catalogo Polymer
https://elements.polymer-project.org/

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. 3. Polymer Starter Kit

33. Gracias!!
@roci_munoz
rocimunoz@gmail.com
https://github.com/rocimunoz