10 aplicaciones web creadas con Backbone.js [Estudio de caso]

¿Alguna vez te has enredado en un código de spaghetti? ¿Prefieres alimentar tu aplicación algo más saludable? Si es así, eche un vistazo a lo que se puede lograr con Backbone.js. Backbone es una biblioteca de JavaScript que se basa libremente en el patrón de diseño Model-View-Controller pero, como carece del elemento Controller, es mejor llamarlo un framework MV *.

Le ayuda a crear aplicaciones web de una sola página , rápidas, elegantes y ricas en datos, mantiene su lógica de datos separada de su interfaz de usuario, le ahorra vincular sus datos con el DOM y escala a medida que crece su aplicación . Como Backbone se sincroniza con cualquier API RESTful de forma predeterminada, puede conectar fácilmente su aplicación del lado del cliente a su API existente del lado del servidor a través de una interfaz RESTful JSON.

En este post estudiaremos 10 aplicaciones web que utilizan las características de la biblioteca Backbone para ayudarlo a comprender el potencial que Backbone.js tiene para sus futuros proyectos de aplicaciones web.

1. Trello

Trello es una aplicación de colaboración y administración de proyectos en línea que lo ayuda a organizar sus proyectos en Juntas, Listas de verificación, Tarjetas, Listas de tarjetas, y le brinda herramientas como Conversaciones para la comunicación de los miembros del equipo.

Trello fue construido desde cero con Backbone.js. El backbone funciona junto con la API de historial de HTML5 y el lenguaje de plantillas sin lógica de Moustache en la interfaz. Todos los elementos de Trello Tech Stack se diseñaron de forma tal que resultaron en un cliente mantenible que maneja fácilmente las actualizaciones y se vuelve a sincronizar dinámicamente con el servidor cada vez que se desencadena un evento DOM.

Trello utiliza el modelo de red troncal y las vistas para sus objetos como tarjetas o miembros, y las colecciones de red troncal para los modelos relacionados, por ejemplo, las tarjetas en una lista. Los desarrolladores también construyeron su propio caché de modelo del lado del cliente para actualizaciones más rápidas y reutilización de código más eficiente.

2. Foursquare

Lo más probable es que ya hayas oído hablar de Foursquare, la popular aplicación de redes sociales basada en la ubicación que te permite compartir lugares con tus amigos de todo el mundo.

La API de JavaScript central de Foursquare se basa en modelos de red troncal, donde las clases de modelos de la API de Foursquare (como usuarios, lugares y registros) son las subclases de las clases del modelo de red troncal y heredan sus métodos y propiedades .

La implementación del código se puede esbozar así: fourSq.api.models.Venue = fourSq.api.models.Model.extend({ ... }); Sí, así es, Backbone permite a los desarrolladores escribir un buen código JavaScript orientado a objetos .

Las Vistas de Backbone también tienen su rol en la aplicación Foursquare, ya que mejoran la experiencia del usuario con características como mapas de página de inicio y listas . Además de Backbone, la API de JavaScript de Foursquare también hace uso de jQuery, Underscore.js (que es la única dependencia de Backbone) y el Compilador de cierre.

3. Calendario del campamento base

Basecamp, la popular aplicación de administración de proyectos usa Backbone.js para su función de Calendario.

El objetivo principal del diseño de Basecamp Calendar era crear una interfaz interactiva que posibilita la programación intuitiva de grupos y se actualiza en milisegundos . En Basecamp Calendar Backbone representa Vistas en plantillas ECO (Embedded CoffeeScript) cuando se actualizan Modelos (datos del lado del cliente).

Es interesante observar que el equipo de desarrolladores no convirtió el Basecamp completo en una aplicación de una sola página, que es el caso de uso principal de Backbone.js, sino que solo utilizó la biblioteca en la función Calendario, donde podrían aprovechar sus ventajas. Solo sirve para demostrar que no es necesario que compile una aplicación completa de una sola página con Backbone; es mejor pensar cuidadosamente dónde se puede aplicar.

Lea más sobre Antipatterns de Backbone para decidir si necesita Backbone para toda su aplicación o no.

4. Flowdock

Flowdock es una aplicación de comunicación en equipo en tiempo real que le ofrece funciones como chat en grupo, bandejas de entrada del equipo y flujos de trabajo en tiempo real

Flowdock se construyó desde cero sobre Backbone.js. El principal desafío del equipo de desarrollo fue habilitar mensajes y flujos de trabajo en tiempo real. Por defecto, Backbone.js se conecta al servidor a través de una interfaz REST, lo que no hace posible el flujo de datos en tiempo real. Por lo tanto, los desarrolladores decidieron guardar mensajes mediante el motor en tiempo real Socket.io en lugar de la API REST.

Para lograr esto, escribieron un método personalizado llamado Backbone.sync . Como Socket.io también es una biblioteca de JavaScript, hace que la comunicación entre la interfaz y el backend manejado por JavaScript (Node.js) sea perfecta. Flowdock es principalmente una aplicación de Rails en el lado del servidor, pero tienen un backend separado de Node.js que maneja las conexiones de Socket.io.

Flowdock mejora aún más la experiencia del usuario en tiempo real con Bacon.js, una útil biblioteca de JavaScript que permite la programación reactiva funcional. La característica EventStreams de Bacon.js ayuda a Flowdock a mantener sus colecciones y el modelo Backbone actualizados.

5. Cóctel de búsqueda

Cocktail Search es una aplicación de código abierto que te da la oportunidad de echar un vistazo al código de una implementación muy simple de Backbone.js. El backend es impulsado por Python, pero lo que es interesante para nosotros es el archivo script.js de la aplicación .

Si examina el código, puede ver una estructura muy básica de la estructura Model-View- *: contiene un Modelo definido en la clase Cocktail que no cambia la configuración predeterminada de la clase primaria Backbone.Model, una Colección Backbone para resultados de búsqueda y 3 vistas de Backbone, cada uno agrega nuevos métodos a la clase principal Backbone.View .

Si echas un vistazo al archivo index.html, puedes descubrir cómo el desarrollador agregó Backbone.js y sus dependencias, Underscore.js y jQuery en la sección principal. Underscore.js es la única dependencia dura de Backbone, mientras que jQuery es necesaria si desea manipular el DOM con la ayuda de Backbone Views (que es el caso de la aplicación Cocktail Search).

6. Bitbucket

Bitbucket es una aplicación de administración de código y alojamiento de código fuente similar a Github. Atlassian, la compañía detrás de él, utiliza Backbone en el software de seguimiento de problemas comerciales JIRA, su otro producto principal también.

Durante la utilización completa de Backbone.js en sus aplicaciones, el equipo de desarrollo encontró un par de cosas que se perdieron de Backbone. Se encontraron con muchas fallas silenciosas causadas por las convenciones de definición de Backbone.js. Esto básicamente significa que los Modelos, Colecciones y Vistas no definen necesariamente los eventos personalizados que exponen . Y si eso no fuera suficiente, los Modelos ni siquiera definen los atributos que exponen.

Esta naturaleza permisiva es una característica que aprecian muchos desarrolladores, pero no el equipo de Atlassian, por lo que desarrollaron su propia extensión Backbone llamada Backbone.Brace que agrega mixins y atributos y eventos auto-documentados a la biblioteca .

Si le molesta lo mismo, puede agregar Backbone.Brace a su propia aplicación, ya que es un proyecto de código abierto alojado en Bitbucket. BitBucket utiliza el lenguaje de plantillas de bigote al igual que Trello para representar vistas de red troncal en la interfaz.

7. SoundCloud

SoundCloud es una popular plataforma de distribución de audio donde puede grabar, cargar y compartir su propio audio, o escuchar música de forma gratuita.

Los desarrolladores de SoundCloud usaron Backbone.js primero como el framework frontend de su aplicación móvil, pero les gustó tanto que también lo emplearon en el lado del cliente de su sitio web de escritorio. En su Blog Backstage explican su elección de framework con la capacidad de Backbone de proporcionar una base estructural sólida y, al mismo tiempo, ser flexible .

La ampliación es una preocupación principal para una aplicación de transmisión de audio, y SoundCloud reconoce que "tiene más que ver con la organización que con la implementación", lo que hace que la red troncal bien organizada pero liviana sea una opción ideal para ellos.

SoundCloud utiliza el sistema de plantillas semánticas de Handlebars para representar vistas de Backbone en la interfaz.

8. AirBnB

AirBnB es un mercado de la comunidad increíblemente exitoso, donde puedes encontrar y reservar diferentes tipos de alojamientos en casi 200 países en todo el mundo

AirBnB utilizó en primer lugar Backbone.js en su aplicación móvil al igual que SoundCloud, pero más tarde lo utilizó cada vez más en sus características de aplicación web, como Wishlists, Match, Search, Communities y Payments. A AirBnB le gustaba tanto Backbone que no solo se conformaron con usarlo en la interfaz, sino que también querían que la biblioteca se ejecutara en el back-end.

Más tarde hicieron su biblioteca Backbone del lado del servidor, Rendr, de código abierto y disponible en su página de Github. Rendr está escrito en Node.js y sigue la filosofía de "imponer una estructura mínima, lo que permite al desarrollador utilizar la biblioteca de la forma más adecuada para su aplicación", al igual que el Backbone en sí mismo.

Si está interesado más en la tecnología de AirBnB, lea la publicación de su blog sobre su viaje desde un servidor de Rails al Santo Grial de la utilización simultánea de Backbone tanto en el lado del cliente como del servidor .

9. Hulu

Hulu es una aplicación de transmisión de video que le permite ver programas de televisión y películas de forma gratuita si se encuentra en los EE. UU.

Hulu hizo uso de Backbone.js para crear una experiencia de usuario perfecta y rápida para los amantes del cine. La interfaz le permite moverse rápidamente a través de la aplicación con suaves transiciones mientras navega. Backbone ahorra ancho de banda para los usuarios, ya que los scripts y los videos incrustados no se vuelven a cargar todo el tiempo.

Hulu ejecuta un motor de Rails en el backend, y si le gustan las pláticas divertidas pero informativas, puede leer acerca de cómo el equipo de desarrolladores se enredó con jQuery antes de finalmente decidir cambiar al framework Backbone más organizado .

Backbone.js le permitió a Hulu convertir incrementalmente su representación desde el lado del servidor al lado del cliente en lugar de hacer una reescritura arriesgada de su back-end de Rails existente.

10. Countly

Countly es una aplicación de análisis móvil en tiempo real que le permite realizar un seguimiento del rendimiento de su aplicación iPhone, Android o Windows Phone directamente desde la ventana del navegador.

Eche un vistazo a la notable lista de software de código abierto que se utilizó para desarrollar la plataforma, incluidas las superestrellas de los últimos años: Nginx, MongoDB, Node.js para el lado del servidor y, por supuesto, Backbone.js para la interfaz.

Countly utiliza la biblioteca de plantillas semánticas de Handlebars para representar Vistas de Backbone que muestran datos preparados y cargados con Modelos de Backbone. Countly es una aplicación amigable para los desarrolladores: no solo es fácilmente extensible, sino que su documentación también brinda a los desarrolladores tutoriales como este sobre cómo crear complementos personalizados sobre el núcleo del cliente Backbone .

Nota del editor: esto está escrito por Anna Monus para Hongkiat.com. Anna es una diseñadora web y escritora de códigos con interés por la ciencia, la inteligencia artificial y las tecnologías disruptivas.