14 febrero, 2011

Davis.js

Davis.js es una pequeña librería JavaScript que usa history.pushState de HTML5 que permite rutas simples al estilo de Sinatra para tus aplicaciones JavaScript.

Usando los eventos del histórico pustState y popstate se permite que los enlaces y los formularios de tu aplicación tengan hrefs y acciones que apunten a puntos de ejecución reales en el servidor. Esto permite que aplicaciones complejas de JavaScript se degraden de forma transparente cuando JavaScript no esté disponible y combinando esto con un sistema de templates que pueda ser usado tanto en el cliente como en el servidor permite reusar una cantidad grande código.

Davis.js está inspirado fuertemente por Sammy.js (de ahí el nombre), pero es mucho más ligero que Sammy.js porque el autor nunca usa ninguna de las opciones de generación de templates etc que incluye. Todo lo que Davis.js hace es proveer una simple capa de enrutado, nada más y nada menos.

Requisitos


Davis.js requiere jQuery 1.4.2+ al igual que un navegador moderno que soporte historia.pushState de HTML5 y el evento onpopstate. Actualmente eso implica FireFox 4+, Safari 5+, Chrome, iOS Safari 4+, Android Browser 2.2+.

En todos los demás navegadores Davis.js no está actualmente soportado, todos los enlaces y formularios tendrán su comportamiento por defecto. Puedes vincular código a un evento 'no soportado' de una aplicación para gestionar esta situación. Usar como plan alternativo location.hash y onhashchange es una posibilidad en el futuro.

Instalación


Descarga davis.min.js e inclúyela en tu página después de jQuery.

Ejemplo


Un ejemplo muy simple de una aplicación con Davis.js:

var app = Davis(function () {
  this.get('/saludo/:name', function (req) {
    $('body').append('Hola, ' + req.params['name'] + '!')
  })
})

$(document).ready(function () {
  // agrega un enlace para disparar la ruta
  $('body').append('Saluda');
  app.start();
})

Creamos una nueva instancia de una Davis.App usando la función Davis.js, pasando una función que dibujará las rutas de la aplicación. Dentro de la función, this es la instancia de nuestra aplicación.

Definimos una simple ruta get con un parámetro 'name' y una función callback que agregará un mensaje al cuerpo html. Dentro de la función callback de la ruta, this es inicializada a la petición que coincide con la ruta, esta petición también se pasa al parámetro del callback.

Una vez que la aplicación se configura, necesita ser iniciada. Inicia una aplicación Davis.js llamando al método start, esto debe hacerse una vez que el documento está preparado. Ahora si haces click en el enlace que agregamos al cuerpo, nuestra ruta será llamada y un saludo amigable se mostrará en la página.

Para usar Davis tu fichero html debe ser cargado desde un servidor en lugar de abrirlo directamente desde el navegador.

Documentación


Me he permitido traducir la documentación ofrecida por el autor. Puedes verla en el siguiente enlace...

DOCUMENTACIÓN.

Publicar un comentario en la entrada

Últimos links en indiza.com