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

Introducción al lenguaje



CaracterísCcas de lenguaje JavaScript:

-‐ Interpretado (no compilado) -‐ Lenguaje de ejecución en cliente -‐ Tipado blando (no-‐Cpado) -‐ Orientado a objetos



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.




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




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



Herramientas para medir la calidad del soZware




Herramientas para medir la calidad del soZware

Douglas Crockford Developers





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.



Tipado dinámico y coerción de datos

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.

Coerción de datos interna




Orientado a objetos

-‐ Alto nivel de abstracción -‐ No implementa el concepto de clases -‐ Se fundamenta en los protoCpos



Objetos en JavaScript

Tipos de EnCdades JavaScript

PRIMITIVAS -‐ undefined -‐ null -‐ booleanos -‐ cadenas -‐ números

OBJETOS

-‐ Todo lo demás





OBJETOS

-‐ Todo lo demás constructores






OBJETOS

-‐ Todo lo demás constructores

Boolean Number String





PRIMITIVAS

-‐ undefined -‐ null

OBJETOS

-‐ Todo lo demás


El JavaScript me confunde (O por qué JavaScript no 2ene nada que ver con Java)



El JavaScript me confunde

-‐ ECMAScript: una especificación con muchos sabores

-‐ JavaScript: Netscape Corp. -‐ AcConScript: Macromedia -‐ JScript: Internet Explorer -‐ V8: Google Chrome -‐ Mozilla's JavaScript: Firefox -‐ Rhino (Java) -‐ KJS (KDE): Conqueror -‐ JavaScriptCore: Apple Inc.

TraceMonkey

SpiderMonkey



El JavaScript me confunde Objetos abiertos var treintaYDos = new Number(32);

treintaYDos.duplicar = funcNon(){ return 2 * this; };

alert(treintaYDos.duplicar());



El JavaScript me confunde Objetos abiertos var pepe = " Pepe\t\n";

String.prototype.trim = funcNon(){ return this.replace(/^\s+/g, '').replace(/\s+$/g, ''); };

alert(pepe.trim());



El JavaScript me confunde Scopes var defaultConfiguraNon = {

'maxLives': 3, 'level': 'intermediate' };

var play = funcNon(gameConfig){ var configuraNon = gameConfig || defaultConfiguraNon; score = 0; // .. do some play };






Global






Local



El JavaScript me confunde Scopes var ratePlayer = funcNon(score){

if(score == 0){ var isALoser = true; } return isALoser;

};

No problem !



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);



El JavaScript me confunde Closures SCOPE GLOBAL

…..

(CLOSURE) crearSaludo

“mensaje”

“saludo”

“nombre”

(LOCAL) saludo “porConsola”

“mensajeSaludo”




…..


“mensaje”

“saludo”

“nombre”


“mensajeSaludo”

Orden de búsqueda




…..


“mensaje”

“saludo”

“nombre”


“mensajeSaludo”

Orden de búsqueda

Cuidado con: ✖ Excesivo tamaño de scope ✖ Excesivo numero de scopes anidados



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);

Buenas prácCcas y patrones (O cómo podemos aprovechar realmente JavaScript)



Buenas prácCcas y patrones

Patrones de Diseño JavaScript

-‐ Creacionales -‐ Estructurales -‐ Comportamiento




Patrones de Diseño Más usuales

CREACIONALES ESTRUCTURALES COMPORTAMIENTO

Factory Module Iterator

Builder Facade Memento

Prototype Proxy Observer / Listener

Singleton Decorator Visitor



-‐ En JavaScript, no implementa clases, sino protoCpos -‐ Los protoCpos son la base de la herencia en la POO -‐ La herencia protospica y su cadena

ProtoNpos




ProtoCpos



console.log( a.sum( 4, 6 ) ); // 10 console.log( b.sum( 3, 2 ) ); // 5 console.log( c.first ); // Hello

Herencia Protohpica


return x + y; }




return x + y; }





console.log( a.sum( 4, 6 ) ); // 10 console.log( b.sum( 3, 2 ) ); // 5 console.log( c.first ); // Hello

Herencia Protohpica



var someCar = { drive: funcNon() {}; name: 'Mazda 3' };

// Use Object.create to generate a new car var anotherCar = Object.create(someCar); anotherCar.name = 'Toyota Camry';

Patrón ProtoNpo (ECMAScript 5)




Buenas prácCcas y patrones Patrón Módulo // 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...

} } }());

MyLibrary = (funcNon(){ // Code goes here... }());



Buenas prácCcas y patrones Patrón Módulo // Namespace for the library

var MyLibrary = {};

// Library definiCon MyLibrary = (funcNon () { // Private variables / properCes var p1, p2;



} } }());


Función autoejecutable



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;



} } }( ));



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;



} } }( ));

var MyLibrary = ( funcNon( module ){

module.foo = funcNon(){ };

return module;

}( MyLibrary ));



Buenas prácCcas y patrones Patrón Módulo Revelado (Revealing Module)

var MyLibrary = (funcNon () { // Private variables / properCes var p1, p2;


// Public Method funcNon publicMethod () { }

// Another Public Method funcNon anotherPublicMethod () { }

// Public API return { publicMethod: publicMethod, anotherPublicMethod: anotherPublicMethod } }());










return { publicMethod: publicMethod, anotherPublicMethod: anotherPublicMethod }



Buenas prácCcas y patrones This Namespace Proxy (James Edwards)

var myApp = {}; (funcNon(){ // Private variables / properCes var foo = 'Hello'; var bar = 'World';

//Private method var myMessage = funcNon(){ return foo + ' ' + bar; };

// Public Method this.sum = funcNon( param1, param2 ){ return param1 + param2; };

}).apply( myApp );

this.sum = funcNon( param1, param2 ){ return param1 + param2; };



Buenas prácCcas y patrones This Namespace Proxy (James Edwards)

this.sum = funcNon( param1, param2 ){ return param1 + param2; };

var myApp = {}; (funcNon(){ // Private variables / properCes var foo = 'Hello'; var bar = 'World';

//Private method var myMessage = funcNon(){ return foo + ' ' + bar; };

// Public Method this.sum = funcNon( param1, param2 ){ return param1 + param2; };

}).apply( myApp );



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');





Enlazados por la Closure





Pero estos también

(y no se usan)





Pero estos también

(y no se usan)

✖ Referencias circulares ✖ Memoria ✖ Confusión ✖ Resolución referencias



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');



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');

 Control de la closure

 ReuClizable

 Sencillo y legible



Buenas prácCcas y patrones FuncNon Factory (“this” Binding)

ns.bindFuncConToObject = funcNon(f, obj){ if (typeof(f) != 'funcNon') return obj; return funcNon(){ f.apply(obj, arguments); } }; //..... submitBtn.onclick = ns.bindFuncConToObject(

controller.checkForm , controller);



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');



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)



Buenas prácCcas y patrones ¡ Curry ! (John Resig)

FuncCon.prototype.curry = funcNon(){ 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');






Argumentos transformados en

array






 ReuClizable  legible (intent)

 Flexible



Buenas prácCcas y patrones OO sin prototype: Encapsulación

ns.Evento = funcNon(nombre){ var id = nombre || '<anonymous>'; var subscriptores = []; var subscriptorYaRegistrado = funcNon(subscriptor){//... }; var noNficarSubscriptor = funcNon(evento, subscriptor){//... }; this.registrarSubscriptor = funcNon(subscriptor){//... }; this.borrarSubscriptor = funcNon(subscriptor){//... }; this.noNficar = funcNon(callback){//... }; this.destruir = funcNon(){//... }; }; //.. var onClick = new ns.Evento('onclick');





 Datos privados





 Métodos privados





 Métodos públicos




ns.Evento = (funcNon(){ var eventos = []; var noNficarSubscriptor = funcNon(evento, subscriptor){//... }; 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();





 Datos privados estáCcos





 Metodos privados estáCcos





 Metodos publicos estáCcos



Buenas prácCcas y patrones OO sin prototype: Tipos parametrizables

ns.Evento = funcNon(noNficarSubscriptor){ var eventos = []; 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');

AJAX, HIJAX, SPI y otras cosas malas (O cómo mimar un poco a los usuarios)



AJAX, HIJAX, SPI y otras cosas malas

Full Post-‐back




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




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)




ParNal Rendering




ParNal Rendering

 AJAX al rescate !




ParNal Rendering es sólo un “apaño”

 Menos espera  Menor ancho de banda

✖ Lógica de presentación en servidor ✖ Generación HTML (pero menos) ✖ Excesiva navegación ✖ Detección rápida de errores ✖ Descarga y navegación mezclada ✖ GesCón de la sesión ✖ Escalabilidad




Single Page Interface BR

OWSER Control Modelo

Vista

Aplicación cliente

X-‐Browser Framework

AJAX DOM JSON/HTTP

Descarga






Vista

Aplicación cliente


AJAX DOM JSON/HTTP

Descarga

 Procesos independientes






Vista

Aplicación cliente


AJAX DOM

 Logica completa de presentación en cliente

 Validaciones en cliente  Control de navegación en cliente

 AcCvar/DesacCvar widgets  Generación DOM en cliente (UI)






Vista

Aplicación cliente


AJAX DOM

 Aislar fabricante browser  UClidades

 Widget Toolkits  jQuery, DOJO, Mootols, etc.






Vista

Aplicación cliente


AJAX DOM JSON/HTTP

 Llamadas a servidor sólo cuando es necesario

 En segundo plano  Validación (otra vez)  Reglas de negocio

 Persistencia




Webtop

BROWSER

Aplicación X Instancia 1


AJAX DOM

Webtop Framework

Aplicación Y Instancia 1

Aplicación Z Instancia 1





Webtop

BROWSER



AJAX DOM

Webtop Framework




 Varias aplicaciones a la vez en la misma página

 Cada una se descarga por separado

 Descarga dinámica bajo demanda

 Varias instancias de la misma aplicación en la misma página




Webtop

BROWSER



AJAX DOM

Webtop Framework




 Es un “contenedor” de aplicaciones

 Descarga de aplicaciones  Ciclo de vida

 Interacción entre aplicaciones  Servicios comunes  Desktop Frame (UI)




Webtop

BROWSER



AJAX DOM

Webtop Framework




 No hay que cambiar de pagina  Aplicacion se descarga una sola

vez  Cooperacion entre aplicaciones  Entorno empresarial (focus)




HIJAX




HIJAX

Ouch!




HIJAX <a href="javascript:window.open('help.html')">

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>




HIJAX <a href="help.html" class="help">Ayuda !</a>

jQuery(funcNon($){ $('a.help').bind('click', funcNon(){ window.open(this.href); return false; }); });

Markup

Behaviour




HIJAX <form id=”signupForm" acCon="/doSignup.do" method="post"> <input type="text" name="username" id="username" /> <input type="password" name="pwd" id="pwd" /> <input type="submit" value="login" /> </form>

jQuery(funcNon($){ $(’#signupForm').submit(funcNon(){ return controller.checkPwdStrength(this); }); });

Markup

Behaviour




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

El futuro de JavaScript (Harmony, Librerías y Servidores)




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%



JavaScript a día de hoy

Lenguajes de Programación 2010

ECMAScript 3.1 vs

ECMAScript 4

Harmony


El sueño de Brendan Eich

-‐ Estructuras OO más puras -‐ Clases -‐ Estandarización de facto


Las bibliotecas y el éxito jQuery JavaScript: Potenciando la web desde 1995


Librerías JavaScript JavaScript DistribuNon in Top Million Sites

45%

7.2%

13%

9.2%


Distribución de Bibliotecas

Proyecto GNOME

-‐ Gjs: Spidermonkey Engine -‐ Seed: WebKit JavaScriptCore

/* 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 * a nice tweak want Promise.get to be an async call as defined * 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; };

JavaScript en el escritorio JavaScript: Potenciando la web desde 1995


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


Límites del lenguaje a día de hoy


Soluciones adoptadas

-‐ Gran dependencia de los Patrones de Diseño -‐ Gran dependencia de bibliotecas: jQuery -‐ JSAN como repositorio general de dependencias

Incompatible!

JS




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





MUCHAS GRACIAS!!!!

Enrique J. Amodeo Rubio

Twi}er: @eamodeorubio

Blog: h}p://eamodeorubio.wordpress.com

Carlos Benítez

Twi}er: @EtnasSoZ

Blog: h}p://www.etnassoZ.com

javascript: potenciando la web desde 1995

Technology