Adwe Potenciando la web Desde 1995
Upcoming SlideShare
Loading in...5
×
 

Adwe Potenciando la web Desde 1995

on

  • 1,032 views

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 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.

Statistics

Views

Total Views
1,032
Views on SlideShare
679
Embed Views
353

Actions

Likes
0
Downloads
13
Comments
0

3 Embeds 353

http://www.etnassoft.com 343
http://openlibra.dev 8
http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Adwe Potenciando la web Desde 1995 Adwe Potenciando la web Desde 1995 Presentation Transcript

  • JavaScript:  Potenciando  la  web  desde  1995   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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)
  • Introducción  al  lenguaje  
  • 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)
  • 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)
  • 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)
  • 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)
  • JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Herramientas  para  medir  la  calidad  del  soZware   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Herramientas  para  medir  la  calidad  del  soZware   Douglas  Crockford   Developers   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • El  JavaScript  me  confunde  (O  por  qué  JavaScript  no  2ene  nada  que  ver  con  Java)  
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • Buenas  prácCcas  y  patrones  (O  cómo  podemos  aprovechar  realmente  JavaScript)  
  • 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)
  • 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)
  • 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)
  • JavaScript:  Potenciando  la  web  desde  1995   ProtoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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) };  
  • 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) };  
  • 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) };  
  • 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) };  
  • 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) };  
  • 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)
  • 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) }());  
  • 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) }());  
  • 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) }());  
  • 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) }(  ));  
  • 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) }(  ));  
  • 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) }(  ));  
  • 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) }(  ));  
  • 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) }(  ));  
  • 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) }());  
  • 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) }());  
  • 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) }());  
  • 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  );  
  • 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  );  
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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)
  • 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){//...          };   públicos          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento(onclick); Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  OO  sin   ns.Evento  =  (funcNon(){          var  eventos  =  [];  prototype:          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...  Encapsulación          };          var  fn=funcNon(nombre){                  eventos.push(this);                  //  ...  COMO  ANTES  ...          };          fn.destruirTodosLosEventos  =  funcNon(){//...          };          return  fn;   })();   //..   var  onClick  =  new  ns.Evento(onclick);   var  onBlur  =  new  ns.Evento(onblur);   //..   ns.Evento.destruirTodosLosEventos();   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  OO  sin   ns.Evento  =  (funcNon(){          var  eventos  =  [];  prototype:          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...  Encapsulación          };          var  fn=funcNon(nombre){                  eventos.push(this);                  //  ...  COMO  ANTES  ...    Datos          };   privados          fn.destruirTodosLosEventos  =  funcNon(){//...   estáCcos          };          return  fn;   })();   //..   var  onClick  =  new  ns.Evento(onclick);   var  onBlur  =  new  ns.Evento(onblur);   //..   ns.Evento.destruirTodosLosEventos();   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  OO  sin   ns.Evento  =  (funcNon(){          var  eventos  =  [];  prototype:          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...  Encapsulación          };          var  fn=funcNon(nombre){                  eventos.push(this);                  //  ...  COMO  ANTES  ...   Metodos          };   privados          fn.destruirTodosLosEventos  =  funcNon(){//...   estáCcos          };          return  fn;   })();   //..   var  onClick  =  new  ns.Evento(onclick);   var  onBlur  =  new  ns.Evento(onblur);   //..   ns.Evento.destruirTodosLosEventos();   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  OO  sin   ns.Evento  =  (funcNon(){          var  eventos  =  [];  prototype:          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...  Encapsulación          };          var  fn=funcNon(nombre){                  eventos.push(this);                  //  ...  COMO  ANTES  ...   Metodos          };   publicos          fn.destruirTodosLosEventos  =  funcNon(){//...   estáCcos          };          return  fn;   })();   //..   var  onClick  =  new  ns.Evento(onclick);   var  onBlur  =  new  ns.Evento(onblur);   //..   ns.Evento.destruirTodosLosEventos();   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  OO  sin   ns.Evento  =  funcNon(noNficarSubscriptor){  prototype:  Tipos          var  eventos  =  [];  parametrizables          var  fn=funcNon(nombre){//  ...          };          fn.destruirTodosLosEventos  =  funcNon(){//...          };          return  fn;   };   ns.EventoDirecto  =  ns.Evento(noCficadorSimple);   ns.EventoDiferido  =  ns.Evento(noCficadorSegundoPlano);   ns.EventoRemoto  =  ns.Evento(noCficadorAJAX);   //..   var  onClickRemoto  =  new  ns.EventoRemoto(onclick);   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • AJAX,  HIJAX,  SPI  y  otras  cosas  malas   (O  cómo  mimar  un  poco  a  los  usuarios)  
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Full  Post-­‐back   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Full  Post-­‐back  (UX)  ✖ Latencia  ✖ Ancho  de  banda  ✖ Lógica  de  presentación  en  servidor  ✖ Generación  HTML  ✖ Excesiva  navegación  ✖ Detección  rápida  de  errores   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Full  Post-­‐back  (UX)  ✖ Latencia  ✖ Ancho  de  banda  ✖ Lógica  de  presentación  en  servidor  ✖ Generación  HTML  ✖ Excesiva  navegación  ✖ Detección  rápida  de  errores   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Full  Post-­‐back  (Ingeniería  Sozware)  ✖ Descarga  y  navegación  mezclada  ✖ Lógica  de  presentación  en  servidor  ✖ GesCón  de  la  sesión  (cookies)  ✖ Escalabilidad  (cloud)   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Full  Post-­‐back  (Ingeniería  Sozware)  ✖ Descarga  y  navegación  mezclada  ✖ Lógica  de  presentación  en  servidor  ✖ GesCón  de  la  sesión  (cookies)  ✖ Escalabilidad  (cloud)   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  ParNal  Rendering   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  ParNal  Rendering    AJAX  al   rescate  !   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  ParNal  Rendering  es  sólo  un  “apaño”   ✖ Lógica  de  presentación  en   servidor   ✖ Generación  HTML  (pero  menos)   ✖ Excesiva  navegación   Menos  espera   ✖ Detección  rápida  de  errores   Menor  ancho  de  banda   ✖ Descarga  y  navegación   mezclada   ✖ GesCón  de  la  sesión   ✖ Escalabilidad   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Single  Page  Interface   Aplicación  cliente   Vista   Descarga   BROWSER   Control   Modelo   X-­‐Browser  Framework   DOM   AJAX   JSON/HTTP   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Single  Page  Interface   Aplicación  cliente   Vista   Descarga   BROWSER   Control   Modelo    Procesos   independientes   X-­‐Browser  Framework   DOM   AJAX   JSON/HTTP   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Single  Page  Interface    Logica  completa  de  presentación  en   Aplicación  cliente   cliente   Vista    Validaciones  en  cliente    Control  de  navegación  en  cliente   BROWSER   Control   Modelo    AcCvar/DesacCvar  widgets    Generación  DOM  en  cliente  (UI)   X-­‐Browser  Framework   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Single  Page  Interface   Aplicación  cliente   Vista   BROWSER   Control   Modelo    Aislar  fabricante  browser   X-­‐Browser  Framework    UClidades    Widget  Toolkits    jQuery,  DOJO,  Mootols,  etc.   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas    Llamadas  a  servidor  sólo  cuando  Single  Page  Interface   es  necesario    En  segundo  plano   Aplicación  cliente    Validación  (otra  vez)   Vista    Reglas  de  negocio    Persistencia   BROWSER   Control   Modelo   X-­‐Browser  Framework   DOM   AJAX   JSON/HTTP   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Webtop   Aplicación  X   Aplicación  Y   Instancia  1   Instancia  1   BROWSER   Aplicación  Z   Aplicación  X   Instancia  1   Instancia  2   Webtop  Framework   X-­‐Browser  Framework   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Webtop   Aplicación  X   Aplicación  Y   Instancia  1   Instancia  1    Varias  aplicaciones  a  la  vez   en  la  misma  página   BROWSER   Aplicación  Z   Aplicación  X    Cada  una  se  descarga  por   Instancia  1   Instancia  2   separado    Descarga  dinámica  bajo   Webtop  Framework   demanda   X-­‐Browser  Framework    Varias  instancias  de  la  misma   aplicación  en  la  misma  página   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Webtop   Aplicación  X   Aplicación  Y   Instancia  1   Instancia  1    Es  un  “contenedor”  de   aplicaciones   BROWSER   Aplicación  Z   Aplicación  X   Instancia  1   Instancia  2    Descarga  de  aplicaciones    Ciclo  de  vida   Webtop  Framework    Interacción  entre  aplicaciones    Servicios  comunes   X-­‐Browser  Framework    Desktop  Frame  (UI)   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  Webtop   Aplicación  X   Aplicación  Y   Instancia  1   Instancia  1    No  hay  que  cambiar  de  pagina   BROWSER   Aplicación  Z   Aplicación  X   Instancia  1   Instancia  2    Aplicacion  se  descarga  una  sola   vez   Webtop  Framework    Cooperacion  entre  aplicaciones    Entorno  empresarial  (focus)   X-­‐Browser  Framework   DOM   AJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  HIJAX   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  HIJAX   Ouch!   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas   <a  href="javascript:window.open(help.html)">  HIJAX      Ayuda  !   </a>   <a    href="#"      onclick="window.open(help.html);  return  false;">      Ayuda  !   </a>   <a    href="help.html"      onclick="window.open(this.getAmribute(href));  return  false;">      Ayuda  !   </a>   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas   <a  href="javascript:window.open(help.html)">  HIJAX      Ayuda  !   </a>   <a    href="#"      onclick="window.open(help.html);  return  false;">      Ayuda  !   </a>   <a    href="help.html"      onclick="window.open(this.getAmribute(href));  return  false;">      Ayuda  !   </a>   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas   <a  href="help.html"  class="help">Ayuda  !</a>  HIJAX   Markup   Behaviour   jQuery(funcNon($){          $(a.help).bind(click,  funcNon(){                  window.open(this.href);                  return  false;          });   });   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas   <form  id=”signupForm"  acCon="/doSignup.do"  method="post">  HIJAX          <input  type="text"  name="username"  id="username"  />          <input  type="password"  name="pwd"  id="pwd"  />          <input  type="submit"  value="login"  />   </form>   Markup   Behaviour   jQuery(funcNon($){          $(’#signupForm).submit(funcNon(){                  return  controller.checkPwdStrength(this);          });   });   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   AJAX,  HIJAX,  SPI  y  otras  cosas  malas  HIJAX    Construye  tu  aplicacion  como  si  fuera  tradicional  (sin  JS)    Cada  contenido  en  su  propia  página    Usa  selectores  para  añadir  JS  ( jQuery)    Separación  CSS+HTML+JS    Degradación  progresiva  de  funcionalidad    SEO   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   El  futuro  de  JavaScript  (Harmony,  Librerías  y  Servidores)  
  • JavaScript:  Potenciando  la  web  desde  1995   JavaScript  a  día  de  hoy  Lenguajes  de  Programación  2010   1-­‐  Java:  +52%   2-­‐  C:  +11%   3-­‐  C++:  -­‐13%   4-­‐  C#:  +52%   5-­‐  JavaScript:  +76%   6-­‐  Perl:  +33%   7-­‐  PHP:  +58%   8-­‐  Visual  Basic:  +112%   9-­‐  Python:  +69%   10-­‐  Ruby:  +78%   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   JavaScript  a  día  de  hoy  Lenguajes  de  Programación  2010   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   JavaScript  a  día  de  hoy  Lenguajes  de  Programación  2010   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   El  sueño  de  Brendan  Eich   ECMAScript  3.1     vs     ECMAScript  4   Harmony  -­‐  Estructuras  OO  más  puras  -­‐  Clases  -­‐  Estandarización  de  facto   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Las  bibliotecas  y  el  éxito  jQuery   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Distribución  de  Bibliotecas  Librerías  JavaScript   Sites   JavaScript  DistribuNon  in  Top  Million   45% 7.2% 13% 9.2%
  • JavaScript:  Potenciando  la  web  desde  1995   JavaScript  en  el  escritorio  Proyecto  GNOME   /*  This  is  publicly  exported  from  async.js,  but  is  defined  here  to    *  avoid  a  circular  dependency.    *    *  The  issue  is  that  we  want  async.js  to  build  on  Promise,  but  as  -­‐  Gjs:  Spidermonkey  Engine    *  a  nice  tweak  want  Promise.get  to  be  an  async  call  as  defined  -­‐  Seed:  WebKit  JavaScriptCore    *  in  async.js    */   let  _asyncFunc  =  funcNon(f)  {          /*  Create  a  task  from  an  Asynchronous  FuncCon,  providing  this              *  as  the  first  argument.  */          f.asyncCall  =  funcNon()  {                  let  params  =  Array.slice(arguments);                  let  me  =  params[0];                  params[0]  =  f;                  return  _asyncCall.apply(me,  params);          };          return  f;   };   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Límites  del  lenguaje  a  día  de  hoy  Qué  se  echa  en  falta  en  JavaScript   -­‐  No  existe  un  sistema  de  módulos  naCvo.   -­‐  No  posee  APIs  estándares  (file  system,  IO,  binarios...)   -­‐  No  existen  interfaces  estándares  para  BBDD  o  servidores  Web   -­‐  No  existe  una  gesCón  de  paquetes  que  controle  dependencias   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Límites  del  lenguaje  a  día  de  hoy   Soluciones  adoptadas   -­‐  Gran  dependencia  de  los  Patrones  de  Diseño   Incompatible! -­‐  Gran  dependencia  de  bibliotecas:  jQuery   -­‐  JSAN  como  repositorio  general  de  dependencias   JS   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   Límites  del  lenguaje  a  día  de  hoy   Propuesta  de  Estándar:  CommonJS   -­‐  Módulos   -­‐  Cadenas  binarias   -­‐  Codificación  de  caracteres   -­‐  Interfaz  para  sistema  de  ficheros  (file  system)   -­‐  Sockets   -­‐  Tests  Unitarios:  afirmaciones,  ejecutado  y  reportes   -­‐  Interfaz  Web  Server:  JSGI   -­‐  GesCón  local  y  remota  de  paquetes  dependientes   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • JavaScript:  Potenciando  la  web  desde  1995   MUCHAS GRACIAS!!!! Carlos  Benítez   Enrique  J.  Amodeo  Rubio  Twi}er:   Twi}er:   @EtnasSoZ   @eamodeorubio  Blog:   Blog:   h}p://www.etnassoZ.com   h}p://eamodeorubio.wordpress.com