Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript

  • 1,756 views
Uploaded on

JavaScript las partes feas y geniales, y patrones

JavaScript las partes feas y geniales, y patrones

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,756
On Slideshare
1,382
From Embeds
374
Number of Embeds
2

Actions

Shares
Downloads
44
Comments
0
Likes
4

Embeds 374

https://twitter.com 290
http://www.slideee.com 84

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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*
  • 96. Sfotipy!
  • 97. Sfotipy! • Agregar jQuery • Crear nuestro Modelo • Crear nuestra Vista • Crear nuestro Controlador • Observables!
  • 98. Gracias!!