Backbone.js y jQuery

Se dice que Backbone maneja todas las abstracciones de nivel superior, mientras que jQuery o bibliotecas similares trabajan con DOM, normalizan eventos, etc.

¿Podría alguien ayudarme a comprender esta afirmación con un simple ejemplo práctico?

También una característica importante del marco MVC como Backbone, Knockout es que mantiene el modelo (datos) y la vista sincronizados. Pero esto parece ser específico a nivel de página y no en toda la aplicación. Entonces, ¿podemos tener el modelo / datos y la vista sincronizados en varias páginas? (Algo global)

Backbone / Knockout se utiliza normalmente para aplicaciones de una sola página. Entonces, si bien jQuery es una caja de herramientas que se puede usar con cualquier página web, Backbone está diseñado para un tipo específico de aplicación y lo ayuda a organizar su código. Al menos en mi experiencia, uno de los mayores desafíos en la creación de una aplicación de una sola página es mantener el código limpio y modular, y la red troncal ayuda mucho con esto.

Las características de una aplicación troncal típica son:

• Página html esencialmente estática, sin nada generado en el servidor
• El servidor actúa como una API REST de json, que proporciona el contenido para la aplicación
• Los elementos dom para mostrar los datos se crean con javascript en las vistas de la red troncal, utilizando jQuery y varias bibliotecas de plantillas para ayudar
• La comunicación con el servidor, así como entre diferentes partes de la aplicación, se realiza a través de los modelos de backbone.

Con respecto a su pregunta sobre cómo mantener los datos sincronizados en varias páginas, mi respuesta instintiva es que no necesita varias páginas: el usuario puede percibir que la página está cambiando, la dirección en la barra de URL cambia gracias a la funcionalidad pushState, pero técnicamente la toda la aplicación es una página.

Las mayores ventajas de este tipo de enfoque son una experiencia de usuario fluida (sin recargar páginas), un buen soporte de almacenamiento en caché ya que todo, excepto los datos json, es contenido estático, para los objetivos móviles la posibilidad de convertir la aplicación web en una aplicación móvil con phoneGap (porque todo excepto json es estático).

Su oración de apertura fue en realidad una muy buena declaración de las diferencias entre Backbone.js y jQuery, así que analicemos un poco.

Por un lado, las dos bibliotecas no compiten en absoluto: son complementarias.

Como ejemplo, aquí hay algunas cosas que haría con jQuery:

• Presentaciones de diapositivas animadas
• Mejoras en el control de formularios, como una "ruleta" de números al estilo de iOS
• Alternar la visibilidad de los elementos según el nombre de una clase

Y algunas cosas que podría hacer en Backbone.js:

• Cree un álbum de fotos, donde el usuario haga clic en una miniatura y pueda ver una versión más grande de la foto, junto con algunos datos como la cámara que se utilizó, la ubicación y el nombre del fotógrafo.
• Cree un tipo de página maestra / de detalles que presente una cuadrícula de datos y le permita al usuario hacer clic en elementos individuales y actualizarlos en un formulario.

jQuery sobresale en el nivel micro: selecciona elementos de la página, suavizando las diferencias en la forma en que los navegadores manejan los eventos.

Backbone.js es más amplio. Le ayuda a administrar los datos y la lógica de la aplicación. En el ejemplo de álbum de fotos anterior, Backbone proporciona varias estructuras útiles: tendría algo que contenga todos los datos relacionados con las fotos (un modelo), una lista de todas las fotos del álbum (una colección) y un lugar para colocar lógica que determina lo que sucede cuando un usuario hace clic en una miniatura (la vista). Esas son las piezas principales de un control o aplicación Backbone.

Sin embargo, Backbone.js se beneficia de jQuery, o algo parecido, para ayudar a representar los resultados de los datos y la lógica de su aplicación en el DOM. Es común, por ejemplo, usar jQuery para seleccionar el elemento en la página que servirá como contenedor para su aplicación Backbone. También es común usar jQuery $(function () {});para activar las piezas de su control Backbone. Probablemente también muestre mensajes de error de validación de campos de formulario con jQuery.

Sin duda, puede crear interfaces de usuario grandes y complejas en jQuery. Tenemos algunos en la aplicación que mantengo en el trabajo. Pero es difícil trabajar con ellos porque jQuery no está diseñado para proporcionar estructura a una aplicación. En particular, la API de jQuery, que se basa en seleccionar grupos de elementos y luego pasar funciones de devolución de llamada que manipulan esos elementos, no es un buen patrón para usar en una aplicación o control grande y complejo. Terminas con muchas funciones anidadas y es muy difícil ver qué está pasando.

Actualmente estoy reelaborando uno de esos controles en Backbone.js. Como ejemplo final, aquí hay un resumen rápido de cómo mi proceso de pensamiento difiere cuando trabajo en el mismo control en ambas bibliotecas diferentes.

En jQuery, me preocupa:

• ¿Estoy usando el selector derecho para tomar el grupo de lielementos que quiero?
• ¿Necesito volver a completar esa lista de valores cuando se complete esta llamada Ajax?
• ¿Cómo puedo volver a poner estos valores de matriz en los inputelementos de la página?

En Backbone, estoy más enfocado en:

• ¿Cuál es la lógica correcta para validar este conjunto de propiedades en mi artículo modelo?
• Cuando el usuario hace clic en el botón Agregar, ¿debo agregar un nuevo elemento a la colección de inmediato o debo esperar hasta que haya completado todos los datos y sea "válido"?
• ¿Cómo debería responder un artículo de mi colección cuando el artículo inmediatamente antes o después de que se elimine?

jQuery maneja los detalles esenciales, y Backbone es más de alto nivel.

Para terminar, observe que he estado usando las palabras "control" y "aplicación" al discutir ejemplos de Backbone.js. No es cierto que Backbone.js sea solo para aplicaciones de una sola página. Sin embargo, es cierto que Backbone.js es bueno para crear aplicaciones complejas que manipulan datos y manejan mucha lógica. Sería una tontería usarlo para elementos de interfaz de usuario a pequeña escala; la estructura adicional que impone no es necesaria.

Actualización: en el tema de varias páginas, sí, Backbone proporciona un mecanismo poderoso para conservar sus datos. Cada modelo tiene un savemétodo que ejecutará una llamada AJAX para almacenar los cambios en el servidor. Por lo tanto, siempre que guarde sus datos sobre la marcha, puede tener una aplicación de varias páginas. Es un modelo muy flexible y así es como probablemente terminemos usando Backbone en el trabajo. Si bien me encantaría crear una aplicación de una sola página, tenemos 10 años de trabajo en nuestra aplicación de varias páginas existente. Buscamos reconstruir algunos de nuestros componentes de IU más intensos en Backbone y luego sincronizar los cambios con el servidor antes de que el usuario se mueva a una página diferente.

Nunca he oído hablar de personas que usen backbone.js en varias páginas. Casi siempre es algún tipo de aplicación de una sola página.

La página única puede tener muchos modelos, vistas y estados diferentes y puede resultar en una aplicación potente y completa.

Si ya tiene una representación de vista / plantilla del lado del servidor en java, entonces backbone.js NO es para usted. Para aprovechar al máximo backbone.js, debe mover o duplicar parte de ese código en el javascript frontal.

Si no desea hacer una aplicación de una sola página (esto solo significa una aplicación sin actualizaciones o cambios de página, pero la URL aún puede cambiar y puede verse como varias páginas para el usuario), entonces puede mantener todas sus MVC en el servidor y no necesita una red troncal.

Editar:

Lo que hace la red troncal es mover algunas de las cosas de MVC que normalmente se manejan en el servidor y moverlas al cliente. Para muchas personas, esto significa olvidarse del servidor y simplemente escribir su aplicación como una aplicación javascript de una sola página. El servidor se convierte en una fuente de datos JSON / REST. Si no está preparado para hacer eso, entonces backbone.js no es tan útil.

Backbone es un framework MV * mientras que jQuery es un kit de herramientas DOM.

Las características principales de una aplicación MV * son enrutamiento, enlace de datos, plantillas / vistas, modelos y acceso a datos. Backbone podría depender parcialmente de jQuery.

jQuery es una API sólida para consultar el DOM con un amplio soporte de navegador y una comunidad vibrante. Viene con manejo de eventos, objetos diferidos y animaciones.

Enlace de eventos simple usando jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});