JavaScript las partes feas y geniales, y patrones

1. Dominando
JavaScript
por David Avellaneda
@davsket

2. @davsket?

3. acerca de mi
• Ingeniero de Sistemas…
• Cofundador de monoku y monomi.co
• Co-organizador de BogotáJS
• Co-organizador de JSConf.co

4. Agenda

5. Agenda
• JavaScript: Las partes buenas
• JavaScript Orientado a Objetos (OO)
• Closures, Mixins, Objetos, Prototipos
• Patrones de Diseño y MV*
• APIs Rest, AJAX y Sockets (*)

6. JavaScript:
Las Partes Buenas

7. Recomendación:
Compren el Libro

8. Las Partes Buenas?

9. JavaScript: The Good Parts
80% Intro a JS
2% Hermosas características
10% Feas características
10% Malas partes

10. Las Partes Feas

11. Scope

12. var a = 5, b = 10
!
function noGlobal( a ){
var b = 3
a = a*2
return a * b
}
!
noGlobal( 1 ) // 6
a // 5
b // 3

13. typeof

14. typeof new Number(8) == "object"
typeof 8 == "number"

15. parseInt

16. parseInt
¡cuidado con los legacy browsers!

17. parseInt( "08" ) // 0
parseInt( "08", 10 ) // 8
!
Chrome ya no...

18. Números Flotantes

19. Gracias a "Binary Floating-Point
Arithmetic (IEEE 754)"
!
0.1 + 0.2 != 0.3

20. Valores Falsos
(abstract equality comparison)

21. '' == '0' // false
0 == '' // true
0 == '0' // true
!
false == 'false' // false
false == '0' // true
!
false == undefined // false
false == null // false
null == undefined // true
!
' trn ' == 0 // true

22. '' === '0' // false
0 === '' // false
0 === '0' // false
!
false === 'false' // false
false === '0' // false
!
false === undefined // false
false === null // false
null === undefined // false
!
' trn ' === 0 // false

23. hasOwnProperty

24. Cualquiera puede modificar el
prototipo y generarte problemas!

25. with

26. var a = { p: 0 }, c
!
with( a ){
p = 3
c = 5
}
!
a.p // 3
a.c // undefined
c // 5

27. eval

28. No es tan maaaalo como lo pintan!

29. eval("myValue = myObject." + myKey + ";");

30. en vez de:

31. myvalue = myObject[myKey]

32. No usen eval para ejecutar código desde el
servidor u otro servicio AJAX

33. switch

34. ... fall through ..
!
va de case en case naturalmente
(requiere usar break)
valida con equivalencia simple

35. var blah = 0;
switch (blah) {
case -1:
alert('negative 1');
case 0:
alert(0)
case 1:
alert(1);
break;
case 2:
alert(2);
break;
default:
alert('default');
}

36. Doble Filo!!

37. Punto y Coma Opcional
(optional semicolon)
!
- Código más limpio -

38. Declaraciones Sin Corchetes
(block-less statements)

39. if( a ){
a.b = 3
}

40. if( a )
a.b = 3

41. if( a ){
a.b = 3
a.c = 4
}

42. if( a )
a.b = 3
a.c = 4

43. if( a ){
a.b = 3
}
a.c = 4

44. ++ --

45. var a = [1,2,3,4], i = 0
a[i++] // 1
a[++i] // 3

46. new

47. "this"

48. métodos vs funciones

49. hoisting

50. el orden de definición de variables y
funciones afecta el resultado

51. function f(){
alert( a )
a = 5
}
f()

52. function f(){
alert( a )
a = 5
}
f() // ReferenceError a is not
defined

53. function f(){
alert( a )
var a = 5
}
f()

54. function f(){
alert( a )
var a = 5
}
f() // undefined

55. function f(){
var a
alert( a )
a = 5
}
f() // undefined

56. var a = 10
!
function f(){
alert( a )
var a = 5
}
!
f()

57. var a = 10
!
function f(){
alert( a )
var a = 5
}
!
f() // undefined

58. var a = 10
!
function f(){
var a
alert( a )
a = 5
}
!
f() // undefined

59. var a = 10
!
function f(){
a = 5
alert( a )
function a(){}
}
!
f() // ?
a // ?

60. var a = 10
function f(){
a = 5
alert( a )
function a(){}
}
f() // 5
a // ?

61. var a = 10
function f(){
a = 5
alert( a )
function a(){}
}
f() // 5
a // 5 ? no... 10!!

62. The Cool Parts + Patterns

63. Prototype

64. JavaScript es
Orientado a Objetos
(OO) pero no tiene
Clases
!
JavaScript es basado
en Prototipos

65. functions con
prototype

66. function Persona( name ){
this.name = name
}
Persona.prototype.alertName = function(){
alert( this.name )
}
Persona.prototype.setAge = function( age ){
this.age = age
}
var juan = new Persona( 'juan' )

67. juan.alertName() // juan
juan.setAge( 25 )
!
Persona.prototype.sayYolo = function(){
alert(this.name + ': YOLO!')
}
!
juan.sayYolo() // juan: YOLO!

68. Object.create( proto, properties )

69. constructor

70. juan.constructor // function Persona( ...

71. __proto__
(no es standard)
(firefox, chrome, opera,
android, ie11)

72. juan.__proto__

73. Function are
first-class
objects

74. ¿first-class objects?
• se pueden asignar a variables
• se puede recibir/pasar como
argumentos
• se pueden retornar en una función
• son objetos y por lo tanto tienen
propiedades

75. Function are
first-class objects
=>
Chain
Callback
Observable
Delegation
Closure
MVC
MVVM
MV*

76. Chain

77. var o = {
i: 0,
f: function(){
++ this.i
return this
}
}
o.f().f().f()
o.i // 3

78. $('#myelem')
.hide()
.css({..})
.data(..)
.fadeIn(..)

79. Callback ( Async )
"las funciones pueden ser pasadas
como argumentos"

80. Es como una sala de espera en
la que dependiendo del turno
tu puedes ser llamado

81. function caller( cb ){
setTimeout(function(){
cb( new Date() )
}, 1000)
}
caller(function( now ){
alert( now )
})

82. $(document).on('click', click)
function click(){
alert('auch!')
}

83. $.ajax({
url: ".",
type: "get"
})
.done(function(){
console.log("async!")
})
console.log("sync")

84. Observable
+ "y Las funciones pueden
asignarse a variables"

85. Este patrón permite
que diferentes
interesados se
suscriban a un
objeto escuchando
eventos

86. GIST!

87. Delegación

88. Observar cientos de
elementos con cientos de
eventListeners no es
recomendable

89. Aplica en listados

90. document.getElementById("parent-list")
.addEventListener("click",function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("List item ",
e.target.id.replace("post-")," was clicked!");
}
});

91. $('#padre').on('click', '.hijo', callback)

92. Closures

93. se reduce a:
invocación inmediata de
funciones

94. (function(){
var hidden = 8
}())
!
console.log( typeof hidden )
// undefined

95. MVC / MVVM / MV*

97. Sfotipy!

98. Sfotipy!
• Agregar jQuery
• Crear nuestro Modelo
• Crear nuestra Vista
• Crear nuestro Controlador
• Observables!

99. Gracias!!