Cuando estaba por terminar la funcionalidad de la aplicacion HTML me tope con un pequeño problema: Los servicios en determinados escenarios se encimaban y acababa con datos viejos, datos duplicados, etc. Mi primer idea para solucionarlo fue pausar o cancelar las llamadas pero este enfoque no me gustaba ya que estoy mas acostumbrado al commandchain de Swiz en flex; por eso busque (y encontre) otro plugin de jQuery para crear una cola de llamadas AJAX: AJAX Queue/Cache/Abort/Block Manager v. 3.0

Este genial plugin soporta procesar multiples peticiones de forma paralela O en serie. La implementacion fue completamente transparente ya que en vez de hacer un $.ajax(), lo que hice fue (como viene ejemplificado en la pagina de documentacion) iniciar el administrador de peticiones y encolar las peticiones necesarias.

Otras opciones interesantes de este plugin:

• Cache de respuestas

 

• Queue

 

 

• Abortar llamadas anteriores

 

 

• Abortar llamadas no exitosas

 

 

• Numero maximo de solicitudes

 

 

Un breve ejemplo y la url:

 

//create an ajaxmanager named cacheQueuevar ajaxManager = $.manageAjax.create('cacheQueue', {	queue: true,	cacheResponse: true});

//and add an ajaxrequest with the returned objectajaxManager.add({	success: function(html) {		$('ul').append('

• ‘+html+’

');	},	url: 'test.html'});

http://www.protofunc.com/scripts/jquery/ajaxManager3/

Una de las maravillas de Flex son los llamados Data Bindings que es una forma abreviada del modelo Observador / Suscriptor (Observer / Subscriber) y como en JS no lo conocía pues se me hacia completa mente engorroso estar programándolo a pie.

Como una de mis cualidades de programador es la “flojera” de tener que estar reinventando la rueda me di a la tarea de buscar algún plugin para jQuery que me solucionara la vida ayudara a salvar dicho problema y lo encontré: jQuery Watch.

Que es lo que hace este plugin? Sencillo. Se le asigna una un objeto, una propiedad de dicho objeto y una función. Cada 100 milisegundos monitorea si el valor de dicho objeto ha cambiado y en caso de ser así, ejecuta la función dada pasando como parámetros el nombre de la propiedad, el valor antiguo y el valor nuevo . Para que sirve esto? Fácil! en ves de estar cambiando todos los valores de los datos, nodos, etc cuando recibimos respuestas de AJAX o entradas del usuario, simplemente asociamos un watcher a X o Y objeto con su respectiva función y cuando modificamos una variable, voila, se hace la magia sin importar desde donde se haga la molificación.

El que usa watcher a primera vista se ve un poco mas laborioso, pero cuando tenemos un proyecto en el cual desde cualquier parte se puede realizar cualquier operación es un poco difícil llevar el control de si tal o cual evento debería o no actualizar determinadas partes del html; con los watchers nos olvidamos de esto pues, los eventos solo cambian variables y los watchers monitorean las variables para actualizar lo que se tenga que actualizar 8)

Hace algunos días empecé a hacer una versión alterna a una aplicación Flex en HTML y JavaScript. El primer pensamiento fue “Interesante, hace siglos que no hago JavaScript formalmente”, el siguiente fue “Se que ha mejorado, pero… habra mejorado lo suficiente como para que no sea de nuevo un verdadero dolor de cabeza?” así que sin pensar demasiado para no arrepentirme me lancé a empezar la tarea asignada.

Mi sorpresa fue bastante agradable, mas no completamente sin dolor, pues si me llegué a encontrar uno que otro pequeño detalle, pero el resultado ha sido bastante agradable.

Lo mejor de todo, es que he podido aplicar conceptos que uso a diario en Flex como el Constraint Layout, las llamadas a servicios encadenados, “bindeos” de variables, incluso algo similar a un “itemRenderer“; les dejo en este post como conseguí el constraint y en los siguientes iré dando ejemplos de todo lo que aquí comenté.

Cabe mencionar que los navegadores donde estoy probando son solo Firefox 3.6.x y Safari 2.x. Firefox pues FireBug es una maravilla y Safari pues según se la idea de esta versión es apuntar a iPad / iPhone.

Constraint Layout (top, bottom, left, right)

Después de media mañana de estar peleéndome con divs, tablas, float:left, clear:both, etc. mi buen amigo Parga me dijo -Por que no usas top, bottom, left y right- creo que no pude esconder mi cara de sorpresa cuando me explico que era perfectamente válido usarlos en CSS y que se comportaba igual que en Flex; el truco: position:absolute.

Un clásico layout con cabeza, menú, contenido y pie:

El resultado del codigo de arriba se ve algo asi:

Como se puede ver, es mas CSS que HTML, bien pude poner los estilos en cada una de las etiquetas, pero eso no sería muy bueno que digamos ya que no hay como dejarle a cada lenguaje su tarea propia.

Espero les sea de utilidad esta breve experiencia y no olviden dejar comentarios, dudas y/o sugerencias