En esta conferencia Carlos Benítez y Enrique Amodeo nos ofrecerán una retrospectiva de cómo JavaScript ha evolucionado desde sus inicios como herramienta para validar formularios hasta convertirse en una parte fundamental de la web 2.0. En el camino, se analizará el papel fundamental de la tecnología AJAX y librerías como jQuery en la difusión de este lenguaje durante mucho tiempo incomprendido. Si quieres refrescar ideas puedes echar un vistazo al vídeo completo del taller de introducción al JQuery organizado también por ADWE y celebrado en el espacio CAMON de Alicante. Repasaremos las distintas especificaciones hasta la reciente ECMAScript 5 avanzando parte de los que será Harmony, el gran sueño de Elich. Finalmente, revisaremos las arquitecturas REST y SPI; los enfoques TDD y BDD; la metodología HIJAX; el paradigma servidor con NodeJS y algunas de las herramientas Open Source más interesante para desarrollos de gran arquitectura. También analizarán el futuro en dispositivos móviles y la realidad de un JavaScript que abandona el navegador para convertirse en un lenguaje de escritorio con GNOME como proyecto más representativo.

1. JavaScript:
Potenciando
la
web
desde
1995
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

2. JavaScript:
Potenciando
la
web
desde
1995
Indice
-­‐
Introducción
al
lenguaje
-­‐
El
JavaScript
me
confunde
-­‐
Buenas
prácCcas
y
patrones
-­‐
AJAX,
HIJAX,
SPI
y
otras
cosas
malas
-­‐
El
futuro
de
JavaScript
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

3. Introducción
al
lenguaje

4. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
de
lenguaje
JavaScript:
-­‐
Interpretado
(no
compilado)
-­‐
Lenguaje
de
ejecución
en
cliente
-­‐
Tipado
blando
(no-­‐Cpado)
-­‐
Orientado
a
objetos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

5. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Lenguaje
Interpretado
-­‐
No
es
un
lenguaje
compilado
-­‐
Cada
instrucción
se
interpreta
en
Cempo
de
ejecución
-­‐
La
opCmización
del
código
se
realiza
durante
la
fase
de
diseño.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

6. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Seguridad,
autoría
y
rendimiento
-­‐
El
código
aparece
tal
cual
-­‐
Compromete
la
seguridad
de
una
lógica
críCca
-­‐
A
mayor
tamaño
de
archivo,
mayor
Cempo
de
carga
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

7. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Soluciones
poco
afortunadas:
-­‐
Compresión
del
código:
JSMin
-­‐
Ofuscación:
YUI
Compressor,
Packer
Inconvenientes:
-­‐
Capa
muy
débil
de
seguridad
-­‐
Ilegibilidad
del
código
para
adaptarlo
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

8. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Herramientas
para
medir
la
calidad
del
soZware
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

9. JavaScript:
Potenciando
la
web
desde
1995
Lenguaje
Interpretado
Herramientas
para
medir
la
calidad
del
soZware
Douglas
Crockford
Developers
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

10. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Tipado
blando,
dinámico
o
no-­‐Cpado
-­‐
Las
variables
se
declaran
sin
un
Cpo
de
datos
concreto
-­‐
De
hecho,
es
posible
no
declarar
variables
de
forma
explícita
-­‐
Los
Cpos
no
son
inalterables
-­‐
La
coerción
de
datos
interna
determina
el
manejo
de
los
datos.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

11. JavaScript:
Potenciando
la
web
desde
1995
Tipado
dinámico
y
coerción
de
datos
Tipado
blando,
dinámico
o
no-­‐Cpado
-­‐
Las
variables
se
declaran
sin
un
Cpo
de
Coerción
de
datos
interna
datos
concreto
-­‐
De
hecho,
es
posible
no
declarar
variables
de
forma
explícita
-­‐
Los
Cpos
no
son
inalterables
-­‐
La
coerción
de
datos
interna
determina
el
manejo
de
los
datos.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

12. JavaScript:
Potenciando
la
web
desde
1995
CaracterísCcas
del
lenguaje
Orientado
a
objetos
-­‐
Alto
nivel
de
abstracción
-­‐
No
implementa
el
concepto
de
clases
-­‐
Se
fundamenta
en
los
protoCpos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

13. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-­‐
undefined
-­‐
null
-­‐
Todo
lo
demás
-­‐
booleanos
-­‐
cadenas
-­‐
números
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

14. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-­‐
undefined
-­‐
null
constructores
-­‐
Todo
lo
demás
-­‐
booleanos
-­‐
cadenas
-­‐
números
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

15. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-­‐
undefined
-­‐
null
constructores
-­‐
Todo
lo
demás
-­‐
booleanos
-­‐
cadenas
-­‐
números
String
Boolean
Number
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

16. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-­‐
undefined
-­‐
null
constructores
-­‐
Todo
lo
demás
-­‐
booleanos
-­‐
cadenas
-­‐
números
String
Boolean
Number
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

17. JavaScript:
Potenciando
la
web
desde
1995
Objetos
en
JavaScript
Tipos
de
EnCdades
JavaScript
PRIMITIVAS
OBJETOS
-­‐
undefined
-­‐
Todo
lo
demás
-­‐
null
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

18. El
JavaScript
me
confunde
(O
por
qué
JavaScript
no
2ene
nada
que
ver
con
Java)

19. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
-­‐
ECMAScript:
una
especificación
con
muchos
sabores
-­‐
JavaScript:
Netscape
Corp.
-­‐
AcConScript:
Macromedia
-­‐
JScript:
Internet
Explorer
-­‐
V8:
Google
Chrome
SpiderMonkey
-­‐
Mozilla's
JavaScript:
Firefox
-­‐
Rhino
(Java)
TraceMonkey
-­‐
KJS
(KDE):
Conqueror
-­‐
JavaScriptCore:
Apple
Inc.
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

20. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Objetos
abiertos
var
treintaYDos
=
new
Number(32);
treintaYDos.duplicar
=
funcNon(){
return
2
*
this;
};
alert(treintaYDos.duplicar());
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

21. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Objetos
abiertos
var
pepe
=
"
Pepetn";
String.prototype.trim
=
funcNon(){
return
this.replace(/^s+/g,
'').replace(/s+$/g,
'');
};
alert(pepe.trim());
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

22. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

23. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
Global
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

24. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
defaultConfiguraNon
=
{
'maxLives':
3,
'level':
'intermediate'
};
Local
var
play
=
funcNon(gameConfig){
var
configuraNon
=
gameConfig
||
defaultConfiguraNon;
score
=
0;
//
..
do
some
play
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

25. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Scopes
var
ratePlayer
=
funcNon(score){
if(score
==
0){
var
isALoser
=
true;
}
return
isALoser;
};
No
problem
!
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

26. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

27. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

28. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
“nombre”
(LOCAL)
saludo
“porConsola”
“mensajeSaludo”
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

29. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
Or
de “nombre”
n
d
e
bú
sq (LOCAL)
saludo
ue “porConsola”
da
“mensajeSaludo”
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

30. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
SCOPE
GLOBAL
…..
(CLOSURE)
crearSaludo
“mensaje”
“saludo”
Or
de “nombre”
n
d
e
bú
Cuidado
con:
sq (LOCAL)
saludo
✖ Excesivo
tamaño
de
scope
ue “porConsola”
da
✖ Excesivo
numero
de
scopes
“mensajeSaludo”
anidados
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

31. JavaScript:
Potenciando
la
web
desde
1995
El
JavaScript
me
confunde
Closures
var
crearSaludo
=
funcNon(mensaje){
var
saludo
=
funcNon(porConsola){
var
mensajeSaludo
=
mensaje
+
"
"
+
nombre;
if
(porConsola)
console.log(mensajeSaludo);
else
alert(mensajeSaludo);
};
mensaje
=
mensaje
||
"Hola";
var
nombre
=
"Juan";
return
saludo;
};
var
quePasaJuan
=
crearSaludo("Que
pasa");
quePasaJuan(false);
var
holaJuan
=
crearSaludo();
holaJuan(true);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

32. Buenas
prácCcas
y
patrones
(O
cómo
podemos
aprovechar
realmente
JavaScript)

33. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrones
de
Diseño
JavaScript
-­‐
Creacionales
-­‐
Estructurales
-­‐
Comportamiento
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

34. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrones
de
Diseño
Más
usuales
CREACIONALES
ESTRUCTURALES
COMPORTAMIENTO
Factory
Module
Iterator
Builder
Facade
Memento
Prototype
Proxy
Observer
/
Listener
Singleton
Decorator
Visitor
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

35. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
ProtoNpos
-­‐
En
JavaScript,
no
implementa
clases,
sino
protoCpos
-­‐
Los
protoCpos
son
la
base
de
la
herencia
en
la
POO
-­‐
La
herencia
protospica
y
su
cadena
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

36. JavaScript:
Potenciando
la
web
desde
1995
ProtoCpos
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

37. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-­‐
y;
},
__proto__
:
a
};
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};

38. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-­‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};

39. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-­‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};

40. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-­‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};

41. JavaScript:
Potenciando
la
web
desde
1995
var
a
=
{
first
:
'Hello',
second
:
'World',
Herencia
Protohpica
sum
:
funcNon(x,
y){
return
x
+
y;
}
};
var
b
=
{
difference
:
funcNon(x,
y){
return
x
-­‐
y;
},
console.log(
a.sum(
4,
6
)
);
//
10
__proto__
:
a
console.log(
b.sum(
3,
2
)
);
//
5
};
console.log(
c.first
);
//
Hello
var
c
=
{
product
:
funcNon(x,
y){
return
x
*
y;
},
Carlos Benitez (@etnassoft)
__proto__
:
a
Enrique Amodeo (@eamodeorubio)
};

42. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
ProtoNpo
(ECMAScript
5)
var
someCar
=
{
drive:
funcNon()
{};
name:
'Mazda
3'
};
//
Use
Object.create
to
generate
a
new
car
var
anotherCar
=
Object.create(someCar);
anotherCar.name
=
'Toyota
Camry';
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

43. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

44. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
Función
autoejecutable
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

45. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
()
{
//
Private
variables
/
properCes
MyLibrary
=
(funcNon(){
var
p1,
p2;
//
Code
goes
here...
//
Private
methods
}());
funcNon
aPrivateMethod()
{
}
Función
autoejecutable
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

46. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
//
Private
variables
/
properCes
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));

47. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));

48. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));

49. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));

50. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
Patrón
Módulo
Ampliado:
submódulos
//
Namespace
for
the
library
var
MyLibrary
=
{};
var
MyLibrary
=
(
funcNon(
module
){
//
Library
definiCon
MyLibrary
=
(funcNon
(
)
{
module.foo
=
funcNon(){
//
Private
variables
/
properCes
};
var
p1,
p2;
return
module;
//
Private
methods
funcNon
aPrivateMethod()
{
}(
MyLibrary
));
}
//
Public
API
return
{
publicMethod:
funcNon
()
{
//
Code
funcCon...
}
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}(
));

51. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
MyLibrary
=
(funcNon(){
//
Public
Method
//
Code
goes
here...
funcNon
publicMethod
()
{
}());
}
//
Another
Public
Method
funcNon
anotherPublicMethod
()
{
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

52. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
Method
funcNon
publicMethod
()
{
return
{
}
publicMethod:
publicMethod,
//
Another
Public
Method
anotherPublicMethod:
anotherPublicMethod
funcNon
anotherPublicMethod
()
{
}
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

53. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
var
MyLibrary
=
(funcNon
()
{
Patrón
Módulo
Revelado
//
Private
variables
/
properCes
(Revealing
Module)
var
p1,
p2;
//
Private
methods
funcNon
aPrivateMethod()
{
}
//
Public
Method
funcNon
publicMethod
()
{
return
{
}
publicMethod:
publicMethod,
//
Another
Public
Method
anotherPublicMethod:
anotherPublicMethod
funcNon
anotherPublicMethod
()
{
}
}
//
Public
API
return
{
publicMethod:
publicMethod,
anotherPublicMethod:
anotherPublicMethod
Carlos Benitez (@etnassoft)
}
Enrique Amodeo (@eamodeorubio)
}());

54. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
This
Namespace
Proxy
var
myApp
=
{};
(James
Edwards)
(funcNon(){
//
Private
variables
/
properCes
var
foo
=
'Hello';
var
bar
=
'World';
//Private
method
var
myMessage
=
funcNon(){
this.sum
=
funcNon(
param1,
param2
){
return
foo
+
'
'
+
bar;
return
param1
+
param2;
};
};
//
Public
Method
this.sum
=
funcNon(
param1,
param2
){
return
param1
+
param2;
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
}).apply(
myApp
);

55. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
This
Namespace
Proxy
var
myApp
=
{};
(James
Edwards)
(funcNon(){
//
Private
variables
/
properCes
var
foo
=
'Hello';
var
bar
=
'World';
//Private
method
var
myMessage
=
funcNon(){
this.sum
=
funcNon(
param1,
param2
){
return
foo
+
'
'
+
bar;
return
param1
+
param2;
};
};
//
Public
Method
this.sum
=
funcNon(
param1,
param2
){
return
param1
+
param2;
};
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)
}).apply(
myApp
);

56. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
};
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

57. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Enlazados
por
};
la
Closure
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

58. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Pero
estos
};
también
//.....
(y
no
se
usan)
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

59. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
funcNon(){
alert(msg);
};
Pero
estos
};
también
(y
no
se
usan)
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
✖ Referencias
circulares
✖ Memoria
✖ Confusión
Carlos Benitez (@etnassoft)
✖ Resolución
referencias
Enrique Amodeo (@eamodeorubio)

60. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.newNoCfier
=
funcNon(msg){
return
funcNon(){
alert(msg);
}
};
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
ns.newNoCfier(msg);
};
//.....
ns.convertToFancyBtn('btn1',
'Hola
mundo');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

61. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.newNoCfier
=
funcNon(msg){
 Control
de
la
return
funcNon(){
closure
alert(msg);
 ReuClizable
}
};
ns.convertToFancyBtn
=
funcNon(fancyBtnId,
msg){
var
myBumon
=
document.getElementById(fancyBtnId);
myBu}on.onclick
=
ns.newNoCfier(msg);
};
//.....
 Sencillo
y
ns.convertToFancyBtn('btn1',
'Hola
mundo');
legible
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

62. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

63. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

64. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
FuncNon
Factory
ns.bindFuncConToObject
=
funcNon(f,
obj){
(“this”
Binding)
if
(typeof(f)
!=
'funcNon')
return
obj;
return
funcNon(){
f.apply(obj,
arguments);
}
};
//.....
submitBtn.onclick
=
ns.bindFuncConToObject(
controller.checkForm
,
controller);
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

65. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
ns.fadeOut=funcNon(trigger,
Nme,
selector)
{
//
..
Some
visual
FX
code
};
//...
ns.fadeOut('onclick',
200,
'coolForm');
ns.fadeOut('onclick',
200,
'warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

66. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
ns.fadeOut=funcNon(trigger,
Nme,
selector)
{
//
..
Some
visual
FX
code
};
//...
ns.fadeOut('onclick',
200,
'coolForm');
ns.fadeOut('onclick',
200,
'warningMsg');
✖ RepeCCvo
y
laborioso
✖ Fácil
equivocarnos
✖ Di~cil
de
mantener
✖ No
es
legible
(intent)
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

67. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

68. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
Argumentos
return
funcNon(){
transformados
en
return
fn.apply(this,
fixedArgs.concat(
array
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

69. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

70. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
Array.prototype.slice.call(arguments)));
};
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

71. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
¡
Curry
!
FuncCon.prototype.curry
=
funcNon(){
(John
Resig)
var
fn
=
this;
var
fixedArgs
=
Array.prototype.slice.call(arguments);
return
funcNon(){
return
fn.apply(this,
fixedArgs.concat(
 ReuClizable
Array.prototype.slice.call(arguments)));
 legible
(intent)
};
 Flexible
};
//...
ns.fastFadeOutWhenClicked=ns.fadeOut.curry('onclick',
200);
//..
ns.fastFadeOutWhenClicked('coolForm');
ns.fastFadeOutWhenClicked('warningMsg');
Carlos Benitez (@etnassoft)
Enrique Amodeo (@eamodeorubio)

72. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
this.registrarSubscriptor
=
funcNon(subscriptor){//...
};
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)

73. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
this.registrarSubscriptor
=
funcNon(subscriptor){//...
 Datos
privados
};
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)

74. JavaScript:
Potenciando
la
web
desde
1995
Buenas
prácCcas
y
patrones
OO
sin
ns.Evento
=
funcNon(nombre){
var
id
=
nombre
||
'<anonymous>';
prototype:
var
subscriptores
=
[];
Encapsulación
var
subscriptorYaRegistrado
=
funcNon(subscriptor){//...
};
var
noNficarSubscriptor
=
funcNon(evento,
subscriptor){//...
};
 Métodos
this.registrarSubscriptor
=
funcNon(subscriptor){//...
};
privados
this.borrarSubscriptor
=
funcNon(subscriptor){//...
};
this.noNficar
=
funcNon(callback){//...
};
this.destruir
=
funcNon(){//...
};
};
//..
Carlos Benitez (@etnassoft)
var
onClick
=
new
ns.Evento('onclick');
Enrique Amodeo (@eamodeorubio)