Acelerando la ejecucion de jquery

Ayer leí un artículo interesante, sobre cómo registrar eventos con jQuery en distintos elementos del DOM, y cómo con live() funciona más rápido que haciendo el registro luego de que termine de cargar el DOM.

http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

Google Code Playground

Google Code Playground es un sitio de pruebas en vivo, por donde todo programador que quiera utilizar APIs de Google debería pasar.

Este sitio presenta ejemplos de casi todas las APIs de Google, incluyendo:

• Traductor: ejemplo
• Blogger
• Búsquedas de blogs: ejemplo
• Calendario
• Google earth
• Búsqueda de imágenes
• Google maps
• Búsqueda general: ejemplo
• Búsquedas web
• Búsquedas de videos
• YouTube
• y más....

Ya sea que vamos a jugar un poco, o que vamos a utilizar las APIs de Google para nuestros proyectos, este es un sitio para tener siempre en las bookmarks...

Resolviendo llamados AJAX entre dominios distintos

Esta semana tuve la necesidad de consumir servicios JSON a través de AJAX, el problema es que esos servicios estaban en otro host. Buscando en internet, llegué a que el tema de realizar llamadas a AJAX entre distintos dominios no funcionaba directamente, ya que era una gran brecha de seguridad permitir hacer esto en HTTP. Luego de un rato de darme la cabeza contra el teclado, decidí hacerlo de esta forma.

Digamos que tengo una vista (una página) desde la que necesito consumir el servicio JSON invocando una determinada URL por AJAX, con Prototype esto sería algo así (esta invocación falla por hacerse a un dominio distinto al local):

Event.observe(window, 'load', function() {

   new Ajax.Request('http://www.otrohost.com/servicio', {
      method: 'get',
      onLoading: function(res) {
         ....
      },
      onSuccess: function(res) {
         var json = res.responseJSON; // resultado del servicio JSON
         ....
      }
   });
});

Sustituyendo la url destino del llamado AJAX por una url local, quien atiende la llamada es la acción de un controlador de Yupp, entonces se puede hacer que esa acción sea la que haga el llamado al servicio JSON en http://www.otrohost.com/servicio y devuelva a la vista el resultado.

El controlador tendrá este aspecto (archivo: /components/xxx/controllers/components.xxx.controllers.ServicioController.class.php):

YuppLoader::load('core.http', 'HTTPRequest');

class ServicioController extends YuppController {

   public function getJSONAction()
   {
      $req = new HTTPRequest();
      $req->setTimeOut( 5 );
      $res = $req->HTTPRequestGet('http://www.otrohost.com/servicio');

      // La respuesta
      $json = $res->getBody();
      
      // Devuelve la respuesta a la vista
      header('Content-Type: application/json');
      return $this->renderString( $json );
   }
}

Así logramos pedirle a un controlador local que haga un pedido HTTP al servicio JSON remoto y que devuelva el objeto JSON a la vista local desde la que partió el pedido AJAX original. El javascript en la vista con la invocación al controlador local quedaría así:

Event.observe(window, 'load', function() {

   new Ajax.Request('<?php echo h('url', array('component'=>'xxx', 'controller'=>'servicio', 'action'=>'getJSON'); ?>', {
      method: 'get',
      onLoading: function(res) {
         ....
      },
      onSuccess: function(res) {
         var json = res.responseJSON; // resultado del servicio JSON local
         ....
      }
   });
});

Así con pocas líneas de código podemos resolver un problema que tenemos frecuentemente, sobre todo cuando necesitamos consumir APIs externas con servicios JSON o XML.

Herramientas para comprimir codigo javascript

Para crear sistemas web muchas veces me veo utilizando librerías y scripts javscript que encuentro en internet. Muchos de estos pesan entre 150 y 300 Kb, haciendo que el tiempo de carga de las páginas web sea muy lento. Por suerte existen herramientas que nos permiten comprimir esas librerías y dejarlas de un tamaño aproximadamente de un 30% del tamaño original.

En general estas herramientas tienen un cuadro de texto donde se debe pegar el código javascript a comprimir, elegir algunas opciones de compresión, luego vemos el código comprimido y la razón de compresión (tamaño original / comprimido). Distintas opciones de compresión harán que tu código quede más reducido aún.

Aquí dejo algunos links a estas herramientas:

• http://javascriptcompressor.com/
• http://fmarcia.info/jsmin/test.html

Feliz compresión!

Prototype vs jQuery

Navegando en internet encontré esta excelente presentación con la comparación de estos dos grandes de Javascript. Aquí se las dejo:

| View | Upload your own