• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript: potenciando la web desde 1995
 

Javascript: potenciando la web desde 1995

on

  • 2,007 views

Presentación de Carlos Benítez @etnassoft y Enrique Amodeo @eamodeorubio sobre Javascript para ADWE Madrid

Presentación de Carlos Benítez @etnassoft y Enrique Amodeo @eamodeorubio sobre Javascript para ADWE Madrid

Statistics

Views

Total Views
2,007
Views on SlideShare
1,600
Embed Views
407

Actions

Likes
3
Downloads
17
Comments
0

4 Embeds 407

http://www.adwe.es 399
http://paper.li 4
http://www.dinamiclab.com 3
url_unknown 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

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

    Javascript: potenciando la web desde 1995 Javascript: 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