Web components

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

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

WebComponents
 Problemas actuales en la web
 Evolución de los webcomponents
 WebComponents: Qué son
 Shadow DOM
 Custom Elements
 Html Imports
 Templates
 Polymer: Ejemplo

1.
Problemas actuales en el mundo web

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

1.Problemas: Encapsulamiento
Especificidad de selectores: Abusamos de iframes o !important

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

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>

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

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

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();

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

2. Compatibilidad Shadow DOM
Chrome y Opera trabajan con Shadow DOM
Firefox: about:config (dom.webcomponents.enabled)

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());

2. Compatibilidad. CustomElements
Chrome y Opera trabajan con Custom Elements
Firefox: about:config (dom.webcomponents.enabled)

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>

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

2. Compatibilidad. Html Imports

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>

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

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

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.

3.
Polymer y
Polymer Starter Kit

3. Polymer
Librería/Framework javascript sobre el estándar de webcomponents
Polymer 1.0 se encuentra en producción desde Mayo 2015

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

3. Polymer: Repositorios
Custom Elements io
https://customelements.io/
Catalogo Polymer
https://elements.polymer-project.org/

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/

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

Web components

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Web components

Último

Web components