Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Web Development

Quick Tip: An Introduction to Sammy.js

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Valentino (you can also view the original English article)

Lo has estado viendo por un tiempo con Reader de Google, Gmail y, más recientemente, en Facebook. Probablemente, a ti también te gustaría escribir aplicaciones de JavaScript con eventos RESTful.  Bueno, compañeros desarrolladores, conozcan Sammy.js, un pequeño marco de JavaScript construido 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, proporcionaré 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 atraerte lo suficiente para que lo consideres para tus proyectos.


Preparando el escenario

"Sammy.js es liviano tanto en tamaño (<20kb) como en espacio. Úsalo en Tus aplicaciones ya iniciadas".

Sammy.js está siendo creado por Aaron Quint, un desarrollador web de Brooklyn, NY. Su API se basa en el popular framework ruby, Sinatra, y es ideal tanto para aplicaciones simples como complejas.  Es fácil de ingresar y puede incorporarse a tus proyectos existentes. No es una propuesta de todo o nada; así que echemos un vistazo.

Sammy.js te permite escribir aplicaciones de una sola página, al igual que Gmail. Puedes mantener el estado de tu aplicación con la URL, sin tener que actualizar o cambiar la página.  Hay otros marcos de JavaScript MVC, 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).


Acto de apertura

Instalar Sammy.js es bastante sencillo. Dirígate a la página de descarga, toma una copia y mueve, sammy-0.5.4.min.js al lugar donde almacenas las bibliotecas de tu proyecto (normalmente / js para mí).  Para el propósito de este artículo, usaré la versión 0.5.4, pero es posible que desees 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 JavaScript.  Tiendo a poner mi JavaScript en la parte inferior de la página, porque bloquea la carga de otros elementos en paralelo, dando la impresión de una página de carga más lenta. Hasta ahora tenemos:

Ahora para comenzar a codificar nuestra aplicación. Para simplificar las cosas, estoy trabajando en línea, que no es la mejor práctica. Agregar una aplicación Sammy.js es tan simple como asignarla a una variable, a la que llamo ratPack.  En nuestra página hemos definido un div con el id "contenido" sobre el cual actuará nuestra aplicación. Lo indicamos de la siguiente manera:

La importancia del selector de elementos es que podemos tener múltiples instancias de Sammy.js ejecutándose en nuestro documento, afectando diferentes elementos.


Atracción principal

Sammy.js usa la ruta, como se define en el hash de la URL, y los métodos HTTP comunes (obtener, publicar, colocar, eliminar) para determinar una función de devolución de llamada para invocar. Estos se conocen normalmente como "rutas". Algunos ejemplos de la web serían:

Como ejemplo, esbozaremos una aplicación de buzón. Primero configuremos la ruta predeterminada de nuestra aplicación, que aterrizará en # / inbox.

Aquí, puedes hacer que la función de devolución de llamada haga lo que quiera. Como estoy mostrando una bandeja de entrada, probablemente querría hacer una llamada ajax y recuperar una lista de mensajes.  Sin embargo, en aras de la simplicidad, solo devolveré una etiqueta h1. El context.app.swap ('') le dice a Sammy que reemplace lo que está en mi div de contenido, en lugar de simplemente agregarlo.

Para que esto funcione en el navegador, queremos ejecutar la aplicación usando la función de preparación de documentos de jQuery y pasarla a nuestra URL de inicio, como se define en la ruta anterior.

Y eso es. Ahora deberíamos poder cargar nuestro documento en un navegador, la aplicación debería iniciarse y llevarnos a nuestra bandeja de entrada.

A continuación, podemos crear otra ruta para manejar mensajes etiquetados:

Sammy usa la sintaxis var de dos puntos (: var) para devolver parámetros para que filtremos nuestros mensajes. Nuevamente, solo estoy mostrando el nombre de la etiqueta.

Hasta este punto, solo hemos estado usando el método HTTP "get". Digamos que debemos crear un formulario y enrutarlo a # / compose:

Ahora podemos configurar una ruta para aceptar los datos publicados y hacer que Sammy los analice por nosotros.

Eso es lo básico. Una API simple, lo suficientemente potente para proyectos grandes y pequeños. Si estás siguiendo el código, podemos agregar algo de navegación para facilitar el clic.


Encore

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 impulsadas 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 establecer fácilmente el título del documento para diferentes rutas. Hay varios sistemas de plantillas, incluidos haml y bigote.  Hay un generador de formularios atractivo y Sammy.Store, "una clase de adaptador abstracto que envuelve la multitud de almacenamiento de datos del navegador en un único conjunto común de métodos para almacenar y recuperar datos".

Espero que hayas disfrutado de este rápido vistazo a Sammy.js y estés listo para considerar su uso en tus aplicaciones. ¡Escuchemos tus pensamientos sobre Sammy.js en los comentarios!

El instructor original de este tutorial solicitó que su nombre se elimine de la firma.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.