¿Cuál es el propósito de backbone.js?

442

Traté de entender la utilidad de backbone.js desde su sitio http://documentcloud.github.com/backbone , pero aún no podía entender mucho.

¿Alguien puede ayudarme explicando cómo funciona y cómo podría ser útil para escribir un mejor JavaScript?

sushil bharwani
fuente
36
Es un marco MVC. Lo alienta a abstraer sus datos en modelos y su manipulación de DOM en vistas y unir los dos mediante eventos.
Raynos
¿Cómo puede una "vista" manejar eventos en el contexto de MVC? Esto es lo que afirma backbonejs.org en su introducción.
3
Vale la pena aprenderlo. Tuve dificultades para comenzar, pero después de superar algunas dificultades en la curva de aprendizaje, en realidad no es demasiado difícil. Comience con la demostración de Wine Cellar.
kmitchel46725
2
Dentro del contexto de Backbone, la vista se duplica como un controlador. Escucha los eventos DOM y los envía a los modelos según corresponda. También escucha los cambios en sus modelos y colecciones y vuelve a dibujar el DOM adecuadamente. La columna vertebral es un patrón MV, pero la C está implícita. Si Backbone fuera Rails, la plantilla sería la vista, y la vista sería el controlador.
superluminary
Pensé que es un marco MVVM, ya que en realidad no proporciona controladores.
SoluableNonagon

Respuestas:

393

Backbone.js es básicamente un marco súper ligero que le permite estructurar su código Javascript de manera MVC (Modelo, Vista, Controlador) donde ...

El modelo es parte de su código que recupera y llena los datos,

Ver es la representación HTML de este modelo (las vistas cambian a medida que cambian los modelos, etc.)

y un controlador opcional que en este caso le permite guardar el estado de su aplicación Javascript a través de una URL hashbang, por ejemplo: http://twitter.com/#search?q=backbone.js

Algunos pros que descubrí con Backbone:

  • No más Spaghetti Javascript: el código se organiza y descompone en archivos .js semánticamente significativos que luego se combinan usando JAMMIT

  • No más jQuery.data(bla, bla): no es necesario almacenar datos en DOM, sino almacenar datos en modelos

  • el enlace de eventos simplemente funciona

  • biblioteca de utilidad Underscore extremadamente útil

  • El código backbone.js está bien documentado y es una gran lectura. Abrí mis ojos a una serie de técnicas de código JS.

Contras:

  • Me tomó un tiempo comprenderlo y descubrir cómo aplicarlo a mi código, pero soy un novato en Javascript.

Aquí hay un conjunto de excelentes tutoriales sobre el uso de Backbone con Rails como back-end:

CloudEdit: un tutorial de Backbone.js con Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps También existe esta maravillosa clase de Colección que te permite lidiar con colecciones de modelos e imitar modelos anidados, pero no quiero confundirte desde el principio.

Vlad Gurovich
fuente
1
otro tutorial útil: coenraets.org/blog/2012/01/…
Jeffrey Nicholson Carré
16
Esta respuesta es incorrecta. Backbone no es un marco MVC. Es un marco MV *. Comprender los componentes principales es algo importante. Y no tiene controladores. Buena suerte.
3
Solo para reiterar, la biblioteca Backbone en sí no tiene controladores, aunque Jeremy Ashkenas ha dicho que los objetos View ocupan su lugar, ya que son objetos JavaScript que poseen modelos y mezclan datos hacia y desde el front-end. Por supuesto, no hay nada que le impida implementar un Controlador, un Servicio, incluso un ViewModel si así lo desea, es solo JavaScript.
superluminary
3
¿Qué es JAMMIT? ɯnɯıuıɯ ʇunoɔ ɹǝʇɔɐɹɐɥɔ
user1717828
1
RE: "jQuery.data (bla, bla): no es necesario almacenar datos en DOM" IIRC, de todos modos, jQuery almacena esa información en la memoria. es decir, no data-vuelve a establecer atributos en los elementos DOM. (Entonces, si su HTML tenía data-atributos cuando se cargó la página, y se cambian, el DOM y la representación en memoria serían OOS, pero de todos modos debería estar trabajando con los datos in-mem)
JoeBrockhaus
250

Si va a construir interfaces de usuario complejas en el navegador, entonces probablemente se encontrará inventando la mayoría de las piezas que componen marcos como Backbone.js y Sammy.js. Entonces, la pregunta es, ¿estás construyendo algo lo suficientemente complicado en el navegador como para merecer usarlo (para que no termines inventando lo mismo tú mismo)?

Si lo que planea construir es algo donde la interfaz de usuario cambia regularmente la forma en que se muestra pero no va al servidor para obtener páginas nuevas enteras, entonces probablemente necesite algo como Backbone.js o Sammy.js. El ejemplo cardinal de algo así es el GMail de Google. Si alguna vez lo usó, notará que descarga una gran parte de HTML, CSS y JavaScript cuando inicia sesión por primera vez y luego todo sucede en segundo plano. Puede moverse entre leer un correo electrónico y procesar la bandeja de entrada y buscarlos y volver a revisarlos sin tener que pedir que se muestre una página completamente nueva.

Es ese tipo de aplicación que estos marcos se destacan por hacer que sea más fácil de desarrollar. Sin ellos, terminarás reuniendo un conjunto diverso de bibliotecas individuales para obtener partes de la funcionalidad (por ejemplo, jQuery BBQ para la gestión del historial, Events.js para eventos, etc.) o terminarás construyendo todo tú mismo y tener que mantener y probar todo usted mismo también. Compare eso con algo como Backbone.js que tiene miles de personas mirándolo en Github, cientos de tenedores donde las personas pueden estar trabajando en él, y cientos de preguntas ya formuladas y respondidas aquí en Stack Overflow.

Pero nada de esto es importante si lo que planea construir no es lo suficientemente complicado como para valer la curva de aprendizaje asociada con un marco. Si todavía está creando PHP, Java u otros sitios en los que el servidor de fondo todavía está haciendo todo el trabajo pesado de construir las páginas web a petición del usuario y JavaScript / jQuery es solo la guinda de ese proceso, no está No va a necesitar o aún no está listo para Backbone.js.

John Munsch
fuente
21
Gracias por la comparación con Gmail. Esa fue una manera fácil de entender que no necesito investigar más a fondo para el sitio que estoy desarrollando.
Eric Hu
15
+1 por mencionar que terminarás escribiendo algo así como backbone.js mismo de todos modos si tu proyecto se vuelve lo suficientemente grande: re La décima regla de Greenspan
Matthew Lock
Si está utilizando PHP o algo similar solo como punto final para un servicio web, entonces no está utilizando el 80 o 90% del marco de desarrollo web de estilo de solicitud / respuesta tradicional. Entonces, hay una gran diferencia en cómo este tipo de aplicación termina siendo desarrollada frente a una aplicación web más tradicional.
John Munsch
2
Gracias John por tu respuesta, es realmente
esclarecedor
1
La referencia de Gmail realmente me abrió los ojos. ¡Gracias!
T.Kaukoranta
95

La columna vertebral es ...

... una biblioteca muy pequeña de componentes que puede usar para ayudar a organizar su código. Viene empaquetado como un solo archivo JavaScript. Excluyendo comentarios, tiene menos de 1000 líneas de JavaScript real. Está escrito con sensatez y puedes leerlo todo en un par de horas.

Es una biblioteca front-end, la incluye en su página web con una etiqueta de script. Solo afecta al navegador y dice poco sobre su servidor, excepto que idealmente debería exponer una API tranquila.

Si tiene una API, Backbone tiene algunas características útiles que lo ayudarán a hablar con ella, pero puede usar Backbone para agregar interactividad a cualquier página HTML estática.

La columna vertebral es para ...

... agregando estructura a JavaScript.

Debido a que JavaScript no impone ningún patrón en particular, las aplicaciones de JavaScript pueden volverse muy desordenadas muy rápidamente. Cualquiera que haya construido algo más que trivial en JavaScript probablemente se encontrará con preguntas como:

  1. ¿Dónde guardaré mis datos?
  2. ¿Dónde pondré mis funciones?
  3. ¿Cómo conectaré mis funciones para que se llamen de manera sensata y no se conviertan en espagueti?
  4. ¿Cómo puedo hacer que este código sea mantenible por diferentes desarrolladores?

Backbone busca responder estas preguntas dándote:

  • Modelos y colecciones para ayudarlo a representar datos y colecciones de datos.
  • Vistas, para ayudarlo a actualizar su DOM cuando cambian sus datos.
  • Un sistema de eventos para que los componentes puedan escucharse entre sí. Esto mantiene sus componentes desacoplados y evita la spaghettificación.
  • Un conjunto mínimo de convenciones sensibles, para que los desarrolladores puedan trabajar juntos en la misma base de código.

Llamamos a esto un patrón MV *. Modelos, Vistas y extras opcionales.

La columna vertebral es ligera

A pesar de las apariencias iniciales, Backbone es fantásticamente ligero, casi no hace nada en absoluto. Lo que hace es muy útil.

Le proporciona un conjunto de pequeños objetos que puede crear y que pueden emitir eventos y escucharse entre sí. Puede crear un pequeño objeto para representar un comentario, por ejemplo, y luego un pequeño objeto commentView para representar la visualización del comentario en un lugar particular del navegador.

Puede decirle a commentView que escuche el comentario y se vuelva a dibujar cuando cambie el comentario. Incluso si tiene el mismo comentario mostrado en varios lugares de su página, todas estas vistas pueden escuchar el mismo modelo de comentarios y permanecer sincronizados.

Esta forma de componer código ayuda a evitar que se enrede incluso si su base de código se vuelve muy grande con muchas interacciones.

Modelos

Al comenzar, es común almacenar sus datos en una variable global o en el DOM como atributos de datos . Ambos tienen problemas. Las variables globales pueden entrar en conflicto entre sí, y generalmente son de mala forma. Los atributos de datos almacenados en el DOM solo pueden ser cadenas, tendrá que analizarlos dentro y fuera nuevamente. Es difícil almacenar cosas como matrices, fechas u objetos, y analizar sus datos de forma estructurada.

Los atributos de datos se ven así:

<p data-username="derek" data-age="42"></p>

Backbone resuelve esto al proporcionar un objeto Modelo para representar sus datos y métodos asociados . Supongamos que tiene una lista de tareas pendientes, tendría un modelo que representa cada elemento de esa lista.

Cuando se actualiza su modelo, se dispara un evento. Es posible que tenga una vista vinculada a ese objeto en particular. La vista escucha los eventos de cambio de modelo y se vuelve a representar.

Puntos de vista

Backbone le proporciona Ver objetos que hablan con el DOM. Todas las funciones que manipulan el DOM o escuchan eventos DOM van aquí.

Una vista generalmente implementa una función de representación que vuelve a dibujar toda la vista, o posiblemente parte de la vista. No hay obligación de implementar una función de renderizado, pero es una convención común.

Cada vista está vinculada a una parte particular del DOM, por lo que puede tener un searchFormView, que solo escucha el formulario de búsqueda, y un shoppingCartView, que solo muestra el carrito de compras.

Las vistas también suelen estar vinculadas a modelos o colecciones específicos. Cuando el Modelo se actualiza, dispara un evento que la vista escucha. La vista podría llamarlos render para volver a dibujarse.

Del mismo modo, cuando escribe en un formulario, su vista puede actualizar un objeto modelo. Cualquier otra vista que escuche ese modelo llamará a su propia función de renderizado.

Esto nos da una separación clara de las preocupaciones que mantiene nuestro código ordenado y ordenado.

La función de render

Puede implementar su función de renderizado de la forma que mejor le parezca. Puede poner un poco de jQuery aquí para actualizar el DOM manualmente.

También puede compilar una plantilla y usarla. Una plantilla es solo una cadena con puntos de inserción. Lo pasa a una función de compilación junto con un objeto JSON y recupera una cadena compilada que puede insertar en su DOM.

Colecciones

También tiene acceso a colecciones que almacenan listas de modelos, por lo que una colección de todo sería una lista de modelos de todo. Cuando una colección gana o pierde un modelo, cambia su orden, o un modelo en una colección se actualiza, toda la colección dispara un evento.

Una vista puede escuchar una colección y actualizarse cada vez que se actualiza la colección.

Puede agregar métodos de clasificación y filtro a su colección, y hacer que se clasifique automáticamente, por ejemplo.

Y eventos para unir todo

En la medida de lo posible, los componentes de la aplicación se desacoplan entre sí. Se comunican mediante eventos, por lo que un ShoppingCartView puede escuchar una colección de ShoppingCart y volver a dibujarse cuando se agrega el carrito.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Por supuesto, otros objetos también podrían estar escuchando el shoppingCart, y podrían hacer otras cosas como actualizar un total o guardar el estado en el almacenamiento local.

  • Las vistas escuchan modelos y se representan cuando el modelo cambia.
  • Las vistas escuchan colecciones y representan una lista (o una cuadrícula, un mapa, etc.) cuando cambia un elemento de la colección.
  • Los modelos escuchan Vistas para que puedan cambiar de estado, tal vez cuando se edita un formulario.

Desacoplar sus objetos de esta manera y comunicarse mediante eventos significa que nunca se enredará, y agregar nuevos componentes y comportamientos es fácil. Sus nuevos componentes solo tienen que escuchar los otros objetos que ya están en el sistema.

Convenciones

El código escrito para Backbone sigue un conjunto suelto de convenciones. El código DOM pertenece a una vista. El código de colección pertenece a una colección. La lógica empresarial va en un modelo. Otro desarrollador que recoja su base de código podrá comenzar a ejecutar.

Para resumir

Backbone es una biblioteca liviana que le da estructura a su código. Los componentes están desacoplados y se comunican a través de eventos para que no termines en un desastre. Puede ampliar su base de código fácilmente, simplemente creando un nuevo objeto y haciendo que escuche sus objetos existentes adecuadamente. Su código será más limpio, más agradable y más fácil de mantener.

Mi librito

Me gustó tanto Backbone que escribí un pequeño libro de introducción al respecto. Puede leerlo en línea aquí: http://nicholasjohnson.com/backbone-book/

También dividí el material en un breve curso en línea, que puede encontrar aquí: http://www.forwardadvance.com/course/backbone . Puede completar el curso en aproximadamente un día.

superluminario
fuente
1
¿La vista no representa técnicamente una plantilla, en realidad no "en sí misma"? Parece desempeñar más el papel de 'Presentador' o 'ViewModel'.
JoeBrockhaus
1
Buen punto, aunque la vista puede representar cualquier cosa que le pidas. Esto podría ser una plantilla, algún jQuery arbitrario, o incluso algo pequeño como un valor en un formulario o un número en una insignia.
superluminary
3
@superluminary realmente ayuda !!
Antoops
2
Impresionante explicación!
TastyCode
3
El libro es muy útil. Gracias por escribirlo.
Sung Cho
32

Aquí hay una presentación interesante:

Una introducción a Backbone.js

Sugerencia (de las diapositivas):

  • Rieles en el navegador? No se .
  • ¿Un marco MVC para JavaScript? Sorta .
  • ¿Una gran máquina de estado gordo? SI !
dpan
fuente
14

Backbone.js es un marco de JavaScript que te ayuda a organizar tu código. Es literalmente una columna vertebral sobre la cual construye su aplicación. No proporciona widgets (como jQuery UI o Dojo).

Le proporciona un conjunto genial de clases base que puede ampliar para crear código JavaScript limpio que interactúe con los puntos finales RESTful en su servidor.

Andrew Hare
fuente
Uso jQuery y mootools y javascript general en gran medida en mi proyecto. Cómo aprender backbone.js me ayudará y cuál es el punto final de Restful. Lo siento si mi pregunta no tiene sentido.
sushil bharwani
1
jQuery es principalmente para la manipulación DOM, ya que Backbone se usa mucho como un marco controlado por eventos y se usa para modelar datos.
RobertPitt
14

JQuery y Mootools son solo una caja de herramientas con muchas herramientas de su proyecto. Backbone actúa como una arquitectura o backbone para su proyecto en el que puede construir una aplicación utilizando JQuery o Mootools.

sv_in
fuente
Sí, en realidad es fácil suponer que el nombre es solo un nombre, por ejemplo, 'jquery' presumiblemente significa 'consulta de JavaScript', lo que realmente no implica mucho por sí mismo. Pero en este caso, literalmente significa columna vertebral :)
msanjay
11

Tengo que admitir que todas las "ventajas" de MVC nunca han hecho que mi trabajo sea más fácil, rápido o mejor. Simplemente hace que toda la experiencia de codificación sea más abstracta y lenta. El mantenimiento es una pesadilla cuando se intenta depurar la concepción de alguien más de lo que significa la separación. No sé cuántas de ustedes han intentado actualizar un sitio FLEX que utilizó Cairngorm como modelo MVC, pero lo que debería tardar 30 segundos en actualizarse a menudo puede demorar más de 2 horas (buscar / rastrear / depurar solo para encontrar un solo evento ) MVC fue y sigue siendo, para mí, una "ventaja" que puedes rellenar.

usuario1415445
fuente
2
Honestamente, cualquier estructura de marco puede ser mutilada y deformada por programadores ignorantes o programadores que simplemente no se preocupan. Una vez trabajé en un sitio de CodeIgniter que debería haber sido muy sencillo y sencillo de construir. Pero el idiota con el que trabajé estaba tan acostumbrado a hacer las cosas a los 90 que lo cambió de un enfoque limpio de OOP a un enfoque procesal deformado dentro de OOP.
Patrick
99
También he visto a alguien escribir un sitio desde cero y escribirlo maravillosamente sin usar ningún marco. En una ocasión, esto fue hecho por un programador PHP relativamente nuevo / verde. Dio la casualidad de que tenía una mente muy racional que resolvió una forma bastante ingeniosa de implementar las cosas. Usar un buen marco solo te llevará hasta cierto punto. Mientras que el uso de excelentes prácticas de programación te llevará años luz en el futuro.
Patrick
2
@ user1415445: lo que usted dice esencialmente significa que tener una sola clase que maneja la lógica de datos, la lógica de representación y la comunicación entre los widgets de la capa de presentación y el código de almacenamiento / recuperación de datos es más fácil de mantener que tener cada una de estas preocupaciones manejadas por clases / objetos separados. Lo cual es difícil de creer. A menos que pueda demostrar una aplicación no trivial escrita dos veces, una con MVC y otra sin ella, que su versión sin MVC es más fácil de mantener, etc.
Behrang Saeedzadeh
1
Idealmente, cualquier aplicación más allá de lo trivial necesita un patrón, y MVC es un patrón excelente cuando se trata de la presentación de datos. Parece que has tenido una mala experiencia, pero eso no es culpa del patrón.
superluminary
la documentación siempre será la piedra de rosetta que falta, sin importar los patrones y prácticas utilizados, porque estos cambian con el tiempo. La belleza de los patrones como MVC es que una vez que comprende la plomería, nunca tiene que perder el tiempo escribiendo plomería cada vez que agrega una nueva función o actualiza una antigua. Entonces sí, hasta que comprenda la plomería, será un ejercicio de futilidad. La única forma de garantizar una comprensión adecuada de los futuros desarrolladores desconocidos es seguir estándares lo suficientemente razonables Y TAMBIÉN documentar bien. Mantener y comprender el desorden spagettified de alguien no es más rápido o más fácil ..
JoeBrockhaus
3

backbone.js es Model-View-Controller (MVC) con JavaScript, pero Extjs es mejor que backbone para MVC Pattern de Java Script

Con la red troncal tienes libertad para hacer casi cualquier cosa que desees. En lugar de tratar de pasar por la API y personalizar, usaría Backbonejs por su simplicidad y facilidad de implementación. Nuevamente, es difícil decir que lo que necesita de los dos es una biblioteca y otro un componente

zandi
fuente
3

Backbone fue creado por Jeremy Ashkenas, quien también escribió CoffeeScript. Como una aplicación con mucho JavaScript, lo que ahora conocemos como Backbone fue responsable de estructurar la aplicación en una base de código coherente. Underscore.js, la única dependencia de la red troncal, también era parte de la aplicación DocumentCloud.

Backbone ayuda a los desarrolladores a administrar un modelo de datos en su aplicación web del lado del cliente con tanta disciplina y estructura como lo haría con la lógica tradicional de la aplicación del lado del servidor.

Beneficios adicionales de usar Backbone.js

  1. Ver Backbone como una biblioteca, no como un marco
  2. Javascript ahora se está organizando de manera estructurada, el modelo (MVVM)
  3. Gran comunidad de usuarios
anish
fuente
2

También agrega enrutamiento utilizando controladores y vistas con KVO. Podrá desarrollar aplicaciones "AJAXy" con él.

Véalo como un marco ligero de Sproutcore o Cappuccino.

benvds
fuente
1

Es un patrón de diseño MVC en el lado del cliente, créame ... Le ahorrará toneladas de código, sin mencionar un código más limpio y claro, un código más fácil de mantener. Al principio podría ser un poco complicado, pero créanme que es una gran biblioteca.

flaalf
fuente
0

Tantas buenas respuestas ya. Backbone js ayuda a mantener el código organizado. Cambiar el modelo / colección se encarga de la representación automática de la vista que reduce la sobrecarga de desarrollo.

Aunque proporciona la máxima flexibilidad para el desarrollo, los desarrolladores deben tener cuidado de destruir los modelos y eliminar las vistas correctamente. De lo contrario, puede haber pérdida de memoria en la aplicación.

FlintOff
fuente
-3

Una aplicación web que implique mucha interacción del usuario con muchas solicitudes de AJAX, que debe cambiarse de vez en cuando y que se ejecuta en tiempo real (como Facebook o StackOverflow) debería usar un marco MVC como Backbone.js. Es la mejor manera de construir un buen código.

Sin embargo, si la aplicación es pequeña, Backbone.js es excesivo, especialmente para los usuarios nuevos.

Backbone le ofrece MVC del lado del cliente y todas las ventajas que esto implica.

usuario1365013
fuente
55
"debe" usar columna vertebral? No puedo ver stackoverflow o facebook, sus dos ejemplos, usando backbone o subrayado en absoluto. ¿Tiene una referencia para ese reclamo?
David Meister
Por supuesto, hay muchas otras bibliotecas MV *, siendo Backbone una de ellas. Sin embargo, en general, MVC ayuda a mantener las cosas ordenadas y ordenadas al desarrollar piezas de código más grandes.
superluminary