SlideShare una empresa de Scribd logo
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Metaprogramación	En	JavaScript		
Programación	Orientada	a	
Componentes	
Febrero	2015
@javiervelezreye		2		
Autor	
Metaprogramación	En	JavaScript	
Licenciado	en	informá1ca	por	la	UPM	desde	el	año	2001	y	doctor	
en	 informá1ca	 por	 la	 UNED	 desde	 el	 año	 2009,	 Javier	 es	
inves1gador	y	su	línea	de	trabajo	actual	se	centra	en	la	innovación	
y	desarrollo	de	tecnologías	de	Componentes	Web.	Además	realiza	
ac1vidades	 de	 evangelización	 y	 divulgación	 en	 diversas	
comunidades	IT,	es	Polymer	Polytechnic	Speaker	y	co-organizador	
del	grupo	Polymer	Spain	que	conforma	una	comunidad	de	interés	
de	 ámbito	 nacional	 en	 relación	 al	 framework	 Polymer	 y	 a	 las	
tecnologías	de	Componentes	Web.		
I.	¿Quién	Soy?	
	
II.	¿A	Qué	Me	Dedico?	
	
javier.velez.reyes@gmail.com	
@javiervelezreye	
linkedin.com/in/javiervelezreyes	
gplus.to/javiervelezreyes	
jvelez77	
javiervelezreyes	
youtube.com/user/javiervelezreyes	
Polymer	Polytechnic	Speaker	
Co-organizador	de	Polymer	Spain		
Evangelización	Web	
Desarrollador	JS	Full	stack	
Arquitectura	Web	
Formación	&	Consultoría	IT	
e-learning
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
1	Introducción	
§  Qué	Es	La	Metaprogramación	
§  Por	Qué	La	Metaprogramación	
§  El	Contexto	De	La	Metaprogramación	
§  El	Proceso	De	La	Metaprogramación	
§  La	Metaprogramación	Como	Paradigma	
Introducción	
Metaprogramación	En	JavaScript
@javiervelezreye		4		
Introducción	
Metaprogramación	En	JavaScript	
Qué	Es	La	Metaprogramación	
La	 metaprogramación	 es	 una	 disciplina	 de	 programación	 que	
consiste	 en	 construir	 programas	 que	 generan,	 manipulan	 o	
modifican	otros	programas,	incluidos	ellos	mismos.		
Definición	
Programa	Como	Proceso	de	
Transformación	De	Datos	
Metaprograma	Como	Proceso	de	
Transformación	De	Programas	
El	 programa	 toma	 unos	 datos	 de	
entrada	y	produce	unos	resultados	de	
salida	 de	 acuerdo	 a	 un	 proceso	 de	
transformación	
El	metaprograma	toma	unos	datos	de	
entrada	que	representan	un	programa	
y	valores	de	configuración	para	dirigir	
el	 proceso	 de	 construcción	 de	 otro	
programa
@javiervelezreye		5		
Introducción	
Metaprogramación	En	JavaScript	
Qué	Es	La	Metaprogramación	
En	términos	generales	se	puede	pensar	en	dos	grandes	familias	
de	técnicas	de	metaprogramación.	La	programación	genera1va	y	
la	programación	orientada	a	componentes.	
Tipos	De	Metaprogramación	
Metaprogramación	GeneraUva	
Programación	GeneraUva	
Metaprogramación	ComposiUva	
P.	Orientada	A	Componentes	
La	 programación	 generaBva	 confec-
ciona	código	nuevo	a	parBr	de	datos	
de	 configuración	 y	 elementos	 de	
programas	
La	 programación	 orientada	 a	 compo-
nentes	elabora	nuevos	componentes	a	
parBr	 de	 la	 combinación	 composiBva	
de	otros	componentes
@javiervelezreye		6		
Introducción	
Metaprogramación	En	JavaScript	
Por	Qué	La	Metaprogramación	
Algunas	compañías	se	especializan	en	la	construcción	de	un	1po	de	productos	dentro	de	un	
dominio	específico.	Con	el	ánimo	de	fomentar	la	reu1lización	conviene	construir	artefactos	que	
contribuyan	a	dominio	en	vez	de	limitar	su	aplicación	al	ámbito	de	un	proyecto.		
Factorías	de	SoXware.	La	Construcción	de	un	Dominio	
Requisitos	
Proyecto	A	
Dominio	
Soluciones	
Requisitos	
Proyecto	B	
Soluciones	
Variantes	
Proyecto	A	
Dominio	
Soluciones	
Variantes	
Proyecto	B	
Soluciones	
Invariantes	
Aproximación	Clásica	
Contribuciones	A	Proyecto	
Aproximación	MetaprogramáUca	
Contribuciones	A	Dominio			
La	 reuBlización	 clásicamente	 se	 enBende	
como	un	proceso	de	migración	de	código	
entre	proyectos	
En	la	aproximación	metaprogramáBca	los	
componentes	se	expresan	como	artefactos	
abstractos	a	nivel	de	dominio
@javiervelezreye		7		
Introducción	
Metaprogramación	En	JavaScript	
Por	Qué	La	Metaprogramación	
De	 esta	 manera	 se	 consigue	 reducir	 costes	 de	 desarrollo	 y	 mantenimiento	 por	 medio	 de	 la	
economía	de	escala	y	la	economía	de	alcance.	La	primera	reduce	costes	por	el	aumento	de	la	
producción	de	un	solo	producto.	La	segunda	lo	consigue	por	el	abaratamiento	de	la	adaptación	
en	productos	similares.	
Líneas	de	Producto.	Economía	de	Escala	&	Economía	de	Alcance	
Una	 línea	 de	 producción	 permite	 el	
abaratamiento	de	costes	por	el	desarrollo	
en	masa	de	un	gran	número	de	productos	
idénBcos	
La	 línea	 de	 variación	 consigue	 el	
abaratamiento	 de	 costes	 por	 la	
construcción	de	productos	muy	similares	
Economía	De	Escala	 Economía	De	Alcance	
Producto	1	 Producto	N	
…	
Proyecto	A	
Proyecto	K	
…
@javiervelezreye		8		
Introducción	
Metaprogramación	En	JavaScript	
Por	Qué	La	Metaprogramación	
En	 términos	 generales,	 podemos	 resumir	 en	 cuatro	 los	 obje1vos	 principales	 de	 la	
metaprogramación.	Automa1zación,	reu1lización,	mantenibilidad	y	extensibilidad.	Todos	ellos	
promueven,	en	mayor	o	menor	medida,	tanto	la	economía	de	alcance	como	la	economía	de	
escala.	
AutomaUzación,	ReuUlización,	Mantenibilidad	&	Extensibilidad	
Automa;zación	
Reu;lización	
Extensibilidad	
Mantenibilidad	
El	 uso	 de	 componentes	 permite	 una	
a d e c u a d a	 e s p e c i a l i z a c i ó n	 d e	
responsabilidades	 que	 fomenta	 la	
mantenibilidad	 por	 susBtución	 de	
partes		
La	 automaBzación	 persigue	 la	 idea	 de	
construir	soRware	a	través	de	procesos	de	
confección	que	minimizan	los	esfuerzos	de	
desarrollo		
El	 carácter	 adaptaBvo	 o	 generaBvo	 de	 los	
componentes	 les	 confiere	 una	 mayor	
capacidad	 evoluBva	 lo	 que	 facilita	 la	
extensibilidad	global	del	sistema	
La	 plasBcidad	 contractual	 de	 los	
componentes	 se	 regenera	 o	 adapta	
para	 permiBr	 que	 estos	 encajen	
fácilmente	 en	 diversos	 contextos	 de	
explotación	arquitectónica
@javiervelezreye		9		
Introducción	
Metaprogramación	En	JavaScript	
El	Contexto	De	La	Metaprogramación	
El	analista	de	dominio	establece	una	definición	formal	y	computable	del	producto	mediante	el	
uso	de	lenguajes	específicos	de	dominio.	Esta	definición	se	usa	para	configurar	el	framework	de	
metaprogramación	que	ar1culará	la	solución	específica	requerida.		
PerspecUva	De	Caja	Negra		
Framework	de	
Metaprogramación	
Invariantes	
de	dominio	
Variantes	
de	producto	
Especificación	de	
Producto	
describe	
Analista	
Dominio	
DSL	
Invariantes	
de	dominio	
Variantes	de	
Producto	
Modelo	de	
Configuración	
El	 cliente	 especifica	 con	 ayuda	 de	
lenguajes	 específicos	 de	 dominio	 las	
partes	variantes	de	la	especificación	de	su	
producto	
La	 especificación	 del	 producto	 específico	
adaptado	 a	 los	 requerimientos	
parBculares	 del	 cliente	 queda	 capturado	
entre	 las	 invariantes	 de	 dominio	 y	 las	
variantes	de	producto
@javiervelezreye		10		
Introducción	
Metaprogramación	En	JavaScript	
El	Contexto	De	La	Metaprogramación	
La	especificación	de	las	variantes	de	producto	se	procesa	para	determinar	los	metaprogramas	
que	 deben	 emplearse	 en	 el	 proceso	 construc1vo.	 Estos	 metaprogramas	 pueden	 u1lizar	
metacomponenentes	 prediseñados	 y	 aplican	 técnicas	 de	 composición	 o	 generación	 para	
producir	componentes.	
PerspecUva	De	Caja	Blanca	
usa	
Framework	de	Metaprogramación	
Metacomponentes	
Metaprogramas	de	
composición	o	generadores	
Componentes	de	Proyecto	
Proyecto	
de	Cliente	
crea	
Invariantes	de	
dominio	
define	
Especificación	
de	producto	
invoca	
Lenguaje	de	Programación	
Lenguaje	de	Metaprogramación	
Orquestador	
Dominio	
Analista
@javiervelezreye		11		
Introducción	
Metaprogramación	En	JavaScript	
El	Contexto	De	La	Metaprogramación	
En	 la	 metaprogramación	 está1ca	 las	 fases	 de	 elaboración	 y	 ejecución	 se	 desarrollan	
secuencialmente	 mientras	 que	 en	 la	 elaboración	 dinámica	 el	 desarrollo	 de	 ambas	 fases	 es	
paralelo.	 Esta	 segunda	 aproximación	 ofrece	 oportunidades	 de	 reelaboración	 que	 no	 son	
posibles	con	la	metaprogramación	está1ca.	
Metaprogramación	EstáUca	&	Dinámica	
Elaboración	EstáUca	
usa	
Framework	de	Metaprogramación	
Metacomponentes	
Metaprogramas	de	
composición	o	generadores	
Componentes	de	Proyecto	
crea	
Lenguaje	de	Programación	
Lenguaje	de	Metaprogramación	
Orquestador	pasivo	
Especificación	
de	producto	
En	 la	 elaboración	 estáBca	 primero	 se	
elaboran	 los	 componentes	 de	 cliente	 y	
luego	se	lanzan	a	ejecución	
La	desventajas	es	que	una	
vez	 creados	 los	 compo-	
nentes,	 éstos	 no	 pueden	
readaptarse		
Fase	de	Elaboración	
Fase	de	Ejecución
@javiervelezreye		12		
Introducción	
Metaprogramación	En	JavaScript	
El	Contexto	De	La	Metaprogramación	
En	 la	 metaprogramación	 está1ca	 las	 fases	 de	 elaboración	 y	 ejecución	 se	 desarrollan	
secuencialmente	 mientras	 que	 en	 la	 elaboración	 dinámica	 el	 desarrollo	 de	 ambas	 fases	 es	
paralelo.	 Esta	 segunda	 aproximación	 ofrece	 oportunidades	 de	 reelaboración	 que	 no	 son	
posibles	con	la	metaprogramación	está1ca.	
Metaprogramación	EstáUca	&	Dinámica	
Elaboración	Dinámica	
Fase	de	Elaboración	
Fase	de	Ejecución	
En	la	elaboración	dinámica	la	elaboración	
de	 los	 componentes	 de	 cliente	 se	 realiza	
en	Bempo	de	ejecución	
Esto	 permite	 que	 los	
componentes	 se	 readap-
ten	 dinámicamente	 al	
contextos	 cambiantes	 de	
uso	
usa	
Framework	de	Metaprogramación	
Metacomponentes	
Componentes	de	Proyecto	
crea	
Lenguaje	de	Programación	
Lenguaje	de	Metaprogramación	
Especificación	
de	producto	
Metaprogramas	de	
composición	o	generadores	
Orquestador	pasivo
@javiervelezreye		13		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
El	 proceso	 de	 construcción	 por	
metaprogramación	 de	 un	 compo-
nente	 atraviesa	 un	 conjunto	 de	
fases	 conceptuales	 con	 propósitos	
diferenciales	y	caracterís1cos.		
Ciclo	De	Elaboración	 Nivel	de	dominio	
Nivel	de	proyecto	
Descomposición	
diseñada	Selección	
Adaptación	
Composición	
Encapsulación	
Metacomponentes	
Componente	
C.	Adaptado	
Colaboración	
C.	Encapsulado	
C.	Contextualizado	
Contextualización	
Abstracción	
Análisis
@javiervelezreye		14		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
La	selección	consiste	en	determinar	las	variantes	específicas	de	cada	1po	de	meta-componente	
que	 formarán	 parte	 del	 proceso	 construc1vo.	 La	 selección	 está1ca	 es	 aquella	 que	 se	 realiza	
enteramente	antes	del	1empo	de	ejecución.	Por	el	contrario,	la	selección	dinámica	implica	que	
el	metaprograma	inyecta	lógica	de	negocio	para	ar1cular	la	selección	en	1empo	de	ejecución	
pudiendo	hacer	ésta	dinámicamente	cambiante.	
Selección	
Selección	
Variantes	
de	producto	
Selección	Está;ca	
La	 selección	 estáBca	 se	 resuelve	 antes	 del	
Bempo	 de	 ejecución	 de	 manera	 que	 las	
variantes	 seleccionadas	 quedan	 definiBva-
mente	fijadas	
Selección	Dinámica	
La	ventaja	de	la	selección	dinámica	es	que	
permite	dar	soporte	a	escenarios	donde	las	
variantes	 uBlizadas	 pueden	 cambiar	
durante	el	Bempo	de	ejecución
@javiervelezreye		15		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
La	 adaptación	 es	 el	 proceso	 mediante	 el	 cual	 un	 componente	 se	 adapta	 para	 resolver	 las	
impedancias	 que	 presenta	 con	 el	 contexto	 arquitectónico	 de	 explotación.	 La	 adaptación	
sintác1ca	 se	 centra	 en	 adaptar	 el	 contrato	 del	 componente	 mientras	 que	 la	 adaptación	
semán1ca	 persigue	 modificar	 el	 comportamiento	 del	 artefacto	 a	 los	 requerimientos	 del	
proyecto.	 Tanto	 estandarizar	 los	 componentes	 como	 trabajar	 con	 componentes	 proto1po	 a	
nivel	meta	evita	frecuentemente	la	adaptación.			
Adaptación	
Adaptación	sintác;ca	&	semán;ca	
Un	 ejemplo	 de	 adaptación	 sintácBca	
consiste	 en	 cambiar	 los	 nombres	 de	 los	
métodos	de	un	componente.	La	decoración	
por	 aspectos	 del	 comportamiento	 de	 un	
método	 es	 un	 ejemplo	 de	 adaptación	
semánBca		
Estandarización	&	Proto;pos	
La	estandarización	de	contratos	y	comporta-
mientos	 evita	 la	 adaptación.	 Asimismo	
cuando	 los	 metacomponentes	 son	
componentes	 directamente	 operaBvos	 se	
posibilita	 la	 ausencia	 ocasional	 de	
adaptación		
Proyecto	A	 Proyecto	B	 Proyecto	C	
Adaptación
@javiervelezreye		16		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
La	 composición	 es	 un	 ejercicio	 de	 transformación	 en	 el	 que	 un	 metacomponente	 al	 que	
llamaremos	núcleo	se	enriquece	por	la	adquisición	de	cierta	lógica	parcial	que	reside	en	otro	u	
otros	metacomponentes	llamados	extensiones.	En	el	marco	de	esta	relación	binaria	es	posible	
analizar	el	grado	de	dependencia	que	1enen	cada	una	de	estas	partes	entre	sí	para	caracterizar	
el	1po	de	composición.	
Composición	
Composición	 Núcleo	
Dependiente	 Autónomo	
Dependiente	
Autónomo	
Extensión	 Composición	
CooperaBva	
Composición	
Subordinada	
Composición	
Subordinante	
Composición	
Autónoma	
Proyecto	A
@javiervelezreye		17		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
La	encapsulación	es	un	proceso	mediante	el	cual	se	establecen	nuevas	fronteras	arquitectónicas	
en	 el	 marco	 de	 una	 composición	 que	 1enen	 por	 obje1vo	 aislar	 la	 misma	 del	 contexto	 de	
explotación.	 Este	 aislamiento	 permite	 la	 protección	 de	 la	 información.	 Por	 extensión	
consideraremos	 que	 todo	 mecanismo	 que	 garan1ce	 esta	 protección	 es	 una	 forma	 débil	 de	
encapsulación.	
Encapsulación	
Encapsulación	
Proyecto	B	Proyecto	A	
Encapsulación	Fuerte	
La	 encapsulación	 fuerte	 es	 el	 proceso	
mediante	el	cual	se	levantan	unas	fronteras	
arquitectónicas	nuevas	en	el	marco	de	una	
relación	composiBva	
Encapsulación	Débil	
Por	 extensión,	 consideraremos	 que	
cualquier	 mecanismo	 que	 proporcione		
protección	de	información	en	el	marco	de	la	
composición	es	una	forma	de	encapsulación	
débil
@javiervelezreye		18		
Introducción	
Metaprogramación	En	JavaScript	
El	Proceso	De	La	Metaprogramación	
La	 contextualización	 es	 la	 fase	 úl1ma	 del	 proceso	 composi1vo	 mediante	 la	 cual	 se	 dota	 al	
componente	 de	 una	 condiciones	 ambientales	 de	 contexto	 que	 condicionarán	 su	
comportamiento	durante	el	1empo	de	ejecución.	Cuando	estas	condiciones	ambientales	se	fijan	
antes	 del	 1empo	 de	 ejecución	 hablamos	 de	 contextualización	 está1ca.	 La	 variante	 dinámica	
permite	ar1cular	recontextualizaciones	en	1empo	de	ejecución.	
Contextualización	
Contextualización	
Contextualización	Está;ca	
La	 contextualización	 estáBca	 resuelve	 las	
condiciones	 ambientales	 de	 contexto	 antes	
de	que	el	componente	entre	en	el	Bempo	de	
ejecución.	
Contextualización	Dinámica	
La	 contextualización	 dinámica	 permite	
restablecer	recurrentemente	el	contexto	de	
ejecución	 lo	 que	 ofrece	 mayores	 oportu-
nidades	de	adaptación	
Estado	
Lógica	A	
B	
C
@javiervelezreye		19		
Introducción	
Metaprogramación	En	JavaScript	
La	Metaprogramación	Como	Paradigma	
En	torno	al	concepto	de	componente	se	pueden	describir	tres	ejes	dimensionales.	Los	obje1vos	
determinan	los	propósitos	perseguidos,	los	mecanismos	caracterizan	las	capacidades	na1vas	del	
lenguaje	y	los	principios	de	diseño	ofrecen	directrices	generales	de	actuación.	
Ejes	Dimensionales	
Principios	
Mecanismos	
C	
Auto
Reut
Ctx
Ref
Ext
Sust Her
Man
Int
Del
Ext
Adap
ObjeUvos	
Pol
Los	 objeBvos	 responden	 a	 qué	
nuevas	 caracterísBcas	 estruc-
turales	y	funcionales	persigue	el	
paradigma	
¿Que?	
Los	 principios	 ofrecen	 directrices	 acerca	
de	 cómo	 proceder	 para	 aplicar	
adecuadamente	 los	 mecanismos	 del	
lenguaje	
¿Cómo?	
Los	mecanismos	son	las	capacidades	
del	 lenguaje	 que	 permiten	 alcanzar	
los	objeBvos	perseguidos	
¿Con	qué?
@javiervelezreye		20		
Introducción	
Metaprogramación	En	JavaScript	
La	Metaprogramación	Como	Paradigma	
En	torno	a	los	tres	ejes	dimensionales	se	pueden	establecer	sendos	planos	de	ac1vidad.	Las	
técnicas	indican	cómo	aplicar	los	mecanismos	del	lenguaje,	los	patrones	presentan	soluciones	a	
problemas	 recurrentes	 y	 los	 modelos	 arquitectónicos	 ofrecen	 restricciones	 que	 determinan	
como	proceder.	
Planos	De	AcUvidad	
Principios	
Mecanismos	
C	
Auto
Reut
Ctx
Ref
Ext
Sust Her
Man
Int
Del
Ext
Adap
Programadores	
Diseñadores	
Arquitectos	
Plano	Tecnológico	
ObjeUvos	
Patrones	de	Diseño	
Pol
Los	 modelos	 y	 restricciones	
arquitectónicas	 proporcionan	
directrices	 generales	 que	
determinan	 cómo	 construir	
soluciones	 soRware	 basadas	 en	
metaprogramación	
Modelos	&	Restricciones	
El	diseño	define	formas	canónicas	de	
aplicar	los	mecanismos	del	lenguaje	
para	problemas	recurrentes	
Patrones	de	Diseño	
Las	técnicas	indican	cómo	aplicar	los	
mecanismos	 del	 lenguaje	 en	 el	
proceso	 de	 metaprogramación	 para	
alcanzar	los	objeBvos	
Técnicas
@javiervelezreye		21		
Introducción	
Metaprogramación	En	JavaScript	
La	Metaprogramación	Como	Paradigma	
En	torno	a	los	tres	ejes	dimensionales	se	pueden	establecer	sendos	planos	de	ac1vidad.	Las	
técnicas	indican	cómo	aplicar	los	mecanismos	del	lenguaje,	los	patrones	presentan	soluciones	a	
problemas	 recurrentes	 y	 los	 modelos	 arquitectónicos	 ofrecen	 restricciones	 que	 determinan	
como	proceder.	
Planos	De	AcUvidad	
Principios	
Mecanismos	
C	
Auto
Reut
Ctx
Ref
Ext
Sust Her
Man
Int
Del
Ext
Adap
Programadores	
Diseñadores	
Arquitectos	
Plano	Tecnológico	
ObjeUvos	
Patrones	de	Diseño	
Pol
Capítulo	1	
}
}
Capítulo	2	
}
Capítulo	3	
Capítulo	4	 }
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
2	JavaScript como
Lenguaje De
Metaprogramación
§  Introducción	
§  Delegación	&	Herencia	En	La	Composición	
§  Polimorfismo	&	Abstracción	En	La	Composición	
§  Contextualización	&	Reflexión	En	La	Composición	
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript
@javiervelezreye		23		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Introducción	
El	espacio	de	posibles	opciones	cuando	abordamos	problemas	de	
metaprogramación	es	muy	amplio.	Nuestro	foco	de	atención	aquí	
en	 primer	 lugar	 será	 discu1r	 problemas	 en	 el	 marco	 de	 la	
composición	y	no	de	la	generación.	En	este	capítulo	veremos	las	
principales	 caracterís1cas	 del	 lenguaje	 que	 permiten	 ar1cular	
procesos	de	confección	composi1va.	
Metaprogramación	ComposiUva	
A	
B	
Por	otro	lado	nos	centraremos	en	escenarios	
de	 composición	 dinámica	 donde	 la	 fase	 de	
elaboración	 y	 ejecución	 coexisten	 durante	 el	
1empo	de	producción	de	la	solución	so`ware.	
Como	veremos	esto	requiere	que	el	lenguaje	
de	 metaprogramación	 y	 programación	
coincidan	 y	 frecuentemente	 se	 entre-
mezclarán	técnicas	propias	de	ambos	niveles	
de	desarrollo.	
Composición	Dinámica	
Fase	de	Elaboración	
Fase	de	Ejecución
@javiervelezreye		24		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Introducción	
Como	 discu1remos,	 JavaScript	 es	 un	 buen	 candidato	 como	
lenguaje	para	cubrir	las	necesidades	propias	de	los	procesos	de	
metaprogramación.	 En	 efecto,	 su	 carácter	 dinámico,	 su	 sistema	
de	1pificación	débil	y	su	sistema	de	clases	basado	en	proto1pos	
confieren	a	los	artefactos	construidos	un	alto	grado	de	plas1cidad	
adapta1va	que	facilita	los	procesos	de	metaprogramación.	
Capacidades	Del	Lenguaje	
Sin	embargo,	aquí	restringiremos	nuestros	estudio	a	
las	 capacidades	 del	 lenguaje	 en	 el	 marco	 de	 un	
modelo	de	componentes	basado	en	objetos.	En	este	
sen1do	comprobaremos	que	las	álgebras	 	de	objetos	
resultan	 muy	 flexibles	 y	 potentes	 para	 ar1cular	
procesos	 de	 metaprogramación.	 Quedan	 fuera	 las	
capacidades	 del	 lenguaje	 vinculadas	 a	 la	
programación	funcional	que	fomentan	un	es1lo	más	
genera1vo	que	composi1vo.	
Modelo	De	Objetos	
Tipificación	Débil	
ProtoUpos	
Dinamicidad	
JavaScript	
Modelo	de	Objetos	
Modelo	de	Funciones	
Delegación	
Herencia	
Polimorfismo	
Ligadura	Dinámica	
Orden	Superior	
Clausuras	
Evaluación	Parcial
@javiervelezreye	25		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
Los	objetos	son	el	ciudadano	de	primera	categoría	dentro	de	este	
modelo.	 En	 JavaScript	 un	 objeto	 es	 un	 mero	 agregador	 de	
propiedades	 organizado	 como	 un	 diccionario	 cuyos	 valores	
pueden	 ser	 1pos	 primi1vos	 o	 funciones	 que	 ejecutan	 en	 el	
contexto	del	objeto.	
Los	Objetos	En	La	Composición	
Objetos	Abiertos	
var o = {
};
var o = {
x : 1,
y : 1,
z : 1
};
var o = {
x : 1,
y : 1
};
o.x = 1;
o.y = 1;
o.z = 1;
delete o.z
Podemos	ampliar	y	reducir	la	carga	semánBca	
del	 objeto	 a	 través	 de	 operaciones	 de	
modificación	sobre	el	mismo	
El	 objeto	 en	 JavaScript	 es	 un	 mero	 agregador	
de	caracterísBcas	funcionales	y	de	estado	pero	
no	consBtuye	un	clasificador	estricto	
Objetos	como	agregadores	
Objetos	abiertos	
	
	
	
	
	
	
	
o	
{
p1: v1,
...
pn: vn,
m1: function (){},
...
mn: function (){}
}
@javiervelezreye	26		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
Por	 medio	 de	 la	 delegación	 se	 ar1culan	 esquemas	 de	
colaboración	 entre	 objetos	 de	 manera	 que	 los	 algoritmos	 se	
distribuyen	 entre	 el	 ecosistema	 de	 objetos	 par1cipantes.	 Esto	
permite	ar1cular	una	adecuada	división	de	responsabilidades	en	
las	fases	preliminares	de	diseño.	
La	Delegación	En	La	Composición	
Dynamic	Binding		
var a = {
d: b,
m: function (){
d.n();
}
};
var b = {
n: function (){
...
}
}
b.n = function () {
...
};
El	 enlace	 dinámico	 permite	 resolver	 la	
localización	del	método	llamado	justo	antes	de	
la	invocación	lo	que	se	alinea	con	el	modelo	de	
objetos	abiertos	
var b = {
};
Enlace	dinámico	
	
	
	
	
	
	
	
b	
{
n: function (){
...;
}
}
El	esquema	de	delegación	impone	una	
parte	 estáBca,	 que	 determina	 el	
nombre	 del	 método	 a	 invocar	 y	 otra	
dinámica	 que	 informa	 del	 objeto	
donde	reside	dicho	método	
	
	
	
	
	
	
	
a	
{
d: B,
m: function (){
d.n();
}
}
Delegación
@javiervelezreye	27		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
Otra	relación	de	delegación	implícita	entre	objetos	se	marca	por	
medio	de	la	cadena	de	proto1pado.	Todo	objeto	se	vincula	a	un	
proto1po	en	el	que	delega	la	búsqueda	de	una	propiedad	cuando	
ésta	 no	 se	 encuentra	 en	 el	 propio	 objeto.	 Las	 clases	 son	
proto1pos	de	objetos	con	lo	que	este	concepto	se	convierte	en	un	
rol.	
La	Herencia	En	La	Composición	
Dado	 que	 las	 clases	 se	 representan	 como	
objetos	protoBpo,	las	propiedades	anteriores	se	
aplican	a	la	relación	de	herencia	
Proto;pos	
En	 JavaScript	 la	 herencia	 es	 un	 Bpo	
especial	 de	 delegación.	 Dado	 que	 las	
clases	se	representan	como	protoBpos	
los	 conceptos	 de	 clase	 y	 objeto	 son	
meros	roles	en	torno	a	la	relación	de	
herencia		
Herencia	
	
	
	
	
	
	
	
o	
{
n: function (){
this.m();
}
}
	
	
	
	
	
	
	
p	
[[prototype]]
{
m: function (){
...
}
}
La	herencia	es	una	forma	de	delegación	fuerte	a	través	
de	la	cadena	de	protoBpado.	Debido	al	carácter	abierto	
de	 los	 protoBpos	 es	 la	 forma	 más	 dinámica	 de	
delegación	
Heredar	es	Delegar	
var p = {
m: function (){
...
}
}
p.m = function () {
...
};
var p = {
};var o = Object.create(p);
o.n = function (){
this.m();
};
ProtoUpos	como	Clases
@javiervelezreye	28		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
En	 JavaScript	 el	 polimorfismo	 sólo	 puede	 interpretarse	 en	
términos	 de	 la	 conformidad	 a	 un	 contrato	 establecido	 por	
convenio.	 A	 diferencia	 de	 otros	 lenguajes,	 esta	 conformidad	
puede	ser	total	o	parcial.	
El	Polimorfismo	En	La	Composición	
Duck	Typing	
Para	 garanBzar	 que	 o	 es	 compaBble	 con	 el	
protocolo	 de	 c,	 se	 debe	 imponer	 la	 existencia	
de	 un	 método	 m	 en	 o.	 La	 metaprogramación	
puede	transformar	o	en	este	senBdo	
Duck	Typing	
Los	objetos	a	y	b	resultan	conformes	a	
un	contrato	definido	por	la	existencia	
del	método	m.	Esto	es	una	forma	de	
polimorfismo	 débil	 que	 no	 está	
arBculada	 a	 través	 de	 herencia	 ni	 de	
definición	de	interfaces	
Conformidad	Contractual	
	
	
	
	
	
	
	
	
b	
{
m: function () {},
y: function () {}
}
var o = {
};
c.m(o);
var c = {
m: function (o){
o.m();
}
};
var o = {
m: function () {}
};
c.m(o);
o.m = function () {
...
};
	
	
	
	
	
	
	
a	
{
m: function () {},
x: function () {}
}
@javiervelezreye	29		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
A	través	del	polimorfismo	débil	que	ofrece	JavaScript	es	posible	
alcanzar	cotas	de	expresividad	de	mayor	abstracción.	Esto	es	una	
propiedad	muy	conveniente	para	la	definición	de	metaprogramas	
que	deben	operar	en	términos	de	alta	generalidad.	 	El	siguiente	
ejemplo	muestra	un	esquema	que	opera	a	nivel	abstracto.	
La	Abstracción	En	La	Composición	
Abstracción	
Los	algoritmos	se	pueden	expresar	en	términos	
abstractos	 asumiendo	 que	 cada	 objeto	
parBcipante	incluirá	una	versión	polimórfica	de	
los	métodos	implicados	
Abstracción	
Los	objetos	a	y	b	resultan	conformes	a	
un	 contrato	 que	 incluye	 los	 métodos	
m	y	n.	El	objeto	c	es	un	artefacto	con	
conformidad	 parcial	 a	 dicho	 contrato	
que	sin	embargo	no	puede	usarse	en	
aquellos	protocolos	donde	se	requiera	
m.	
Conformidad	Parcial	
	
	
	
	
	
	
	
	
a	
{
m: function () {},
n: function () {}
}
os[2].m = function () {
...
};
var os = [a, b, c];
app.all (os);
var app = {
all: function (os){
for (o in os)
o.m();
}
};
var os = [a, b, c];
app.all (os);
	
	
	
	
	
	
	
b	
{
m: function () {},
n: function () {}
}
	
	
	
	
	
	
	
c	
{
m: function () {},
}
@javiervelezreye	30		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
Los	 métodos	 del	 modelo	 de	 objetos	 se	 diferencian	 de	 las	
funciones	 en	 el	 uso	 de	 un	 parámetro	 implícito	 –	 this	 –	 que	
referencia	 al	 contexto	 donde	 dicho	 método	 debe	 ejecutarse.	
Dicho	 contexto	 puede	 ser	 alterado	 por	 diversos	 mecanismos	
explícitos	o	implícitos	del	lenguaje.		
La	Contextualización	En	La	Composición	
Puntero	Implícito	this	
Las	 capacidades	 de	 recontextualización	 que	
ofrece	 JavaScript	 permiten	 arBcular	 diversos	
esquemas	 de	 conexión	 composiBva	 que	
condicionan	 la	 variante	 funcional	 que	 se	 va	 a	
invocar	en	cada	caso		
Recontextualización	
bind	 permite	 especificar	 que	 el	
método	 m	 debe	 ejecutarse	 en	 el	
contexto	 del	 objeto	 b.	 Esto	 Bene	
repercusiones	 acerca	 de	 a	 quien	
afecta	 el	 código	 dentro	 de	 m	 y	
permite	 arBcular	 composiciones	
interesantes	
Contextualización	
os[2].m = function () {
...
};
var os = [a, b, c];
app.all (os);
var app = {
all: function (os){
for (o in os)
o.m();
}
};
var os = [a, b, c];
app.all (os);
	
	
	
	
	
	
	
a	
{
m: function () {
return this.n();
}.bind (b)
} 	
	
	
	
	
	
	
b	
{
n: function () {}
}
@javiervelezreye	31		
JavaScript	Como	Lenguaje	De	Metaprogramación	
Metaprogramación	En	JavaScript	
Capacidades	De	JavaScript	En	El	Modelo	De	Objetos	
La	 mayoría	 de	 los	 metaprogramas	 hacen	 uno	 de	 las	 capacidades	 reflexivas	 del	 lenguaje.	 Una	
arquitectura	reflexiva	es	aquella	que	ofrece	al	programador	ciertos	metadatos	para	permi1rle	
descubrir	 las	 caracterís1cas	 de	 los	 elementos	 del	 entorno	 de	 ejecución.	 A	 con1nuación	
resumimos	las	capacidades	esenciales	de	reflexión	en	JavaScript.	
La	Reflexión	En	La	Composición	
A	
	
	
	
	
	
	
	
B	
{
p1: v1,
...
pn: vn,
m1: function (){},
...
mn: function (){}
}
Object.keys (o),
Object.getOwnPropertyNames (o),
Object.freeze (o)
Object.seal (o)
Object.preventExtensions (o)
Object.isFrozen (o)
Object.isSeal (o)
Object.isExtensible (o)
Reflexividad	a	Nivel	de	Objeto	
Object.defineProperty (o, p, {})
Object.defineProperties (o, {})
Object.getOwnPropertyDescriptor (o, p)
o.hasOwnProperty (p)
o.propertyIsEnumerable (p)
Reflexividad	a	Nivel	de	Propiedad	
Object.getPrototypeOf (o)
o1.isPrototypeOf (o2)
o.prototype
o.constructor
o.__proto__
Reflexividad	a	Nivel	de	Proto;po
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
3	Técnicas De
Metaprogramación
Compositiva
§  Técnicas	de	Adición	Composi1va	
§  Técnicas	de	Extensión	Composi1va	
§  Técnicas	de	Intercesión	Composi1va	
§  Técnicas	de	Delegación	Composi1va	
Técnicas	De	Metaprogramacion	Composi;va	
Metaprogramación	En	JavaScript
@javiervelezreye		33		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Introducción	
La	metaprogramación	composi1va	se	caracteriza	por	el	hecho	de	
que	 man1ene	 la	 estructura	 esencial	 de	 los	 componentes.	 Todo	
ejercicio	 metaprogramá1co	 en	 este	 sen1do	 se	 reduce	 a	 un	
conjunto	de	ac1vidades	de	intervención	puntual	que	pretenden	
adaptar,	conectar	o	contextualizar	código	de	los	componentes.	
La	Metaprogramación	ComposiUva	Como	Intervención		
El	 conjunto	 potencial	 de	 intervenciones	 sobre	 un	
modelo	 de	 componentes	 queda	 impuesto	 por	 las	
capacidades	 metaprogramá1cas	 del	 lenguaje	 y	 el	
modelo	seleccionado.	A	lo	largo	de	este	capítulo	nos	
centraremos	 en	 objetos	 aunque	 es	 fácil	 hacer	 una	
adaptación	 de	 los	 metaprogramas	 para	 que	 operen	
sobre	 las	 álgebras	 funcionales.	 Diremos	 que	 cada	
punto	de	intervención	dentro	de	un	componente	es	
un	 code	 holder	 mientras	 que	 el	 conjunto	 de	 todos	
ellos	 conforman	 el	 contrato	 de	 composición	 sobre	
modelo	el	componente.	
Code	Holders	&	Contratos	De	Composición	
Transformación	
restringida	Intervención	
puntual	
Contrato	de	composición	
Code	holder	o	punto	
de	intervención	
Componente
@javiervelezreye		34		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Introducción	
Sobre	los	puntos	de	intervención	definidos	por	cada	uno	de	los	
code	holders	es	posible	realizar	ac1vidades	de	metaprogramación	
relacionadas	con	la	inyección	de	código.	Las	posibles	variantes	de	
inyección	de	código	se	describen	a	par1r	de	la	definición	de	un	
conjunto	de	operadores	o	primi1vas	de	composición	propias	de	
cada	1po	de	code	holder.	
Inyección	De	Código	&	PrimiUvas	De	Composición	
Los	programas	encargados	de	llevar	a	cabo	el	proceso	
de	 inyección	 de	 código	 sobre	 cada	 uno	 de	 los	 code	
holders	 del	 modelo	 de	 componentes	 se	 llaman	
metaprogramas.	 Estos	 algoritmos	 u1lizan	 los	
operadores	 de	 composición	 para	 garan1zar	 que	 los	
procesos	 de	 intervención	 son	 conformes	 con	 los	
diferentes	 1pos	 de	 code	 holders.	 A	 lo	 largo	 de	 este	
capítulo	describiremos	los	code	holders	en	JavaScript	
sobre	 el	 modelo	 de	 objetos	 y	 las	 operación	 de	
composición	vinculadas	a	ellos.		
Metaprogramas	&	Intervención	
Código	
inyectado	
Metaprograma	
composiUvo	
Proceso	de	
inyección	de	código
@javiervelezreye		35		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Introducción	
A	 diferencia	 de	 lo	 que	 ocurre	 en	 otras	 aproximaciones	 de	
composición,	 en	 JavaScript	 se	 impone	 que	 el	 modelo	 de	
componente	 y	 metacomponente	 coincidan.	 Es	 decir,	 un	
metacomponente	 es	 en	 realidad	 un	 componente	
convencional	que	funciona	como	ejemplar	protocpico	para	
confeccionar	 componentes	 opera1vos	 al	 nivel	 de	
programación.	
Metacomponentes	Como	Componentes	ProtoUpo	
En	 el	 campo	 de	 la	 metaprogramación	 composi1va,	 los	
meta-programas	se	caracterizan	por	recibir	como	entrada	
cada	 una	 de	 las	 partes	 par1cipantes	 en	 el	 proceso	
composi1vo	 –	 núcleo	 y	 extensiones.	 El	 código	 del	
metaprograma	opera	sobre	estos	elementos	 	de	manera	
exógena.	 Es	 decir,	 éste	 no	 se	 incluye	 dentro	 de	 los	
mismos.	 En	 aproximaciones	 genera1vas	 el	 código	 del	
metaprograma	 coincide	 con	 el	 del	 componente	
resultante.	 Este	 1po	 de	 meta-programación	 se	 conoce	
como	endógena.	
Metaprogramación	Exógena	
Metaprograma	
composiUvo	 IN	
OUT	
Nivel	de	
Metaprogramación	
Metacomponente	 Componente	
=	
Nivel	de	
Programación
@javiervelezreye		36		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Adición					
Las	 técnicas	 adi1vas	 persiguen	 ampliar	 la	 lógica	 de	 un	
componente	 con	 nueva	 funcionalidad.	 De	 esta	 manera	 el	
componente	 se	 adapta	 a	 nuevos	 contextos	 arquitectónicos	
donde	la	lógica	adicionada	es	requerida.	
Definición	
Los	 puntos	 de	 intervención	 en	 este	 caso	
reflejan	el	carácter	abierto	de	los	objetos	en	
JavaScript	 con	 lo	 que	 es	 posible	 alterar	 el	
conjunto	de	caracterís1cas	de	los	mismos.	
Code	Holders	
Componente	
original	
Adición	
metaprogramáBca	
	
	
	
	
	
	
	
Objeto	
{
p1: v1,
...
pn: vn,
m1: function (){},
...
mn: function (){}
}
Holders	de	
Propiedad	
Holders	de	
Método	miembro
@javiervelezreye		37		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Adición					
Los	 operadores	 de	 composición	 fundamentales	 que	 hacen	
uso	de	técnicas	adi1vas	permiten	añadir,	borrar,	actualizar	y	
renombrar	las	caracterís1cas	–	métodos	y	propiedades	–	de	
un	objeto.	
Operadores	De	Composición	Por	Adición	
Los	operadores	fundamentales	se	centran	en	
operar	 sobre	 el	 conjunto	 de	 caracterísBcas	
de	 un	 componente	 que	 funciona	 como	
núcleo.	
Operadores	fundamentales	de	Adición	
mp.add (o, 'x', 1);
mp.remove (o, 'x')
mp.update (o, 'x', 1);
mp.add (o, 'x', 1);
mp.rename (o, 'x', 'y');
mp.update (o, 'x', 5);
{}
{ x: 1 }
{}
{}
{ x: 1 }
{ y: 1 }
{ y: 5 }
Operador	 o
mp.add = function add (core, key, value) {
core[key] = value;
};
mp.remove = function remove (core, key) {
delete core[key];
};
mp.update = function update (core, key, value) {
if (core[key])
mp.add (core, key, value);
};
mp.rename = function rename (core, oldKey, newKey) {
mp.add (core, newKey, core[oldKey]);
mp.remove (core, oldKey);
};
@javiervelezreye		38		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Adición					
Como	 extensión	 a	 los	 operadores	 de	 adición	 se	 pueden	
incluir	primi1vas	que	permiten	copiar	y	mover	propiedades	
de	 un	 objeto	 a	 otro	 o	 extender	 un	 objeto	 core	 con	 las	
capacidades	de	otro	como	extensión.	
Operadores	De	Composición	Por	Adición	
Los	 operadores	 fundamentales	 se	 comple-
mentan	con	otro	conjunto	de	operadores	que	
implican	un	núcleo	y	una	extensión	
Otros	operadores	de	Adición	mp.copy = function copy (core, ext, key) {
mp.add (core, key, ext[key]);
};
mp.move = function move (core, ext, key) {
mp.copy (core, ext, key);
mp.remove (core, key);
};
mp.extend = function extend (core, ext) {
var keys = Object.getOwnPropertyNames (ext);
keys.forEach (function (key) {
mp.copy (core, ext, key);
});
};
mp.copy (o2, o1, 'y');
mp.remove (o2, 'y');
mp.move (o2, o1, 'x');
mp.extend (o1, o2);
{ y: 5 } {}
{ y: 5 } { y: 5 }
{ y: 5 } {}
{} { y: 5 }
{x: 0} {y: 0}
{x: 0, y: 0} {y: 0}
Operador	 o1 o2
@javiervelezreye		39		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Extensión	
Las	 técnicas	 extensivas	 1enen	 por	 objeto	 reformular	 las	
capacidades	 funcionales	 del	 componente	 por	 medio	 de	 la	
especialización	semán1ca.	Este	1po	de	técnicas	se	encuentra	
estrechamente	vinculado	a	la	herencia	por	proto1pos	como	
mecanismo	del	lenguaje.			
Definición	
Sobre	una	jerarquía	de	herencia	es	posible	
alterar	la	posición	rela1va	de	los	elementos	
o	 reescribir	 la	 semán1ca	 de	 los	 métodos	
miembros	del	hijo.	Además	se	puede	operar	
sobre	 los	 enlaces	 de	 la	 cadena	 de	 proto-
1pado.	
Code	Holders	
Componente	
original	
Extensión	
metaprogramáBca	
	
	
	
	
	
	
	
Objeto	
{
p1: v1,
...
pn: vn,
m1: function (){},
...
mn: function (){}
}
Holders	de	
Movimiento	
Holders	de	
sobrescritura	
ProtoUpo	
[[Prototype]]
Holder	de	Enlace	
a	ProtoBpo
@javiervelezreye		40		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Extensión	
Los	 operadores	 fundamentales	 que	 hacen	 uso	 de	 técnicas	
extensivas	están	relacionados	con	la	alteración	de	la		cadena	
de	proto1pado.	Es	posible	añadir,	borrar	o	inver1r	el	sen1do	
de	esta	relación.	
Operadores	De	Composición	Por	Extensión	
Mediante	 estrategias	 reconstrucBvas	 es	
posible	 cambiar	 dinámicamente	 el	 valor	 de	
la	relación	de	protoBpado	entre	objetos	
Operadores	fundamentales	de	Extensión	mp.setPrototype = function (core, proto) {
var ch = Object.create (proto);
mp.extend (ch, core);
return ch;
};
mp.removePrototype = function (core) {
return mp.setPrototype (core, null);
};
mp.reversePrototype = function (core) {
var proto = Object.getPrototypeOf (core);
return mp.setPrototype (proto, core);
};
mp.setPrototype(o, p);
mp.removePrototype (o);
mp.reversePrototype (o);
o -> p
o
o <- p
Operador	 o p
@javiervelezreye		41		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Extensión	
Los	 operadores	 de	 copia	 y	 movimiento	 por	 metaprogra-
mación	 permiten	 mover	 y	 copiar	 ascendente	 y	 descenden-
temente	caracterís1cas	presentes	entre	un	proto1po	y	cada	
uno	de	sus	objetos	hijos.	
Operadores	De	Composición	Por	Extensión	
Las	 operaciones	 de	 copia	 y	 movimiento	 de	
caracterísBcas	por	la	cadena	de	protoBpado	
permiten	alterar	la	semánBca	definida	por	la	
relación	jerárquica	entre	objetos	
Operadores	fundamentales	de	Extensión	
Operador	 o p
mp.copyUp = function (core, key) {
var proto = Object.getPrototypeOf (core);
if (proto)
mp.add (proto, key, core[key]);
};
mp.copyDown = function (core, key, child) {
mp.add (child, key, core[key]);
};
mp.moveUp = function (core, key) {
mp.copyUp (core, key);
mp.remove (core, key);
};
mp.moveDown = function (core, key, child) {
mp.add (child, key, core[key]);
mp.remove (core, key);
};
mp.copyUp (o, 'x');
mp.copyDown (p, 'x', o);
mp.moveUp (o, 'x');
mp.moveDown (p, 'x', o);
o{x} -> p, o{x} -> p{x}
o -> p{x}, o{x} -> p{x}
o{x} -> p, o -> p{x}
o -> p{x}, o{x} -> p
@javiervelezreye		42		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
La	 intercesión	 permite	 inyectar	 lógica	 de	 decoración	 de	
manera	entrelazada	con	el	código	original	del	componente.	
El	propósito	de	este	1po	de	técnicas	es	ampliar	la	semán1ca	
del	mismo	sin	extender	su	contrato.	
Definición	
En	cuanto	a	propiedades	se	puede	inyectar	
código	para	que	se	ejecute	antes	y	después	
de	 acceder	 a	 las	 mismas	 tanto	 para	 su	
lectura	 como	 para	 su	 escritura.	 En	 los	
métodos,	 existe	 similarmente	 decoración	
anterior	 y	 posterior	 a	 la	 invocación,	 pero	
además	también	es	posible	inyectar	código	
que	 se	 ejecutará	 cuando	 el	 método	
explícitamente	lo	demande.	
Code	Holders	
Componente	
original	
Intercesión	
metaprogramáBca	
	
	
	
	
	
	
	
Objeto	
{
p1: v1 ,
pn: vn ,
m: function (){
<<code>>
}
}
Holder	before	
de	acceso	
Holder	before	
de	invocación	
Holder	aRer	
de	invocación	
Holder	around	
de	invocación	
Holder	aRer	
de	acceso
@javiervelezreye		43		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
Los	 operadores	 de	 intercesión	 fundamentales	 permiten	
decorar	 la	 invocación	 de	 métodos	 inyectando	 lógica	
funcional	que	se	ejecuta	antes	o	después	de	la	ac1vación	del	
método.		
Operadores	De	Composición	Por	Intercesión	
Los	 operadores	 fundamentales	 de	 intercesión	
permiten	 inyectar	 lógica	 funcional	 que	 se	
ejecutará	antes	o	después	del	método	
Operadores	fundamentales	de	Intercesión	
Operador	 o
mp.before = function before (core, key, ext) {
var fn = core[key];
core[key] = function () {
ext.apply (this, arguments);
return fn.apply (this, arguments);
};
};
mp.after = function after (core, key, ext) {
var fn = core[key];
core[key] = function () {
var r = fn.apply (this, arguments);
ext.apply (this, arguments);
return r;
};
};
mp.before (o, 'f', g);
mp.after (o, 'f', g);
{f: function() {...} }
f, g
g, f
@javiervelezreye		44		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
Adicionalmente,	 y	 como	 una	 especialización	 de	 los	
operadores	 anteriores,	 se	 puede	 decorar	 un	 método	 en	
before	 para	 condicionar	 el	 su	 ejecución	 en	 función	 del	
resultado	emi1do	por	una	extensión	de	guarda.	
Operadores	De	Composición	Por	Intercesión	
Los	operadores	de	guarda	uBlizan	técnicas	de	
intercesión	para	condicionar	la	ejecución	de	un	
método	 en	 función	 del	 resultado	 emiBdo	 por	
cierto	predicado	lógico	
Operadores	fundamentales	de	Intercesión	
Operador	 o
mp.provided = function provided (core, key, ext) {
var fn = core[key];
core[key] = function () {
if (ext.apply (this, arguments))
return fn.apply (this, arguments);
};
};
mp.except = function except (core, key, ext) {
var fn = core[key];
core[key] = function () {
if (!ext.apply (this, arguments))
return fn.apply (this, arguments);
};
};
mp.provided (o, 'f', p);
mp.except (o, 'f', p);
{f: function() {...} }
f sii p es true
f sii p es false
@javiervelezreye		45		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
Asimismo	es	posible	conceder	a	un	método	el	control	acerca	
de	cuando	se	ejecutará	cierta	decoración	proporcionada	por	
el	cliente	en	el	contexto	de	su	esquema	algorítmico.	
Operadores	De	Composición	Por	Intercesión	
En	 este	 caso	 el	 código	 core,	 f,	 manBene	
referencias	 explícitas	 a	 una	 función	 de	
decoración,	 r,	 pasada	 por	 convenio	 como	
primer	argumento	
Operador	explícito	de	Intercesión	
Operador	 o
mp.around = function around (core, key, ext) {
var fn = core[key];
core[key] = function () {
var args = [].slice.call(arguments);
args = [ext.bind(this)].concat(args);
return fn.apply (this, args);
};
};
En	ejecución,	en	el	esquema	
de	decoración	se	susBtuye	r	
por	g	
La	 extensión,	 g,	 se	 antepone	
como	 primer	 parámetro	 a	 los	
argumentos	 de	 la	 función	
decorada	f	 mp.around (o, 'f', g);
{f: function(r) {
r(); ... r ();
}
}
g, ..., g
@javiervelezreye		46		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
Los	 operadores	 de	 acceso	 a	 propiedades	 para	 lectura	 y	
escritura	 en	 before	 permiten	 inyectar	 código	 que	 se	
ejecutará	antes	del	acceso	a	las	propiedades.	
Operadores	De	Composición	Por	Intercesión	
Se	 decoran	 los	 métodos	 de	 acceso	 y	
modificación	 a	 propiedades	 get	 y	 set	 y	 se	
manBene	una	variable	oculta	para	soportar	el	
estado	de	la	propiedad.	
Operador	explícito	de	Intercesión	
Operador	 o
La	 extensión,	 g,	 se	 antepone	
como	 primer	 parámetro	 a	 los	
argumentos	 de	 la	 función	
decorada	f	
mp.beforeGetAtt = function (core, key, ext) {
Object.defineProperty (core, '_' + key, {
value: core[key],
enumerable: false, ... });
Object.defineProperty (core, key, {
get: function () {
ext.call (this, arguments);
return core['_' + key];
}
});
};
mp.beforeSetAtt = function (core, key, ext) {
Object.defineProperty (...);
Object.defineProperty (core, key, {
set: function (v) {
ext.call (this, v);
core['_' + key] = v;
}
});
};
mp.beforeGetAtt (o, 'x', f)
mp.beforeSetAtt (o, 'x', f)
{x: 0}
o.x -> f, 0
o.x = 3 -> f, {x: 3}
@javiervelezreye		47		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Intercesión	
Similarmente,	los	operadores	de	acceso	a	propiedades	para	
lectura	y	escritura	en	a`er	permiten	inyectar	código	que	se	
ejecutará	después	del	acceso	a	las	propiedades.	
Operadores	De	Composición	Por	Intercesión	
Se	 decoran	 los	 métodos	 de	 acceso	 y	
modificación	 a	 propiedades	 get	 y	 set	 y	 se	
manBene	una	variable	oculta	para	soportar	el	
estado	de	la	propiedad.	
Operador	explícito	de	Intercesión	
Operador	 o
La	 extensión,	 g,	 se	 antepone	
como	 primer	 parámetro	 a	 los	
argumentos	 de	 la	 función	
decorada	f	
mp.afterGetAtt = function (core, key, ext) {
Object.defineProperty (core, '_' + key, {
value: core[key],
enumerable: false, ... });
Object.defineProperty (core, key, {
get: function () {
var r = core['_' + key];
ext.call (this, arguments);
return r; }
});
};
mp.afterSetAtt = function (core, key, ext) {
Object.defineProperty (...);
Object.defineProperty (core, key, {
set: function (v) {
core['_' + key] = v;
ext.call (this, v);
}
});
};
mp.afterGetAtt (o, 'x', f)
mp.afterSetAtt (o, 'x', f)
{x: 0}
o.x -> 0, f
o.x = 3 -> {x: 3}, f
@javiervelezreye		48		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Delegación	
Las	 técnicas	 basadas	 en	 delegación	 ar1culan	 estrategias	
composi1vas	que	permiten	dispersar	la	lógica	de	un	servicio	
entre	varios	componentes	con	iden1dad	propia	dentro	de	la	
arquitectura	 pero	 estableciendo	 fachadas	 de	 desacopla-
miento.	
Definición	
Los	puntos	de	intervención	en	esta	familia	
de	 técnicas	 coinciden	 con	 los	 de	 la	
intercesión.	 La	 diferencia	 estriba	 en	 este	
caso	 en	 que	 los	 metaprogramas	 inyectan	
código	 dirigido	 a	 establecer	 esquemas	
delega1vos	a	otra	lógica.	
Code	Holders	
	
	
	
	
	
	
	
Objeto	
{
p1: v1 ,
pn: vn ,
m: function (){
<<code>>
}
}
Holder	before	
de	acceso	
Holder	before	
de	invocación	
Holder	aRer	
de	invocación	
Holder	around	
de	invocación	
Holder	aRer	
de	acceso	
Componente	
original	
Delegación	
metaprogramáBca
@javiervelezreye		49		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Delegación	
Este	1po	de	operadores	ar1culan	procesos	de	composición	
por	 delegación	 interna	 y	 externa	 mediante	 la	 construcción	
de	métodos	proxy	añadidos	al	core.	
Operadores	De	Composición	Por	Delegación	
La	delegación	interna	permite	generar	un	
método	 de	 proxy	 que	 delega	 en	 otro	
método	 del	 mismo	 objeto.	 La	 delegación	
externa	 se	 produce	 entre	 objetos	
diferentes	
Operador	fundamentales	de	Delegación	
Operador	 o1 [o2]
mp.innerDelegate = function (core, oKey, nKey, ctx) {
var context = ctx || core;
core[nKey] = function () {
return core[oKey].apply (context, arguments);
};
};
mp.outerDelegate = function (core, ext, key, ctx) {
var context = ctx || ext;
core[key] = function () {
var r = ext[key].apply (context, arguments);
return r === ext ? this : r;
};
};
mp.innerDelegate(o1,'f','g')
mp.outerDelegate(o1,o2,'f')
{f}
{g:function(){o1.f()}
f}
{} {f}
{f:function(){o2.f()}}
{f}
@javiervelezreye		50		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Delegación	
A	 par1r	 de	 los	 operadores	 anteriores	 se	 definen	 los	
operadores	 de	 forwarding	 y	 proxy	 en	 forwarding	 que	
contextualizan	la	invocación	en	el	delegado.	
Operadores	De	Composición	Por	Delegación	
El	 forwarding	 es	 una	 modalidad	 de	
delegación	 débil	 contextualizada	 en	 el	
delegado.	 Es	 lo	 que	 se	 conocer	 por	
delegación	convencionan	en	los	lenguajes	
de	OOP	
Operador	fundamentales	de	Delegación	
Operador	 o1 [o2]
mp.forward = function (core, ext, key) {
mp.outerDelegate (core, ext, key, ext);
};
mp.forwardProxy = function (core, ext) {
if (typeof(ext) === 'string') ext = core[ext];
if (ext) {
var keys = Object.keys (ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function')
mp.forward (core, ext, key);
});
}
};
mp.forward (o1,o2,'f')
o1.f()
{x:1}{x:3,
f(){return this.x}}
3
@javiervelezreye		51		
Técnicas	De	Metaprogramacion	Composi1va	
Metaprogramación	En	JavaScript	
Técnicas	De	Metaprogramación	Por	Delegación	
Similarmente,	 los	 operadores	 fundamentales	 pueden	
u1lizarse	 para	 ar1cular	 técnicas	 de	 delegación	 contextual-
lizadas	en	el	core.		
Operadores	De	Composición	Por	Delegación	
La	 delegación	 es	 la	 forma	 más	 fuerte	 y	
dinámica	 de	 vinculación	 composiBva.	 En	
ella	el	contexto	de	evaluación	permanece	
en	el	objeto	core	
Operador	fundamentales	de	Delegación	
Operador	 o1 [o2]
mp.delegate = function (core, ext, key) {
mp.outerDelegate (core, ext, key, core);
};
mp.delegateProxy = function (core, ext) {
if (typeof(ext) === 'string') ext = core[ext];
if (ext) {
var keys = Object.keys (ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function')
mp.delegate (core, ext, key);
});
}
};
mp.delegate (o1,o2,'f')
o1.f()
{x:1}{x:3,
f(){return this.x}}
1
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
4	Modelos
Arquitectónicos De
Composición
§  Modelos	Arquitectónicos	Basados	en	Adición	
§  Modelos	Arquitectónicos	Basados	en	Intercesión	
§  Modelos	Arquitectónicos	Basados	en	Delegación	
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript
@javiervelezreye		53		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Introducción	
Existen	 diversos	 modelos	 arquitectónicos	 de	 metaprogramación	 composi1va	 que	 basan	 su	
implementación	en	cada	uno	de	las	cuatro	técnicas	descritas	en	el	capítulo	anterior.	En	este	
capítulo	describimos	dichos	modelos.	
Modelos	Arquitectónicos	Según	Técnicas	ComposiUvas	
Mixins	Based	
Programming	
Traits	Based	
Programming	
Adición	
Aspect	Oriented	
Programming	
Intercesión	
Role	
Programming	
ComposiBon	
Filters	
Delegación	
Adap1ve	
Programming	
Subject	Orieted	
Programming	
Extensión	
Layered	
Objects
@javiervelezreye		54		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
Los	mixins	son	extensiones	que	describen	abstracciones	de	
datos	parciales	para	ser	añadidos	a	un	core.	Ellos	agregan	el	
estado	al	espacio	de	dicho	core.	
Mixins	
var john = {
first: 'John',
last : 'Doe'
};
var isAuthor = {
books: [],
addBook: function (name) {
this.books.push(name);
return this;
},
getBooks: function () {
return this.books;
}
};
var isParent = {
children: [],
addChild: function (name) {
this.children.push(name);
return this;
},
getChildren: function () {
return this.children;
}
};
mp.mixin (john,isAutor)	 mp.mixin (john,isParent)	
Mixin	A	
Mixin	B	
Core	
Adición	 Adición	
s	
mp.mixin = function (core, ext) {
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
mp.copy (ext, core, key);
});
};
@javiervelezreye		55		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
Los	 mixins	 generan	 problemas	 potenciales	 de	 colisión	 de	
estado	 ya	 que	 varios	 mixins	 pueden	 u1lizar	 los	 mismos	
atributos	de	soporte.	Encapsular	el	estado	permite	evitarlo.	
Mixins.	Colisión	de	Estado	
var john = {
first: 'John',
last : 'Doe'
};
mp.mixin (john,isAutor)	
Mixin	A	
Mixin	B	
Core	
Adición	 Adición	
{s}	
var isAuthor = {
data: [],
addBook: function (name) {
this.data.push(name);
return this;
},
getBooks: function () {
return this.data;
}
};
var isParent = {
data: [],
addChild: function (name) {
this.data.push(name);
return this;
},
getChildren: function () {
return this.data;
}
};
mp.mixin = function (core, ext) {
var context = Object.create (null);
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function') {
mp.copy (core, ext, key);
mp.bind (core, key, context);
}
else mp.copy (context, ext, key);
});
};
mp.mixin (john,isParent)
@javiervelezreye		56		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
En	 los	 mixins	 con	 estado	 protegido	 existe	 la	 necesidad	 de	
referir	al	core	desde	el	cuerpo	de	sus	métodos.	Ello	requiere	
meter	una	referencia	al	core	–	self	–	en	el	contexto.	
Mixins.	Self	&	This	
Mixin	A	
Mixin	B	
Core	
Adición	 Adición	
{s}	
var john = {
first: 'John',
last : 'Doe'
};
var isAuthor = {
data: [],
addBook: function (name) {
this.data.push(name);
return this;
},
getBooks: function () {
return this.data;
}
description: function () {
return 'Books:' + this.getBooks ();
}
};
mp.mixin (john,isAutor)	
this.self.getBooks ();
mp.mixin = function (core, ext) {
var context = { self : core };
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function') {
mp.copy (core, ext, key);
mp.bind (core, key, context);
}
else mp.copy (context, ext, key);
});
};
@javiervelezreye		57		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
En	 los	 mixins	 con	 estado	 protegido	 existe	 la	 necesidad	 de	
referir	al	core	desde	el	cuerpo	de	sus	métodos.	Ello	requiere	
meter	una	referencia	al	core	–	self	–	en	el	contexto.	
Mixins.	Colisión	de	Métodos	
Mixin	A	
Mixin	B	
Core	
Adición	 Adición	
{s}	
mp.mixin (john,isAutor)	
mp.mixin (john,isParent)	
var john = {
first: 'John',
last : 'Doe'
};
var isAuthor = {
init: function () {
this.books = [];
},
addBook: function (name) {
this.books.push(name);
return this;
},
getBooks: function () {
return this.books;
}
};
var isParent = {
init: function () {
this.children = [];
},
addChild: function (name) {
this.children.push(name);
return this;
},
getChildren: function () {
return this.children;
}
};
mp.mixin = function (core, ext, policy) {
var context = { self : core };
var decorate = policy || mp.after;
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function') {
if (core[key]) {
decorate (core, ext, key);
mp.bind (core, key, context);
} else {
mp.copy (core, ext, key);
mp.bind (core, key, context);
}
} else mp.copy (context, ext, key);
}); };
@javiervelezreye		58		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
Para	 resolver	 los	 problemas	 de	 colisión	 de	 nombres	 entre	
métodos	de	diferentes	mixins	se	puede	aplicar	una	variedad	
de	polí1cas	de	ges1ón	de	colisiones.	Estás	polí1cas	aplican	
en	 esencia	 técnicas	 de	 entrelazado	 funcional	 entre	 los	
métodos	 en	 conflicto.	 A	 con1nuación	 mostramos	 aquellas	
más	protocpicas.	
Mixins.	PolíUcas	de	Resolución	de	Conflictos	
mp.override = function (core, key, ext) {
core[key] = function () {
return ext.apply (this, arguments);
};
},
mp.discard = function (core, key, ext) {
var fn = core[key];
core[key] = function () {
return fn.apply (this, arguments);
};
},
mp.before = function before (core, key, ext) {
var fn = core[key];
core[key] = function () {
ext.apply (this, arguments);
return fn.apply (this, arguments);
}; };
mp.after = function after (core, key, ext) {
var fn = core[key];
core[key] = function () {
var r = fn.apply (this, arguments);
ext.apply (this, arguments);
return r;
};
};
mp.around = function around (core, key, ext) {
var fn = core[key];
core[key] = function () {
var args = [].slice.call (arguments);
args = [ext.bind (this)].concat(args);
return fn.apply (this, args);
};
};
Mixin	A	
Mixin	B	
Core	
Adición	 PolíBca	
Adición
@javiervelezreye		59		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
Dado	 que	 los	 métodos	 sinónimos	 se	 resuelven	 por	
intercesión	 es	 necesario	 discriminar	 qué	 parámetros	
corresponden	a	cada	método	en	conflicto	tras	la	intercesión.	
Para	ello	pasamos	a	un	esquema	nominal.	
Mixins.	Colisión	de	Parámetros	
Mixin	A	
Mixin	B	
Core	
Adición	 Adición	
{defaults}	
{defaults}	
var john = {
first: 'John',
last : 'Doe'
};
var isAuthor = {
init: function (bks) {
this.books = bks || [];
},
addBook: function (name) {
this.books.push(name);
return this;
},
getBooks: function () {
return this. Books;
}
};
mp.mixin (john,isAutor)	 mp.mixin (john,isParent)	
var isParent = {
init: function (chs) {
this.children = chs || [];
},
addChild: function (name) {
this.children.push(name);
return this;
},
getChildren: function () {
return this.children;
}
};
init: function (defaults) {
defaults = defaults || {};
this.children = defaults.children || [];
},
init: function (defaults) {
defaults = defaults || {};
this.books = defaults.books || [];
},
@javiervelezreye		60		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Adición	
Cuando	se	crean	proto1pos	por	mixtura	el	estado	privado	se	
comparte	 entre	 todos	 los	 hijos.	 Para	 solucionar	 este	
problema	 debemos	 modificar	 el	 metaprograma	 para	 crear	
un	estado	en	cada	hijo.	
Mixins.	Adición	sobre	ProtoUpos	
Mixin	A	
O1	
{s}	 {s}	
Prototype	
O2	
var john = {
first: 'John',
last : 'Doe'
};
var isAuthor = {
init: function () {
this.books = [];
},
addBook: function (name) {
this.books.push(name);
return this;
},
getBooks: function () {
return this. Books;
}
};
var isParent = {
init: function () {
this.children = [];
},
addChild: function (name) {
this.children.push(name);
return this;
},
getChildren: function () {
return this.children;
}
};
mp.mixin = function (core, ext, policy) {
var context = mp.key ();
core[context] = { self: core };
var decorate = policy || mp.after;
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'function') {
if (core[key])
decorate (core, key, ext[key]);
else
mp.outerDelegate (core, ext, key,
core[context]);
}
else mp.copy (core[context], ext, key);
});
};
var Person = Object.create (null)
mp.mixin (Person, isAutor)
mp.mixin (Person, isParent)
var john = Object.create (Person)	
Person
@javiervelezreye		61		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Intercesión	
Los	 aspectos	 son	 abstracciones	 funcionales	 encapsuladas	
que	se	aplican	transversalmente	a	los	métodos	miembros	de	
un	core.	La	polí1ca	de	intercesión	empleada	forma	parte	de	
la	encapsulación.	
Aspectos.	Intercesión	EstáUca		
Aspect	A	
Mixin	B	
Intercesión	
Intercesión	
Core	var checkable = {
add: {
when: 'before',
advice: function (id, v) {
if (typeof (v) !==
'number')
throw 'Invalid Type';
}
}
};
var loggable = {
add: {
when: 'before',
advice: function (id, value) {
console.log ('Adding', id);
}
},
find: {
when: 'after',
advice: function (id) {
console.log ('Find', id);
}
}
};
var manager = {
data : {},
find : function (id) {
return this.data[id];
},
add : function (id, value) {
this.data[id] = value;
}
};
mp.aspect (manager, checkable);
mp.aspect (manager, loggable);
mp.sAspect = function (core, ext){
var ks = Object.getOwnPropertyNames(ext);
ks.forEach (function (key) {
var m = ext[key];
mp[m.when](core, key, m.advice);
});
};
@javiervelezreye		62		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Intercesión	
Los	 aspectos	 son	 abstracciones	 funcionales	 encapsuladas	
que	se	aplican	transversalmente	a	los	métodos	miembros	de	
un	core.	La	polí1ca	de	intercesión	empleada	forma	parte	de	
la	encapsulación.	
Aspectos.	Intercesión	Dinámica	
mp.dAspect = function (core, ext){
var ks= Object.getOwnPropertyNames (ext);
ks.forEach (function (key) {
if (!core[key].isAdvisable)
mp.advisable (core, ext, key);
var m = ext[key];
m[ext[key].when](ext[key].advice);
});
};
mp.advisable = function (core, ext, key) {
var core[key] = function () {
var args = [].slice.call (arguments);
method.befores.forEach (function (fn) {
fn.apply (this, args);
});
method.body.apply (this, args);
method.afters.forEach (function (fn) {
fn.apply (this, args);
});
}
core[key].isAdvisable = true;
core[key].befores = [];
core[key].body = core[key];
core[key].afters = [];
core[key].before = function (fn) {
this.befores.unshift (fn); };
method.after = function (fn) {
this.afters.push (fn); };
core[key] = method;
};
Aspect	A	
Mixin	B	
Intercesión	
Intercesión	
Core
@javiervelezreye		63		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Delegación	
El	 modelo	 arquitectónico	 de	 filtros	 composi1vos	 persigue	
enriquecer	 cada	 objeto	 por	 intercesión	 para	 ar1cular	
delegaciones	que	ges1onen	en	tratamiento	de	mensajes.	
Filtros	de	Composición	
{pn}	
f	
g	
…	
{s}	
El	 tratamiento	 que	 hacen	 los	
filtros	de	los	mensajes	consiste	en	
arBcular	una	delegación	interna	o	
externa	 a	 otros	 componentes	
presenten	 en	 el	 contexto	
arquitectónico	
Delegación	Interna	y	Externa	
Cada	 método	 se	 decora	 con	 filtros		
secuenciales	de	intercesión	en	before	y	
aRer	que	persiguen	alterar	la	semánBca	
del	 mismo	 gesBonando	 el	 tratamiento	
de	los	mensajes	
Filtros	de	Entrada	y	Salida	
Los	 filtros	 determinan	 las	 acciones	
de	gesBón	de	mensajes	a	realizar	en	
función	 de	 cierto	 estado	 y	
predicados	de	control	que	se	añaden	
al	componente	
E s t a d o 	 y	
Predicados
@javiervelezreye		64		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Delegación	
Los	 aspectos	 son	 abstracciones	 funcionales	 encapsuladas	
que	se	aplican	transversalmente	a	los	métodos	miembros	de	
un	core.	La	polí1ca	de	intercesión	empleada	forma	parte	de	
la	encapsulación.	
Filtros	de	Composición	
DB	0	
DB	1	DB	2	
replicar	
delegar	
replicar	
delegar	
var fRound = function (j, dbs){
return {
state: {
active: false,
dbs: dbs,
next: (j+1) % dbs.length
},
advices: {
get: {
when: 'provided',
advice: function (id) {
if (this.active) {
this.active = false;
this.dbs[this.next].active = true;
return true;
} else {
this.dbs[this.next].get(id);
return false;
} ...
};
var fCopy = function (j){
return {
state: { },
advices: {
set: {
when: 'before',
advice: function (id, obj) {
if (j < this.dbs.length - 1)
this.dbs[j+1].set(id, obj);
}
}
}
};
};
@javiervelezreye		65		
Modelos	Arquitectónicos	De	Composición	
Metaprogramación	En	JavaScript	
Modelos	Arquitectónicos	Basados	En	Delegación	
Los	 aspectos	 son	 abstracciones	 funcionales	 encapsuladas	
que	se	aplican	transversalmente	a	los	métodos	miembros	de	
un	core.	La	polí1ca	de	intercesión	empleada	forma	parte	de	
la	encapsulación.	
Filtros	de	Composición.	Colaboración	entre	Filtros	
DB	0	
DB	1	DB	2	
replicar	
delegar	
replicar	
delegar	
var db = {
get: function (id){...},
set: function (id, obj){...}
};
var dbs = [Object.create (db),
Object.create (db),
Object.create (db)];
dbs.forEach (function (db, i, dbs) {
mp.filter (db, fRound (i, dbs));
mp.filter (db, fCopy (i));
});
[1][1][1]
[1,2][1,2][1,2]
[1,2,3][1,2,3][1,2,3]
Getting 1 from DB0...
Delegating Get to DB1...
Getting 2 from DB1
Se	 inicializa	 el	 array	 de	
bases	 de	 datos	 y	 se	
establecen	los	filtros	
Construcción	
Siempre	se	ataca	la	base	de	datos	DB0.	Cada	
operación	 set	 propaga	 una	 replica	 a	 la	
siguiente	base	de	datos.	La	gesBón	de	queries	
se	resuelve	en	round	robin	
Funcionamiento	
dbs[0].active = true;
dbs[0].set (1, 1);
dbs[0].set (2, 2);
dbs[0].set (3, 3);
dbs[0].get (1);
dbs[0].get (2);
mp.filter = function (core, ext) {
mp.extend (core, ext.state);
mp.sAspect (core, ext.advices);
};
@javiervelezreye		66		
Preguntas	
Metaprogramación	En	JavaScript	
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Técnicas	de	
Composición	
Mecanismos	de	
Composición	
Modelos	
Arquitectónicos
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
Metaprogramación	En	JavaScript		
Programación	Orientada	a	
Componentes	
Febrero	2015

Más contenido relacionado

La actualidad más candente

Metaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScriptMetaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScript
Javier Vélez Reyes
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Javier Vélez Reyes
 
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
Javier Vélez Reyes
 
Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes WebArquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes Web
Javier Vélez Reyes
 
Web components
Web componentsWeb components
Web components
Rocío Muñoz
 
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
Javier Vélez Reyes
 
Arquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la ExperienciaArquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la Experiencia
Javier Vélez Reyes
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelos
Jose R. Hilera
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Juan Carlos Prieto
 
Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
Sorey García
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
universidad jose antonio paez
 
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativaPosgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
UOC Estudios de Informática, Multimedia y Telecomunicación
 
PresentacióN Grupo Digital FormacióN Pdf
PresentacióN Grupo Digital FormacióN PdfPresentacióN Grupo Digital FormacióN Pdf
PresentacióN Grupo Digital FormacióN Pdf
jjriber
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
David Arango
 
Sistema operativo vs entorno de lenguaje de programación
Sistema operativo vs entorno de lenguaje de programaciónSistema operativo vs entorno de lenguaje de programación
Sistema operativo vs entorno de lenguaje de programación
Noemi Nathaly Ordoñez Morales
 
Análisis del Whitepaper DB4O
Análisis del Whitepaper DB4OAnálisis del Whitepaper DB4O
Análisis del Whitepaper DB4O
Héctor Garduño Real
 

La actualidad más candente (16)

Metaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScriptMetaprogramación Compositiva en JavaScript
Metaprogramación Compositiva en JavaScript
 
Arquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a DatosArquitectura de Componentes Web. Patrones de Acceso a Datos
Arquitectura de Componentes Web. Patrones de Acceso a Datos
 
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
 
Arquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes WebArquitecturas Adaptativas de Componentes Web
Arquitecturas Adaptativas de Componentes Web
 
Web components
Web componentsWeb components
Web components
 
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 Dirigidas por la Experiencia
Arquitecturas Dirigidas por la ExperienciaArquitecturas Dirigidas por la Experiencia
Arquitecturas Dirigidas por la Experiencia
 
Metodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelosMetodologías de ingeniería Web dirigida por modelos
Metodologías de ingeniería Web dirigida por modelos
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Planificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phonePlanificando las bases de una aplicación windows phone
Planificando las bases de una aplicación windows phone
 
Lenguaje unificado
Lenguaje unificadoLenguaje unificado
Lenguaje unificado
 
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativaPosgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
Posgrado Administración de Sistemas, DevOps y CLoud Computing Sesión informativa
 
PresentacióN Grupo Digital FormacióN Pdf
PresentacióN Grupo Digital FormacióN PdfPresentacióN Grupo Digital FormacióN Pdf
PresentacióN Grupo Digital FormacióN Pdf
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
Sistema operativo vs entorno de lenguaje de programación
Sistema operativo vs entorno de lenguaje de programaciónSistema operativo vs entorno de lenguaje de programación
Sistema operativo vs entorno de lenguaje de programación
 
Análisis del Whitepaper DB4O
Análisis del Whitepaper DB4OAnálisis del Whitepaper DB4O
Análisis del Whitepaper DB4O
 

Destacado

Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
Javier Vélez Reyes
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
Micael Gallego
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Irontec
 
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
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
Oscar Josué Uh Pérez
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScript
Alf Chee
 
JavaScript Avanzado
JavaScript AvanzadoJavaScript Avanzado
JavaScript Avanzado
Adolfo Sanz De Diego
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
Javier Vélez Reyes
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
Javier Vélez Reyes
 
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
David Zapateria Besteiro
 
Clase 1 introducción a symfony 2
Clase 1   introducción a symfony 2Clase 1   introducción a symfony 2
Clase 1 introducción a symfony 2
hydras_cs
 
Symfony2 admingenerator
Symfony2 admingeneratorSymfony2 admingenerator
Symfony2 admingenerator
symfony_bcn
 
Herramientas publicación gis web poroceso y análisis
Herramientas publicación gis web   poroceso y análisisHerramientas publicación gis web   poroceso y análisis
Herramientas publicación gis web poroceso y análisis
Urban Data Analytics
 
Eppur si muove - SIG Libre Girona
Eppur si muove - SIG Libre GironaEppur si muove - SIG Libre Girona
Eppur si muove - SIG Libre Girona
Jordi Graells
 
Paty carbajal presentacion
Paty carbajal presentacionPaty carbajal presentacion
Paty carbajal presentacion
patty_bperdomo21
 
Mi primer programa en Symfony2
Mi primer programa en Symfony2Mi primer programa en Symfony2
Mi primer programa en Symfony2
César Hernández
 
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
Esri
 
Modeliza de variables_climaticas2
Modeliza de variables_climaticas2Modeliza de variables_climaticas2
Modeliza de variables_climaticas2
Lucas83
 
Twig avanzado (sf2Vigo)
Twig avanzado (sf2Vigo)Twig avanzado (sf2Vigo)
Twig avanzado (sf2Vigo)
Javier Eguiluz
 
Redis–symfony–barcelona–31 05-2012
Redis–symfony–barcelona–31 05-2012Redis–symfony–barcelona–31 05-2012
Redis–symfony–barcelona–31 05-2012
symfony_bcn
 

Destacado (20)

Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
 
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
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScript
 
JavaScript Avanzado
JavaScript AvanzadoJavaScript Avanzado
JavaScript Avanzado
 
Procesadores de Lenguajes I
Procesadores de Lenguajes IProcesadores de Lenguajes I
Procesadores de Lenguajes I
 
Procesadores de Lenguajes II
Procesadores de Lenguajes IIProcesadores de Lenguajes II
Procesadores de Lenguajes II
 
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Un...
 
Clase 1 introducción a symfony 2
Clase 1   introducción a symfony 2Clase 1   introducción a symfony 2
Clase 1 introducción a symfony 2
 
Symfony2 admingenerator
Symfony2 admingeneratorSymfony2 admingenerator
Symfony2 admingenerator
 
Herramientas publicación gis web poroceso y análisis
Herramientas publicación gis web   poroceso y análisisHerramientas publicación gis web   poroceso y análisis
Herramientas publicación gis web poroceso y análisis
 
Eppur si muove - SIG Libre Girona
Eppur si muove - SIG Libre GironaEppur si muove - SIG Libre Girona
Eppur si muove - SIG Libre Girona
 
Paty carbajal presentacion
Paty carbajal presentacionPaty carbajal presentacion
Paty carbajal presentacion
 
Mi primer programa en Symfony2
Mi primer programa en Symfony2Mi primer programa en Symfony2
Mi primer programa en Symfony2
 
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
Geografía como plataforma: API REST vs OGC y Geodatabases - Conferencia Esri ...
 
Modeliza de variables_climaticas2
Modeliza de variables_climaticas2Modeliza de variables_climaticas2
Modeliza de variables_climaticas2
 
Twig avanzado (sf2Vigo)
Twig avanzado (sf2Vigo)Twig avanzado (sf2Vigo)
Twig avanzado (sf2Vigo)
 
Redis–symfony–barcelona–31 05-2012
Redis–symfony–barcelona–31 05-2012Redis–symfony–barcelona–31 05-2012
Redis–symfony–barcelona–31 05-2012
 

Similar a Metaprogramación en JavaScript

atSistemas - Presentacion Hybreed
atSistemas - Presentacion HybreedatSistemas - Presentacion Hybreed
atSistemas - Presentacion Hybreed
Juanjo Sánchez
 
Aplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membershipAplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membership
Jose B Flores P
 
Genasys sigte2011 open_geogadget_framework (OGF)
Genasys sigte2011 open_geogadget_framework (OGF)Genasys sigte2011 open_geogadget_framework (OGF)
Genasys sigte2011 open_geogadget_framework (OGF)
Javier Sánchez
 
Aplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_facturaAplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_factura
Edgar Jonathan Villegas
 
Inyección de dependencias en Node.js con InversifyJS & TypeScript
Inyección de dependencias en Node.js con  InversifyJS & TypeScriptInyección de dependencias en Node.js con  InversifyJS & TypeScript
Inyección de dependencias en Node.js con InversifyJS & TypeScript
Remo Jansen
 
Catalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebCatalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones Web
Esteban Saavedra
 
Net Beans
Net BeansNet Beans
Net Beans
Pablo perez
 
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
atSistemas
 
S01-s1-MVC.pptx
S01-s1-MVC.pptxS01-s1-MVC.pptx
S01-s1-MVC.pptx
AnthonyJosuVillar
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
Miguel Angel Macias
 
Israel tecnologias para desarrollo-web
Israel tecnologias para desarrollo-webIsrael tecnologias para desarrollo-web
Israel tecnologias para desarrollo-web
imei_02
 
Introducción a la programacion.pdf
Introducción a la programacion.pdfIntroducción a la programacion.pdf
Introducción a la programacion.pdf
IvanaTrento
 
Microservicios.pptx
Microservicios.pptxMicroservicios.pptx
Microservicios.pptx
Alex Amaguaña Amaguaña
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
Raelyx Cordero
 
¿Qué es java?
¿Qué es java?¿Qué es java?
¿Qué es java?
MaryRomero77
 
Diplomatura Desarrollo de Aplicaciones Móviles 2014
Diplomatura Desarrollo de Aplicaciones Móviles 2014Diplomatura Desarrollo de Aplicaciones Móviles 2014
Diplomatura Desarrollo de Aplicaciones Móviles 2014
Interlat
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Pedrito Abiel
 
Arquitectura de microservicios
Arquitectura de microserviciosArquitectura de microservicios
Arquitectura de microservicios
Felix Liberio
 
Patrones comportamiento
Patrones comportamientoPatrones comportamiento
Patrones comportamiento
Juan Camilo
 
ALFA9 Presentación Corporativa de Servicios 2014
ALFA9 Presentación Corporativa de Servicios 2014ALFA9 Presentación Corporativa de Servicios 2014
ALFA9 Presentación Corporativa de Servicios 2014
iñaki bermejo
 

Similar a Metaprogramación en JavaScript (20)

atSistemas - Presentacion Hybreed
atSistemas - Presentacion HybreedatSistemas - Presentacion Hybreed
atSistemas - Presentacion Hybreed
 
Aplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membershipAplicacion mvc entity_framework_login_membership
Aplicacion mvc entity_framework_login_membership
 
Genasys sigte2011 open_geogadget_framework (OGF)
Genasys sigte2011 open_geogadget_framework (OGF)Genasys sigte2011 open_geogadget_framework (OGF)
Genasys sigte2011 open_geogadget_framework (OGF)
 
Aplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_facturaAplicacion mvc entity_framework_factura
Aplicacion mvc entity_framework_factura
 
Inyección de dependencias en Node.js con InversifyJS & TypeScript
Inyección de dependencias en Node.js con  InversifyJS & TypeScriptInyección de dependencias en Node.js con  InversifyJS & TypeScript
Inyección de dependencias en Node.js con InversifyJS & TypeScript
 
Catalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones WebCatalyst: Framework para el desarrollo de aplicaciones Web
Catalyst: Framework para el desarrollo de aplicaciones Web
 
Net Beans
Net BeansNet Beans
Net Beans
 
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
Hybreed. Plataforma de desarrollo de aplicaciones móviles híbridas. Descripci...
 
S01-s1-MVC.pptx
S01-s1-MVC.pptxS01-s1-MVC.pptx
S01-s1-MVC.pptx
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
 
Israel tecnologias para desarrollo-web
Israel tecnologias para desarrollo-webIsrael tecnologias para desarrollo-web
Israel tecnologias para desarrollo-web
 
Introducción a la programacion.pdf
Introducción a la programacion.pdfIntroducción a la programacion.pdf
Introducción a la programacion.pdf
 
Microservicios.pptx
Microservicios.pptxMicroservicios.pptx
Microservicios.pptx
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
 
¿Qué es java?
¿Qué es java?¿Qué es java?
¿Qué es java?
 
Diplomatura Desarrollo de Aplicaciones Móviles 2014
Diplomatura Desarrollo de Aplicaciones Móviles 2014Diplomatura Desarrollo de Aplicaciones Móviles 2014
Diplomatura Desarrollo de Aplicaciones Móviles 2014
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
 
Arquitectura de microservicios
Arquitectura de microserviciosArquitectura de microservicios
Arquitectura de microservicios
 
Patrones comportamiento
Patrones comportamientoPatrones comportamiento
Patrones comportamiento
 
ALFA9 Presentación Corporativa de Servicios 2014
ALFA9 Presentación Corporativa de Servicios 2014ALFA9 Presentación Corporativa de Servicios 2014
ALFA9 Presentación Corporativa de Servicios 2014
 

Último

Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
Guillermo Talento
 
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptxEXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
LUCERODELVALLEPAZJIM
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
alejandroalcantaraut
 
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Domingo Suarez Torres
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
rakeshsoni95123
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
eghurtadoc
 

Último (6)

Integracion Integligencia Artificial Generativa en STELA
Integracion  Integligencia Artificial Generativa en STELAIntegracion  Integligencia Artificial Generativa en STELA
Integracion Integligencia Artificial Generativa en STELA
 
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptxEXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
EXPOSICIÓN FUENTES DE PODER CONMUTADAS 2023 LUCERO.pptx
 
Manual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdfManual_Ensamblador_ing_sistemas computacionales.pdf
Manual_Ensamblador_ing_sistemas computacionales.pdf
 
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
Projecto Loom - Structured Concurrency - JavaMexico - Julio 2024
 
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ... Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
Girls Call Guwahati 000XX00000 Provide Best And Top Girl Service And No1 in ...
 
Proteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptxProteccion Electronica enfocado en la Guerra Electronica.pptx
Proteccion Electronica enfocado en la Guerra Electronica.pptx
 

Metaprogramación en JavaScript