Este documento presenta sobre componentes web y el framework Polymer. Introduce los conceptos clave de la plataforma web orientada a componentes, incluyendo el modelo de encapsulamiento Shadow DOM, el modelo de renderizado utilizando templates, el modelo de extensión Custom Elements y el modelo de modularización HTML Imports. También describe los nuevos roles requeridos como diseñador de componentes, programador de componentes y maquetador de componentes.

1. Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
Componentes Web y El Framework Polymer
Programación Orientada a
Componentes Web
Junio 2014

2. @javiervelezreye 2
Presentación
Componentes Web y El Framework Polymer
Licenciado en informá2ca por la Universidad Politécnica de
Madrid (UPM) desde el año 2001 y doctor en informá2ca por la
Universidad Nacional de Educación a Distancia (UNED) desde el
año 2009, Javier es inves2gador y está especializado en el diseño
y análisis de la colaboración. Esta labor la compagina con
ac2vidades de evangelización, consultoría, mentoring y formación
especializada para empresas dentro del sector IT. Inquieto, ávido
lector y seguidor cercano de las innovaciones en tecnología.
I. ¿Quién Soy?
II. ¿A Qué Me Dedico?
Desarrollado Front/Back
Evangelización Web
Arquitectura SoVware
Formación & Consultoría IT
E-learning
Diseño de Sistemas de Colaboración
Learning Analy2cs
Gamificación Colabora2va
javier.velez.reyes@gmail.com
@javiervelezreye
linkedin.com/in/javiervelezreyes
gplus.to/javiervelezreyes
jvelez77
javiervelezreyes
youtube.com/user/javiervelezreyes

3. Javier Vélez Reyes
@javiervelezreye
Javier.veler.reyes@gmail.com
1 Introducción
§ El Camino hacia los Componentes Web
§ Qué es un Componente Web
§ La Web como Plataforma Orientada a Componentes
§ Un nuevos modelo de roles
Introducción
Componentes Web y El Framework Polymer

4. @javiervelezreye 4
Introducción
Componentes Web y El Framework Polymer
I. El Camino hacia los Componentes Web
En los úl2mos años se ha venido observando un claro movimiento hacia la modularización de
la Web. Sin el ánimo de ser exhaus2vos ni rigurosos podemos citar las principales aportaciones
que han promovido este cambio y que, en suma, han contribuido a la aparición de un nuevo
estándar para la construcción de sistemas Web basados en Componentes.
Se promueve el uso de librerías
JavaScript que encapsulan funciona-
lidades básicas para problemas
recurrentes en la Web.
Librerías JavaScript
Se construyen frameworks de front-
end para asisEr al proceso de
desarrollo de aplicaciones Web
basadas en arquitecturas MVC o
MVVM.
Frameworks MV*
Desde el mundo del diseño se
construyen frameworks presenta-
cionales que fomentan el uso de
prácEcas de CSS orientado a objetos
Frameworks CSS

5. @javiervelezreye 5
Introducción
Componentes Web y El Framework Polymer
II. Qué es un Componente Web
Como consecuencia de los esfuerzos de modularización y reu2lización anteriores surge, de la
mano de la W3C, el estándar de Componentes Web que pretende recoger estas inquietudes y
resolver algunos de los problemas que presentan las soluciones propuestas hasta la fecha.
Aunque, como veremos más adelante son muchas las tecnologías que circundan esta
especificación, un Componente Web puede definirse como sigue.
Se pretende proporcionar capacidades a los
desarrolladores para que creen sus propias
eEquetas. Éstas se caracterizan, a diferencia
de los elementos del estándar DOM, por
presentar un modelo de comportamiento no
inerte
Principio I. Extensibilidad
La extensibilidad de la Web alcanzada por
estos medios debe desarrollarse de manera
que se asegure que ésta se mantenga en
consonancia con la forma en que la Web
opera actualmente
Principio II. Racionalidad
Un Componente Web proporciona un mecanismo para construir
nuevos elementos DOM personalizados que incluyen semánEca
funcional nueva además de una estructura sintácEca
potencialmente diferente.

6. @javiervelezreye 6
Introducción
Componentes Web y El Framework Polymer
II. Qué es un Componente Web
Es conveniente destacar algunas caracterís2cas que ya sabemos acerca del funcionamiento de
la Web en general y del conjunto de sus elementos cons2tuyentes en par2cular. En virtud del
principio de Racionalidad, los nuevos componentes Web también deberán ajustarse a estas
caracterís2cas.
Todos los elementos pueden ser instanciados a través del
lenguaje de marcado o JavaScript.
<input type=“text”/>
HTML
var e = document.createElement (‘input’);
e instanceof HTMLInputElement === true;
JS
Todas las eEquetas que aparecen en una página
corresponden a instancias diferentes de una clase o
protoEpo de eEqueta.
Las eYquetas son instancias
var e = document.createElement(‘input’);
document.body.appendChild(e);
JS
Todos los elementos Eenen su lógica de inicialización
que desarrollan a medida que el navegador renderiza la
página
Los elementos Yenen un ciclo de vida
<input value=“foo”/>;
...
<script>
querySelector(‘input’).value === ‘foo’;
</script>
HTML/JS
Las eEquetas Eenen un estado caracterizado por el valor en
curso de cada uno de sus atributos
Las eYquetas Yenen estado
input.setAttribute (‘value’, ‘foo’);
...
input.value === ‘foo’;
JS
Correspondencia entre HTML y JS

7. @javiervelezreye 7
Introducción
Componentes Web y El Framework Polymer
II. Qué es un Componente Web
Es conveniente destacar algunas caracterís2cas que ya sabemos acerca del funcionamiento de
la Web en general y del conjunto de sus elementos cons2tuyentes en par2cular. En virtud del
principio de Racionalidad, los nuevos componentes Web también deberán ajustarse a estas
caracterís2cas.
Las eEquetas Eenen métodos JavaScript que pueden
invocarse para operar sobre ellas
Las eYquetas Yenen capacidades
<form id=“f”/>
HTML
var f = document.querySelector(‘#f’);
f.submit();
JS
Las eEquetas con estructura de bloque pueden
presentarse en contextos que aniden a otras eEquetas
hijas y a su vez sean anidadas por eEquetas padre
Las eYquetas pueden anidarse
<select>
<option>1</option>
<option>2</option>
<select>
HTML
Los elementos pueden definir ganchos para definir
comportamientos reacEvos al cambio de estado desde
las eEquetas de esElo
Los elementos Yenen hooks de esYlo
a:hover {
...
}
CSS
Las eEquetas pueden tener una estructura de objetos interna
potencialmente compleja pese a que sean eEquetas sencillas
desde la perspecEva del diseñador web
Las eYquetas pueden tener un modelo DOM complejo
<input id=“d” type=“date” />
<script>
var date = document.querySelector(‘#d’);
date.children.length === 0;
</script>
JS

8. @javiervelezreye 8
Introducción
Componentes Web y El Framework Polymer
III. La Web como Plataforma Orientada a Componentes
De esta manera asis2mos a un proceso de transformación conceptual de la Web, en la que
ésta se presenta como una plataforma de hospedaje para una colección de componentes con
un comportamiento funcional subyacente que se comunican y coordinan entre si, de acuerdo a
diferentes esquemas para ofrecer servicios de valor en el contexto de la página donde se
inscriben.
Incluye todas las nuevas capacidades
que exEenden la Web como
plataforma de orientación a compo-
nentes
Plataforma
Capacidades funcionales sobre la
plataforma que simplifican el
proceso de desarrollo de
Componentes Web
Core
Aplicaciones orientadas a compo-
nentes al servicio de los usuarios de la
Web
Aplicaciones
Componentes estándar dedicados a
dar respuesta a necesidades
recurrentes de control o UI que
surgen en el desarrollo orientado a
Componentes Web
Elementos

9. @javiervelezreye 9
Introducción
Componentes Web y El Framework Polymer
IV. Un Nuevo Modelo de Roles
Conviene señalar que, en el marco de este nuevo proceso de construcción de soluciones para
la Web basadas en componentes, se requieren nuevos roles de especialización técnica y flujos
de trabajo establecidos. A con2nuación bosquejamos los mismos.
Diseñador Web
EsEliza los contenidos de
acuerdo a directrices
presentacionales
Maquetador Web
Establece la estructura de los
contenidos de acuerdo a
directrices semánEcas
Establece el modelo de
comportamiento en reacción a los
eventos de interacción del usuario
CSS
JS
En la Web Clásica…
.className
HTML
Programador Web

10. @javiervelezreye 10
Introducción
Componentes Web y El Framework Polymer
IV. Un Nuevo Modelo de Roles
Conviene señalar que, en el marco de este nuevo proceso de construcción de soluciones para
la Web basadas en componentes, se requieren nuevos roles de especialización técnica y flujos
de trabajo establecidos. A con2nuación bosquejamos los mismos.
Diseñador de Componentes
Define el modelo de rendering
del componente de acuerdo a
directrices de esElo
Establece la estructura de los
contenidos internos que presenta el
componente cuando se renderiza
Programador de Componentes
Establece el modelo de
comportamiento subyacente que
se acEva cuando se renderiza el
componente
CSS
JS
En la Web Orientada
a Componentes…
<content>
.className
HTML
Maquetador de Componentes

11. @javiervelezreye 11
Introducción
Componentes Web y El Framework Polymer
IV. Un Nuevo Modelo de Roles
Conviene señalar que, en el marco de este nuevo proceso de construcción de soluciones para
la Web basadas en componentes, se requieren nuevos roles de especialización técnica y flujos
de trabajo establecidos. A con2nuación bosquejamos los mismos.
CSS
JS
En la Web Orientada
a Componentes…
css binding
HTML
.className
Diseñador de Componentes
Define el modelo de rendering
del componente de acuerdo a
directrices de esElo
Establece la estructura de los
contenidos internos que presenta el
componente cuando se renderiza
Programador de Componentes
Establece el modelo de
comportamiento subyacente que
se acEva cuando se renderiza el
componente
Maquetador de Componentes

12. Javier Vélez Reyes
@javiervelezreye
Javier.veler.reyes@gmail.com
2 La Plataforma
Web Orientada
a Componentes
§ Modelo de Encapsulamiento. Shadow DOM
§ Modelo de Renderizado. Templates
§ Modelo de Extensión. Custom Elements
§ Modelo de Modularización. HTML Imports
Conceptos Esenciales
Componentes Web y El Framework Polymer

13. @javiervelezreye 13
Conceptos Esenciales
Componentes Web y El Framework Polymer
I. Introducción
El modelo de componentes para la Web definido por la W3C consiste en cuatro
especificaciones tecnológicamente independientes que cubren dis2ntos aspectos del proceso
construc2vo. A lo largo de este capítulo revisaremos los conceptos esenciales que se manejan
en relación a tales especificaciones
Shadow DOM
Ofrece un modelo de encapsulamiento
que permite aislar el contenido interno
del componente de aquél en la página
donde éste es renderizado
Templates
Ofrece un modelo de construcción
basado en planEllas inertes de código
HTML que sólo son acEvadas cuando
se renderiza el componente
HTML Imports
Ofrece un modelo de modularización
basado en la posibilidad de incluir
ficheros de código HTML dentro de
otros ficheros HTML
Custom Elements
Ofrece un modelo de extensibilidad
que permite a los desarrolladores
definir sus propias eEquetas o redefinir
semánEcamente las eEquetas del
estándar DOM

14. @javiervelezreye 14
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
Sin más infraestructura de soporte, los iden2ficadores JS y CSS u2lizados internamente dentro
de cada componente podrían colisionar con los usados dentro de la página huésped o en otros
componentes residentes. Es necesario proporcionar un mecanismo de encapsulamiento que
aísle cada instancia de componente del resto de instancias y de la propia página.
Página Huésped
A
B
A
B
#baz
.bar
.foo #baz
.bar
.foo
#js-a
#js-b
#baz #js-a
#js-b
#baz
.foo
#baz
.bar
Aislamiento entre instancias
Se debe garanEzar que los idenEficadores dentro de
una instancia de componente no entren en conflicto
con aquéllos homónimos que, de forma natural,
aparecerán en el resto de instancias de compo-
nentes del mismo Epo dentro la página huésped
Aislamiento entre componentes
Debe asegurarse también el aislamiento entre
idenEficadores homónimos usados entre compo-
nentes de disEntos Epos
Aislamiento con la página huésped
El modelo de encapsulamiento garanEza la
ausencia de colisión con los elementos de la página
incluso aunque ésta sea a su vez la de otro compo-
nente
Shadow Host, Shadow Root & Shadow DOM
#baz
.bar
.foo

15. @javiervelezreye 15
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
Definiremos una nueva variante de nodo DOM llamado Shadow Host. Un Shadow Host es un
nodo DOM que con2ene un atributo hacia un nuevo nodo DOM llamado Shadow Root. De él
se puede hacer depender un subárbol DOM que transcurre en paralelo al documento llamado
Shadow DOM. Esto establece una variante de contenidos que al ser paralela es ignorada por el
algoritmo de rendering del navegador y establece así un espacio de nombres propio.
Shadow Host, Shadow Root & Shadow DOM
Nodo DOM normal Nodo Shadow Host Nodo Shadow Root
Light DOM
.shadowRoot
Shadow DOM
1
2
1
2
En los navegadores sin soporte a componentes web se
aplica el algoritmo de renderizado habitual. Como el
shadow DOM no es accesible por este algoritmo, el
componente no se renderiza y se conEnúa por el
recorrido habitual
Renderizado normal
Cuando el soporte a componentes web está acEvo, el
algoritmo de renderizado discrimina entre nodos
normales y nodos shadow host. En éstos úlEmos, deriva
el proceso de renderizado para mostrar el contenido del
shadow DOM mientras el Light DOM no se muestra
Renderizado shadow
Página Huésped
Componente
this

16. @javiervelezreye 16
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
Para conver2r un nodo normal en un shadow host es necesario incluir un atributo hacia un
shadow root. Esto se hace por medio del método createShadowRoot incluido como extensión
en el interfaz del la clase nodo.
Shadow Host, Shadow Root & Shadow DOM
<div id=“myHost”>
contenido del light dom
</div>
HTML
<script>
var host = document.querySelector(‘#myHost’);
var root = host.createShadowRoot();
root.innerHTML = “contenido del shadow dom”;
</script>
HTML/JS
Cualquier Epo de nodo DOM puede ser
converEdo en Shadow Host. A parEr de aquí el
esquema de rendering ignora el contenido y pasa
a procesar el Shadow DOM
Shadow Host
Primero se localiza el nodo que hará de anfitrión y se
convierte en shadow host creando en el un nodo shadow
root. Después sólo queda inyectar contenido HTML en el
shadow DOM por cualquier mecanismo estándar
Shadow Host

17. @javiervelezreye 17
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
var host = this;
host.querySelector(‘.foo’);
...
JS
El componente es una eEqueta accesible desde
el DOM. Para navegar el light DOM se usan los
mecanismos convencionales
A. Acceso a Light DOM
Shadow DOM Light DOM
this
.shadowRoot
var root = this.shadowRoot;
root.querySelector(‘.foo’);
...
JS
El componente es una eEqueta accesible desde
el DOM. Para acceder al root se navega por la
propiedad shadowRoot
B. Acceso a Shadow DOM
Shadow DOM Light DOM
this
.shadowRoot
En resumen, el modelo de encapsulación no oculta nada truculento. Cada nodo host dispone
de un enlace a un árbol DOM paralelo que puede ser recorrido de forma habitual siempre que
se recuerde que su punto de acceso es el shadow root.
Shadow Host, Shadow Root & Shadow DOM Shadow.1.html

18. @javiervelezreye 18
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
En los navegadores sin soporte a componentes, el light DOM permite hacer un renderizado
clásico de la información mientras que en aquéllos con soporte el light DOM no es mostrado.
Tiene sen2do reservar siempre el light DOM para que albergue el contenido exclusivamente
semán2co de la página mientras que el shadow DOM se encarga del renderizado y la lógica
presentacional. Pero, ¿cómo puede accederse desde el shadow DOM al contenido del light
DOM?
Puntos de Inserción & EYqueta Content
Light DOM
.shadowRoot
Shadow DOM
Página Huésped
Componente
?
Si el light DOM conEene el contenido semánEco
sobre la configuración del componente es muy
probable que el shadow DOM requieran
discrecionalmente partes de esa información
para arEcular su renderizado. Necesitamos un
mecanismo de trasvase de información entre
ambos árboles
Referencia de información
this

19. @javiervelezreye 19
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
En los navegadores sin soporte a componentes el light DOM permite hacer un renderizado
clásico de la información. Pero, y aquéllos con soporte el light DOM no es mostrado. Tiene
sen2do reservar el light DOM para que albergue el contenido exclusivamente semán2co de la
página mientras que el shadow DOM se encarga del renderizado. Pero, ¿cómo puede
accederse desde el shadow DOM al contenido del light DOM?
Puntos de Inserción & EYqueta Content
Light DOM
.shadowRoot
Shadow DOM
Página Huésped
Componente
Nodo con contenido SemánEco Punto de inserción
<content select=‘…’>
<div id=“myHost”>
<div class=“name”>Javier Vélez</div>
<div class=“twitter”>javiervelezreye</div>
</div>
HTML
<script>
var host = document.querySelector(‘#myHost’);
var root = host.createShadowRoot();
root.innerHTML =
‘D. <content select=“.name”></content>’ +
‘<hr>’ +
‘@<content select=“.twitter”></content>’;
</script>
HTML/JS
this

20. @javiervelezreye 20
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
var ip = root.querySelector(‘#i’);
var dNodes = ip.getDistributedNodes ();
dNodes...
JS
Seleccionado un punto de inserción se pueden
localizar los nodos del Light DOM que son
distribuidos en el shadow DOM
A. Acceso a Nodos Distribuidos
var e = host.querySelector (‘#i’);
var ips = e.getDestinationInsertionPoints();
ips...
JS
Para saber los puntos de inserción desde donde
un determinado nodo del Light DOM es referido
se accede a los puntos de inserción de desEno
B. Acceso a Puntos de Inserción de DesSno
Shadow DOM Light DOM
this
.shadowRoot
<div id=‘i’>
Es posible consultar programá2camente la colección de nodos del light DOM que son referidos
desde un punto de inserción así como saber en qué puntos de inserción se distribuye un
determinado nodo del light DOM.
Puntos de Inserción & EYqueta Content
Shadow DOM Light DOM
this
.shadowRoot
<content id=‘i’>
Shadow.2.html

21. @javiervelezreye 21
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
Para dar mayor flexibilidad en el proceso de diseño es posible incluir dentro de un shadow host
varios shadow roots. Éstos son ges2onados por el nodo anfitrión de acuerdo a una pila LIFO
para emular los mecanismos de diseño por capas. Ya sabemos como referir información del
light DOM desde el shadow DOM. Sin embargo, ¿cómo hacer lo mismo desde un shadow DOM
hacia el resto de shadow DOM que éste 2ene por debajo en la pila?
Puntos de Inserción en la Sombra & EYqueta Shadow
Light DOM
root1
Shadow DOMs
Página Huésped
Capas
this
<script>
var host = document.querySelector(‘#myHost’);
var root1 = host.createShadowRoot();
var root2 = host.createShadowRoot();
var root3 = host.createShadowRoot();
root1.innerHTML = ...
root2.innerHTML = ...
root3.innerHTML = ...
</script>
HTML/JS
root2
root3
? De igual manera, para arEcular un mecanismo de
diseño flexible y ponente, es conveniente disponer de
una manera de recuperar información de los shadow
DOM por debajo dentro de la pila
Trasvase de información entre capas cima
base

22. @javiervelezreye 22
Conceptos Esenciales
Componentes Web y El Framework Polymer
II. Modelo de Encapsulamiento. Shadow DOM
Para dar mayor flexibilidad en el proceso de diseño es posible incluir dentro de un shadow host
varios shadow roots. Éstos son ges2onados por el nodo anfitrión de acuerdo a una pila LIFO
para emular los mecanismos de diseño por capas. Ya sabemos como referir información del
light DOM desde el shadow DOM. Sin embargo, ¿cómo hacer lo mismo desde un shadow DOM
hacia el resto de shadow DOM que éste 2ene por debajo en la pila?
Puntos de Inserción en la Sombra & EYqueta Shadow
Light DOM
root1
Shadow DOMs
Página Huésped
Capas
this
<script>
...
root1.innerHTML = ‘Esta capa está oculta’;
root2.innerHTML = ‘D. <content select...’;
root3.innerHTML =
‘<div class=“.box”>’ +
‘ <shadow></shadow>’ +
‘</div>’;
</script>
HTML/JS
root2
root3
Nodo de contenido en capa Punto de inserción en la sombra
<shadow> Las capas que no tuvieran una referencia <shadow>
desde capas superiores no serían incluidas en el
proceso de renderizado
Capas ocultas cima
base
Shadow.3.html

23. @javiervelezreye 23
Conceptos Esenciales
Componentes Web y El Framework Polymer
III. Modelo de Renderizado. Templates
No es poco frecuente encontrar situaciones en las que es necesario instanciar dos ocurrencias
diferentes de un mismo componente sobre la misma página, aunque sea con light DOM
diferentes. ¿Pomo podemos evitar el trabajo de reescribir el shadow DOM entero para cada
instancia de forma eficaz y segura?
PlanYllas Inertes y AcYvación de Código por Clonación
Página Huésped
<div id=‘A-1’>
</div>
<div id=‘A-2’>
</div>
El contenido de los dos subárboles shadow es el
mismo puesto que ambas eEquetas responden a
instancias disEntas (-1 y -2) del mismo componente A
Shadow DOM idénScos
Cada instancia sin embargo conEene
unos contenidos semánEcos disEntos
dentro del subárbol light que sirven
para configurar la misma de forma
parEcular
Light DOM diferentes

24. @javiervelezreye 24
Conceptos Esenciales
Componentes Web y El Framework Polymer
III. Modelo de Renderizado. Templates
Una plan2lla <template> es un nuevo 2po de e2queta que puede incluir cualquier contenido
HTML y puede ubicarse en cualquier parte del documento. Este contenido es inerte en tanto
que no ejecuta los scripts, no carga las imágenes y no reproduce videos o audios. Desde JS
puede accederse este contenido inerte y copiarse para formar el shadow DOM momento en el
cual será procesado por el algoritmo de rendering y convenientemente ac2vado.
PlanYllas Inertes y AcYvación de Código por Clonación
<template id=“news”>
<img src=“”>
<div class=“body”></div>
</template>
<div id=“new-1”></div> <div id=“new-2”></div>
HTML
<script>
function createNew(container, image, body) {
var root = document.querySelector(container).createShadowRoot();
var template = document.querySelection("#news").content;
template.querySelector("img").scr = image;
template.querySelector(".body").textContent = body;
root.appendChild(template.content.cloneNode(true));
}
createNew('#new-1', ’imagen1.png', ’noticia 1’);
createNew('#new-2', ’imagen2.png', ’noticia 2’);
</script>
HTML/JS
Template.1.html

25. @javiervelezreye 25
Conceptos Esenciales
Componentes Web y El Framework Polymer
III. Modelo de Renderizado. Templates
Resulta muy potente disponer de un mecanismo de observación que permita a los nodos DOM
del árbol shadow mantener su contenido sincronizado dinámicamente con ciertas partes del
modelo interno de JS que 2ene el componente. En este sen2do podemos dis2nguir dos 2pos
de situaciones.
PlanYllas de Enlace de Datos
Shadow DOM
Shadow Root Shadow Host
this
var foo;
Nodo de enlace de datos
var bar;
var baz;
...
// Código JS del componente
Los datos de la vista se sincronizan con
los cambios en el modelo pero no al
revés. Es jpico de nodos de texto y
atributos
Enlace de Datos Unidireccional
Los datos de la vista se sincronizan con
los cambios programáEcos del modelo y
recíprocamente, las acciones del
usuario sobre la vista propagan
cambios en el modelo. Es jpico de
nodos de entrada de datos, o de
aquéllos manejados por un escuchador
de evento que cambie su valor en JS
Enlace de Datos Bidireccional

26. @javiervelezreye 26
Conceptos Esenciales
Componentes Web y El Framework Polymer
III. Modelo de Renderizado. Templates
Polymer ex2ende el concepto de plan2lla estándar con plan2llas para el enlace de datos. Estas
plan2llas incluyen en el atributo bind una referencia al la parte de modelo JS con que van a
enlazarse. También se proporcionan plan2llas para control de flujo condicional, itera2vo,
recursivo y anidado, atributos condicionales, controladores de eventos, etc.
PlanYllas de Enlace de Datos
PlanSlla de Enlace de Datos
<template bind=“{{person as me}}”>
{{me.name}} – {{me.twitter}}
</template>
PlanSlla Condicional
<template bind=“...” if=“truthy”>
{{me.name}} – {{me.twitter}}
</template>
PlanSlla IteraSva
<template repeat=“{{item in items}}”>
<li>{{item}}</li>
</template>
PlanSllas Referidas & Anidadas
<template repeat=“i in items” id=“t”>
<li>{{i}}
<ul>
<template repeat=“{{i.hijos}}” ref=“t”>
</template>
</ul>
</template>
...
<template bind ref=“t”>
</template>
PlanSllas Anidada
<template repeat=“{{u in users}}”>
<template repeat=“{{i in u.items}}”>
<li>{{i}}</li>
</template
</template>
HTML
HTML
HTML
HTML
HTML
Template.2.html

27. @javiervelezreye 27
Conceptos Esenciales
Componentes Web y El Framework Polymer
III. Modelo de Renderizado. Templates
Polymer ex2ende el concepto de plan2lla estándar con plan2llas para el enlace de datos. Estas
plan2llas incluyen en el atributo bind una referencia al la parte de modelo JS con que van a
enlazarse. También se proporcionan plan2llas para control de flujo condicional, itera2vo,
recursivo y anidado, atributos condicionales, controladores de eventos, etc.
PlanYllas de Enlace de Datos
Enlace a Texto
<p>{{user.name}}</p>
Enlace a Atributo
<img src=“{{image}}” alt=“imagen”>
Manejador de Evento Estándar
<button on-click=“{{doClick}}”>
Ok
</button>
Enlace a Atributo Condicional
<div class=“card” hidden?=“{{show}}”
Manejador de Evento de Negocio
<div id=“my-component”
on-done=“{{doAlarm}}”>
...
</div>
Enlace con Operador Condicional
<template repeat=“{{item, i in items}}”>
<div class=“{{(i%2==0)? ‘on’ : ‘off’}}”>
{{item}}
</div>
</template>
HTML
HTML
HTML
HTML
HTML
HTML

28. @javiervelezreye 28
Conceptos Esenciales
Componentes Web y El Framework Polymer
IV. Modelo de Extensión. Custom Elements
Ahora que tenemos los mecanismos necesarios para definir y encapsular comportamiento y
lógica de presentación personalizada necesitamos una manera de referirlo nominalmente
dentro de nuestra página Web en forma de e2quetas personalizadas. Esto permite dis2nguir
los componentes de las e2quetas estándar lo que aumenta la legibilidad de la página.
Creación de EYquetas Personalizadas. Custom Tags
Página Huésped
...
<wc-calendar>
<wc-calendar-day>12</wc-calendar-day>
<wc-calendar-month>06</wc-calendar-month>
<wc-calendar-year>2014</wc-calendar-year>
</wc-calendar>
...
Las eEquetas personalizadas son un Epo de
elementos personalizados que permite uElizar una
referencia nominal para instanciar un componente
ya construido dentro de una página. No obstante
existen dos reglas de nombrado
ESquetas Personalizadas
Los nombres de las eEquetas personalizadas
deben tener al menos un guión en el nodeName
para diferenciarlas de las eEquetas estándar.
Regla 1. Nombres con al menos un guión
<wc-calendar> ... </wc-calendar>
No pueden uElizarse como nombres de eEquetas
personalizadas cualquiera de las cadenas con
guión que se enumeran a conEnuación.
Regla 2. Nombres reservados
annotation-xml color-profile font-face
font-face-src font-face-uri font-face-format
font-face-name missing-glyph

29. @javiervelezreye 29
Conceptos Esenciales
Componentes Web y El Framework Polymer
IV. Modelo de Extensión. Custom Elements
Debemos preocuparnos, por un lado, de registrar cada componente construido como un nuevo
2po de e2queta dentro del sistema de e2quetas del navegador y después de instanciar
componentes tanto desde el lenguaje de marcado como a través de JS.
Creación de EYquetas Personalizadas. Custom Tags
Registro de un Componente
<polymer-element name=“wc-foo”>
<template>...</template>
<script>
Polymer (‘wc-foo’, {
// prototipo del componente (foo, bar...)
});
</script>
</polymer-element>
HTML/JS
var p = Object.create(HTMLElement.prototype);
p.foo = function (){...};
p.bar = 7;
var Foo = document.registerElement(
‘wc-foo’,
{prototype: p});
JS
Tanto los snippets de código de registro
como de instanciación son versiones
equivalentes y mutuamente excluyentes
Instanciación de un Componente
<wc-foo id=“a”>
...
</wc-foo>
<wc-foo id=“b”>
...
</wc-foo>
HTML
var a = new Foo ();
var b = document.createElement(‘wc-foo’);
document.body.appendChild (a);
document.body.appendChild (b);
JS
Custom.html

30. @javiervelezreye 30
Conceptos Esenciales
Componentes Web y El Framework Polymer
IV. Modelo de Extensión. Custom Elements
Por otro lado, resulta de interés extender las propias e2quetas del estándar HTML para
generar variantes que incluyan nuevo comportamiento o lógica presentacional cuando se
rendericen. Estas e2quetas man2enen, naturalmente, el nombre de la e2queta a la que
ex2enden pero incluyen un calificador is para indicar al navegador de que se trata de una
variante dis2nta
Extensión de EYquetas Estándar. Extended Element Types
Página Huésped
...
<button id=“btn” is=“fancy-button”>
Ok
</button>
<p is=“lorem-ipsum”><p>
...
<script>
var btn = document.querySelector(‘#btn’);
btn.addEventListener(‘click’, function(e){
...
});
</script>
Las eEquetas del estándar se exEenden con
variantes cualificadas nominalmente dentro del
atributo is. Estas eEquetas manEenen el nombre,
métodos y atributos de la eEqueta de la que
derivan pero pueden sobrescribir o agregar nuevas
capacidades
Extensión de ESquetas Estándar
La nueva variante de botón incluye, por herencia
todos los atributos, métodos y modelo de eventos
que Eene la eEqueta base de la que deriva
Herencia de Capacidades

31. @javiervelezreye 31
Conceptos Esenciales
Componentes Web y El Framework Polymer
IV. Modelo de Extensión. Custom Elements
De forma similar al caso anterior, comenzaremos por registrar cada componente construido
como una variante que ex2ende una e2queta del estándar y después nos ocuparemos de
instanciar componentes tanto desde el lenguaje de marcado como a través de JS.
Extensión de EYquetas Estándar. Extended Element Types
Extensión de una ESqueta
<polymer-element name=“fancy-button”
extends=“button”>
<template>...</template>
<script>
Polymer (‘fancy-button’, {
// prototipo de la etiqueta (foo, bar...)
});
</script>
</polymer-element>
HTML/JS
var p = Object.create(HTMLButtonElement.prototype);
p.foo = function (){...};
p.bar = 7;
Var FancyButton = document.registerElement(
‘fancy-button’,
{extends: ‘button’,
prototype: p});
JS
Tanto los snippets de código de registro
como de instanciación son versiones
equivalentes y mutuamente excluyentes
Instanciación de una ESqueta
<button is=“fancy-button”
id=“a”> Ok </button>
<button is=“fancy-button”
id=“b”> Ok </button>
HTML
var a = new FancyButton ();
Var b = document.createElement
(‘fancy-button’);
document.body.appendChild (a);
document.body.appendChild (b);
JS

32. @javiervelezreye 32
Conceptos Esenciales
Componentes Web y El Framework Polymer
IV. Modelo de Extensión. Custom Elements
Es importante recalcar que los Componentes Web, una vez establecidos como elementos
personalizados atraviesan dis2ntas fases a lo largo del proceso de construcción, inserción y
potencial borrado del árbol DOM de la página huésped. El estándar ofrece método
manejadores que permiten la interposición de código en respuesta a cada una de las fases que
caracterizan dicho ciclo de vida. A con2nuación describimos someramente las mismas.
CREATED READY ATTACHED
DOM_READY DETACHED ATRIBUTE_CHANGED
El componente se ha creado y ha
sido registrado con éxito como
una nueva eEqueta o extensión
El componente está preparado.
Shadow DOM creado. Observa-
dores establecidos. Manejadores
de eventos vinculados
Una nueva instancia de algún
componente creado se ha inser-
tado dentro de la página hués-
ped
Se garanEza que todos los
componentes anidados dentro
de éste están preparados
La instancia del componente se
ha eliminado de la página
huésped
Un atributo de la instancia del
componente fue añadido,
borrado o actualizado
registro
componente
Ok
Ok
X
!

33. @javiervelezreye 33
Conceptos Esenciales
Componentes Web y El Framework Polymer
V. Modelo de Modularización. HTML Imports
Página Huésped
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel=“import” href=“wc-foo.html”>
</head>
<body>
<wc-foo></wc-foo>
</body>
</html>
wc-foo.html
<polymer-element name=“wc-foo”>
<template>...</template>
<script>
Polymer (‘wc-foo’, {
// prototipo del componente
});
</script>
</polymer>
La URL asociada a un import se llama import
locaEon. Para acceder a un documento hospedado
en otro dominio deben habilitarse los permisos
CORS.
Import LocaSon
Según lo expuesto, la implementación de un componente incluye un código de plan2lla inerte,
especificaciones de es2lo y no poca lógica de scrip2ng para especificar el modelo de
comportamiento del mismo. Parece necesario disponer de un mecanismo de modularización
que permita incluir todo ese contenido en un fichero de índice a parte HTML que pueda
importarte a la página huésped.
Importación de documentos HTML

34. @javiervelezreye 34
Conceptos Esenciales
Componentes Web y El Framework Polymer
V. Modelo de Modularización. HTML Imports
Página Huésped
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel="import" href=“my-lib.html”>
</head>
<body>
...
</body>
</html>
my-lib.html
<!doctype html>
<html lang=“es”>
<head>
<link rel=“import” href=“tag-1.html”>
<link rel=“import” href=“tag-2.html”>
<link rel=“stylesheet” href=“style-1.html”>
<link rel="stylesheet" href=“style-2.html”>
<script src=“script-1.js”></script>
<script src=“script-2.js”></script>
</head>
<body>
<polymer-element>
...
</polymer-element>
</body>
</html>
Los mecanismos de modularización proporcionados por la direc2va import ofrecen
oportunidades para el empaquetamiento de colecciones de recursos y manera que éstos
puedan ser entregados al cliente final a través de una única import loca2on.
Empaquetamiento de Recursos
style-2.css
style-1.css
script-2.js
script-1.js
tag-2.html
tag-1.html
A través de la carga indirecta de un fichero de
índice se cargan en la página huésped todos los
recursos a los que éste apunta o conEene
Carga Indirecta
Import.html

35. @javiervelezreye 35
Conceptos Esenciales
Componentes Web y El Framework Polymer
V. Modelo de Modularización. HTML Imports
Para controlar programá2camente desde JavaScript los procesos de carga de recursos de
documentos HTML importados mediante la clausula import la plataforma proporciona sendos
eventos sobre los que se pueden inyectar manejadores.
Eventos de Carga y Error
Enlace a Texto
<script async>
function handleLoad(e) {
console.log(‘Loaded import:’ + e.target.href);
}
function handleError(e) {
console.log(‘Error loading import:’ + e.target.href);
}
</script>
<link rel=“import” href=“file.html”
onload=“handleLoad(event)” onerror=“handleError(event)”>
Enlace a Atributo
HTML/JS
El elemento link lanza un evento load cuando
un recurso HTML ha terminado su proceso de
carga de forma exitosa.
Si se produce algún error durante el proceso
de carga del recurso HTML, por ejemplo error
404, recurso no encontrado, la eEqueta link
lanzará un evento error

36. @javiervelezreye 36
Conceptos Esenciales
Componentes Web y El Framework Polymer
V. Modelo de Modularización. HTML Imports
Importar un recurso HTML mediante la cláusula import no supone un volcado tal cual del
contenido sino que requiere de un procesamiento del mismo. Esto implica que es
desarrollador 2ene la oportunidad de capturar programá2camente dicho el contenido y operar
sobre él a conveniencia.
Manipulación del Contenido de los Recursos Importados
<head>
<link id=“foo-link” rel=“import” href=“wc-foo.html”>
</head>
<body>
...
<script>
var link = document.querySelector(‘#foo-link’);
var content = link.import;
var el = content.querySelector(‘...’);
...
</script>
</body>
HTML/JS

37. @javiervelezreye 37
Conceptos Esenciales
Componentes Web y El Framework Polymer
V. Modelo de Modularización. HTML Imports
Debemos ser conscientes de que los ficheros importados, en tanto que son documentos HTML,
pueden incluir fragmentos de scrip2ng. Dentro de estos scripts es posible referir tanto al
documento HTML que los con2ene como al documento HTML donde son hospedados a través
de la direc2va de importación.
Acceso al Recurso Importado y a la Página Huésped
Página Huésped
<!doctype html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<script src=“platform.js”></script>
<script src=“polymer.js”></script>
<link rel="import" href=“file.html”>
</head>
<body>
...
</body>
</html>
file.html
<!doctype html>
<html lang=“es”>
<head>
...
</head>
<body>
<script>
var f = document.currentScript.ownerDocument;
var h = document;
// f refiere a este documento HTML
// h refiere a la página huésped
</script>
</body>
</html>
Regla de importación 1.
El contexto en el que se evalúan los
script dentro de una página
importada es el de la página huésped
Regla de importación 2.
Las importaciones son no bloqueantes.
Sin embargo los script dentro de la
página importada se ejecutan en orden
Regla de importación 3.
Las importaciones desde una misma
URL son procesadas solo una vez con lo
que sus script sólo se ejecutan una vez

38. Javier Vélez Reyes
@javiervelezreye
Javier.veler.reyes@gmail.com
3 Aplicaciones Web
Basadas en
Componentes
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
§ Coordinación de Componentes Web
§ Modelo de Localización entre Componentes
§ Modelos de Comunicación entre Componentes
§ Modelos de Coordinación entre Componentes
§ Ejemplos

39. @javiervelezreye 39
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
I. Introducción
No debemos olvidar que nuestro úl2mo obje2vo cuando construimos componentes Web es
elaborar sistemas funcionales complejos que puedan operar sobre la Web como plataforma.
Para hacer frente este problema es necesario poner foco de atención en la relación de
coordinación inherente que debe establecerse entre los servicios para dar lugar a
componentes que ofrezcan servicios de mayor valor.
El diseño orientado a componentes de esos sistemas ofrece
grandes ventajas en relación a los principios fundacionales
clásicos de reuElización, modularidad, carácter abierto,
susEtución, segregación por roles, etc.
Herencia de Capacidades
Sistema Orientado a Componentes
convocatoria
anexos
tareas
El poder de la relación
Cada componente ofrece de forma aislada un servicio
de valor al usuario. La composición coordinada de
estos componentes ofrece un servicio de mayor nivel.

40. @javiervelezreye 40
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
I. Introducción
Localización
Coordinación
Comunicación
Implícita
Explícita
Indirecta
Directa
En relación a los procesos de coordinación necesarios para construir aplica2vos opera2vos
sobre la Web basados en componentes es necesario prestar atención a tres ejes dimensionales
que se dibujan como cues2ones independientes que hay que resolver. Estos ejes caracterizan
las propiedades de lo que daremos en llamar espacios de coordinación entre componentes.
Espacios de Coordinación
A
C B
Espacio de Coordinación
Un espacio de coordinación es un ámbito
que da soporte a la interacción entre
componentes para ofrecer servicios de
mayor nivel

41. @javiervelezreye 41
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
II. Modelos de Localización entre Componentes Web
Localización Explícita
Cada componente recibe una referencia
explícita nominal de los componentes con los
que Eene que establecer un ejercicio de
coordinación
Localización Implícita
Cada componente es responsable de localizar
(por rol) dentro del entorno a los demás
componentes con los que Eene que establecer
un ejercicio de coordinación
A
B
Inyección
explícita
C
A
E
D
B
A
Localización
por búsqueda
de roles
El modelo de localización está relacionado con la selección de los mecanismos adecuados para
el establecimiento efec2vo de conexiones semán2cas o funcionales entre componentes que
deben mantenerse en coordinación para ofrecer un servicio de valor añadido al contexto
donde habitan.

42. @javiervelezreye 42
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
III. Modelos de Comunicación entre Componentes Web
Comunicación Directa
En la comunicación directa los componentes se
relacionan 1:1 a través de la invocación directa
de métodos de negocio de acuerdo a esquemas
One-Way o Request-Response
Comunicación Indirecta
En la comunicación indirecta, la relación entre
componentes se produce por eventos,
jpicamente a través de un mediador que puede
intervenir discrecionalmente en el proceso
A B A
Comunicación
desacoplada
indirecta
A B
Request-Response
One-Way
B
C D
M
Por otro lado, es preciso determinar el modelo de comunicación que se establecerá entre los
componentes implicados en una coordinación. A este respecto, podemos dis2nguir entre
esquemas de comunicación directa, o esquemas de comunicación indirecta, que se llevan a
cabo a través de un tercer componente como intermediario.

43. @javiervelezreye 43
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
IV. Modelos Coordinación de Componentes Web
Coordinación Coreográfica
La coordinación coreográfica responde a
esquemas de parEcipación distribuida donde
cada componente es responsable de reaccionar
de manera autónoma de acuerdo a un consenso
preestablecido
Coordinación Orquestal
En los mecanismos por orquestación la lógica de
coordinación es ejecutada por un componente
central que dispone de un script que detalla el
proceso coordinaEvo que es necesario efectuar
entre los componentes parEcipantes
A
Coordinación
distribuida
C B
O A
B
C
Coordinación
centralizada
Asimismo, necesitamos establecer los mecanismos de coordinación que serán aplicados entre
los componentes implicados en aras a ofrecer servicios de valor añadido. En términos
generales, es posible establecer dos grandes familias de esquemas coordina2vos, los
coreográficos y los de orquestación en función de su carácter distribuido o centralizado.

44. @javiervelezreye 44
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
V. Ejemplos
Localización. Explícita. [Despliegue Explícito de Variantes según parámetro]
Comunicación. Indirecta Local. [Arquitectura de Eventos en Bus]
Coordinación. Coreograpa. [Desacoplamiento nominal por eventos]
Ejemplo I. Coordinación de Video y Transparencias en Local
Parámetros de
configuración
wc-speech (1)
wc-bus
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides wc-video
wc-speech

45. @javiervelezreye 45
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
V. Ejemplos
Localización. Explícita. [Despliegue Explícito de Variantes según parámetro]
Comunicación. Indirecta Remota. [Arquitectura de Eventos en Bus]
Coordinación. Coreograpa. [Desacoplamiento nominal por eventos]
Ejemplo II. Coordinación de Video y Transparencias en Remoto
wc-speech (2)
wc-bus
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides wc-video
wc-speech
wc-bus
wc-bus
<Timeline <zoom >next >previous >go
>zoom-in >zoom-out
zoom-in,
zoom-out,
go go
zoom-in,
zoom-out
wc-slides wc-video
wc-speech
video.# video.#
IN IN
OUT

46. @javiervelezreye 46
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
V. Ejemplos
Localización. Explícita. [Despliegue Explícito de Variantes según parámetro]
Comunicación. Indirecta Remota. [Arquitectura de Eventos en Bus]
Coordinación. Coreograpa. [Desacoplamiento nominal por eventos]
Ejemplo III. Coordinación de Video y Transparencias 2 a 2 Cruzadas
wc-speech (2+2)
video.#
wc-bus
OUT
wc-speech
wc-speech
wc-speech
wc-speech
ch#1
ch#2
video.#
video.#
video.#

47. @javiervelezreye 47
Aplicaciones Web Basadas en Componentes
Componentes Web y El Framework Polymer
V. Ejemplos
Localización. Explícita. [Inyección explícita de componentes controlados]
Comunicación. Directa Local. [Arquitectura de Eventos en Bus]
Coordinación. Orquestación. [Centralización de la lógica de coordinación]
Ejemplo IV. Coordinación de Videos en Round Robin
wc-speech (3)
wc-video A
wc-controller
wc-video B wc-video C
Parámetros de
configuración
[A, B, C]

48. @javiervelezreye 48
Preguntas
Programación Asíncrona en Node JS
Modelo de
Roles
Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
La Plataforma Web
Orientada a Componentes
Aplicaciones basadas
en Componentes Web

49. Javier Vélez Reyes
@javiervelezreye
Javier.velez.reyes@gmail.com
Componentes Web y El Framework Polymer
Programación Orientada a
Componentes Web
Junio 2014