SlideShare una empresa de Scribd logo
1 de 79
Descargar para leer sin conexión
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Patrones	de	Composición	
Arquitecturas	Orientadas	a	
Componentes	Web	
Noviembre	2016
@javiervelezreye		2		
Autor	
Patrones	de	Composición		
Licenciado	por	la	UPM	desde	el	año	2001	y	doctor	en	informá<ca	por	
la	UNED	desde	el	año	2009,	Javier	conjuga	sus	labores	como	profesor	
e	 inves<gador	 con	 la	 consultoría	 y	 la	 formación	 técnica	 para	
empresa.	 Su	 línea	 de	 trabajo	 actual	 se	 centra	 en	 la	 innovación	 y	
desarrollo	de	tecnologías	para	la	Web.	Además	realiza	ac<vidades	de	
evangelización	 y	 divulgación	 en	 diversas	 comunidades	 IT	 y	 es	
coordinador	de	varios	grupos	de	ámbito	local	como	NodeJS	Madrid	o	
Madrid	JS.	Forma	parte	del	programa	Polymer	Polytechnic	Speaker	y	
es	mentor	del	capítulo	de	Madrid	de	Node	School.	
¿Quién	Soy?	
	
javier.velez.reyes@gmail.com	
@javiervelezreye	
linkedin.com/in/javiervelezreyes	
gplus.to/javiervelezreyes	
jvelez77	
javiervelezreyes	
youtube.com/user/javiervelezreyes
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
1	Introducción	
§  Arquitectura	de	Referencia	para	Componentes	Web	
§  Arquitectura	de	Referencia	&	Composición	
§  El	Problema	de	Composición	
Introducción	
Patrones	de	Composición
@javiervelezreye		4		
Introducción	
Patrones	de	Composición		
I.	Arquitectura	de	Referencia	Para	Componentes	Web	
Una	 arquitectura	 de	 referencia	 establece	 orientación	
acerca	de	cómo	pueden	construirse	soluciones	orientadas	
a	componentes	Web.	
Data	
Session	
Offline	
Integra<on	
Access	
Role	Based	
Channel	Based	
Context	Based	
View	Control	
Paging	Rou<ng	
Content	
Containers	
Interac<on	
Performance	 Security	
Monitoring	 Authe.	&	Autho.	Op<miza<on	 WC	&	Resource	Management	
Layers	
No<fica<on	
User	Based	
Channel	
Viewers	
Coopera<on	
Coordina<on	
Comunica<on	
Composi<on	
Universal	Apps
@javiervelezreye		5		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
La	Composición	en	Palabras	
La	composición	es	el	proceso	por	el	cual	se	establece	un	
conjunto	de	enlaces	composi<vos	entre	componentes	para	
permi<r	la	comunicación.	
Qué	
La	composición	es	un	proceso	local	
que,	en	principio,	sólo	atañe	al	par	
de	componentes	en	los	extremos	de	
un	enlace	composiBvo	
AcRvidad	bilateral	
Componente	Par<cipante	
Componente	obje<vo	
Cubierto	dicho	espacio	se	posibilita	la	
comunicación	entre	componentes	lo	que	a	
su	vez	da	paso	a	colaboraciones	
Habilitar	la	comunicación
@javiervelezreye		6		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Localización	
Adaptación	
Enlace	
Contextualización	
Descubrir	los	componentes	de	la	
vecindad	orientados	a	cooperar	
conmigo	
Localizar	
Configurar	el	entorno	de	composi-
ción	para	operar	sobre	un	
contexto	adecuado	
Contextualizar	
Vincularme	al	resto	de	componen-
tes	de	mi	vecindad	para	hacer	
efecBva	la	comunicación		
Enlazar	
Transformarme	yo	y	mi	entorno	
para	poder	encajar	en	el	marco	
arquitectónico	
Adaptar	
Componente	obje<vo	
El	Proceso	de	Composición.	PerspecRva	de	Caja	Blanca	
Internamente,	 el	 proceso	 de	 composición	 se	 en<ende	
como	 una	 sucesión	 de	 4	 fases	 que	 se	 desarrollan	 en	
cascada:	localizar,	adaptar,	enlazar	y	contextualizar.		
Cómo
@javiervelezreye		7		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Composición	EstáRca	&	Dinámica	
La	composición	está<ca	se	produce	una	vez	al	principio	del	
ciclo	 de	 vida.	 La	 composición	 dinámica	 se	 repite	
recurrentemente	en	respuesta	a	cambios	ambientales.	
Nivel	de	Dominio	
Metacomponentes	
Nivel	de	Proyecto	
Composición	EstáRca	
Proceso	de	Composición	
Componente	obje<vo	
Cuándo	
Nivel	de	Dominio	
Metacomponentes	
Nivel	de	Proyecto	
Proceso	de	Composición	
<empo	
C.	Dinámica	
Fase	#1	 Fase	#2	 Fase	#3	
attached eventosattached
@javiervelezreye		8		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
En	la	etapa	de	madurez	I	el	desarrollo	se	orienta	a	cliente,	
se	opera	a	muy	bajo	nivel	de	abstracción	y	los	índices	de	
reu<lización	son	casi	inexistentes.	
Dónde	
addEventListener
this.x++
this.setInterval
<p>
<div>
<aside>
<h1>
<a>
<img>
NaRve	Web	
HTML	 JS	
Diseño	
Etapa	I.	
Desarrollo	a	
Medida
@javiervelezreye		9		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
En	la	etapa	de	madurez	II	se	construyen	componentes	Web	
que	 encapsulan	 modelos	 de	 interacción	 recurrentes.	 Se	
fomenta	la	abstracción	y	la	reu<lización.	
Dónde	
addEventListener
this.x++
this.setInterval
<p>
<div>
<aside>
<h1>
<a>
<img>
HTML	 JS	
Diseño	
NaRve	Web	
Etapa	I.	
Desarrollo	a	
Medida	
HTML	 JS	
Polymer		
this.async
this.fire
<content>
<template>
Construyo	
Etapa	II.	
Creación	de	
Componentes
@javiervelezreye		10		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
En	la	etapa	de	madurez	III,	las	corporaciones	reconocen	las	
ventajas	 de	 operar	 con	 un	 catálogo	 de	 componentes.	 Se	
construyen	aplicaciones	por	composición	declara<va.	
Dónde	
Componentes	Web	
HTML	
<shadow> <shadow> <shadow> <shadow>
Catálogo	WC	
Uso	
Etapa	III.	
Gobierno		de		
Componentes	
HTML	 JS	
addEventListener
this.x++
this.setInterval
<p>
<div>
<aside>
<h1>
<a>
<img>
Polymer		
this.async
this.fire
<content>
<template>
HTML	 JS	
Diseño	
Construyo	
NaRve	Web	
Etapa	I.	
Desarrollo	a	
Medida	
Etapa	II.	
Creación	de	
Componentes
@javiervelezreye		11		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
Construir	 por	 composición	 consiste	 en	 combinar	
estratégicamente	lógica	reu<lizable	en	componentes	Web	
con	lógica	composi<va	específica	
Dónde	
Componentes	Web	
HTML	
<shadow> <shadow> <shadow> <shadow>
Etapa	III.	
Gobierno		de		
Componentes	
Se	pretende	arBcular	un	modelo	
de	interacción	que	ofrezca	una	
sensación	de	conBnuidad	en	su	
uso	
Experiencia	de	ConRnuidad	
Lógica	de	
Composición	
Componentes	
Reu<lizables	
+	
Nivel	de	
Proyecto	
Nivel	de	
Dominio	
Cómo	construir	soluciones	
combinando	componentes	y	
código	pegamento	de	forma	
declaraBva	
Construcción	por	Composición	
?
@javiervelezreye		12		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
Construir	 por	 composición	 consiste	 en	 combinar	
estratégicamente	lógica	reu<lizable	en	componentes	Web	
con	lógica	composi<va	específica.	
Dónde	
A.	Composición	Centralizada	
B.	Composición	Distribuida	<shadow> <shadow>
<shadow> <shadow>
§  Abstracción	
§  Acoplamiento	
§  Reu<lización	
§  Declara<vidad	
§  Composi<vidad	
§  Produc<vidad	
§  Abstracción	
§  Acoplamiento	
§  Reu<lización	
§  Declara<vidad	
§  Composi<vidad	
§  Produc<vidad	
Modelo	de	Composición	
Patrón	Mediator	
HTML	
HTML	
JS
@javiervelezreye		13		
Patrones	de	Composición	
Patrones	de	Composición		
III.	El	Problema	de	Composición	
Construcción	por	Composición	
Construir	 por	 composición	 consiste	 en	 combinar	
estratégicamente	lógica	reu<lizable	en	componentes	Web	
con	lógica	composi<va	específica	
Dónde	
Etapa	III.	
Gobierno		de		
Componentes	
Componentes		
Web	
HTML	
<shadow> <shadow> <shadow> <shadow>
Código	pegamento	
recurrente	también	
como	componentes	
Encapsulación	de	
Lógica	ComposiRva	
La	composición	como	un	
ejercicio	de	configuración	
declaraBva	
Configuración	
declaraRva	
El	comportamiento	de	los	
artefactos	de	composición	es	
flexible	y	abierto	
Flexibilidad	composiRva	
Componentes	Para	
Componer	
Abstracción	 Reu<lización	
Declara<vidad	 Composi<vidad
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
2	Patrones	de	
Composición	
§  El	Proceso	de	Composición	como	Marco	Organiza<vo	
§  Patrones	de	Localización	&	Adaptación	
§  Patrones	de	Enlace	&	Contextualización	
Patrones	de	Composición	
Patrones	de	Composición
@javiervelezreye		15		
Patrones	de	Composición	
Patrones	de	Composición		
I.	Patrones	de	Composición	
	 U<lizaremos	 el	 proceso	 de	 composición	 como	 marco	
organiza<vo	 para	 ordenar	 los	 patrones	 que	 presentamos	
en	este	subsistema	arquitectónico.	
Localización	
Adaptación	
Enlace	
Contextualización
@javiervelezreye		16		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización	
	 Los	 patrones	 de	 localización	 exploran	 un	 espacio	 de	
búsqueda	para	localizar	otros	componentes	de	la	vecindad	
con	los	que	establecer	vínculos	composi<vos.	
Localización	
Espacios	DOM	
Espacios	de	Datos	
Aunque	menos	uBlizados,	también	deben	considerarse	
aquellos	espacios	de	JS	donde	pueden	alojarse	componentes	
acBvos	en	memoria.	En	este	caso	se	usan	técnicas	de	Look	Up	
Técnicas	de	Look	Up	
Muchos	de	los	procesos	de	localización	operan	
sobre	espacios	DOM	donde	residen	otros	
componentes	alojados	allí	en	Bempo	de	diseño.	
Sobre	ellos	se	aplican	técnicas	de	búsqueda	
exploratorias	
Técnicas	de	Exploración	
Light DOM
Shadow DOM
Composite DOM
Host DOM
DOM
Local
Prototype
LexicalScope
Global
AcRvidades	de	
Localización
@javiervelezreye		17		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	 Las	 técnicas	 de	 exploración	 operan	 sobre	 los	 espacios	
DOM.	 Estás	 pueden	 clasificarse	 en	 localización	 o	
descubrimiento.	
DOM	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
Composite	DOM	
<wc-container>
</wc-container>
shadowRoot
Espacios	de	Exploración	 Técnicas	de	Exploración	
handle	
estrategia	
scope	
Componentes	
alcanzados	
<wc-me>
<wc-container>
Light	DOM	 Shadow	DOM	
<wc-me>
<wc-container>
seach	
searchAll	
wc-scout
@javiervelezreye		18		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 llevar	 a	 cabo	 un	 proceso	 de	 exploración	 sobre	 un	
determinado	 ámbito	 DOM	 u<lizando	 técnicas	 de	 exploración	 y	
criterios	de	selección	específicos.	
El	 componente	 wc-scout	 es	 responsable	 de	
ar<cular	un	proceso	de	búsqueda	exploratoria	
para	buscar	componentes	en	la	vecindad.		
Explorador	Scout	
El	 componente	 se	 configura	 indicando	 una	
estrategia	 de	 búsqueda,	 un	 espacio	 sobre	 el	
que	buscar	y	un	criterio	de	búsqueda.	
<wc-scout result="{{out}}">
<wc-x strategy/>
<wc-y handle/>
<wc-z criteria/>
</wc-scout>
Cada	uno	a	un	componente	implementará	
cierta	lógica	de	estrategia,	alcance	o	criterio	
según	corresponda	como	veremos	a	
conBnuación		
wc-scout	 handle	 criteria	 strategy	
getHandle	()	
getReference	()	
search	(h,	r)	
h	
r	
xs	
filter	(xs)	
xs	
xs	
search	()
@javiervelezreye		19		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	llevar	a	cabo	un	proceso	de	exploración	basado	en	
una	estrategia	descendente	para	encontrar	componentes	bajo	el	
handle.	
El	 componente	 wc-falling	 implementa	 la	
estrategia	 de	 prospección	 clásica	 de	 la	 web	
basada	en	localizar	elementos	bajo	un	nodo.	
Estrategia	de	Caída	
El	 componente	 se	 configura	 indicando	
esencialmente	 si	 la	 estrategia	 debe	 hacer	
prospección	en	los	contenidos	en	la	sombra.	
<wc-scout>
<wc-falling strategy shadow/>
<wc-y handle/>
<wc-z criteria/>
</wc-scout>
La	estrategia	descendente	
busca	elementos	que	caen	bajo	
un	determinado	nodo	DOM	
Estrategias	
handle	
scope	
Estrategia	de	
caída	
Componentes	
alcanzados	
Indica	que	la	estrategia	debe	
hacer	prospección	también	en	
los	contenidos	en	la	sombra
@javiervelezreye		20		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	llevar	a	cabo	un	proceso	de	exploración	basado	en	
una	 estrategia	 ascendente	 para	 encontrar	 componentes	 en	 la	
cadena	de	antecesores	del	handle.	
El	 componente	 wc-climbing	 implementa	 una	
estrategia	 de	 escalado	 para	 encontrar	
elementos	en	la	cadena	de	antecesores.	
Estrategia	de	Escalado	
El	 componente	 se	 configura	 indicando	
esencialmente	 si	 la	 estrategia	 debe	 con<nuar	
el	escalado	al	llegar	al	nodo	raíz.	
<wc-scout>
<wc-climbing strategy host/>
<wc-y handle/>
<wc-z criteria/>
</wc-scout>
La	estrategia	ascendente	busca	
elementos	que	caen	dentro	de	
la	cadena	de	antecesores	de	un	
determinado	nodo	DOM	
Estrategias	
handle	
scope	
Estrategia	de	
escalado	
Indica	que	la	estrategia	debe	
atravesar	la	raíz	en	la	sombra	y	
conBnuar	ascendiendo	por	el	
nodo	host	
Componentes	
alcanzados	
Shadow	DOM	
Host	DOM	
[host]
@javiervelezreye		21		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	llevar	a	cabo	un	proceso	de	exploración	basado	en	
una	estrategia	por	inundación	para	encontrar	los	componentes	
más	próximos	al	handle.	
El	 componente	 wc-flooding	 aplica	 una	
estrategia	 de	 búsqueda	 que	 alterna	
recursivamente	el	escalado	y	la	caída.	
Estrategia	por	Inundación	
El	 componente	 se	 configura	 indicando	
esencialmente	si	debe	hacer	prospección	en	la	
sombra	y	escalado	hacia	el	host.	
<wc-scout>
<wc-flooding strategy
host
shadow/>
<wc-y handle/>
<wc-z criteria/>
</wc-scout>
La	estrategia	ascendente	busca	
elementos	que	caen	dentro	de	
la	cadena	de	antecesores	de	un	
determinado	nodo	DOM	
Estrategias	
Se	uBlizan	los	mismos	flags	que	
aparecían	en	las	estrategias	de	
caída	y	escalado		
Shadow	DOM	
Host	DOM	
[host]	
handle	
scope	
Estrategia	por	
inundación	
Componentes	
alcanzados
@javiervelezreye		22		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 iden<ficar	 el	 handle	 correspondiente	 a	 la	 propia	
ubicación	donde	reside	el	componentes	wc-scout.	Es	frecuente	
ar<cular	estrategias	de	búsqueda	que	comienzan	en	dicho	lugar.	
El	 componente	 wc-self	 iden<fica	 el	 elemento	
del	DOM	correspondiente	al	componente	wc-
scout.	
Handle	de	Auto-referencia	
La	configuración	del	componente	sólo	requiere	
indicar	 el	 valor	 de	 la	 referencia	 CSS	 que	 será	
u<lizada	para	referir	al	handle.	
<wc-self/>
Handles	
Referencia	a	la	
ubicación	en	curso	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-self>
</wc-self>
@javiervelezreye		23		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 iden<ficar	 un	 handle	 a	 través	 del	 uso	 de	 una	
referencia	CSS.	Dicha	referencia	es	rela<va	al	punto	donde	se	usa	
el	componente.	
El	 componente	 wc-reference	 iden<fica	 un	
elemento	del	DOM	a	través	de	una	referencia	
CSS	rela<va	a	la	posición	de	esta	e<queta.	
Handle	Por	Referencia	
La	configuración	del	componente	sólo	requiere	
indicar	 el	 valor	 de	 la	 referencia	 CSS	 que	 será	
u<lizada	para	referir	al	handle.	
<wc-reference ref="#A" handle/>
<wc-reference ref="[[x]]" handle/>
Handles	
La	referencia	apunta	
al	nodo	handle	
La	referencia	es	
el	nodo	handle	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-reference>
id="A"
</wc-reference>
@javiervelezreye		24		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	iden<ficar	el	handle	correspondiente	al	nodo	padre	
desde	el	que	realizamos	la	aplicación	de	estrategias	de	búsqueda	
por	exploración.	
El	componente	wc-parent	iden<fica	el	handle	
que	 corresponde	 al	 padre	 directo	 de	 esta	
e<queta.	
Handle	Parent	
La	 configuración	 indica	 el	 número	 de	 saltos	
ascendentes	y	el	desplazamiento	descendente	
que	se	realizará	una	vez	localizado	el	host.		
<wc-parent handle
steps="3"
offset="#A"/>
Handles	
Tras	alcanzar	el	padre	escala	
3	nodos.	Después,	dirígete	a	
#A	para	alcanzar	el	handle	
Los	parámetros	
(steps)	y	(offset)	
son	opcionales	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-host>
</wc-host>
<div>
</div>
@javiervelezreye		25		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	iden<ficar	el	handle	correspondiente	al	nodo	raíz	del	
que	 cuelga	 el	 contenido	 en	 la	 sombra	 que	 corresponde	 al	
espacio	DOM	donde	nos	encontramos.	
El	 componente	 wc-root	 iden<fica	 el	 handle	
que	 corresponde	 al	 	 nodo	 raíz	 que	 aloja	 el	
contenido	en	la	sombra	donde	estamos.	
Handle	Root	
La	 configuración	 indica	 el	 número	 de	 saltos	
ascendentes	y	el	desplazamiento	descendente	
que	se	realizará	una	vez	localizado	el	host.		
Handles	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-root>
</wc-root>
<wc-root handle
steps="3"
offset="#A"/>
Tras	alcanzar	la	raíz	escala	3	
nodos.	Después,	dirígete	a	#A	
para	alcanzar	el	handle	
Los	parámetros	
(steps)	y	(offset)	
son	opcionales
@javiervelezreye		26		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 iden<ficar	 el	 handle	 correspondiente	 al	 nodo	 host	
que	 man<ene	 al	 contenido	 en	 la	 sombra	 que	 corresponde	 al	
espacio	DOM	donde	nos	encontramos.	
El	 componente	 wc-host	 iden<fica	 el	 handle	
que	corresponde	al		nodo	anfitrión	que	aloja	el	
contenido	en	la	sombra	donde	estamos.	
Handle	Host	
La	 configuración	 indica	 el	 número	 de	 saltos	
ascendentes	y	el	desplazamiento	descendente	
que	se	realizará	una	vez	localizado	el	host.		
Handles	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-host>
</wc-host>
<wc-host handle
steps="3"
offset="#A"/>
Tras	alcanzar	el	host	escala	3	
nodos.	Después,	dirígete	a	#A	
para	alcanzar	el	handle	
Los	parámetros	
(steps)	y	(offset)	
son	opcionales
@javiervelezreye		27		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 iden<ficar	 el	 handle	 correspondiente	 al	 nodo	
principal	 del	 documento	 HTML	 desde	 el	 que	 realizamos	 la	
exploración.	
El	 componente	 wc-document	 iden<fica	 el	
handle	que	corresponde	al	documento	raíz	de	
la	aplicación	Web.	
Handle	Document	
La	 configuración	 indica	 el	 desplazamiento	
descendente	 que	 se	 realizará	 una	 vez	
localizado	el	nodo	document.		
<wc-document handle
offset="#A"/>
Handles	
Tras	alcanzar	document	
dirígete	a	#A	para	
alcanzar	el	handle	
El	parámetro	
(offset)	es	
opcionales	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-host>
</wc-host>
document
@javiervelezreye		28		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Para	localizar	un	handle	se	requiere	llevar	a	cabo	un	proceso	de	
recorrido	 por	 pasos	 sobre	 la	 estructura	 de	 espacios	 DOM.	 En	
cada	paso	se	aplica	un	handle	de	los	anteriores.	
El	 componente	 wc-road	 aplica	 encadena	 en	
secuencia	 una	 colección	 de	 operaciones	 de	
handling	para	alcanzar	el	handle	deseado.	
Handle	Road	
El	 componente	 se	 configura	 indicando	 la	
colección	 de	 operaciones	 de	 handling	 que	
deben	aplicarse	para	llegar	al	handle	final.	
<wc-road handle>
<wc-host/>
<wc-host/>
<wc-parent offset="#A"/>
</wc-road>
Handles	
Cada	paso	de	handling	se	aplica	sobre	el	resultado	que	
arrojo	la	operación	de	handling	anterior	en	la	cadena.	
Ejemplo:	
§  Primero, alcanza el host
§  Una vez en el, alcanza el host
§  Ahora sube al padre
§  Desplazate hasta localizar #A
Host	DOM	
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
Composite	DOM	
<wc-host>
</wc-host>
<div>
</div>
<wc-a>
<wc-me>
</wc-me>
@javiervelezreye		29		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	requiere	aplicar	un	criterio	de	búsqueda	clásico	basado	en	el	
uso	de	referencias	CSS.	La	consulta	será	rela<va	al	handle	y	se	
aplicará	la	estrategia	establecida.	
El	 componente	 wc-query,	 permite	 definir	 un	
criterio	 de	 búsqueda	 basado	 en	 el	 uso	 de	
referencias	CSS.	
Búsqueda	Por	Consulta	
El	 componente	 se	 configura	 indicando	 el	
criterio	 de	 búsqueda	 que	 se	 desea	 aplicar	
sobre	el	espacio.	
Criteria	
<wc-scout>
<wc-x strategy/>
<wc-y handle/>
<wc-query criteria
ref=".A"/>
</wc-scout>
Sobre	el	handle	y	de	acuerdo	a	la	
estrategia	de	exploración	
establecida,	busca	a	#A	
handle	
scope	
Estrategia	de	
caída	
Componentes	
alcanzados
@javiervelezreye		30		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 localizar	 componentes	 que	 respondan	 a	 un	
determinado	proto<po	JavaScript.	Este	<po	de	búsqueda	ofrece	
garanias	de	un	cierto	comportamiento	y	caracterís<cas.	
El	 componente	 wc-prototype	 devuelve	 la	
referencia	 universal	 (*)	 al	 scout.	 Después	
aplica	técnicas	de	filtro	para	seleccionar	a	los	
candidatos	adecuados.	
Búsqueda	Por	ProtoRpo	
El	 componente	 se	 configura	 indicando	
esencialmente	el	<po	o	<pos	de	proto<po	que	
se	desea	buscar.	
Criteria	
<wc-scout>
<wc-x strategy/>
<wc-y handle/>
<wc-prototype criteria
type="wcA"/>
</wc-scout>
<wc-scout>
<wc-x strategy/>
<wc-y handle/>
<wc-prototype criteria
in="wcA wcB wcC"/>
</wc-scout>
Sintaxis	de	
búsqueda	
única	
Sintaxis	de	
búsqueda	
disyunBva	
wc-prototype	 strategy	
getRefernce	()	
'*'	
xs	
filter	(xs)	
wc-scout	
search	(h,	'*')	
xs	
filter	(xs)	
xs
@javiervelezreye		31		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Exploración	
	
Se	 requiere	 localizar	 componentes	 que	 respondan	 a	 un	
determinado	 perfil	 JavaScript.	 Este	 <po	 de	 búsqueda	 ofrece	
garanias	de	un	cierto	comportamiento	y	caracterís<cas.	
El	 componente	 wc-prototype	 devuelve	 la	
referencia	 universal	 (*)	 al	 scout.	 Después	
aplica	técnicas	de	filtro	para	seleccionar	a	los	
candidatos	adecuados.	
Búsqueda	Por	Perfil	
El	 componente	 se	 configura	 indicando	
esencialmente	 el	 perfil	 buscado,	 como	 una	
colección	de	caracterís<cas	
Criteria	
<wc-scout>
<wc-x strategy/>
<wc-y handle/>
<wc-profile criteria
profile="{{pf}}"/>
</wc-scout>
<wc-scout>
<wc-x strategy/>
<wc-y handle/>
<wc-profile criteria>
<wc-rule feature="p"/>
<wc-rule feature="q"/>
</wc-profile>
</wc-scout>
Sintaxis	dinámica	
como	array	de	
caracterísBcas	
Sintaxis	estáBca	
con	enumeración	
explícita	
wc-prototype	 strategy	
getRefernce	()	
'*'	
xs	
filter	(xs)	
wc-scout	
search	(h,	'*')	
xs	
filter	(xs)	
xs
@javiervelezreye		32		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	 Las	 técnicas	 de	 Look	 up	 ar<culan	 procesos	 de	 búsqueda	
sobre	 los	 espacios	 de	 memoria	 que	 ges<ona	 JS.	 Se	
dis<nguen	entre	servicios	de	páginas	blancas	y	amarillas.	
Espacios	de	Look	Up	 Técnicas	de	Look	Up	
Polymer (
(function () {
return {
is : 'wc-me'
ready : function () {
}
};
})();
);
Global	
Retención	Léxica	
Local	
this.x =
protoRpo	
this.prototype.y =
A	 B	
Páginas	Blancas	
A	 B	
Páginas	Amarillas	
<wc-a>
<wc-b>
<wc-c>
P. Blancas
§  A
§  B
§  C
<wc-a>
<wc-b>
<wc-c>
P. Amarillas
§  [p, q]
§  [q]
§  [r, s]
Se	buscan	componentes	
por	metadatos	de	
capacidades	y	servicios	
Se	busca	un	
componente	por	clave	
de	registro	
Acceso	
individual	
Acceso	
global	
Acceso	
por	Bpo
@javiervelezreye		33		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	requiere	disponer	de	un	mecanismo	sencillo	para	compar<r	
datos	 con	 agnos<cismo	 de	 su	 disposición	 geográfica	 en	 los	
espacios	DOM.	
El	 behavior	 wc-single	 proporciona	 una	 forma	
sencilla	 de	 proporcionar	 acceso	 en	 lógica	
singleton	a	un	almacén	de	datos.	
Acceso	Único	
Se	 declara	 una	 variable	 (single)	 a	 nivel	 de	
proto<po	para	que	sea	compar<da	por	todas	
las	instancias	del	mismo	<po	de	componente.	
Behaviors = Behaviors || {};
Behaviors ['wc-single'] = {
ready : function () {
this.init (this.prototype.single);
}
};
Polymer ({
is : 'wc-store',
behaviors : [
Behaviors ['wc-single']
],
init : function (single) {
single = {}
...
}
});
Se	registra	en	el	
protoBpo	una	
variable	(single)		
La	variable	se	pasa	
como	parámetro	a	
un	método	init	para	
su	inicialización		
wc-store	
wc-store	
DOM	#1	
DOM	#2	
WcStore	
(prototype)	
single = {}
@javiervelezreye		34		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	requiere	disponer	de	un	mecanismo	para	registrar	y	recuperar	
componentes	con	agnos<cismo	de	su	disposición	geográfica	en	
los	espacios	DOM.	
El	 componente	 wc-registry	 proporciona	 una	
diccionario	 de	 datos	 para	 realizar	 tareas	 de	
registro	y	recuperación	esenciales	
Registro	de	Componentes	
El	 componente	 se	 configura	 indicando	
entradas	por	defecto	para	la	configuración	del	
registro.	
wc-registry	
get	(k)	
set	(k,	c)	
wc-client-a	
wc-client-b	
DOM	Común	 <wc-registry>
<wc-rule key="A" target="{{c1}}"/>
<wc-rule key="B" target="{{c2}}"/>
<wc-rule key="C">
<wc-c></wc-c>
</wc-rule>
<wc-rule key="C">
<wc-reference ref="#D"/>
</wc-rule>
</wc-registry>
DisBntas	formas	de	introducir	
entradas	por	defecto	en	un	
registro	de	componentes	
Datos	voláBles	
en	cuanto	
salimos	del	
espacio	DOM
@javiervelezreye		35		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	 requiere	 disponer	 de	 un	 almacén	 de	 componentes	 para	
registrar	y	recuperar	componentes	con	facilidades	de	acceso	de	
páginas	blancas.	
El	 componente	 wc-whites	 es	 una	 interfaz	 de	
acceso	 al	 registro	 que	 proporciona	 al	 cliente	
capacidades	de	páginas	blancas.	
Perfil	de	Páginas	Blancas	
El	componente	se	configura	indicando	quién	es	
el	 registro	 de	 componentes	 que	 se	 u<liza	
sobre	el	que	se	opera.	
wc-registry	
get	(k)	
set	(k,	c)	
wc-white	
findById	(id)	
findAll	()	
has	(c)	
has	(id)	
<wc-white registry="[[reg]]">
</wc-white>
Se	supone	acceso	al	registro.	El	
componente	solo	es	un	
adaptador	que	proporciona	una	
interfaz	apropiada	para	dar	
servicios	de	páginas	blancas	
Solo	un	ejemplo	de	cómo	
puede	adaptarse	la	
interfaz	de	registro
@javiervelezreye		36		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	 requiere	 disponer	 de	 un	 almacén	 de	 componentes	 para	
registrar	y	recuperar	componentes	con	facilidades	de	acceso	de	
páginas	amarillas.	
El	componente	wc-yellows	es	una	interfaz	de	
acceso	 al	 registro	 que	 proporciona	 al	 cliente	
capacidades	de	páginas	amarillas.	
Perfil	de	Páginas	Amarillas	
El	componente	se	configura	indicando	quién	es	
el	 registro	 de	 componentes	 que	 se	 u<liza	
sobre	el	que	se	opera.	
wc-registry	
get	(k)	
set	(k,	c)	
wc-yellow	
findByType	(type)	
findAllByType	(type)	
hasByType	(type)	
findByService	(profile)	
findAllByService	(profile)	
hasByService	(profile)	
Solo	un	ejemplo	de	cómo	
puede	adaptarse	la	
interfaz	de	registro	
<wc-yellow registry="[[reg]]">
</wc-yellow>
Se	supone	acceso	al	registro.	El	
componente	solo	es	un	
adaptador	que	proporciona	una	
interfaz	apropiada	para	dar	
servicios	de	páginas	blancas
@javiervelezreye		37		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	 requiere	 disponer	 de	 un	 almacén	 de	 componentes	 para	
registrar	y	recuperar	componentes	con	facilidades	de	control	de	
versiones	
El	 componente	 wc-cvs	 es	 una	 interfaz	 de	
acceso	 al	 registro	 que	 proporciona	 al	 cliente	
capacidades	de	control	de	versiones.	
Perfil	de	Control	de	Versiones	
El	componente	se	configura	indicando	quién	es	
el	 registro	 de	 componentes	 que	 se	 u<liza	
sobre	el	que	se	opera.	
wc-registry	
get	(k)	
set	(k,	c)	
wc-cvs	
tag	()	
revert	()	
findById	(id)	
findAll	()	
Solo	un	ejemplo	de	cómo	
puede	adaptarse	la	
interfaz	de	registro	
<wc-cvs registry="[[reg]]">
</wc-cvs>
Se	supone	acceso	al	registro.	El	
componente	solo	es	un	
adaptador	que	proporciona	una	
interfaz	apropiada	para	dar	
servicios	de	páginas	blancas
@javiervelezreye		38		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	requiere	proporcionar	un	mecanismo	para	acceder	de	manera	
sencilla	a	un	único	registro	de	componentes	en	todo	el	espacio	
de	memoria	de	la	aplicación.	
El	componente	wc-context	proporciona	acceso	
unitario	 a	 un	 registro	 de	 componentes.	 Para	
ello	u<liza	el	hehavior	wc-single.	
Contexto	de	Componentes	
El	 componente	 fabrica	 su	 propia	 instancia	 de	
registro	 de	 manera	 interna	 y	 transparente	 y	
ofrece	servicio	de	paginas	blancas	o	amarillas	
según	se	configure.	
wc-registry	
wc-white	
[wc-single]	
El	componente	de	contexto	adquiere	los	métodos	
de	acceso	expuestos	por	wc-white	de	manera	que	
para	el	cliente	es	transparente	la	existencia	de	
infraestructura	por	detrás			
wc-context	
wc-a	
<wc-context
registry="[[white]]">
</wc-context>
La	configuración	del	
registro	sólo	es	necesaria	
hacerla	una	vez	
wc-context	
[wc-single]	
wc-b	
DOM	#1	 DOM	#2
@javiervelezreye		39		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	requiere	proporcionar	un	mecanismo	para	acceder	de	manera	
sencilla	a	una	colección	de	registros	de	componentes	en	todo	el	
espacio	de	memoria	de	la	aplicación.	
El	componente	wc-context-provider	da	acceso	
a	 una	 colección	 de	 contextos	 diferentes	
organizados	en	un	espacio	de	nombres.	
Proveedor	de	Contexto	
El	 componente	 se	 configura	 indicando	 la	
colección	de	contextos	que	deben	ser	incluidos	
por	defecto	en	el	entorno.	
wc-registry	
wc-white	
wc-context-provider	
[wc-single]	
wc-a	
DOM	#1	
getContext	('C1')	
[wc-single]	
wc-context-provider	
wc-a	
DOM	#2	
getContext	('C1')	
El	componente	de	contexto	adquiere	los	métodos	
de	acceso	expuestos	por	wc-white	de	manera	que	
para	el	cliente	es	transparente	la	existencia	de	
infraestructura	por	detrás			
<wc-context-provider registry="[[w]]">
<wc-rule key="C1" context="[[c1]]"/>
<wc-rule key="C1" context="[[c2]]"/>
<wc-rule key="C1" context="[[c3]]"/>
</wc-context-provider>
La	configuración	del	
registro	sólo	es	necesaria	
hacerla	una	vez
@javiervelezreye		40		
Patrones	de	Composición	
Patrones	de	Composición		
III.	Patrones	de	Adaptación	
	 Los	 patrones	 de	 adaptación	 realizan	 transformaciones	
sobre	 los	 componentes	 para	 que	 encajen	 en	 el	 contexto	
arquitectónico	de	uso.	
Adaptación	
Proceso	 Restricciones	
genera	
Componente	 Componentes	
Caja	Negra	
Arquitectura	
transforma	
Componente	 Componente	
{
}Js	
Caja	Gris	
Modelo	de	
Componente	
Caja	Blanca	
Plan<llas	
crea	
Componente	 Crea<vidad	del	
diseñador	
Flexibilidad	
+	
Complejidad	
+	
Tiempo	de		
Ejecución	
Tiempo	de		
Diseño
@javiervelezreye		41		
Patrones	de	Composición	
Patrones	de	Composición		
III.	Patrones	de	Adaptación	
Se	requiere	adaptar	un	método	de	un	componente	para	que	no	
use	 parámetros	 en	 su	 llamada	 y	 así	 pueda	 ser	 invocado	
asíncronamente	como	un	comando	por	otros	componentes.	
El	 componente	 wc-comand	 transforma	 su	
contrato	 para	 recibir	 los	 parámetros	 del	
método	 como	 propiedades	 y	 genera	 un	
método	(execute)	que	realice	la	invocación.		
Orientación	a	Comando	
La	 configuración	 recibe	 el	 componente	
obje<vo	(target)	y	el	método	sobre	el	que	se	
desea	generar	el	comando	(method).	
<wc-command target="#C" method="m">
<wc-rule key="a"/>
<wc-rule key="b"/>
<wc-rule key="c"/>
</wc-command>
Se	indica	el	
componente	y	el	
método	objeBvo	
Las	reglas	indican	por	
orden	posicional	en	qué	
atributo	HTML	se	mapea	
cada	parámetro	
wc-a	
p	(x,	y,	z)	
c-command	
a	
b	
c	
execute	()	
Las	propiedades	(a,	b,	c)	se	
mapean	en	los	parámetros	
formales	(x,	y,	z)	
El	método	execute	
invoca	a	p
@javiervelezreye		42		
Patrones	de	Composición	
Patrones	de	Composición		
III.	Patrones	de	Adaptación	
Se	requiere	adaptar	el	contrato	de	un	componente	de	manera	
que	 pueda	 ser	 explotado	 en	 el	 marco	 de	 un	 nuevo	 contexto	
arquitectónico	de	uso.	
El	componente	wc-adapter	adapta	su	contrato	
para	 crear	 nuevos	 métodos	 de	 alias	 sobre	
aquellos	que	existen	en	el	mismo.	
Adaptador	de	Contrato	
El	 componente	 se	 configura	 indicando	
esencialmente	 el	 perfil	 buscado,	 como	 una	
colección	de	caracterís<cas	
<wc-adapter target="#A">
<wc-rule key="x" as="a"/>
<wc-rule key="y" as="b"/>
<wc-rule key="z" as="c"/>
</wc-adapter>
Las	reglas	indican	la	
lógica	de	transformación	
que	debe	aplicarse	
El	target	hace	referencia	
al	componente	sobre	el	
que	se	aplica	la	
adaptación	
wc-a	
x	()	
y	()	
z	()	
wc-adapter	
a	()	
b	()	
c	()	
Los	métodos	(a,	b,	c)	se	
mapean	en	los	métodos	de	
desBno	(x,	y,	z)
@javiervelezreye		43		
Patrones	de	Composición	
Patrones	de	Composición		
III.	Patrones	de	Adaptación	
Se	requiere	generar	un	nuevo	componente	que	inyecte	lógica	de	
intercesión	 para	 que	 se	 ejecute	 en	 algún	 momento	 durante	 la	
invocación	de	los	métodos	de	un	componente.	
El	componente	wc-proxy	se	encarga	de	realizar	
operaciones	de	intercesión	para	que	ejecuten	
operaciones	 antes,	 durante	 o	 después	 de	 los	
métodos	de	un	componente	
Proxy	de	Contrato	
El	componente	recibe	el	target	sobre	el	que	se	
hace	 la	 intercesión	 y	 el	 componente	 que	
con<ene	 el	 código	 a	 inyectar.	 Las	 reglas	 dan	
detalles	sobre	la	inyección.	
<wc-proxy target="#A" aspect="#B">
<wc-rule key="x" with="a" before/>
<wc-rule key="y" with="b" after/>
<wc-rule key="z" with="c" around/>
</wc-proxy>
Se	indica	el	componente	
objeBvo	y	el	que	conBene	
los	aspectos	a	inyectar	
Las	reglas	indican	qué	métodos	
del	aspecto	deben	ejecutarse	
(with)	cuando	se	invoca	cada	
método	del	target	(key)	
Se	indica	cuando	se	
ejecuta	cada	decoración.	
Antes	(before),	durante	
(around)	o	después	(aier)	
wc-a	
x	()	
y	()	
z	()	
wc-proxy	
x	()	
y	()	
z	()	 a	()	
b	()	
c	()	
Las	claves	(key)	pueden	usar	
expresiones	regulares	para	
referir	subconjuntos	de	
propiedades	
Entre	la	invocación	de	cada	
método	de	proxy	y	el	método	
original	se	interpone	el	código	
de	decoración	(a,	b,	c)	
Wc-b
@javiervelezreye		44		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	requiere	alterar	el	contrato	de	un	componente	por	medio	de	
la	adquisición	dinámica	de	nuevas	caracterís<cas	definidas	en	los	
contratos	de	otros	componentes.	
El	 componente	 wc-mix	 da	 respuesta	 a	 esta	
necesidad	 de	 manera	 completamente	
declara<va.	
Mixin	de	Contratos	
El	 componente	 recibe	 en	 base	 a	 reglas	 de	
configuración	 cada	 uno	 de	 los	 componentes	
que	hay	mezclar.	
<wc-mix target="#A" policy="overide">
<wc-rule with="#C1"/>
<wc-rule with="#C2"/>
<wc-rule with="#C3"/>
</wc-mix>
Se	indica	el	componente	
objeBvo	y	el	que	conBene	
los	aspectos	a	inyectar	
Las	políBcas	indican	cómo	
proceder	cuando	existen	
problemas	de	colisión	de	
claves	
wc-mixin	
wc-c1	 Wc-c2	 wc-c3	
u	
v	
s	
t	
x	
y	
wc-a	
s	
t	
u	
v	
x	
y
@javiervelezreye		45		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
	 Los	 patrones	 de	 enlace	 se	 encuentran	 estrechamente	
condicionados	 con	 la	 forma	 de	 comunicación	 que	
pretendamos	establecer.	
Enlace	
Eventos	
Data	Binding	
Mensajes	
e
B	
A	
q	
B	 A	
p	
La	composición	aquí	consiste	en	
registrar	a	A	como	escuchador	
de	los	eventos	de	Bpo	e	que	
emite	B	
Enlace	por	Eventos	
Dado	que	B	Bene	permiso	para	escribir	en	x,	la	
composición	aquí	consiste	en	registrar	a	A	
como	interesado	en	los	cambios	de	x	
Enlace	por	Datos	
La	composición	en	este	caso	
enlaza	el	comportamiento	de	A	y	
B	invocando	a	m	desde	n	
Enlace	por	Mensajes	
{{x}}
A	B
@javiervelezreye		46		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	requiere	realizar	un	enlace	composi<vo	por	eventos	para	que	
un	 componente	 responda	 reac<vamente	 ante	 cierto	 <po	 de	
eventos	emi<do	por	otro	componente.	
El	componente	obje<vo	debe	registrarse	como	
escuchador	 de	 los	 eventos	 de	 cierto	 <po	
emi<dos	por	el	componente	emisor.	
Enlace	Por	Eventos	
La	lógica	de	composición	encapsula	un	registro	
de	 eventos	 convencional	 u<lizando	 los	
mecanismos	de	la	Web.	
e
B	
A	
El	componente	A	se	registra	
como	escuchador	de	los	
eventos	de	Bpo	e	emiBdos	
por	B		
Se	asume	que	A	ha	sido	
localizado	por	B	por	técnicas	
exploratorias	o	de	look	up.	
function bind (self) {
return {
eventBind : function (binding) {
var {target, on} = binding;
target.addEventListener (
on, self.execute);
}
...
};
}
Por	convenio,	el	manejador	es	un	método	
(execute)	que	reside	el	cliente	donde	se	
implementa	toda	la	lógica	reacBva
@javiervelezreye		47		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	requiere	realizar	un	enlace	composi<vo	por	datos	para	que	un	
componente	 responda	 actualizando	 una	 de	 sus	 propiedades	 al	
valor	adquirido	por	otra	propiedad	en	otro	componente.	
El	componente	obje<vo	debe	registrarse	como	
escuchador	 de	 cambios	 de	 propiedades	
mientras	 que	 el	 emisor	 debe	 configurar	 su	
propiedad	no<fy	a	true.	
Enlace	Por	Datos	
La	 lógica	 de	 composición	 consisteahora	 en	
escuchar	 eventos	 de	 cambio	 y	 proceder	
actualizando	una	de	sus	propiedades.	
x-changed
B	
A	
El	componente	A	se	registra	
como	escuchador	de	los	
eventos	de	Bpo	x-changed	
emiBdos	por	B		
Los	cambios	sobre	la	
propiedad	x	emiten	eventos	
de	la	forma	x-changed	
function bind (self) {
return {
dataBind : function (binding) {
var {target, from, to} = binding;
var on = from + '-changed';
target.addEventListener (on,
function (e, ctx) {
self[to] = ctx.value;
}
);
}
...
};
}
La	reacción	consiste	en	
actualizar	la	variable	desBno	
cuando	cambia	la	de	origen
@javiervelezreye		48		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	 requiere	 realizar	 un	 enlace	 composi<vo	 por	 mensajes	 para	
que	 la	 llama	 a	 un	 método	 de	 un	 componente	 desencadene	 la	
invocación	de	otro	método	del	componente	obje<vo.	
El	 componente	 obje<vo	 debe	 registrar	 una	
intercesión	funcional	sobre	el	método	de	otro	
componente	para	que	en	algún	punto	invoque	
a	uno	de	sus	métodos.	
Enlace	Por	Mensajes	
Existen	 3	 <pos	 de	 estrategias	 de	 intercesión	
sobre	un	método.	Before,	aoer	y	around	que	
llaman,	 respec<vamente,	 al	 obje<vo	 antes,	
después	 y	 durante	 la	 ejecución	 de	 dicho	
método.	
El	método	q	de	A	en	before	es	normal,	en	aier	
debe	esperar	un	parámetro	correspondiente	al	
resultado.	En	around,	uno	correspondiente	a	la	
propia	función	p		
Al	invocar	al	método	p	de	B	se	
pretende	que	se	ejecute	el	método	
q	de	A.	Esta	intercesión	resulta	
transparente	para	B	
q	
B	 A	
p	
function bind (self) {
return {
messageBind : function (binding) {
var {target, on, to, when} = binding;
var fn = self[to];
target[on] = function (...args) {
if (when === BEFORE) fn.apply(self, args);
var r = target[on].apply (target, args);
if (when === AFTER) fn.apply(self. [...args, r]);
}
}
}
}
Detalles	en	
'Metaprogramación	en	
JavaScript'.	JSDay	2015
@javiervelezreye		49		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	requiere	proporcionar	un	mecanismo	declara<vo	para	definir	
todos	los	<pos	de	enlaces	composi<vos	que	presenta	un	enlace	
con	su	vecindad.	
El	 componente	 wc-bind	 permite	 cubrir	 esta	
necesidad	 ar<culando	 los	 3	 <pos	 de	 enlace	
composi<vo	anteriores.	
Enlace	Externo	
Las	 reglas	 de	 configuración	 determinan	 qué	
enlaces	 hay	 que	 hacer	 con	 cada	 componente	
de	 la	 vecindad.	 	 (for)	 marca	 el	 componente	
obje<vo.	
<wc-bind for="A">
<wc-rule event with="B" on="e"/>
<wc-rule data with="C" from="x" to="y"/>
<wc-rule message with="D" on="q" to="f" before/>
<wc-rule message with="D" on="q" to="g" after/>
</wc-bind>
f	
g	
D	
A	
P	
q	
B	 C	e
x = {{v}}
y = [[v]]
Binding	por	
eventos	
Binding	por	
mensajes	
Binding	por	
datos	
Las	reglas	de	configuración	
prescribe	toda	la	lógica	de	enlace	
composiBvo	que	es	necesario	
arBcular
@javiervelezreye		50		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	 requiere	 proporcionar	 un	 mecanismo	 para	 permi<r	 a	 los	
componentes	 definir	 sus	 propios	 enlaces	 composi<vos	 con	 los	
componentes	de	su	vecindad.	
El	 behavior	 wc-composable	 proporciona	
métodos	de	binding	para	que	estos	puedan	ser	
invocados	desde	la	lógica	de	composición	del	
componente.	
Enlace	Interno	
Las	 capacidades	 de	 binding	 del	 behabior	 se	
usan	al	principio	en	el	ciclo	de	vida.	También	
suelen	 usarse	 en	 conjunción	 con	 el	 behabior	
configurable	dentro	del	método	config.	
[wc-binding]			
A	
B	 e
ready: function () {
this.bind ({
type : 'event',
ref : B
on : 'e'
});
}
		[wc-binding]	
		[wc-configurable]	
A	
B	e
config: function (rules) {
rules.forEach (rule => {
this.bind (binding (rule));
});
}
Behaviors ['wc-composable'] = (function () {
var Binds = {
event : function eventBind () {...},
data : function dataBind () {...},
message : function messageBind () {...}
};
return {
bind : function (binding) {
Binds[binding.type] (binding);
}
};
})();
@javiervelezreye		51		
Patrones	de	Composición	
Patrones	de	Composición		
IV.	Patrones	de	Enlace	
Se	requiere	proporcionar	un	mecanismo	sencillo	para	especificar	
secuencias	 de	 composición	 entre	 componentes	 de	 forma	
completamente	declara<va	
El	 componente	 wc-chain	 proporciona	 una	
manera	 sencilla	 de	 crear	 cadenas	 de	
composición	de	forma	declara<va.	
Cadena	de	Composición	
Se	 asume	 que	 la	 lógica	 de	 composición	 por	
pares	 es	 siempre	 la	 misma	 y	 puede	
factorizarse	en	un	wc-bind	externo.	
<wc-chain binder="#bnd">
<wc-x/>
<wc-y/>
<wc-z/>
</wc-chain >
<wc-bind id="bnd">
<wc-rule event on="e"/>
<wc-rule data from="x" to="y"/>
<wc-rule message on="f" to="g" before/>
</wc-bind>
wc-a	
wc-b	
wc-c	El	componente	itera	sobre	los	
elementos	de	la	cadena	y	los	
enlaza	secuencialmente	de	
acuerdo	a	la	lógica	de	enlace	
en	el	bind	
La	lógica	de	composición	consiste	en	este	caso	
en	un	enlace	por	evento	e,	otro	por	datos	(x,	y)	
y	uno	por	mensaje	en	before	(f,	g)	
Lógica	de	composición	
común	para	ser	aplicada	
iteraBvamente	por	cada	
par	en	secuencia	
Los	parámetros	(for)	y	
(with)	de	wc-bind	son	
inyectados	por	wc-chain
@javiervelezreye		52		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización	
	 Los	 patrones	 de	 contextualización	 permiten	 interpretar	
cada	colaboración	entre	componentes	dentro	del	contexto	
de	uso	adecuado.	
Contextualización	
Configuración	
TargeRng	
La	Lógica	de	configuración	prescribe	
como	se	adquiere	el	componente	una	
parametrización	precisa	para	el	
contexto	de	uso	
Configuración	
El	targeBng	refiere	a	la	configuración	
del	contexto	arquitectónico	sobre	el	
cual	la	operaBva	del	componente	
debe	tener	efecto		
TargeRng
@javiervelezreye		53		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
	 En	relación	a	las	estrategia	de	configuración	se	dis<nguen	
tres	 niveles	 de	 madurez.	 A	 con<nuación	 exponemos	 los	
criterios	que	definen	cada	nivel.	
Configuración	
M.	Componente	 Configuración	 Inyección	
Nivel	II.	
Centralización	
Configuración	
Nivel	III.	
Inyección	
Automá<ca	
Modelo	de	
Componente	
convencional	
Configuración	
explícita	en	HTML	por	
atributos	y	Light	DOM	
Al	instanciar	el	
componente	se	incluye	
la	configuración		
Nivel	I.	
Configuración	
Manual	
properties
methods
HTML attributes
Light DOM
Cascade
Configurable
Rules
Registrable
Register
Context
ContextProvider
Config
Factory
Injector
Injectable
Configuración	
centralizada	
en	artefactos	
externos	
Construcción	
automáBca	a	
través	de	
inyector	
Construcción	
explícita	a	través	
de	inyector	bajo	
demanda	del	
cliente
@javiervelezreye		54		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	requiere	homogenizar	el	proceso	de	configuración	está<ca	de	
los	 componentes	 y	 facilitar	 su	 procesamiento	 de	 forma	
semiautomá<ca.	
El	componente	wc-rule	cubrir	las	necesidades	
de	 homogenización	 en	 la	 configuración.	 El	
behavior	wc-configurable	asiste	en	el	proceso.	
Configuración	EstáRca	Por	Reglas	
Cualquier	 componente	 con	 lógica	 de	
configuración	 compleja	 usa	 reglas	 para	
realizarla	de	forma	asis<da.	
Nivel	I	
<wc-x>
<wc-rule key="users" source="#ds1"/>
<wc-rule key="prods" source="#ds2"/>
...
</wc-x>
Este	no	es	más	que	un	
ejemplo	de	componente	
con	configuración	por	
reglas		
Los	atributos	de	cada	regla	
son	genéricos.	No	estás	
prefijados	como	propiedades.	
De	esta	manera	la	regla	es	un	
artefacto	reuBlizable	y	muy	
flexible	
Behaviors = Behaviors || {};
Behaviors ['wc-configurable'] = {
ready : function () {
var rules = getRules ();
this.config (rules);
}
};
config: function (rules) {
// process config
}
});
[wc-configurable]
@javiervelezreye		55		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 realizar	 un	 proceso	 de	 configuración	 por	 reglas	 de	
manera	que	si	se	producen	cambios	en	la	configuración,	estos	se	
propaguen	para	actualizar	el	componente.	
El	 componente	 wc-rule	 cubrir	 ahora	 las	
necesidades	 de	 reconfiguración	 dinámica	 al	
propagar	por	eventos	los	cambios.	
Configuración	Dinámica	Por	Reglas	
Cualquier	 componente	 con	 lógica	 de	
configuración	 compleja	 usa	 reglas	 para	
realizarla	de	forma	asis<da.	
Nivel	I	
Behaviors = Behaviors || {};
Behaviors ['wc-reconfigurable'] = {
listeners: { change: onChange },
onChange: function (e) {
var rules = getRules (e);
this.config (rules);
}
};
config: function (rules) {
// process config
}
});
[wc-configurable]	
Rules	
e
<wc-x>
<wc-rule key="users" source="#ds1"/>
<wc-rule key="prods" source="[[ds2]]"/>
...
</wc-x>
Este	no	es	más	que	un	
ejemplo	de	componente	
con	configuración	por	
reglas		
Cada	componente	regla	
dispara	un	evento	de	cambio	
cada	vez	que	se	produce	un	
cambio	en	los	atributos
@javiervelezreye		56		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	requiere	que	el	proceso	de	configuración	por	reglas	pueda	ser	
reinterpretado	en	el	marco	de	otro	componente	recibido	como	
parámetro	de	configuración.	
El	behavior	wc-contextualizable	añade	además	
un	 atributo	 de	 contexto	 que	 permite	 reinter-
pretar	la	configuración	del	componente.	
Contextualización	de	Reglas	
El	behavior	incorpora	al	componente	un	nuevo	
atributo	 que	 indica	 el	 nuevo	 contexto	 donde	
debe	interpretarse	la	configuración.	
Nivel	I	
La	lógica	de	configuración	
se	interpreta	ahora	en	el	
marco	de	otro	contexto	
<wc-x context="[[ctx]]">
<wc-rule key="users" source="#ds1"/>
<wc-rule key="prods" source="[ds2]"/>
...
</wc-x>
Los	valores	entre	corchetes	[]	son	
interpretados	como	propiedades	
dentro	del	nuevo	contexto	
Behaviors ['wc-contextualizable'] = {
properties : {
context : Object
},
ready : function () {
var rules = getRules ();
this.config (
this.context (rules)
);
},
context: function (rule) {
// Contextualize Rule
}
};
@javiervelezreye		57		
<wc-X config="{{cx}}">
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
La	 lógica	 de	 configuración	 de	 los	 componentes	 internos	 a	 un	
esquema	 de	 fuerte	 anidamiento	 DOM	 reside	 en	 el	 padre.	 Se	
requiere	un	mecanismo	de	configuración	sencillo.	
El	 componente	 wc-cascade	 permite	 arrastrar	
la	 información	 de	 configuración	 en	 cascada	
aplicándola	a	cada	paso.	
Configuración	en	Cascada	
Se	recoge	una	configuración	de	entrada	(in),	se	
aplica	en	el	componente	en	curso	y	genera	una	
configuración	de	salida	(out)	para	el	siguiente	
componente	en	cascada.		
Nivel	I	
</wc-X>
Light	DOM	 Shadow	DOM	
</wc-Y>
<wc-Y config="{{cy}}">
shadowRoot
Light	DOM	 Shadow	DOM	
shadowRoot
<wc-cascade
in="{{cx}}"
out="{{cy}}"/>
<wc-cascade in="{{cx}}" out="{{cy}}">
<wc-rule key="x" to="a" out/>
<wc-rule key="y" to="b" out/>
<wc-rule key="z" to="c"/>
</wc-cascade>
(key)	es	el	nombre	de	una	propiedad	
en	cx.	(to)		indica	en	que	propiedad	
del	componente	se	inyecta.	(out)	
determina	si	el	valor	no	debe	
copiarse	en	cy	
Se	recoge	la	configuración	
cx,	se	procesa	y	se	pasa	a	
wc-y	el	resto	cy
@javiervelezreye		58		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 proporcionar	 un	 mecanismo	 para	 que	 los	
componentes	lleven	a	cabo	su	proceso	de	registro	en	el	contexto	
de	configuración	de	forma	autónoma.	
El	 behavior	 wc-registrable	 proporciona	
facilidades	de	registro	automá<co	que	quedan	
vinculadas	al	ciclo	de	vida	del	componente.	
Registro	Interno	
El	 behavior	 se	 encarga	 de	 llevar	 a	 cabo	 el	
proceso	 de	 registro	 en	 el	 contexto	 de	
configuración	de	forma	automá<ca.	
Nivel	I	
Shadow	DOM	
<wc-a>
</wc-a>
<wc-b>
</wc-b>
wc-context	
wc-a	
[wc-registrable]	
Behaviors = Behaviors || {};
Behaviors ['wc-registrable'] = {
ready : function () {
var props = getProperties (this);
this.register (props);
},
register : function () {
// register props
}
};
wc-a	se	registra	
autónomamente		
porque	es	
registrable	
wc-b	es	un	
componente	no	
registrable
@javiervelezreye		59		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 proporcionar	 un	 mecanismo	 para	 que	 un	 agente	
externo	 lleve	 a	 cabo	 las	 tareas	 de	 registro	 en	 el	 contexto	 de	
configuración	de	forma	autónoma.	
El	 componente	 wc-register	 permite	 llevar	 a	
cabo	 las	 tareas	 de	 registro	 automá<co	 con	
asistencia	de	técnicas	exploratorias.	
Registro	Externo	
Internamente,	 el	 registro	 u<liza	 un	 wc-scout	
por	 lo	 que	 su	 lógica	 de	 configuración,	 debe	
incluir	un	handle.	
Nivel	I	
Shadow	DOM	
<wc-a register>
</wc-a>
<wc-b register>
</wc-b>
<wc-c>
</wc-c>
wc-register	
wc-context	
wc-a	
wc-b	
<wc-register
target="#container"
ref="[register]">
</wc-register>
Por	conveniencia	el	
nombre	del	atributo	
handle	se	llama	(target)	
en	este	componente	
Sólo	los	componentes	
eBquetados	con	el	rol	
'register'	son	registrados
@javiervelezreye		60		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 un	 mecanismo	 para	 encapsular	 la	 lógica	 de	
configuración	correspondiente	a	un	componente	de	manera	que	
pueda	ser	almacenada	y	aplicada	posteriormente.	
El	 componente	 wc-config	 permite	 encapsular	
lógica	 de	 configuración	 y	 persis<rla	 en	 un	
contexto	de	configuración	determinado.	
Encapsulación	de	la	Configuración	
El	 componente	 recoge	 la	 configuración	
explícita	que	necesita	un	componente	para	ser	
generado.	
Nivel	II	
<wc-config name="a" type="A">
<wc-rule key="x" value="[[r]]"/>
<wc-rule key="y" value="[[s]]"/>
<wc-rule key="z" value="3"/>
<wc-rule key="b" type="B" prototype/>
<wc-rule key="c" type="C" single/>
</wc-config>
Nombre	y	Bpo	del	
componente	a	construir	
Configuración	de	propiedades	en	la	
construcción.	Pueden	ser	valores	
concretos	o	Bpos	de	artefactos	a	
construir	
wc-config	
	
x,	y,	z	
b,	c	
type='A'	
El	contexto	Bene	como	misión,	en	
este	nivel,	almacenar	las	
configuraciones	de	componentes	
para	ser	uBlizadas	en	procesos	de	
inyección	posterior	
wc-context	 El	componente	es	un	
almacén	de	información	
de	configuración
@javiervelezreye		61		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 un	 mecanismo	 para	 construir	 bajo	 demanda	 las	
instancias	 de	 componentes	 que	 van	 a	 operar	 dentro	 del	
contenido	en	la	sobra	de	un	componente	padre.	
El	componente	wc-factory	da	respuesta	a	esta	
necesidad	 por	 medio	 del	 uso	 de	 las	
configuraciones	en	el	contexto.	
Inyección	Bajo	Demanda	
El	componente	factoría	se	configura	indicando	
sobre	 que	 contexto	 DOM	 requiere	 operar.	
Consulte	targe<ng	más	adelante.	
Nivel	II	
<wc-factory target="#here">
</wc-factory>
Dentro	de	este	espacio	se	
instancian	los	componentes	que	es	
necesario	crear	dentro	del	
contenido	en	la	sombra		
El	componente	padre	es	
responsable	de	crear	
las	explícitamente	
wc-factory	
wc-config	a	
wc-context	
create	(k)	
Shadow	DOM	
wc-container	
create	('a')	
<wc-a>
</wc-a>
La	factoría	es	un	single	
que	se	recupera	por	
look	up
@javiervelezreye		62		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	Configuración	
Se	 requiere	 proporcionar	 un	 mecanismo	 para	 que	 los	
componentes	 lleven	 a	 cabo	 su	 proceso	 de	 inyección	 de	
dependencias	de	forma	autónoma.	
El	 behavior	 wc-injectable	 proporciona	
facilidades	 de	 configuración	 automá<ca	 que	
quedan	vinculadas	al	ciclo	de	vida.	
Inyección	Interna	
El	 behavior	 se	 encarga	 de	 llevar	 a	 cabo	 el	
proceso	 de	 configuración	 del	 componente	 de	
manera	automá<ca.	
Nivel	III	
Shadow	DOM	
<wc-a>
</wc-a>
<wc-b>
</wc-b>
wc-context	
[wc-injectable]	
Behaviors = Behaviors || {};
Behaviors ['wc-injectable'] = {
ready : function () {
this.config (ctx);
},
config: function (ctx) {
var cfg = ctx.get (this.is);
// inject dependencies
// using wc-context
}
};
wc-a	se	configura	
autónomamente		
porque	es	
injectable	
wc-b	es	un	
componente	no	
injectable
@javiervelezreye		63		
Patrones	de	Composición	
Patrones	de	Composición		
II.	Patrones	de	Localización.	Técnicas	de	Look	Up	
	
Se	 requiere	 proporcionar	 un	 mecanismo	 para	 que	 un	 agente	
externo	lleve	a	cabo	las	tareas	de	inyección	de	dependencias	de	
forma	autónoma.	
El	 componente	 wc-injector	 llevar	 a	 cabo	 las	
tareas	 de	 configuración	 automá<co	 con	
asistencia	de	técnicas	exploratorias.	
Inyección	Externa	
Internamente,	 el	 registro	 u<liza	 un	 wc-scout	
por	 lo	 que	 su	 lógica	 de	 configuración,	 debe	
incluir	un	handle.	
Nivel	III	
Shadow	DOM	
<wc-a inject>
</wc-a><wc-b>
</wc-b>
wc-injector	
wc-context	 <wc-register
target="#container"
ref="[register]">
</wc-register>
Por	conveniencia	el	
nombre	del	atributo	
handle	se	llama	(target)	
en	este	componente	
Sólo	los	componentes	
eBquetados	con	el	rol	
'register'	son	registrados	
wc-config	a	
wc-a?	
wc-config	a
@javiervelezreye		64		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	TargeRng	
	 Los	patrones	de	targe<ng	permiten	especificar	el	contexto	
arquitectónico	sobre	el	cual	la	opera<va	del	componente	
debe	tener	efecto.	
	
TargeRng	 DOM	#1	
Host	DOM	
<wc-me>
</wc-me>
Light	DOM	 Shadow	DOM	
<wc-container>
</wc-container>
shadowRoot
DOM	#2	
wc-context	
distribución	
templa<ng	
invasión	
trasvase
@javiervelezreye		65		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	TargeRng	
Se	requiere	proporcionar	un	mecanismo	para	que	el	contenido	
HTML	 generado	 por	 un	 componente	 pueda	 ser	 ubicado	 en	 un	
target	diferente.	
El	 behavior	 targatable	 incorpora	 un	 atributo	
target	 que	 se	 u<liza	 para	 capturar	 el	 nuevo	
des<no	de	los	contenidos	generados.	
Targatable	
La	configuración	de	este	<po	de	componentes	
requiere	 especificar	 el	 des<no	 de	 los	
contenidos	en	el	(target).	
<wc-x
target="#container">
</wc-x>
El	behavior	incorpora	al	
componente	el	atributo	
(target)	
Este	es	un	componente	
genérico	que	hace	uso	
del	comportamiento	
targatable		
Behaviors ['wc-targatable'] = {
properties : {
target: Object
},
ready : function () {
this.render (target);
},
};
Polymer ({
is : 'wc-x',
behaviors : [
Behaviors ['wc-targatable']
],
render: function (target) {
// Render
}
});
@javiervelezreye		66		
Patrones	de	Composición	
Patrones	de	Composición		
V.	Patrones	de	Contextualización.	TargeRng	
Se	requiere	adaptar	el	contrato	de	un	componente	de	manera	
que	su	uso	opere	no	sobre	el	propio	componente	sino	sobre	otro	
componente	des<natario.	
El	componente	wc-contextulizer	se	encarga	de	
realizar	 esta	 opera<va	 de	 recontextualización	
para	que	opere	sobre	otro	componente			
Contextualizador	de	Contrato	
El	 componente	 se	 configura	 indicando	 el	
componente	 original	 (target)	 y	 el	 que	 opera	
como	nuevo	des<no	(context).	
<wc-contextualizer
target="#A"
context="#B"
keys="x y z">
</wc-contextualizer>
(keys)	indica	los	métodos	que	
deben	contextualizarse.	Cuando	se	
omite	este	atributo	se	enBende	que	
deben	recontextualizarse	todos	los	
métodos		
wc-contextualizer	
wc-a	
wc-a	
Contexto	
function (target, ctx) {
Object.keys(target)
.filter (isFunction)
.forEach (fn =>
fn.bind (ctx);
);
}
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
3	La	Composición	
en	la	PrácCca	
§  Composición	Directa	por	Eventos	
§  Composición	Indirecta	por	Datos	
§  Composición	de	Flujos	de	Eventos	&	Datos	
La	Composición	en	la	PrácCca	
Patrones	de	Composición
@javiervelezreye		68		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
I.	Composición	Directa	por	Eventos	
<wc-button id="btn">
</wc-button>
Click	
wc-buron	#btn	
[wc-composable]	
wc-color	
<wc-color
target="#btn"
on="tap">
</wc-color>
on-tap	
§  2	componentes	independientes	
§  Uno	de	ellos	es	composable	
§  Configurando	sus	atributos	target	&	on	se	consigue	la	opera<va	
<wc-color
target="#btn"
on="tap">
</wc-color>
execute: function () {
this.style.background = 'CCC';
}
A.	Composición	Interna
@javiervelezreye		69		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
I.	Composición	Directa	por	Eventos	
<wc-button id="btn">
</wc-button>
Click	
wc-buron	#btn	
wc-color	
on-tap	
<wc-color>
</wc-color>
execute: function () {
this.style.background = 'CCC';
}
wc-bind	
§  2	componentes	independientes	
§  Uno	de	ellos	es	composable	
§  Configurando	el	binder	se	consigue	la	opera<va	
<wc-bind for="wc-color">
<wc-rule event with="#btn" on="tap"/>
</wc-bind>
B.	Composición	Externa
@javiervelezreye		70		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
I.	Composición	Directa	por	Eventos	
<wc-button id="A">
</wc-button>
Click	
wc-buron	#A	
on-tap	
<wc-color>
</wc-color>
execute: function () {
this.style.background = 'CCC';
}
<wc-bind for="wc-color">
<wc-rule event with="#A" on="tap"/>
<wc-rule event with="#B" on="tap"/>
</wc-bind>
wc-bind	
§  Varios	componentes	independientes	
§  Uno	de	ellos	es	composable	
§  Configurando	el	binder	se	consigue	la	opera<va	
<wc-button id="B">
</wc-button>
Click	
wc-buron	#B	
on-tap	
C.	Composición	MúlRple	
wc-color
@javiervelezreye		71		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
I.	Composición	Directa	por	Eventos	
<wc-button id="btn">
</wc-button>
Click	
wc-buron	#btn	
on-tap	
<wc-video id="#v">
</wc-video>
execute: function () {
(#v).play ();
}
<wc-adapter target="#v">
<wc-rule key="play" as="execute"/>
</wc-adapter>
wc-bind	
§  2	componentes	independientes	
§  Ninguno	de	ellos	es	composable	
§  Configurando	el	binder	se	consigue	la	opera<va	
wc-adapter	
<wc-bind for="wc-color">
<wc-rule event with="#btn" on="tap"/>
</wc-bind>
D.	Composición	AdaptaRva	
wc-video	#v
@javiervelezreye		72		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
II.	Composición	Indirecta	por	Datos	 <wc-i18n register>
</wc-i18n>
<wc-login>
</wc-login>
<wc-bind for="wc-color">
<wc-rule data
with="i18n"
from="language"
to="language"/>
</wc-bind>
DOM	#2	
language: 'es'
onLanguage: function (e) {
this.i18n (getResource(
this.language
));
}
wc-factory	
wc-context	
DOM	#1	
wc-i18n	
{{i18n.login}}	
wc-login	
{{i18n.pwd}}	
{{i18n.ok}}	
[wc-i18n-able]	
[wc-i18nable]	:	
wc-bind	
{{	language	}}	 crea	
wc-i18n	register	
wc-register	
set	(i18n)	
get	(i18n)	
§  Componentes	con	un	perfil	i18n-able	
§  Composición	indirecta	a	través	de	memoria	
§  Binding	de	datos	
DOM	#1	
DOM	#2	
<wc-register>
</wc-register>
<wc-factory>
</wc-factory>
<wc-i18n>
</wc-18n>
A.	Inyección	Bajo	Demanda	
Data
@javiervelezreye		73		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
II.	Composición	Indirecta	por	Datos	 <wc-i18n register>
</wc-i18n>
<wc-login inject>
</wc-login>
DOM	#2	
language: i18n
ready: function () {
(#bnd).bind (...)
}
onLanguage: function (e) {
...
}
wc-injector	
wc-context	
DOM	#1	
[wc-login]	:	
wc-i18n	
{{i18n.login}}	
wc-login	inject	
{{i18n.pwd}}	
{{i18n.ok}}	 wc-bind	
{{	language	}}	
Inject	i18n	
wc-i18n	register	
wc-register	
set	(i18n)	
get	(i18n)	
§  Componentes	con	un	perfil	i18n-able	
§  Composición	indirecta	a	través	de	memoria	
§  Binding	de	datos	
DOM	#1	
DOM	#2	
<wc-register>
</wc-register>
B.	Inyección	AutomáRca	
<wc-injector>
</wc-injector>
Data
@javiervelezreye		74		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
III.	Composición	de	Flujos	de	Eventos	&	Datos	
§  Una	colección	de	componentes	con	dis<nta	responsabilidad	
§  Se	encadenan	composi<vamente	por	eventos	para	operar	
§  Se	conectan	al	componente	twirer	por	eventos	
wc-twirer	#V	
page-up	
page-down	
wc-event-client	#cl	
wc-pager	
wc-data-source	
wc-command-provider	
wc-rest	
A.	Flujo	Entrante	
command	
command	
page-up	
page-down	
<wc-chain binder="#in">
<wc-even-client id="cl".../>
<wc-pager.../>
<wc-data-source.../>
</wc-chain>
get	
<wc-twitter id="V">
</wc-twitter>
<wc-bind for="#V">
<wc-rule event
with="#cl"
on="page-up"/>
<wc-rule event
with="#cl"
on="page-down"/>
</wc-bind>
<wc-command-provider>
</wc-command-provider>
<wc-rest>
</wc-rest>
getCommand	
<wc-bind id="in">
<wc-rule event on="command"/>
</wc-bind>
@javiervelezreye		75		
La	Composición	En	La	Prác<ca	
Patrones	de	Composición		
III.	Composición	de	Flujos	de	Eventos	&	Datos	
§  La	respuesta	de	la	fuente	de	datos	es	asíncrona	
§  Los	resultados	se	emiten	por	eventos	data	
§  El	puerto	de	datos	recoge	los	datos	de	eventos	
§  Se	conecta	el	puerto	de	datos	con	la	propiedad	{{tweets}}	de	#V		
wc-twirer	#V	
page-up	
page-down	
wc-rest	#ds	
B.	Flujo	Saliente	
<wc-twitter id="V">
</wc-twitter>
...
data	
{{tweets}}	
tweets	
<wc-bind for="#V">
<wc-rule data
with="#dp"
from="data"
to="tweets"/>
</wc-bind>
wc-data-port	#dp	
data	
<wc-bind for="#dp">
<wc-rule event
with="#ds"
on="data"/>
</wc-bind>
<wc-data-port id="#dp">
...
</wc-data-port>
@javiervelezreye		76		
Preguntas	
Patrones	de	Composición		
www.javiervelezreyes.com	
Patrones	de	Composición	
Arquitecturas	Orientadas	a	
Componentes	Web
@javiervelezreye		77		
Referencias	
Patrones	de	Acceso	a	Datos		
Referencias	
	
La	Web	Orientada	a	Componentes	
Fecha 	Noviembre	de	2015	
Lugar 	Code	Mo<on	
Páginas 	57	
Ref 	hrps://goo.gl/mCxm3w	
Componentes	Web	·	Arquitecturas	Sooware	·	Frontend	·	JavaScript	·	
Composición	 ·	 Encapsulación	 ·	 Reu<lización	 ·	 Buenas	 Prác<cas	 ·	
Principios	de	Diseño	·	Errores	comunes	
Principios	de	Diseño	en	Componentes	Web	
	
Fecha 	Marzo	de	2015	
Lugar 	Polymer	Madrid	
Páginas 	170	
Ref 	hrps://goo.gl/t0GpVS	
Programación	 Orientada	 a	 Componentes	 ·	 Principios	 de	 Diseño	 ·	
Buenas	 Prác<cas	 ·	 Recomendaciones	 de	 Diseño	 y	 Desarrollo	 ·	
Técnicas	de	Programación	de	Componentes	Web	·	Polymer
@javiervelezreye		78		
Referencias	
Patrones	de	Acceso	a	Datos		
Referencias	
	
Arquitecturas	para	la	ReuRlización	en	JavaScript	
Fecha 	Abril	de	2016	
Lugar 	JS	Day	
Páginas 	43	
Ref 	hrps://goo.gl/i9pd03	
Programación	 Orientada	 a	 Componentes	 ·	 Componentes	 ·	
Reu<lización	·	Programación	·	JavaScript	·	Modelos	Arquitectónicos	·	
Metaprogramación	·	Adaptación	arquitectónica	
Metaprogramación	ComposiRva	en	JavaScript	
Fecha 	Mayo	de	2015	
Lugar 	JS	Day	
Páginas 	84	
Ref 	hrps://goo.gl/wLllU2	
Metaprogramación	 ·	 Programación	 adapta<va	 ·	 Programación	
orientada	 a	 Componentes	 ·	 JavaScript	 ·	 Adaptación	 ·	 Alineamiento	
Arquitectónico	·	técnicas	de	metaprogramación	·	patrones	de	diseño
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Patrones	de	Composición	
Arquitecturas	Orientadas	a	
Componentes	Web	
Noviembre	2016

Más contenido relacionado

Destacado

Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
Javier Vélez Reyes
 
Eποχή Περικλή
Eποχή ΠερικλήEποχή Περικλή
Eποχή Περικλή
varalig
 
2.1 ομηρική εποχή 1100 750 π. χ
2.1 ομηρική εποχή 1100 750 π. χ2.1 ομηρική εποχή 1100 750 π. χ
2.1 ομηρική εποχή 1100 750 π. χ
varalig
 
Rppfiqihviianyar 130722111454-phpapp01
Rppfiqihviianyar 130722111454-phpapp01Rppfiqihviianyar 130722111454-phpapp01
Rppfiqihviianyar 130722111454-phpapp01
gaga sihab
 
Ultrabooks for real
Ultrabooks for realUltrabooks for real
Ultrabooks for real
Katie Wood
 
Panduan pkm-tahun-2013
Panduan pkm-tahun-2013Panduan pkm-tahun-2013
Panduan pkm-tahun-2013
Sindi Erwanti
 
Running At 99%: Mitigating App DoS
Running At 99%: Mitigating App DoSRunning At 99%: Mitigating App DoS
Running At 99%: Mitigating App DoS
ryan_huber
 

Destacado (19)

Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
 
Metaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScriptMetaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScript
 
Eποχή Περικλή
Eποχή ΠερικλήEποχή Περικλή
Eποχή Περικλή
 
How to use Giftsmate E-Gift Card ?
How to use Giftsmate E-Gift Card ?How to use Giftsmate E-Gift Card ?
How to use Giftsmate E-Gift Card ?
 
2.1 ομηρική εποχή 1100 750 π. χ
2.1 ομηρική εποχή 1100 750 π. χ2.1 ομηρική εποχή 1100 750 π. χ
2.1 ομηρική εποχή 1100 750 π. χ
 
The Dutch Way - EMEA warehouse & Distribution by Versteijnen Logistics
The Dutch Way - EMEA warehouse & Distribution by Versteijnen LogisticsThe Dutch Way - EMEA warehouse & Distribution by Versteijnen Logistics
The Dutch Way - EMEA warehouse & Distribution by Versteijnen Logistics
 
Showing care
Showing careShowing care
Showing care
 
2014 09-04 hta afrique banken final
2014 09-04 hta afrique banken final2014 09-04 hta afrique banken final
2014 09-04 hta afrique banken final
 
Complimenting other
Complimenting other Complimenting other
Complimenting other
 
Rppfiqihviianyar 130722111454-phpapp01
Rppfiqihviianyar 130722111454-phpapp01Rppfiqihviianyar 130722111454-phpapp01
Rppfiqihviianyar 130722111454-phpapp01
 
Presentation
PresentationPresentation
Presentation
 
Rules for making_plurals_campus
Rules for making_plurals_campusRules for making_plurals_campus
Rules for making_plurals_campus
 
Verbtobe
VerbtobeVerbtobe
Verbtobe
 
Ultrabooks for real
Ultrabooks for realUltrabooks for real
Ultrabooks for real
 
Panduan pkm-tahun-2013
Panduan pkm-tahun-2013Panduan pkm-tahun-2013
Panduan pkm-tahun-2013
 
2014 12-02 hta emro banken 1
2014 12-02 hta emro banken 12014 12-02 hta emro banken 1
2014 12-02 hta emro banken 1
 
Conditional sentences
Conditional sentencesConditional sentences
Conditional sentences
 
Running At 99%: Mitigating App DoS
Running At 99%: Mitigating App DoSRunning At 99%: Mitigating App DoS
Running At 99%: Mitigating App DoS
 
Grammar error in writing
Grammar error in writingGrammar error in writing
Grammar error in writing
 

Similar a Arquitecturas de Componentes Web. Patrones de Composición

03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 201503 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
wpargentina
 
Portafolio diagnostico miosottyr.
Portafolio diagnostico miosottyr.Portafolio diagnostico miosottyr.
Portafolio diagnostico miosottyr.
ARQMIOSOTTYSR
 

Similar a Arquitecturas de Componentes Web. Patrones de Composición (20)

Mvp cluster - Línea de movilidad
Mvp cluster - Línea de movilidadMvp cluster - Línea de movilidad
Mvp cluster - Línea de movilidad
 
03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 201503 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
03 de Marzo 2015: Serafín Danessa - WordCamp Buenos Aires 2015
 
MBAi - Master en Dirección de Empresas de Internet
MBAi - Master en Dirección de Empresas de InternetMBAi - Master en Dirección de Empresas de Internet
MBAi - Master en Dirección de Empresas de Internet
 
Qué es la web 2.0
Qué es la web 2.0Qué es la web 2.0
Qué es la web 2.0
 
Taller web 2.0
Taller  web 2.0Taller  web 2.0
Taller web 2.0
 
Junio 2012
Junio 2012Junio 2012
Junio 2012
 
Folleto IEBS.pdf
Folleto IEBS.pdfFolleto IEBS.pdf
Folleto IEBS.pdf
 
Book social media 2012-10
Book social media 2012-10Book social media 2012-10
Book social media 2012-10
 
Taller de Community Manager para No Expertos
Taller de Community Manager para No ExpertosTaller de Community Manager para No Expertos
Taller de Community Manager para No Expertos
 
Postgrado en Usabilidad Web, Conversión y Experiencia de Usuario - WATT
Postgrado en Usabilidad Web, Conversión y Experiencia de Usuario - WATTPostgrado en Usabilidad Web, Conversión y Experiencia de Usuario - WATT
Postgrado en Usabilidad Web, Conversión y Experiencia de Usuario - WATT
 
Diseño web ANTONIO.pptx
Diseño web ANTONIO.pptxDiseño web ANTONIO.pptx
Diseño web ANTONIO.pptx
 
Taller Community Manager para No Expertos - 16 de noviembre
Taller Community Manager para No Expertos - 16 de noviembreTaller Community Manager para No Expertos - 16 de noviembre
Taller Community Manager para No Expertos - 16 de noviembre
 
Robert Mulet, Web Manager de Custo Barcelona, se incorpora al Claustro de Pro...
Robert Mulet, Web Manager de Custo Barcelona, se incorpora al Claustro de Pro...Robert Mulet, Web Manager de Custo Barcelona, se incorpora al Claustro de Pro...
Robert Mulet, Web Manager de Custo Barcelona, se incorpora al Claustro de Pro...
 
Master en Mobile Business: tecnologías, apps y negocios para móviles
Master en Mobile Business: tecnologías, apps y negocios para móvilesMaster en Mobile Business: tecnologías, apps y negocios para móviles
Master en Mobile Business: tecnologías, apps y negocios para móviles
 
Master en Community Management: Empresa 2.0 y Redes Sociales
Master en Community Management: Empresa 2.0 y Redes SocialesMaster en Community Management: Empresa 2.0 y Redes Sociales
Master en Community Management: Empresa 2.0 y Redes Sociales
 
Nuevas profesiones
Nuevas profesionesNuevas profesiones
Nuevas profesiones
 
Curso de Social Media: redes sociales, monitorización y gestión de crisis
Curso de Social Media: redes sociales, monitorización y gestión de crisisCurso de Social Media: redes sociales, monitorización y gestión de crisis
Curso de Social Media: redes sociales, monitorización y gestión de crisis
 
La administración de proyectos en las organizaciones
La administración de proyectos en las organizacionesLa administración de proyectos en las organizaciones
La administración de proyectos en las organizaciones
 
Portafolio diagnostico miosottyr.
Portafolio diagnostico miosottyr.Portafolio diagnostico miosottyr.
Portafolio diagnostico miosottyr.
 
D2I Institute Panama Programacion 2015 Q1
D2I Institute Panama Programacion 2015 Q1D2I Institute Panama Programacion 2015 Q1
D2I Institute Panama Programacion 2015 Q1
 

Más de Javier Vélez Reyes

Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
Javier Vélez Reyes
 

Más de Javier Vélez Reyes (9)

Arquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la ExperienciaArquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la Experiencia
 
Modelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de ServiciosModelos de API Para El Diseño de Servicios
Modelos de API Para El Diseño de Servicios
 
Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes WebArquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes Web
 
El futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo WebEl futuro es hoy. Del Nomadismo al Capitalismo Web
El futuro es hoy. Del Nomadismo al Capitalismo Web
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
 
Estrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de DatosEstrategias de Programación & Estructuras de Datos
Estrategias de Programación & Estructuras de Datos
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
Programación Asíncrona en Node JS
Programación Asíncrona en Node JSProgramación Asíncrona en Node JS
Programación Asíncrona en Node JS
 

Último

microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
2024020140
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
EdwinGarca59
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
Marc Liust
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
Yanitza28
 

Último (20)

Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptx
 
EL ESPIRITU SANTO en pentecostes2022.pptx
EL ESPIRITU SANTO en pentecostes2022.pptxEL ESPIRITU SANTO en pentecostes2022.pptx
EL ESPIRITU SANTO en pentecostes2022.pptx
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
NIA_300_PLANEACION_DE_UNA_AUDITORIA_DE_E.pptx
NIA_300_PLANEACION_DE_UNA_AUDITORIA_DE_E.pptxNIA_300_PLANEACION_DE_UNA_AUDITORIA_DE_E.pptx
NIA_300_PLANEACION_DE_UNA_AUDITORIA_DE_E.pptx
 
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
¡Ya basta! Sanidad Interior - Angela Kellenberger.pdf
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptxTipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 

Arquitecturas de Componentes Web. Patrones de Composición