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?

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.

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.

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.

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 !

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.

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.

Este es un video introductorio bastante bueno: http://vimeo.com/22685608

Si está buscando más sobre Rails y Backbone, Thoughtbot tiene este libro bastante bueno (no gratuito): https://workshops.thoughtbot.com/backbone-js-on-rails

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.

Aquí hay una publicación rápida de Inicio que escribí en BackboneJS. ¡Espero eso ayude! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

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

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

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.

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.

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.

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.