Share
Lo has estado viendo durante un tiempo con Google Reader, Gmail y, más recientemente, en Facebook. Probablemente, a usted también le gustaría escribir aplicaciones de JavaScript con REST. Bueno, colegas desarrolladores, conozcan Sammy.js, un pequeño marco de JavaScript creado sobre jQuery. Sammy utiliza el hash de URL (#) para permitirte crear aplicaciones AJAX de una sola página que responden al botón de retroceso de tu navegador. Interesado?
En este artículo, ofreceré una breve descripción general del marco, y luego una breve demostración de cómo es trabajar con Sammy.js, con la esperanza de atraerlo lo suficiente como para considerarlo para sus proyectos..
"Sammy.js es ligero tanto en tamaño (<20kb) and footprint. Pull it into your already started applications."
Sammy.js está siendo organizado por Aaron Quint, un desarrollador web de Brooklyn, Nueva York. Su API se basa en el popular marco ruby, Sinatra, y es ideal para aplicaciones tanto simples como complejas. Es fácil de ingresar y se puede incluir en sus proyectos existentes. No es una proposición de todo o nada; así que echemos un vistazo.
Sammy.js te permite escribir aplicaciones de una sola página, como Gmail. Puede mantener el estado de su aplicación con la url, sin tener que actualizar o cambiar la página. Hay otros marcos de MVC JavaScript, como SproutCore, que tienden a abarcar todo. Pero con Sammy, tienes un marco ligero (~ 20kb), capaz de invocar varias instancias simultáneamente (es decir, ejecutar varias aplicaciones en el mismo documento).
Instalar Sammy.js es bastante sencillo. Dirígete a la página de descarga, toma una copia y muévete, sammy-0.5.4.min.js donde almacena las bibliotecas de su proyecto (normalmente / js para mí). Para los fines de este artículo, usaré la versión 0.5.4, pero es posible que tenga ganas de probar sammy-latest.min.js. También necesitarás una copia de jQuery, al menos v. 1.4.1. Al igual que con la mayoría de los complementos de jQuery, el orden es importante: jQuery, antes de Sammy.js, antes de su JavaScript. Tiendo a poner mi JavaScript en la parte inferior de la página, porque bloquea otros elementos de la carga en paralelo, dando la impresión de una página de carga más lenta. Hasta ahora tenemos:
Ejemplo de sammy.js
Ahora para comenzar a codificar nuestra aplicación. Para mantener las cosas simples, estoy trabajando en línea, lo cual no es la mejor práctica. Agregar una aplicación Sammy.js es tan simple como asignarlo a una variable, lo que estoy llamando ratPack. En nuestra página, hemos definido un div con el id "contenido" sobre el que actuará nuestra aplicación. Lo indicamos de la siguiente manera:
var ratPack = $ .sammy (function () this.element_selector = '#content'; // las rutas irán aquí);
La importancia del selector de elementos es que podemos tener varias instancias de Sammy.js ejecutándose en nuestro documento, lo que afecta a diferentes elementos.
Sammy.js usa la ruta, como se define en el hash de la URL, y los métodos HTTP comunes (obtener, publicar, poner, eliminar) para determinar una función de devolución de llamada para invocar. Estos son típicamente conocidos como "rutas". Algunos ejemplos de toda la web serían:
Como ejemplo, haremos un bosquejo de una aplicación de buzón. Primero configuremos la ruta predeterminada de nuestra aplicación, que aterrizará en # / bandeja de entrada.
Accentsconagua
this.get ('# / inbox', function (context) context.app.swap ("); context. $ element (). append ('bandeja de entrada
'); ); Aquí, puedes hacer que la función de devolución de llamada haga lo que quieras. Ya que estoy mostrando una bandeja de entrada, probablemente me gustaría hacer una llamada ajax y recuperar una lista de mensajes. Sin embargo, en aras de la simplicidad, solo voy a devolver un h1 etiqueta. los context.app.swap (") le dice a Sammy que reemplace lo que está en mi div contenido, en lugar de simplemente agregarlo.
Para que esto funcione en el navegador, queremos ejecutar la aplicación utilizando la función de preparación de documentos de jQuery y pasarla a nuestra URL inicial, como se define en la ruta anterior.
$ (function () ratPack.run ('# / inbox');); Y eso es. Ahora deberíamos poder cargar nuestro documento en un navegador, la aplicación debe iniciarse y navegar a nuestra bandeja de entrada.
A continuación, podemos crear otra ruta para manejar los mensajes etiquetados:
this.get ('# / label /: name', function (context) context.app.swap ("); context. $ element (). append (''+ this.params [' name '] +'
'); ); Sammy usa la sintaxis de los dos puntos (: var) para devolver los parámetros para que filtramos nuestros mensajes. Una vez más, sólo estoy mostrando el nombre de la etiqueta.
Hasta este punto, solo hemos estado usando el método HTTP "obtener". Digamos que debíamos crear un formulario y enrutarlo a # / compose:
this.get ('# / compose', function (context) context.app.swap ("); context. $ element (). append ('decir hola a?
'+''); ); Ahora podemos configurar una ruta para aceptar los datos publicados y que Sammy la analice por nosotros..
this.post ('# / compose', function (context) context.app.swap ("); var to = this.params ['to']; context. $ element (). append ('hola '+ a +'
'); ); Eso es lo básico. Una API simple, lo suficientemente potente para proyectos tanto grandes como pequeños. Si está siguiendo el código, podemos agregar un poco de navegación para facilitar el clic..
- bandeja de entrada
- componer
- borradores
Por supuesto, Sammy.js tiene mucho más que ofrecer que simplemente definir rutas en la aplicación. Los usuarios más avanzados pueden explorar eventos personalizados y espacios de nombres, para aplicaciones dirigidas por eventos. Aaron está tratando de mantener el núcleo de Sammy.js lo más ajustado posible, pero también viene con muchos complementos. Hay un complemento de título, que te permite configurar fácilmente el título del documento para diferentes rutas. Hay varios sistemas de plantillas, incluyendo haml y bigote. Hay un creador de formularios de buen aspecto y Sammy.Store, "una clase de adaptador abstracto que envuelve la multitud de almacenamiento de datos del navegador en un único conjunto de métodos comunes para almacenar y recuperar datos".
Espero que haya disfrutado de este vistazo rápido a Sammy.js y esté listo para considerar su uso en sus aplicaciones. Escuchemos tus pensamientos sobre Sammy.js en los comentarios.!
El instructor original de este tutorial solicitó que se eliminara su nombre de la línea posterior..
