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.

03 febrero, 2011

Deconstruyendo jQuery, MooTools y Prototype

Hola de nuevo. Después de poco más de un año de parón por temas personales me he propuesto continuar con el blog. No sé si estaré en condiciones de asegurar artículos extensos y con la calidad que han tenido durante los meses anteriores, pero la forma de comprobarlo será publicando de nuevo para ver hacia dónde derivan.

Este primer artículo quiero dedicarlo a una herramienta que me ha parecido extremadamente interesante. JS Libs Deconstructed es un proyecto que muestra de forma visual e interactiva el código interno de tres de las librerías JavaScript más usadas: jQuery, MooTools y Prototype. Cada librería se muestra en principio como un conjunto de bloques cerrados que muestra la jerarquía del código y que pueden abrirse para mostrar el código fuente concreto que implementa cada parte. Pero también considero interesante el rápido resumen que muestra las ventajas e inconvenientes de cada una:



jQuery es una rápida y concisa colección de JavaScript que simplifica atravesar documento HTML, el control de eventos, animación, y las interacciones Ajax para el desarrollo web rápido.

Resumen

Se centra en la expresividad, rápida y fácil codificación, y los plugins

Ventajas

  • Optimizado para la manipulación del DOM
  • Opera con varios elementos sin una sintaxis especial
  • Dirigido por selectores CSS
  • Método de encadenamiento que hace fácil escribir código
  • API y sintaxis intuitiva
  • Arquitectura de plugins modulares mantiene el núcleo ligero
  • El rendimiento más rápido en selección
  • Espacio único de nombres

Desventajas

  • Orientado a DOM en lugar de a JavaScript
  • Algunos desarrolladores tienen problemas en torno a "this" en las funciones de callback


MooTools es un compacto, modular, orientada a objetos JavaScript marco diseñado para los desarrolladores de JavaScript intermedio y avanzado. Te permite escribir potente, flexible, y el código de cross-browser con su elegante y bien documentado, y coherente de la API.

Resumen

Se centra en la extensión, la herencia, la legibilidad, la reutilización y facilidad de mantenimiento

Ventajas

  • API concisa
  • Elegante sintaxis orientada a clases
  • Extiende clases nativas con nuevos métodos
  • Núcleo ligero
  • Puede ampliar la funcionalidad con plugins y mixins

Desventajas

  • Sintaxis y API más pesadas que jQuery
  • No es tan fácil como jQuery para actualizar el DOM


Prototype es un Framework de JavaScript que tiene como objetivo de facilitar el desarrollo de aplicaciones web dinámicas, con una única y fácil caja de herramientas para el desarrollo dirigido por clases y la librería de Ajax más atractiva.

Resumen

Se centra en la extensión de las clases nativas, la herencia, la legibilidad

Ventajas

  • Amplia API
  • Elegante sintaxis orientada a clases
  • Amplía clases nativas y el DOM con nuevos métodos
  • Útiles nuevos tipos de objetos

Desventajas

  • Sintaxis y API más pesadas que jQuery
  • Demasiados métodos triviales en el núcleo
  • No es tan fácil como jQuery para actualizar el DOM
  • Más lento de los 3 en el rendimiento del selector
  • Necesita script.aculo.us para los efectos
  • Ensucia el espacio de nombres global
Nota: en el momento de la publicación, la API de Mootools todavía no ha sido "deconstruida".



Últimos links en indiza.com