SlideShare una empresa de Scribd logo
Javier	Vélez	Reyes	
	@javiervelezreye	
www.javiervelezreyes.com	
Arquitecturas	Para	La	Reu/lización	en	JavaScript	
Programación	Orientada	a	
Componentes	
Mayo	2016
@javiervelezreye		2		
Autor	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
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.	
Sobre	Mí	
	
javier.velez.reyes@gmail.com	
@javiervelezreye	
linkedin.com/in/javiervelezreyes	
gplus.to/javiervelezreyes	
jvelez77	
javiervelezreyes	
youtube.com/user/javiervelezreyes	
www.javiervelezreyes.com
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
1	Introducción	
§  Qué	es	la	Reu<lización	
§  El	Fracaso	de	la	Reu<lización	
§  Hacia	una	Verdadera	Reu<lización	
§  Arquitecturas	para	la	Reu<lización	
Introducción	
Arquitecturas	Para	La	Reu/lización	En	JavaScript
@javiervelezreye		4		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
La	reu<lización	de	código	es	el	proceso	por	el	cual	
la	 creación	 de	 nuevos	 sistemas	 se	 realiza	 a	 par<r	
de	 artefactos	 previamente	 elaborados	 con	 el	
ánimo	 de	 reducir	 costes,	 <empos	 y	 esfuerzos	 de	
desarrollo.	
La	reu<lización	como	ahorro	de	costes	
Qué	es	la	Reu<lización
@javiervelezreye		5		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Reu<lización	en	el	<empo	y	en	el	espacio	
Qué	es	la	Reu<lización	
Reu<lización	
Tiempo	
IOS
Web
Java
GWT
Android
Espacio	
JS
Se	 requieren	 mecanismos	 de	
estandarización	 que	 alcancen	 la	
abstracción	 necesaria	 para	 crear	
esfuerzos	 de	 desarrollo	 agnósBcos	
de	tecnología	
Write	Once	Run	Everywhere	
Angular
React
Polymer
Write	Once	Run	Whenever	
Se	requieren	criterios	de	diseño	que	
permitan	 construir	 soEware	 que	
supere	 los	 dictámenes	 de	 la	
tecnología	en	uso	o	en	hype
@javiervelezreye		6		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Las	tensiones	de	la	reu<lización	
El	Fracaso	de	la	Reu<lización	
Reu<lización	
Abstracción Acoplamiento
Granularidad
Cuál	debe	ser	el	nivel	adecuado	de	
granularidad	 en	 el	 diseño	 de	 cada	
artefacto	 para	 maximizar	 sus	
oportunidades	de	reuBlización	
A	 qué	 nivel	 de	 abstracción	 debe	
diseñarse	 cada	 artefacto	 para	
maximizar	su	reuBlización	
Cuál	 debe	 ser	 la	 relación	 de	 cada	
artefacto	con	los	demás	artefactos	
de	 la	 vecindad	 para	 maximizar	 su	
reuBlización
@javiervelezreye		7		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Las	reu<lización	desde	la	abstracción	
El	Fracaso	de	la	Reu<lización	
var filterReduce = function (data, fn, gn, b) {
return data
.filter (fn)
.reduce (gn, b);
};
var adults = filterReduce (users,
function (user) { return user.age > 18; },
function (user) { return 1; },
0);
filter
reduce
[...]
d
fn
gn
PF.	Abstracción	centrada	en	la	Tarea	
Reu<lización	restringida	a	tareas	
Se	 consigue	 reuBlizar	 el	 esquema	
algorítmico	 para	 disBntas	 tareas	
pero	 siempre	 se	 aplica	 sobre	 los	
mismos	Bpos	de	datos	
Vehicle Tester
Car Truck
Tester.check = function (v) {
v.start ();
assert (v.started, true);
v.stop ();
assert (v.started, false);
};
start ()
stop ()
check ()
OOP.	Abstracción	centrada	en	datos	
Reu<lización	restringida	a	variantes		
Se	 consigue	 reuBlizar	 el	 esquema	
del	Tester	sólo	en	el	marco	definido	
por	 los	 objetos	 de	 la	 jerarquía	 de	
herencia	que	parBcipan	con	éste	
Tarea	
Datos	
PF	
OOP
@javiervelezreye		8		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Las	reu<lización	desde	el	acoplamiento	
El	Fracaso	de	la	Reu<lización	
return data
.filter (fn)
.fn
.reduce (gn, b);
reduce
Acoplamiento	a	datos	
var y = fn(x);
return gn(y);
y
y
fn
filter
[...]
[...]fn gn
Acoplamiento	a	<po	 Acoplamiento	a	aridad	
hn(
gn(
fn(x)
)
);1
fn
gn
hn
1
Acoplamiento	a	<empo	 Acoplamiento	a	cardinalidad	 Acoplamiento	a	volumen	
A B
A
B
b.m(x)
b.send('m', x);
A B
A
Bbus
b.m(x)
b.send('m', x);
B
B
B
B
A B
b.m(x,y,z)
A B
b.m({
x : x,
y : y,
z : z
})
@javiervelezreye		9		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Las	reu<lización	desde	la	granularidad	
El	Fracaso	de	la	Reu<lización	
Granularidad	
-	+	
Feature	Oriented	Programing	
Object	Oriented	Programing	
Service	Oriented	Programing	
Artefacto	
Repository
find ()
add (e)
remove (e)
Servicio	
Stack
push()
pop()
Objeto	
Composición	
Delegación	
A B
Reu<lización	
-	+	
Orquestación	
A B
O
Arquitectura	
Capas	
Colaboración	
A B
C
Contribución	
Core
Ext
Identifiable
getId ()
setId ()
Feature	 Parciales	
Exts
cores
@javiervelezreye		10		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
La	reu<lización	por	Diseño	
Hacia	una	Verdadera	Reu<lización	
Tiempo	
Requisitos	
Reu<lización	por	refactorización	
Tiempo	
Requisitos	
Reu<lización	por	diseño	
El	agilismo	mal	entendido	
Se	desesBma	cualquier	acBvidad	de	
análisis	y	en	cada	cada	sprint	se	da	
solución	exacta	a	las	demandas	del	
cliente	 sin	 atender	 a	 los	 costes	 del	
repivotaje	
El	agilismo	bien	entendido	
Se	 dedican	 esfuerzos	 de	 análisis	
dirigidos	 a	 inferir	 la	 tendencia	
evoluBva	 del	 soEware	 de	 manera	
que	 pueda	 orientarse	 el	 desarrollo	
para	minimizar	costes	de	repivotaje
@javiervelezreye		11		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Arquitecturas	clásicas	reu<lizables	
EnBdades	de	Proyecto	 Contexto	Arquitectónico	de	Uso	
Proyecto	A	
Proyecto	B	Reu<lización	externa	
La	capacidad	de	reuBlización	entre	
proyectos	 se	 ve	 compromeBda	 por	
el	conjunto	de	requisitos	específicos	
impuestos	a	nivel	de	cada	proyecto		
Reu<lización	interna	
La	capacidad	de	reuBlización	interna	
en	 un	 proyecto	 se	 ve	 limitada	 a	 un	
pequeño	 conjunto	 de	 contextos	
arquitectónicos	 de	 uso	 donde	 cada	
artefacto	 se	 puede	 usar	 de	 forma	
semánBcamente	equivalente	
Hacia	una	Verdadera	Reu<lización	
A B C
D E
A
B
C
D
EA
B
A' F G
@javiervelezreye		12		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
usa	
Componentes	 Meta-programas	
Proyecto	
crea	
Programación	Orientada	a	Componentes	
Arquitecturas	para	la	Reu<lización	
usa	
EnBdades	de	Proyecto	
+	
Nivel	de	Proyecto	
Nivel	de	Dominio	
Rasgos	reu<lizables	
Componentes	como	rasgos	
parciales	 que	 implementar	
caracterísBcas	reuBlizables	
Meta-programas	 como	
esquemas	 de	 composición	
reuBlizables	 de	 aplicabili-
dad	recurrente	
Esquemas	de	composición	
En<dades	agnós<cas	
EnBdades	 que	 capturan	 el	
core	del	negocio	de	forma	
agnósBca	al	uso	de	rasgos	
adiBvos		
Proyecto	generado	a	parBr	
de	 especificaciones	 de	
p r o y e c t o	 y	 d o m i n i o	
reduciendo	 esfuerzos	 de	
desarrollo	
Código	generado
@javiervelezreye		13		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
usa	
Componentes	 Meta-programas	
Proyecto	A	
crea	
Arquitecturas	para	la	reu<lización	en	el	espacio	
Arquitecturas	para	la	Reu<lización	
usa	
EnBdades	de	Proyecto	
+	
Proyecto	B	
Nivel	de	Proyecto	
Nivel	de	Dominio	
DisBntos	proyectos	se	adaptan	a	
las	 necesidades	 de	 cliente	 por	
composición	de	diferentes	rasgos	
parciales	
Ges<ón	de	la	configuración
@javiervelezreye		14		
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Arquitecturas	para	la	reu<lización	en	el	<empo	
Arquitecturas	para	la	Reu<lización	
usa	
Componentes	 Meta-programas	
Proyecto	A	
Nivel	de	Proyecto	
Nivel	de	Dominio	
usa	
EnBdades	de	Proyecto	
+	
Proyecto	A'	
Ejecución	en	el	
Bempo	
El	 sistema	 reacciona	 adaptán-
dose	 a	 las	 nuevas	 condiciones	
ambientales	que	detecta	en	cada	
momento	
Evolución	adapta<va
@javiervelezreye		15		
usa	
Componentes	 Meta-programas	
Proyecto	
crea	usa	
EnBdades	de	Proyecto	
+	
Nivel	de	Proyecto	
Nivel	de	Dominio	
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
En	la	prác<ca.	Desde	Front…	
OOP	
Delegación	Herencia		
Abstracción	
PF	
O.	Superior	
	Clausuras	
Adición	
Extensión	
Intercesión	
Delegación	
Composición	
Arquitecturas	para	la	Reu<lización
@javiervelezreye		16		
Isomorfismo	
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
En	la	prác<ca.	Desde	Back…	
Arquitecturas	para	la	Reu<lización	
Front-end	 Back-end	
Negocio	 Integración	
A.	Arquitecturas	dirigidas	por	procesos	
Igualmente	 los	 datos	 expuestos	
en	forma	de	API	Web	se	alinean	
de	 forma	 isomorfa	 con	 las	
enBdades	de	negocio	
Los	componentes	de	front	
ofrecen	 un	 modelo	 de	
interacción	para	el	acceso	
a	 las	 cadenas	 de	 valor	
ofrecidas	desde	el	back	
El	 negocio	 se	 codifica	 en	 forma	 de	
componentes	 que	 son	 proxies	 de	 los	
componentes	de	front	y	controladores	de	
datos	 de	 acuerdo	 a	 una	 aproximación	
isomorfa
@javiervelezreye		17		
Isomorfismo	
Introducción	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
En	la	prác<ca.	Desde	Back…	
Arquitecturas	para	la	Reu<lización	
Front-end	 Back-end	
B.	Arquitecturas	dirigidas	por	datos	
En	 este	 caso	 los	 componentes	
subsumen	 las	 responsabilidades	
de	 control	 sobre	 la	 arquitectura	
de	 datos	 subyacente	 y	 operan	
como	 gateways	 de	 datos	 del	
negocio	
La	 API	 Web	 expone	 todas	 las	
capacidades	 del	 negocio	 en	
forma	de	recursos	de	datos	para	
que	puedan	ser	exploradas
Javier	Vélez	Reyes	
	@javiervelezreye	
Javier.velez.reyes@gmail.com	
2	Arquitecturas	Para	
La	Reu/lización	
§  Técnicas	de	Composición	en	JavaScript	
§  Arquitecturas	de	Mixins	&	Traits	
§  Arquitecturas	de	Subjects	&	Roles	
§  Arquitecturas	de	Aspectos	&	Filtros	
Arquitecturas	Para	La	Reu/lización	
Arquitecturas	Para	La	Reu/lización	En	JavaScript
@javiervelezreye		19		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Técnicas	de	Composición	
Introducción	
Adición	
var core = {
x : 1,
y : 2,
};
core = Object.assign ({}, {
p : function () { return this.x; },
q : function () { return this.y; }
});
Extensión	
class A { p() {...}, q() {...} }
class B extends A { m() {...} }
Intercesión	
var core = { p: function () {...} };
var fn = core.p;
var gn = function () {...};
core.p = function (...args) {
gn.apply (this, args);
return fn.apply (this, args);
};
Early	Binding	Late	Binding	
Delegación	
var core = {
d : ext,
x : 3,
p : function () { return this.x; },
q : function () { return this.d.m(x); }
};
var ext = { m: function (n) { return 2*n; }};
var core = {
x : 1,
p : function () { return this.x; },
})
var ext = { x : 2};
core.p = core.p.bind (ext)
A B	
m()
this
@javiervelezreye		20		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Mixins	
Componente.	Mixin	
Un	Mixin	es	una	abstracción	de	datos	
parcial	 reu<lizable	 que	 puede	
contribuirse	a	cualquier	clase	base	
state	
autonomía	
adaptación	
abstracción	
state	
extensibilidad	
reversibilidad	
Core	
Arquitectura	
Un	modelo	de	extensiones	por	mixins	
mueve	una	arquitectura	de	datos	con	
agnos<cismo	 de	 las	 en<dades	 de	
negocio	sobre	las	que	opere	A B
X Y
Los	mixins	mueven	
la	arquitectura	
Abstracciones	de	
datos	del	negocio	
ReuBlización	en	
disBntos	proyectos	 Proyecto	A	
Proyecto	B
@javiervelezreye		21		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación	I.	Composición	por	Adición		
Arquitecturas	de	Mixins	
Técnica	de	Composición	
La	 técnica	 habitual	 aplica	 composición	 adi<va	
sobre	 los	 mixins.	 Lamentablemente	 esta	
solución	no	funciona	en	contextos	de	herencia	
A
M
state	
state	
Desde	el	Código	
Para	 garan<zar	 la	 ausencia	 de	
colisiones	 entre	 estados	 de	 mixins	 y	
cores	se	encapsula	el	estado	de	cada	
mixin.	 La	 colisión	 de	 métodos	 debe	
prevenirse	con	posi<vas	de	exclusión	
o	reescritura		
mp.Mixin = function (ext) {
return function (core) {
var ctx = Object.create (null);
var keys = Object.getOwnPropertyNames(ext);
var mix = Object.assign({}, core);
ctx.self = mix;
keys.forEach (function (key) {
if (typeof(ext[key]) === 'function')
mix[key] = ext[key].bind(ctx);
else ctx[key] = ext[key];
});
if (mix.init) mix.init.call(mix);
return mix;
};
};
var A = {...};
var MixinId = mp.Mixin({
id : 0,
getId : function () { return this.id; },
setId : function (id) { this.id = id; }
});
var B = MixinId(A);
p()
q()
x()
y()
Existencia	
potencial	de	
colisiones	
Se	encapsula	el	
estado	para	
evitar	colisiones	
La	herencia	de	mixins	o	clases	
con	mixins	no	funciona	
+
@javiervelezreye		22		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación	II.	Composición	por	Extensión	
Arquitecturas	de	Mixins	
Técnica	de	Composición	
La	 técnica	 de	 composición	 por	
extensión	man<ene	la	independencia	
de	mixins,	posibilita	la	reversibilidad,	
u<liza	 late	 binding	 y	 funciona	 en	
contextos	de	herencia	
A
A with M M
B
Desde	el	Código	
Los	 mixins	 ahora	 son	 funciones	 que	
contribuyen	 a	 una	 clase	 con	 nuevas	
abstracciones	 de	 datos.	 	 Los	
problemas	 de	 colisión	 potencial	 	 de	
métodos	se	man<enen	
let MixinId = function (cls) {
return class extends cls {
constructor() {
super();
this.id = 0;
}
getId() { return this.id; }
setId(id) { this.id = id; }
};
class A { ... }
Let AM = MixinId(A);
Cada	mixin	se	
separa	en	una	
nueva	clase	
Contribución	del	
mixin	
Los	mixins	se	buscan	
ascendentemente	lo	que	fomenta	
operar	con	late	binding
@javiervelezreye		23		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Mixins	
Ejemplo	
Una	solución	de	mixins	mueve	una	arquitectura	para	
soportar	 la	 valoración	 social	 de	 una	 colección	 de	
productos	vinculados	a	un	cliente		
var allScore = function (aProduct, social) {
var score = 0;
var product = aProduct;
while (product) {
var social = product[social];
while (social) {
score = score + getScore(social)
social = social.next();
}
product = product.next();
}
return score;
}
var getScore = function (social) {
return !social.children ?
social.score() :
social.children.reduce (function (c) {
return getScore(c) + c.score();
}, 0);
}
El	libro	se	exBende	a	
cardinalidad	múlBple	
Se	exBende	el	comentario	
para	converBrlo	en	una	
enBdad	valorable	
parent	
children	
Book
MIndex
back()
next()
Comment
MIndex
back()
next() back	
next	
back	
next	
MChilds
children()
parent()
MScore
like()
dislike()
score()
User
@javiervelezreye		24		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Traits	
Componente.	Trait	
Un	Trait	es	una	abstracción	funcional	
parcial	que	contribuye	con	una	colec-
ción	 de	 capacidades.	 No	 <enen	
estado	y	se	apoya	en	la	existencia	de	
ciertos	 métodos	 requeridos	 en	 el	
core	
autonomía	
encapsulación	
dependencia	
funcional	
Core	
extensibilidad	
Arquitectura	
En	 este	 caso	 la	 arquitectura	 de	
negocio	 debe	 proporcionar	 métodos	
que	 permitan	 a	 los	 Traits	 operar	
convenientemente.	A B
X Y
Los	Traits	requieren	métodos	
de	anclaje	para	mover	la	
arquitectura	
Abstracciones	de	
datos	del	negocio	
ReuBlización	en	
disBntos	proyectos	
Proyecto	A	
Proyecto	B
@javiervelezreye		25		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación.	Composición	por	Adición	&	Recontextualización	
Arquitecturas	de	Traits	
Técnica	de	Composición	
La	 composición	 por	 adición	 es	 sencilla	 pero	 supone	
operar	 en	 early	 binding.	 Los	 Traits	 se	 definen	 como	 si	
pertenecieran	al	core,	lo	que	requiere	contextualización		
Desde	el	Código	
Cada	 método	 dentro	 del	 Trait	 se	
contextualiza	reasignando	el	valor	del	
puntero	this.	Se	asume	que	un	rasgo	
no	 puede	 contener	 otra	 cosa	 más	
que	métodos	
mp.Trait = function (ext){
return function (core) {
var keys = Object.getOwnPropertyNames(ext);
var trait = Object.assign({}, core);
keys.forEach (function (key) {
if (typeof(ext[key]) === 'function')
trait[key] = ext[key].bind(core);
});
return trait;
};
};
var TEnumerable = pm.Trait ({
map : function (fn) {
var result = [];
this.forEach (function (e) { result.push (fn(e)); });
return result;
},
reduce: function (rn, b) { ... },
filter: function (pn) { ... }
});
+	
p() q()x()y()
r()
this
Contextualización	
Composición	
adiBva
@javiervelezreye		26		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Traits	
Ejemplo	
Extendiendo	 el	 ejemplo	 anterior	 queremos	
saber	 el	 coste	 de	 la	 cesta	 de	 libros	 y	 la	
valoración	social	de	la	misma.	
User Book
var cost = function (user, type) {
return user.book
.filter (function (book) {
return type ? book.type === type : true;
})
.reduce (function (price, book) {
return price + book.price;
}, 0);
};
var score = function (user) {
return user.book
.reduce (function (score, book) {
return score + book.comment
.reduce (function (score, comment) {
return score + comment.score();
}, 0);
});
};
type
price
TEnumerable
map(fn)
reduce(rn, b)
filter(pn)
forEach	
MScore
like()
dislike()
score()
Comment
El	Mixin	MIndex	proporciona	
forEach	lo	que	permite	
incorporar	TEnumerable	
MIndex
back()
next() back	
next	
MIndex
back()
next() back	
next	
TEnumerable
map(fn)
reduce(rn, b)
filter(pn)
forEach
@javiervelezreye		27		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Subjects	
Componente.	Subject	
Un	Subject	es	una	proyección	subje<va	de	un	modelo	
de	 negocio	 preparada	 para	 ser	 u<lizada	 por	 un	
determinado	colec<vo	de	desarrolladores	dentro	del	
proyecto.	
Arquitectura	
Las	arquitecturas	subje<vas	permiten	
contemplar	un	mismo	modelo	desde	
perspec<vas	 contrapuestas	 lo	 que	
permite	 simplificar	 el	 desarrollo	 en	
proyectos	grandes	y	complejos	
Plant Tree
nest ()
WithInsect WithNectar
feed()
Tree
HardWoodSoftWood
cheery	pine	
Object
maple	dandelion	SBird	
SWoodsman
Core	
SA	
SB	 autonomía	
dependencia	
funcional	
Proyección	
subjeBva
@javiervelezreye		28		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación.	Composición	por	Delegación	
Arquitecturas	de	Subjects	
Técnica	de	Composición	
Se	 aplica	 composición	 por	 delegación	 de	 manera	 que	
cada	 Subject	 se	 mantenga	 como	 una	 proyección	
simplificada	 cuyos	 métodos	 terminan	 invocando	 al	
modelo	real	subyacente.	 Core	
SA	
SB	
p()
q()
r()
x()
y()
m()
n()
método	
requerido	
delegación	
contrato	
subjeBvo	
Desde	el	Código	
Para	 definir	 un	 Subject,	 se	 propor-
ciona	una	descripción	de	los	métodos	
que	 contendrá.	 Esto	 genera	 una	
función	 que	 permite	 ac<var	 el	
Subject	sobre	un	conjunto	de	objetos	
mp.Subject = function (cfg) {
return function (...objs) {
return Object.keys(cfg)
.reduce (function (subject, key) {
var method = cfg[key];
var target = objs[cfg[key].target];
var feature = typeof (method) === 'function' ? method : target[method];
subject[key] = typeof (feature) === 'function' ?
feature.bind(target) :
feature;
return subject;
}, {});
};
class A { foo() {...}, bar() {...} }
class B { baz() {...}, qux() {...} }
var S1 = mp.Subject({
p: {method: 'foo', target: 0}
q: {method: 'qux', target: 1}
});
var s = S1 (new A(), new B());
@javiervelezreye		29		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Subjects	
Ejemplo	
En	 este	 caso	 realizamos	 dos	 proyecciones	
subje<vas	 para	 los	 departamentos	 de	
fidelización	y	ventas	
var SLoyalty = mp.Subject({
title : {method: 'title', target: 0},
author : {method: 'author', target: 0},
comments : {method: 'forEach', target: 0},
score : {method: function () {
this.reduce(function (score, comment){
return score + comment.score();
}, 0);
}, target: 0}
});
var SSales = mp.Subject({
price : {method: 'price', target: 1},
owner : {method: 'getId', target: 0},
others : {method: 'forEach', target: 0}
});
var user = ...
var loyalty = SLoyalty (user.book);
var sales = SSales (user, user.book);
User Book
title()
author()
type()
price()
forEach	
MScore
like()
dislike()
score()
Comment
MIndex
back()
next() back	
next	
MIndex
back()
next() back	
next	
forEach	
MId
getId()
setId(id)
@javiervelezreye		30		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Roles	
Componente.	Role	
Un	Rol	encapsula	un	perfil	de	acceso	a	una	en<dad	
que	ofrece	una	forma	parcial	y	restringida	de	explotar	
las	capacidades	funcionales	que	esta	en<dad	ofrece	
Core	
Ra	
Rb	 autonomía	roles	de	
acceso	
Rc	
unicidad	
state	
state	
state	
dinamismo	
estado	
mulBplicidad	
Arquitectura	
Las	arquitecturas	de	roles	permiten	modelar	mucho	más	
cómodamente	los	problemas	de	ges<ón	de	recursos	con	
unas	polí<cas	de	acceso	complicadas.	A	diferencia	de	los	
Subjects,	 en	 este	 <po	 de	 arquitec<tas	 cada	 rol	
proporciona	 métodos	 propios	 y	 un	 estado	 interno	 que	
debe	instanciarse	
A B
C
a1
a2
a1
b2
a2
c1
Admin	
Guest	
User
@javiervelezreye		31		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación.	Composición	por	Delegación	&	Contextualización	
Arquitecturas	de	Roles	
Técnica	de	Composición	
Se	 aplica	 composición	 por	 delegación	 y	 contextualiza-
ción.	 Cada	 Role	 <ene	 un	 estado	 interno	 con	 variables	
primadas	y	una	referencia	self	al	core.	De	esta	manera	se	
soluciona	la	esquizofrenia	de	objetos	
Core	
Ra	
Rb	
p()
q()
r()
x()
y()
m()
n()
state	
state	
this
this
self
Acceso	explícito	
a	core	
Contextualización	
interna	
Capacidades	
de	rol	
Capacidades	
de	core	
Desde	el	Código	
La	 función	 de	 definición	 de	 un	 Role	 recibe	 el	
core	 y	 los	 métodos.	 Ésta	 contextualiza	 los	
métodos	 sobre	 un	 contexto	 privado	 ctx	 para	
encapsular	el	estado	e	incluye	una	referencia	
self	al	core.	Se	requiere	una	función	init	para	
inicializar	el	Role	en	la	instanciación	
mp.Role = function (core, cfg) {
return function (...args) {
var ctx = Object.create (null);
ctx.self = core;
var role = Object.keys (cfg)
.reduce (function (role, key) {
role[key] = cfg[key].bind(ctx);
return role;
}, {});
if (role.init) role.init(args);
return role;
};
};
var core = { add (x, y) { return x + y; } }
var RA = mp.Role (core, {
init : function (x) { this.x = x; },
inc : function () { this.self.add (this.x, 1); },
})
var rA1 = RA (1);
var rA2 = RA (2);
@javiervelezreye		32		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Roles	
Ejemplo	
Sobre	 el	 servicio	 de	 acceso	 a	 la	 API	 Web	
definimos	un	ecosistema	de	roles	para	operar	
por	cliente	con	un	estado	interno	
var RReadOnly = mp.Role (core, {
get: function (id) { return this.self.get(id); },
all: function (k) { return this.self.getAll(k); }
});
var RMax = mp.Role (core, {
init: function (max) {
this.max = max;
this.n = 0;
},
get: function (id) { return this.self.get(id); },
add: function (e) {
if (this.n < this.max) {
this.self.add(e);
this.n++;
} else console.log ('Error - [%s,%j]', k, e);
},
reset: function () { this.n = 0; }
});
Resource
get(id)
getAll()
add(book)
remove(book)
a2
a2
ro1
RReadOnly	
a2
a2
rm1
RMax	
var roBooks1 = RReadOnly ();
var roBooks2 = RReadOnly ();
var roBooks3 = RReadOnly ();
...
var rmaxBooks1 = RMax (1000);
var rmaxBooks2 = RMax (500);
var rmaxBooks3 = RMax (2500);
...
uri='/books'
@javiervelezreye		33		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Aspectos	
Componente.	Aspecto	
Un	 aspecto	 es	 una	 proyección	 parcial	 de	 las	
responsabilidades	 funcionales	 que	 debe	 cubrir	 una	
abstracción	 para	 dar	 respuesta	 a	 los	 requisitos	 de	
negocio	
Core	 autonomía	
métodos	
del	core	
dinamismo	
Decoración	
por	aspectos	
Arquitectura	
Las	arquitecturas	de	aspectos	permiten	descomponer	los	
problemas	en	proyecciones	ortogonales	que	resultan	de	
gran	 reu<lización	 potencial	 al	 poder	 contribuirse	 de	
forma	 inmediata	 a	 dis<ntas	 en<dades	 de	 negocio.	 Son	
aspectos	 cpicamente	 el	 control	 de	 acceso,	 la	
concurrencia,	 la	 distribu<vidad,	 la	 trazabilidad,	 etc.	 El	
entrelazado	 de	 aspectos	 conforma	 el	 código	 final	 del	
aplica<vo		
Logeable	 Accesible	 Traceable	
Cores	
Aspects	
A
B
interwoven	
C
@javiervelezreye		34		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación.	Intercesión	
Arquitecturas	de	Aspectos	
Técnica	de	Composición	
La	 creación	 de	 arquitecturas	 basadas	 en	 aspectos	
entrelazados	 u<liza	 técnicas	 de	 intercesión	 sobre	
funciones	 y	 atributos.	 En	 JavaScript	 la	 intercesión	 de	
funciones	 puede	 aplicarse	 repe<damente	 sobre	 un	
mismo	core,	la	de	atributos	no	
Core	
q()
q()
Intercesion:	before	
q()
Intercesion:	before	
q()
Intercesion:	aEer	
Desde	el	Código.	Definición	
Cada	aspecto	se	define	a	par<r	de	un	advice,	
función	que	supone	una	decoración	sobre	un	
método	 del	 core,	 y	 un	 punto	 de	 croscudng,	
momento	 en	 el	 cual	 el	 decorador	 debe	 ser	
invocado.	
var aspect = mp.Aspect ({
p: {
when : 'before' | 'after',
advice : function () {
...
},
q: {
when : 'before' | 'after',
advice : function () {
...
}
});
aspect (coreA);
aspect (coreB);
aspect (coreC);
@javiervelezreye		35		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación	I.	Intercesión	Está<ca	
Arquitecturas	de	Aspectos	
Desde	el	Código.	Intercesión	Está<ca	
La	 implementación	 más	 sencilla	 consiste	 en	
aplicar	 intercesión	 directamente	 sobre	 los	
métodos	 del	 core.	 Para	 ello	 inicialmente	 es	
preciso	 incluir	 en	 la	 librería	 los	 métodos	
auxiliares	en	decoración	de	before	y	aeer.		
mp.before = function before (core, key, ext) {
var fn = core[key];
core[key] = function (...args) {
ext.apply (this, args);
return fn.apply (this, args);
};
};
mp.after = function after (core, key, ext) {
var fn = core[key];
core[key] = function (...args) {
var r = fn.apply (this, args);
ext.apply (this, [...args, r]);
return r;
};
};
métodos	
auxiliares	de	
intercesión	
mp.Aspect = function (ext){
return function (core){
var keys = Object.getOwnPropertyNames(ext);
keys.forEach (function (key) {
var m = ext[key];
mp[m.when](core, key, m.advice);
});
};
}; La	decoración	opera	en	
early	binding	con	lo	que	la	
decoración	no	es	dinámica	
ni	reversible
@javiervelezreye		36		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación	II.	Intercesión	Dinámica	
Arquitecturas	de	Aspectos	
Desde	el	Código.	Intercesión	Dinámica	
En	este	caso	vamos	a	aprovechar	que	en	JS	cada	
función	 es	 un	 objeto	 para	 incluir	 propiedades	
de	intercesión	en	las	que	delegar	
mp.Aspect = function (ext){
return function (core) {
var keys= Object.getOwnPropertyNames (ext);
keys.forEach (function (key) {
if (!core[key].isAdvisable)
mp.advisable (core, key);
var m = ext[key];
core[key][m.when](m.advice);
});
};
}; Ahora	la	decoración	opera	en	
late	binding	con	lo	que	la	
decoración	es	dinámica	y	
reversible	por	modificación	de	
los	atributos	befores	y	aEers	
Métodos	internos	
de	soporte	a	la	
intercesión	
dinámica	
mp.advisable = function (core, key) {
var fn = core[key];
core[key] = function (...args) {
core[key].befores.forEach (function (fn) {
fn.apply (this, args);
});
var r = core[key].body.apply (this, args);
core[key].afters.forEach (function (fn) {
fn.apply (this, [...args, r]);
});
return r;
};
core[key].isAdvisable = true;
core[key].befores = [];
core[key].body = fn;
core[key].afters = [];
core[key].before = function (fn) {
this.befores.unshift (fn);
};
core[key].after = function (fn) {
this.afters.push (fn);
}; };
@javiervelezreye		37		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Aspectos	
Ejemplo	
Supongamos	 que	 queremos	 idear	
una	arquitectura	que	persista	todas	
las	 en<dades	 en	 memoria	 en	 una	
base	de	datos	de	forma	automá<ca	
en	cuanto	se	detecten	cambios	
var books = {
data : {},
find : function (id) {
return this.data[id];
},
add : function (book) {
this.data[book.id] = book;
}
};
Books
find (id)
add (book)
var Atraceable = mp.Aspect ({
add: {
when: 'before',
advice: function (item) {
console.log ('Adding', book);
}
},
find: {
when: 'after',
advice: function (id) {
console.log ('Finding', id);
}
}
});
Atraceable (books);
ATraceable
find (id)
add (book)
find:	before	
add:	before	
var ACheckeable = mp.Aspect ({
add: {
when: 'before',
advice: function (item) {
if (!item || !item.id)
throw 'Invalid Type';
}
}
});
ACheckeable (books);
ACheckeable
add (book)
add:	before	
var AStorable = mp.Aspect ({
add: {
when: 'after',
advice: function (item) {
db.save (item.id, item);
}
}
});
AStorable (books);
AStorable
add (book)
add:	aEer
@javiervelezreye		38		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Descripción	General	
Arquitecturas	de	Object	Filters	
Componente.	Object	Filter	
Un	 filtro	 es	 un	 componente	 con	 la	 capacidad	 de	
modificar	la	ges<ón	natural	de	invocaciones	para	un	
determinado	 método	 de	 manera	 qué	 ésta	 pueda	
delegarse	en	otra	en<dad	interna	o	externa	
Core	
state	
filtros	en	
before	
delegación	
externa	
delegación	
interna	
autonomía	
filtros	en	
aEer	
Arquitectura	
Las	 arquitectura	 de	 filtros	 permiten	 alterar	 dinámica-
mente	la	ges<ón	de	los	mensajes	de	invocación	que	se	
reciben	 sobre	 cada	 uno	 de	 los	 métodos	 de	 un	
componente	 de	 core.	 Esto	 permite	 aplicar	 polí<cas	 de	
intervención	de	forma	transparente	
Ext1	 Ext2	 Ext3	
Filters	
A
B
C
@javiervelezreye		39		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación.	Intercesión	&	Delegación	
Arquitecturas	de	Object	Filters	
Técnica	de	Composición	
En	 este	 caso	 se	 aplica	 intercesión	 para	 poder	
intervenir	 la	 respuesta	 de	 cada	 método	 con	 una	
lógica	 de	 dispatching	 que	 delegue	 hacia	 dis<ntos	
objetos	internos	o	externos	
p()
state	
pn
delegación	
filtro	de	delegación	
con	estado	
Intercesión	
before	o	aEer	
Desde	el	Código.	Definición	
Cada	filtro	determina	qué	métodos	intervenir	
y	cual	es	la	lógica	de	intervención		que	hay	que	
aplicar	 antes	 o	 después	 del	 método	 para	
delegar	en	otro	componente	
var filter = mp.Filter ({
init : function () { ... },
p : {
when : 'before' | 'after',
guard : function () { ... },
do : function () { ... }
},
q : {
when : 'before' | 'after',
guard : function () { ... },
do : function () { ... }
}
});
filter (coreA);
filter (coreB);
filter (coreC);
@javiervelezreye		40		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Implementación	I.	Intercesión	&	Delegación	
Arquitecturas	de	Aspectos	
Desde	el	Código.	Intercesión	Dinámica	
De	manera	muy	similar	al	caso	anterior	aplicamos	intercesión	
dinámica.	 La	 diferencia	 aquí	 es	 que	 ejecutamos	 cada	 filtro	
sólo	si	se	cumple	la	condición	de	guarda	
mp.Filter = function (ext){
return function (core){
return function (...args) {
var ctx = Object.create(null);
ctx.self = core;
var keys = Object.getOwnPropertyNames (ext);
keys.forEach (function (key) {
if (typeof (ext[key]) === 'object'){
if (!core[key].isAdvisable)
mp.advisable (core, key);
var m = ext[key];
core[key][m.when](function (params){
if (!m.guard || m.guard && m.guard.apply(ctx, [...params, ...args]))
m.do.apply (ctx, [...params, ...args])
});
}
if (ext.init) ext.init.apply(ctx, args);
});
};
};
};
Se	comprueba	la	
condición	de	
guarda	
Se	crea	un	contexto	
para	mantener	el	
estado	
Se		inicializa	el	
estado	de	cada	filtro	
Dado	que	cada	filtro	Bene	acceso	
al	core	puede	operar	con	el	o	
comunicarse	a	través	de	esquemas	
de	memoria	comparBda
@javiervelezreye		41		
Arquitecturas	Para	La	Reu<lización	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
Ejemplo	
Arquitecturas	de	Aspectos	
Ejemplo	
Finalmente,	 supongamos	 en	 este	 úl<mo	 caso	
que	queremos	implementar	lógica	de	sharding	
sobre	la	base	de	datos	distribuida	de	libros		
Books
find (id)
add (book) find 	
find 	
find 	
add	
add	add	
DB3	
DB1	
DB2	
shard1	
shard2	
shard3	
var Books = {
find : function (id) {
return this.data;
},
add : function (book) {}
}
var shardBooks = FShard (books);
shardBooks (0, 3, db0);
shardBooks (1, 3, db1);
shardBooks (2, 3, db2);
var FShard = mp.Filter ({
init : function (idx, max, db) {
this.idx = idx;
this.max = max;
this.db = db;
},
find : {
when : 'before',
guard : function (id) {
return id % this.max === this.idx;
},
do : function (e) {
this.self.data = this.db.get (e.id, e);
}
},
add : {
when : 'before',
do : function (e) {
this.db.set (e.id, e);
}
}
});
@javiervelezreye		42		
Preguntas	
Arquitecturas	Para	La	Reu<lización	En	JavaScript	
www.javiervelezreyes.com	
Programación	Orientada	a	Componentes	
Arquitecturas	Para	La	
Reu<lización	En	JavaScript
Javier	Vélez	Reyes	
	@javiervelezreye	
www.javiervelezreyes.com	
Arquitecturas	Para	La	Reu/lización	en	JavaScript	
Programación	Orientada	a	
Componentes	
Mayo	2016

Más contenido relacionado

La actualidad más candente

Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de Composición
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
 
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
Javier Vélez Reyes
 
Web components
Web componentsWeb components
Web components
Rocío Muñoz
 
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
 
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
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
David Arango
 
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
 
Arquitectura web
Arquitectura webArquitectura web
Arquitectura web
MiguelDz Diaz
 
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
 

La actualidad más candente (12)

Arquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de ComposiciónArquitecturas de Componentes Web. Patrones de Composición
Arquitecturas de Componentes Web. Patrones de Composición
 
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
 
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
 
Web components
Web componentsWeb components
Web components
 
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
 
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
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
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
 
Arquitectura web
Arquitectura webArquitectura web
Arquitectura web
 
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
 

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
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
Javier Vélez Reyes
 
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
 
Conditional sentences
Conditional sentencesConditional sentences
Conditional sentences
Tasrin Solihin
 
Sejarah perkemangan ilmu
Sejarah perkemangan ilmuSejarah perkemangan ilmu
Sejarah perkemangan ilmu
Kodogg Kritingg
 
Verbtobe
VerbtobeVerbtobe
Verbtobe
Tasrin Solihin
 
Eποχή Περικλή
Eποχή ΠερικλήEποχή Περικλή
Eποχή Περικλή
varalig
 
Expressing hope
Expressing hopeExpressing hope
Expressing hope
Tasrin Solihin
 
1.2 μυκηναϊκός πολιτισμος β
1.2 μυκηναϊκός πολιτισμος β1.2 μυκηναϊκός πολιτισμος β
1.2 μυκηναϊκός πολιτισμος β
varalig
 
Grammar error in writing
Grammar error in writingGrammar error in writing
Grammar error in writing
Tasrin Solihin
 
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
Versteijnen Logistics
 
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 ?
Giftsmate
 
Final project essay perla
Final project essay perlaFinal project essay perla
Final project essay perla
PerlaDelgado
 
Το πέταγμα του χαρταετού
Το πέταγμα του χαρταετούΤο πέταγμα του χαρταετού
Το πέταγμα του χαρταετού
varalig
 
Perkembangan ilmu pengetahuan di dunia islam222
Perkembangan ilmu pengetahuan di dunia islam222Perkembangan ilmu pengetahuan di dunia islam222
Perkembangan ilmu pengetahuan di dunia islam222
Kodogg Kritingg
 
Κλασική εποχή
Κλασική εποχήΚλασική εποχή
Κλασική εποχή
varalig
 

Destacado (18)

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
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
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
 
Conditional sentences
Conditional sentencesConditional sentences
Conditional sentences
 
Diapositivas macro
Diapositivas macroDiapositivas macro
Diapositivas macro
 
Sejarah perkemangan ilmu
Sejarah perkemangan ilmuSejarah perkemangan ilmu
Sejarah perkemangan ilmu
 
Verbtobe
VerbtobeVerbtobe
Verbtobe
 
Eποχή Περικλή
Eποχή ΠερικλήEποχή Περικλή
Eποχή Περικλή
 
Expressing hope
Expressing hopeExpressing hope
Expressing hope
 
1.2 μυκηναϊκός πολιτισμος β
1.2 μυκηναϊκός πολιτισμος β1.2 μυκηναϊκός πολιτισμος β
1.2 μυκηναϊκός πολιτισμος β
 
Grammar error in writing
Grammar error in writingGrammar error in writing
Grammar error in writing
 
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
 
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 ?
 
Final project essay perla
Final project essay perlaFinal project essay perla
Final project essay perla
 
Το πέταγμα του χαρταετού
Το πέταγμα του χαρταετούΤο πέταγμα του χαρταετού
Το πέταγμα του χαρταετού
 
Perkembangan ilmu pengetahuan di dunia islam222
Perkembangan ilmu pengetahuan di dunia islam222Perkembangan ilmu pengetahuan di dunia islam222
Perkembangan ilmu pengetahuan di dunia islam222
 
Κλασική εποχή
Κλασική εποχήΚλασική εποχή
Κλασική εποχή
 

Similar a Arquitecturas Para La Reutilización en JavaScript

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
 
Java.
Java.Java.
Catalogo formacion Autentia 2007..
Catalogo formacion Autentia 2007..Catalogo formacion Autentia 2007..
Catalogo formacion Autentia 2007..
Roberto Canales
 
HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)
Quique Fdez Guerra
 
Sesión #1 Introduccion al curso.pptx
Sesión #1 Introduccion al curso.pptxSesión #1 Introduccion al curso.pptx
Sesión #1 Introduccion al curso.pptx
AndersonHernandezara
 
Responsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño webResponsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño web
Javier Usobiaga
 
Conviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-endConviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-end
video2brain_mx
 
Conviértete en un desarrollador web front end
Conviértete en un desarrollador web front endConviértete en un desarrollador web front end
Conviértete en un desarrollador web front end
video2brain_mx
 
Modelado por descomposición
Modelado por descomposiciónModelado por descomposición
Modelado por descomposición
Vanessa Estefania Corredor Andrade
 
Modelo por descomposicion
Modelo por descomposicionModelo por descomposicion
Modelo por descomposicion
Vanessa Estefania Corredor Andrade
 
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
GeneXus
 
SVQXDG - Introducción a Embeddinator-4000
SVQXDG - Introducción a Embeddinator-4000SVQXDG - Introducción a Embeddinator-4000
SVQXDG - Introducción a Embeddinator-4000
Javier Suárez Ruiz
 
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño webResponsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
Claudio Adrian Natoli Michieli
 
Título de experto en programación con tecnologías web
Título de experto en programación con tecnologías webTítulo de experto en programación con tecnologías web
Título de experto en programación con tecnologías web
AlicantePHP
 
CURRICULUM VITAE
CURRICULUM VITAECURRICULUM VITAE
CURRICULUM VITAE
Jose Gustavo Rivero Garcia
 
Helo10 Da inteligencia a tus Apps con el proyecto Oxford
Helo10 Da inteligencia a tus Apps con el proyecto OxfordHelo10 Da inteligencia a tus Apps con el proyecto Oxford
Helo10 Da inteligencia a tus Apps con el proyecto Oxford
Adrian Diaz Cervera
 
Programacion y diseño web
Programacion y diseño webProgramacion y diseño web
Programacion y diseño web
Nelson Tordoya Roda
 
final
finalfinal
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
philogb
 
Cv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-webCv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-web
Dennys José Márquez Reyes
 

Similar a Arquitecturas Para La Reutilización en JavaScript (20)

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
 
Java.
Java.Java.
Java.
 
Catalogo formacion Autentia 2007..
Catalogo formacion Autentia 2007..Catalogo formacion Autentia 2007..
Catalogo formacion Autentia 2007..
 
HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)HTML5 en el universo Windows (Apps universales)
HTML5 en el universo Windows (Apps universales)
 
Sesión #1 Introduccion al curso.pptx
Sesión #1 Introduccion al curso.pptxSesión #1 Introduccion al curso.pptx
Sesión #1 Introduccion al curso.pptx
 
Responsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño webResponsive Web Design: reinventando el diseño web
Responsive Web Design: reinventando el diseño web
 
Conviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-endConviértete en un desarrollador web front-end
Conviértete en un desarrollador web front-end
 
Conviértete en un desarrollador web front end
Conviértete en un desarrollador web front endConviértete en un desarrollador web front end
Conviértete en un desarrollador web front end
 
Modelado por descomposición
Modelado por descomposiciónModelado por descomposición
Modelado por descomposición
 
Modelo por descomposicion
Modelo por descomposicionModelo por descomposicion
Modelo por descomposicion
 
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
060 Mas Valor Mas Conocimiento Y Mas Tecnologia En Gene Xus X Evolution 1
 
SVQXDG - Introducción a Embeddinator-4000
SVQXDG - Introducción a Embeddinator-4000SVQXDG - Introducción a Embeddinator-4000
SVQXDG - Introducción a Embeddinator-4000
 
Responsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño webResponsive web design: reinventando el diseño web
Responsive web design: reinventando el diseño web
 
Título de experto en programación con tecnologías web
Título de experto en programación con tecnologías webTítulo de experto en programación con tecnologías web
Título de experto en programación con tecnologías web
 
CURRICULUM VITAE
CURRICULUM VITAECURRICULUM VITAE
CURRICULUM VITAE
 
Helo10 Da inteligencia a tus Apps con el proyecto Oxford
Helo10 Da inteligencia a tus Apps con el proyecto OxfordHelo10 Da inteligencia a tus Apps con el proyecto Oxford
Helo10 Da inteligencia a tus Apps con el proyecto Oxford
 
Programacion y diseño web
Programacion y diseño webProgramacion y diseño web
Programacion y diseño web
 
final
finalfinal
final
 
Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript Nuevas herramientas de visualizacion en JavaScript
Nuevas herramientas de visualizacion en JavaScript
 
Cv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-webCv dennys-jose-marquez-reyes-desarrollador-web
Cv dennys-jose-marquez-reyes-desarrollador-web
 

Arquitecturas Para La Reutilización en JavaScript