JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                       Carlos Benitez (@etnassoft)	   ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Ind...
Introducción	  al	  lenguaje	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	  CaracterísCcas	  de	  lenguaje	  JavaScript:	       -­‐	  Interpreta...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                    Ca...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Car...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                            Tipado	  dinámico	  y	  co...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                  Cara...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Objetos	  en	  Jav...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                    Ob...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Objetos	  en	  Jav...
El	  JavaScript	  me	  confunde	  (O	  por	  qué	  JavaScript	  no	  2ene	  nada	  que	  ver	  con	  Java)	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                               El	  Ja...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
Buenas	  prácCcas	  y	  patrones	  (O	  cómo	  podemos	  aprovechar	  realmente	  JavaScript)	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                               Buenas	  prácCcas	  y	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                       Buenas	  prácCc...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Bue...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                          var	  a	  =	  {	            ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Buenas	  prácCcas	...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                Buenas...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                Buenas...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Adwe Potenciando la web Desde 1995
Upcoming SlideShare
Loading in...5
×

Adwe Potenciando la web Desde 1995

905
-1

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
905
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adwe Potenciando la web Desde 1995

  1. 1. JavaScript:  Potenciando  la  web  desde  1995   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  2. 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. 3. Introducción  al  lenguaje  
  4. 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. 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. 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. 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. 8. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Herramientas  para  medir  la  calidad  del  soZware   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. El  JavaScript  me  confunde  (O  por  qué  JavaScript  no  2ene  nada  que  ver  con  Java)  
  19. 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   -­‐  Mozillas  JavaScript:  Firefox   -­‐  Rhino  (Java)   TraceMonkey   -­‐  KJS  (KDE):  Conqueror   -­‐  JavaScriptCore:  Apple  Inc.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Buenas  prácCcas  y  patrones  (O  cómo  podemos  aprovechar  realmente  JavaScript)  
  33. 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. 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. 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. 36. JavaScript:  Potenciando  la  web  desde  1995   ProtoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  37. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×