10 aplicaciones web hechas con Backbone.js [estudio de caso]
¿Alguna vez te has enredado en un código de espagueti? ¿Prefieres alimentar tu aplicación con algo más saludable? Si es así, eche un vistazo a lo que se puede lograr con Backbone.js. Columna vertebral es una biblioteca de JavaScript que se basa libremente en el patrón de diseño Modelo-Vista-Controlador, pero como carece del elemento Controlador, es mejor llamarlo un marco MV *.
Te ayuda a construir Rápido, elegante y rico en datos aplicaciones web de una sola página, mantiene su lógica de datos separada de su interfaz de usuario, le evita vincular sus datos al DOM, y Escala a medida que tu aplicación crece.. 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 del lado del servidor existente a través de una interfaz RESTful JSON.
En esta publicación, 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 en línea y gestión de proyectos que le ayuda a organizar sus proyectos en tableros, listas de verificación, tarjetas, listas de tarjetas y le brinda herramientas como conversaciones para la comunicación entre los miembros del equipo..
Trello fue construido desde cero con Backbone.js. Backbone funciona junto con la API de historial de HTML5 y el lenguaje de creación de plantillas sin lógica de bigote en la interfaz. Todos los elementos del Trello Tech Stack fueron diseñados de una manera que resultó 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 Backbone y las Vistas para sus objetos como Tarjetas o Miembros, y las Colecciones Backbone 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 más reutilización de código eficiente.
2. Cuadrangular
Lo más probable es que ya hayas oído hablar de Firme, 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 principal de Foursquare se basa en los modelos Backbone, donde el Clases modelo de la API Foursquare (como Usuarios, Lugares y Check-ins) son las subclases de las clases del Modelo Backbone y Hereda 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í, eso es correcto, Backbone permite a los desarrolladores escribir buen JavaScript orientado a objetos.
Las vistas Backbone también tienen su función en la aplicación Foursquare, ya que mejoran la experiencia del usuario con características como mapas y listas de inicio. Aparte 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 de Basecamp
Campamento base, La popular aplicación de gestión de proyectos utiliza Backbone.js para su función de calendario..
El principal objetivo de diseño de Basecamp Calendar era crear una interfaz interactiva que hiciera programación intuitiva del grupo posible, y se actualiza en milisegundos. En Basecamp Calendar Backbone convierte las vistas en plantillas ECO (CoffeeScript incrustado) cada vez que se actualizan los Modelos (datos del lado del cliente).
Es interesante notar que el equipo de desarrolladores no hizo de Basecamp 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 de Calendario, donde realmente podrían aprovechar sus ventajas. Simplemente demuestra que no es necesario crear una aplicación completa de una sola página con Backbone; Es mejor pensar cuidadosamente dónde se puede aplicar..
Lea más sobre las normas de Backbone para decidir si necesita Backbone para su aplicación completa o no..
4. Flowdock
Flowdock es una aplicación de comunicación en equipo en tiempo real que le proporciona funciones como chat en grupo, bandejas de entrada de equipo y flujos de trabajo en tiempo real
Flowdock se construyó desde cero sobre Backbone.js. El principal desafío del equipo de desarrollo era habilitar los mensajes y flujos de trabajo en tiempo real. Por defecto, Backbone.js se conecta al lado del servidor a través de una interfaz RESTful, que no hace posible el flujo de datos en tiempo real. Por lo tanto los desarrolladores decidió guardar mensajes a través del motor en tiempo real Socket.io en lugar de la API REST.
Para lograr esto ellos escribió un método personalizado llamado Backbone.sync. Como Socket.io es también una biblioteca de JavaScript, hace que la comunicación entre el frontend y el backend (Node.js) controlados por JavaScript sea perfecta. Flowdock es principalmente una aplicación Rails en el lado del servidor, pero tienen un backend Node.js separado que maneja las conexiones Socket.io.
Flowdock mejora la experiencia del usuario en tiempo real aún más con Bacon.js, una biblioteca de JavaScript práctica que permite la programación reactiva funcional. La función EventStreams de Bacon.js Ayuda a Flowdock a mantener actualizados sus modelos y colecciones de red troncal..
5. Búsqueda de cócteles
Busqueda de coctel 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 alimentado por Python, pero lo que es interesante para nosotros es el archivo script.js de la aplicación.
Si examinas el código, puedes ver una estructura muy básica del marco Model-View- *: contiene uno Modelo definido en el Cóctel clase que no cambia la configuración predeterminada de la clase principal Backbone.Model, una Colección Backbone para resultados de búsqueda, y 3 Vistas Backbone, cada una agrega nuevos métodos a la Backbone.View clase de padres.
Si analiza el archivo index.html, puede descubrir cómo el desarrollador agregó Backbone.js y sus dependencias., Underscore.js y jQuery En la sección de cabeza. Underscore.js es la única dependencia difícil de Backbone, mientras que se necesita jQuery Si quieres 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 código fuente de hospedaje y administración de código similar a Github. Atlassian, la compañía detrás de ella, utiliza Backbone en el software de seguimiento de problemas comerciales JIRA, su otro producto principal también.
Durante la utilización exhaustiva de Backbone.js en sus aplicaciones, el equipo de desarrollo encontró un par de cosas que se perdieron de Backbone. Se encontraron muchos fallos silenciosos causados por las convenciones de definición suelta de Backbone.js. Esto significa básicamente que los modelos, colecciones y vistas No necesariamente definen los eventos personalizados que exponen.. Y si eso no fuera suficiente, los modelos ni siquiera siempre definen el atributos ellos exponen.
Esta naturaleza permisiva es una característica amada por muchos desarrolladores, pero no por 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 el propio Bitbucket. BitBucket usa el lenguaje de plantillas del bigote al igual que Trello para representar vistas de Backbone en la interfaz.
7. SoundCloud
SoundCloud es una popular plataforma de distribución de audio donde puedes grabar, cargar y compartir tu propio audio, o escuchar música gratis.
Los desarrolladores de SoundCloud usaron Backbone.js primero como el marco de la interfaz 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 de Backstage, explican su elección del marco con la capacidad de Backbone de Proporcionar una base estructural sólida mientras se mantiene flexible..
La escala 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 el Backbone bien organizado pero liviano sea una opción ideal para ellos.
SoundCloud utiliza el sistema de plantillas semánticas de Handlebars para renderizar Backbone Views en el frontend.
8. AirBnB
AirBnB es un mercado comunitario increíblemente exitoso donde puede encontrar y reservar diferentes tipos de alojamiento en casi 200 países en todo el mundo
AirBnB usó por primera vez Backbone.js en su aplicación móvil al igual que SoundCloud, pero luego lo utilizó cada vez más en las funciones de su aplicación web como listas de deseos, coincidencias, búsqueda, comunidades y pagos. AirBnB amaba tanto a Backbone que no solo se conformaron con usarlo en la interfaz, sino que también querían hacer posible que la biblioteca funcionara en la parte posterior..
Ellos despues crearon su biblioteca Backbone del lado del servidor, Rendr, de código abierto y disponible en su página Github. Rendr está escrito en Node.js y sigue la filosofía de “impone 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 Backbone
Si te interesa más la pila de tecnología de AirBnB, lee la publicación de su blog sobre su viaje desde un backs de Rails hasta el Santo Grial de la Uso simultáneo 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 TV y películas gratis, si se encuentra en los Estados Unidos..
Hulu utilizó Backbone.js para crear una experiencia de usuario fluida y sin problemas para los amantes de las películas. La interfaz le permite moverse rápidamente a través de la aplicación con transiciones suaves mientras navega. Columna vertebral ahorra ancho de banda para los usuarios como guiones y videos incrustados no vuelvas a cargar todo el tiempo.
Hulu ejecuta un motor de Rails en el backend, y si te gustan las charlas divertidas pero informativas, puedes leer sobre cómo el equipo de desarrolladores se enredó con jQuery antes de finalmente decidir cambiar a la Backbone framework más organizado.
Backbone.js permitió a Hulu convertir incrementalmente su representación del lado del servidor al lado del cliente En lugar de hacer una reescritura arriesgada de su backend Rails existente.
10. Conde
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 de 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 servidor y, por supuesto, Backbone.js para la interfaz..
Countly utiliza la biblioteca de plantillas semánticas de Handlebars para representar las Vistas Backbone que muestran los datos preparados y cargados con Modelos Backbone. Countly es una aplicación fácil de usar para el desarrollador: no solo es fácilmente extensible sino que su documentación también proporciona a los desarrolladores tutoriales como este en cómo construir complementos personalizados sobre el cliente principal de Backbone.
Nota del editor: Esto está escrito por Anna Monus para Hongkiat.com. Anna es una desarrolladora web y escritora de códigos interesada por la ciencia, la inteligencia artificial y las tecnologías disruptivas.
