javascript jquery backbone.js

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



jquery (15)

La columna vertebral es ...

... una biblioteca muy pequeña de componentes que puede usar para organizar su código. Viene empaquetado como un solo archivo de 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 de aplicaciones para usuario, 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 de descanso.

Si tiene una API, Backbone tiene algunas funciones ú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 ...

... añadiendo estructura a JavaScript.

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

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

Backbone busca responder estas preguntas dándote:

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

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

Espina dorsal es la luz

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

Te da un conjunto de pequeños objetos que puedes crear, y que pueden emitir eventos y escucharse entre ellos. Podría 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 en el navegador.

Puede decirle a commentView que escuche el comentario y se vuelva a dibujar cuando el comentario cambie. 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 unas con otras, y generalmente son de mala forma. Los atributos de datos almacenados en el DOM solo pueden ser cadenas, tendrá que analizarlos y volver a analizarlos. Es difícil almacenar cosas como matrices, fechas u objetos, y analizar sus datos de forma estructurada.

Los atributos de los 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 su modelo se actualiza, 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 te proporciona Ver objetos que hablan con el DOM. Todas las funciones que manipulan el DOM o escuchan eventos DOM van aquí.

Una vista normalmente implementa una función de renderización que redibuja la vista completa, o posiblemente parte de la vista. No hay obligación de implementar una función de render, 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íficas. Cuando el modelo se actualiza, se dispara un evento que la vista escucha. La vista podría llamar a render para redibujarse.

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

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

La funcion de render

Puede implementar su función de renderización de la forma que considere más adecuada. Puede poner algunos jQuery aquí para actualizar el DOM manualmente.

También puede compilar una plantilla y usar eso. 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 las colecciones que almacenan listas de modelos, por lo que todoCollection 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 la colección se actualiza.

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

Y eventos para atarlo todo junto

En la medida de lo posible, los componentes de la aplicación están desacoplados entre sí. Se comunican mediante eventos, por lo que un shoppingCartView puede escuchar una colección de shoppingCart y redibujarse cuando se agrega el carrito.

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

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

  • Las vistas escuchan Modelos y renderizan 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 utilizando eventos significa que nunca se enredará en nudos, y agregar nuevos componentes y comportamiento 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 de convenciones sueltas. El código DOM pertenece a una vista. El código de colección pertenece a una colección. La lógica de negocios 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 tu 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 de manera adecuada. 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 curso corto en línea, que puede encontrar aquí: http://www.forwardadvance.com/course/backbone . Puedes completar el curso en aproximadamente un día.

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

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

Aquí hay una presentación interesante:

Una introducción a Backbone.js

Pista (de las diapositivas):

  • ¿Rieles en el navegador? No
  • ¿Un framework MVC para JavaScript? Sorta
  • ¿Una gran máquina de estados gordos? Si

Backbone.js es básicamente un marco de luz súper ligero que te permite estructurar tu código Javascript en una forma MVC (Modelo, Vista, Controlador) donde ...

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

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

y el controlador opcional que, en este caso, le permite guardar el estado de su aplicación de 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 Javascript Spaghetti: el código se organiza y se descompone en archivos .js semánticamente significativos que luego se combinan utilizando 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

  • extremadamente útil biblioteca de utilidad de subrayado

  • 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 envolverlo en mi cabeza 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 with Rails como back-end:

CloudEdit: Un tutorial 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/

También hay 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.

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

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

Debo admitir que todas las "ventajas" de MVC nunca han hecho mi trabajo más fácil, más 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 trata de depurar la concepción de lo que significa la separación. No sé cuántos de ustedes han intentado actualizar un sitio FLEX que usó Cairngorm como modelo MVC, pero lo que debería tomar 30 segundos para actualizar a menudo puede llevar más de 2 horas (buscar / rastrear / depurar solo para encontrar un evento). ). MVC era y sigue siendo, para mí, una "ventaja" que puedes conseguir.

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

JQuery y Mootools son solo una caja de herramientas con muchas herramientas de su proyecto. La red troncal actúa como una arquitectura o una red troncal para su proyecto en la que puede crear una aplicación utilizando JQuery o Mootools.

La columna vertebral fue creada por Jeremy Ashkenas, quien también escribió CoffeeScript. Como una aplicación pesada en 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 formaba 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 una manera estructurada, el Modelo (MVVM)
  3. Gran comunidad de usuarios

Si va a crear interfaces de usuario complejas en el navegador, probablemente se encontrará inventando la mayoría de las piezas que conforman marcos como Backbone.js y Sammy.js. Entonces, la pregunta es, ¿estás construyendo algo lo suficientemente complicado en el navegador como para merecer su uso (para que no termines inventando lo 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 completamente nuevas, 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 has usado, notarás que descarga una gran parte de HTML, CSS y JavaScript cuando inicias sesión por primera vez y luego, todo eso sucede en segundo plano. Puede moverse entre la lectura de un correo electrónico, el procesamiento de la bandeja de entrada y la búsqueda, y volver a revisarlos todos sin tener que pedir una página completamente nueva.

Es ese tipo de aplicación que estos marcos sobresalen en hacer más fácil de desarrollar. Sin ellos, terminará reuniendo un conjunto diverso de bibliotecas individuales para obtener partes de la funcionalidad (por ejemplo, jQuery BBQ para gestión de historia, Events.js para eventos, etc.) o terminará construyendo todo por sí mismo. y tener que mantener y probar todo también. Contrasta eso con algo como Backbone.js que tiene miles de personas mirándolo en Github, cientos de bifurcaciones donde la gente podría estar trabajando en ello, y cientos de preguntas ya formuladas y respondidas aquí en .

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

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

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

Tantas buenas respuestas ya. Backbone js ayuda a mantener el código organizado. Cambiar el modelo / colección se encarga de que la vista se muestre automáticamente, lo 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 ejecute en tiempo real (como Facebook o ) debe 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 primerizos.

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

backbone.js es Model-View-Controller (MVC) con JavaScript pero Extjs mejor que backbone para MVC Pattern by java script

Con la columna vertebral tienes libertad para hacer casi cualquier cosa que desees. En lugar de tratar de bifurcar la API y personalizarla, usaría Backbonejs por su simplicidad y facilidad de implementación. Una vez más, es difícil decir que lo que necesita de los dos es una biblioteca, otro componente