Addy Osmani es probablemente uno de los analistas más reconocidos a la hora de programar aplicaciones web utilizando tecnologías de frontend como javascript.
En esta charla que impartió en el 2011 jQuery Summit, explica cómo plantear la arquitectura de una aplicación javascript que escale sin que se convierta en un mounstro difícil de mantener, utilizando soluciones como jquery y backbone.js.
$("#all_checks").click(function (){
$("INPUT[type='checkbox']").attr('checked', $("#all_checks").is(':checked'));
});
mola no?
Uno de los principales problemas que tienen los desarrolladores web a la hora de desarrollar aplicaciones RIA con ajax, es la limitación de javascript para cumplir la política de mismo origen.
Teóricamente, debido a esta política, JavaScript no puede lazar peticiones o consumir datos entre dominios distintos. Digo teóricamente, porque esto puede conseguirse con algunas técnicas de hacking como csshttprequest.
Para no tenir que recurrir a estas técnicas existe una forma más elegante de conseguir esto y es mediante jsonp.
Básicamente se basa en una técnica en la que entran en juego tanto el frontend como el backend, en la petición/respuesta json.
El cliente envía una petición de tipo jsonp con un parámetro en la url que tendría como valor el nombre de la función que manejará la respuesta de dicha petición. En el servidor se retorna una respuesta json como valor de una variable con el Mismo nombre de dicha función.
Jquery puede trabajar con jsonp, el proceso sería el siguiente:
Javascript en el frontend con jquery
$(document).ready(function () {
$.ajax({
dataType: "jsonp",
data: "",
url: "http://example.com/json?method=?",
success: function(json){ alert(json.key); }
});
/*
Si el método que se le pasa en la url
tiene un valor "?" jquery generará
un valor aleatorio para la función que
manejará la respuesta. Esto nos evita
problemas con la cache
*/
})
Código de respuesta en backend en php
header('Content-type: text/json');
$respuesta = array('key'=>'valor');
echo $_GET['method']."(".json_encode($respuesta).")");
exit();
Esto nos permitirá trabajar con ajax entre dominios y gestionar la respuesta json a nuestro antojo.
Ben Ramsey hizo una presentación muy interesante hace unas semanas en la que aclaraba conceptos sobre REST y cómo lograr aproximarnos a un diseño RESTfull.
Merece la pena echarle un vistazo
Buscando información sobre un problema que tenía en javascript con jquery, me he encontrado con esta maravilla.
Se trata de un experimento de The man in blue que ha conseguido crear la funcionalidad principal (y básica) de una clásica caja de ritmos Roland TR 909, con javascript.
Para los que hemos hecho nuestros pinitos componiendo música electrónica con Rebirth 338 y otros juguetes más modernos, esta frikada nos trae buenos recuerdos y un ejemplo soberbio de cómo usar javascript con sonido.
Cuando un usuario pulsa la tecla enter en un elemento de una interfaz web a veces es necesario realizar alguna opción, como por ejemplo guardar con ajax los datos insertados en dicho elemento.
El código para el botón Enter es el número trece (como el cómic).
Podemos usar el siguiente código javascript:
tecla_pulsada = (document.all) ? e.keyCode : e.which;
if (tecla_pulsada==13){ //hacer lo que sea }
En ocasiones necesitamos hacer uso de iframes, por ejemplo cuando queremos mostrar de una forma sencilla una foto que acabamos de subir asincrónamente al servidor vía ajax.
Para refrescar el contenido de un iframe, podemos hacerlo con el siguiente código javascript:
var iframe = parent.frames[id_del_iframe];
iframe.window.location.reload();
Stephan Schmidt, desarrollador responsable de php-tools.net, ha publicado en stubbles.org una presentación en la que nos explica como desarrollar un proxy JSON-RPC usando para conseguirlo, un backend escrito en php con la ayuda de la api Reflection.
Normalmente, cuando se hace una petición a una sitio web, éste carga todo su código javascript en la llamada.
Sin embargo, no todo el código es ejecutado inicialmente ni tampoco a lo largo del tiempo de ejecución de sus aplicaciones o interacciones, por parte del usuario, con las mismas.
Podemos darnos cuenta de ésto al observar esta gráfica.
En ella observamos como conocidos sitios web deben cargar código javascript para luego usar normalmente un porcentaje. inferior al 50%. del mismo
Doloto es una solución de Microsoft, que aun no esta publicada y se encuentra en modo de pruebas por Microsoft Research, que ayuda a mejorar el rendimiento en aplicaciones web
Para conseguir su objetivo, Doloto analiza el código javascript de nuestras aplicaciones y creando perfiles de uso, descarga exclusivamente el código javascript necesario para inicializar la aplicación. El resto de código se transmite bajo demanda.
Una función en una aplicación que utilizase doloto tendría el siguiente aspecto:
function f(){
// descarga el cuerpo de la función "f"
var real_f_text = blocking_download("f");
// se prepara la función "f"
var real_f_func = this.eval(real_f_text);
// se evalua la función "f" con el objeto arguments
return real_f_func.apply(this, arguments);
}
Microsoft está probando esta tecnología en algunos sitios web, consiguiendo reducir el tiempo de carga en algunos de los mismo hasta en un 40%.
Tenéis más información sobre su arquitectura, concepto y resultados conseguidos en este interesante paper.
Simon Willison, uno de los creadores del framework para python Django, hizo una presentación ayer sobre las ventajas de usar JQuery para tener potencia JavaScript sin que ensucie nuestro código html.
