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:
- ¿Dónde guardaré mis datos?
- ¿Dónde pondré mis funciones?
- ¿Cómo conectaré mis funciones para que se llamen de manera sensata y no se conviertan en espagueti?
- ¿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.