javascript - template - Backbone.js y jQuery

backbonejs github

Question

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 entender esta afirmación con un simple ejemplo práctico?

También una característica importante del framework 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 a través de toda la aplicación. Entonces podemos tener el modelo / datos y la vista sincronizados en varias páginas ... (tipo de global)

Answer 1

Backbone / Knockout se usa generalmente para aplicaciones de una sola página. Entonces, mientras que 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 para ello. Al menos en mi experiencia, uno de los mayores desafíos al construir 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 principal típica son:

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

Con respecto a su pregunta sobre cómo mantener sincronizados los datos 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 direcciones 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 sin problemas (sin páginas de recarga), buen soporte de caché ya que todo excepto los datos json es contenido estático, para dispositivos 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).

Answer 2

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

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

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 evento 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" );
});

Answer 3

Nunca escuché de personas que usan backbone.js en varias páginas. Casi siempre es un tipo de aplicación de una sola página.

La única página puede tener muchos modelos, vistas y estados diferentes y puede dar como resultado una aplicación completa y poderosa.

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

Si no desea hacer una aplicación de una sola página (esto solo significa que una aplicación sin actualización de página o cambios, pero la url aún puede cambiar y puede parecer varias páginas para el usuario), entonces puede mantener todo su MVC activado. el servidor y no necesita columna vertebral.

Editar:

Lo que hace la red troncal es mover algunas de las cosas MVC normalmente manejadas 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 de una sola página de JavaScript. El servidor se convierte en una fuente de datos JSON / REST. Si no estás preparado para hacer eso, entonces backbone.js no es tan útil.

Answer 4

Tu frase de apertura fue realmente una muy buena declaración de las diferencias entre Backbone.js y jQuery, así que vamos a descomprimirlo un poco.

Por un lado, las dos bibliotecas no compiten en absoluto; son gratuitas.

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

• Presentaciones de diapositivas animadas
• Mejoras de control de formulario, como un número de estilo iOS "spinner"
• Alternar la visibilidad de los elementos en función de un nombre de clase

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

• Cree un álbum de fotos, donde el usuario hace clic en una miniatura y puede 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 de maestro / 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: seleccionando elementos de página, suavizando las diferencias en cómo los navegadores manejan los eventos.

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

Backbone.js se beneficia de jQuery, o algo así, para ayudar a convertir los resultados de los datos y la lógica de su aplicación en 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''s $(function () {}); para encender las piezas de tu control Backbone. Probablemente también muestre mensajes de error de validación de campo de formulario con jQuery.

Ciertamente puede construir 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 trabajando en uno de esos controles en Backbone.js. Como último ejemplo, aquí hay un resumen rápido de cómo mi proceso de pensamiento difiere cuando se trabaja con el mismo control en las dos bibliotecas diferentes.

En jQuery, me preocupa:

• ¿Estoy usando el selector correcto para tomar el grupo de li elementos que quiero?
• ¿Necesito repoblar esa lista de valores cuando finaliza esta llamada Ajax?
• ¿Cómo puedo volver a colocar estos valores de matriz en los elementos de input en la página?

En Backbone, estoy más centrado en:

• ¿Cuál es la lógica correcta para validar este conjunto de propiedades en mi elemento de modelo?
• Cuando el usuario hace clic en el botón Agregar, ¿debo agregar un nuevo elemento a la colección inmediatamente, 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 se elimina el artículo inmediatamente anterior o posterior?

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

Para terminar, note que he estado usando las palabras "control" y "aplicación" cuando hablo sobre ejemplos de Backbone.js. No es cierto que Backbone.js sea solo para aplicaciones de una sola página. Es cierto, sin embargo, que Backbone.js es bueno para construir aplicaciones complejas que manipulan datos y manejan mucha lógica. Sería tonto usarlo para elementos de UI de pequeña escala: la estructura extra que impone no es necesaria.

Actualización: en el tema de varias páginas, sí, Backbone proporciona un mecanismo poderoso para persistir en sus datos. Cada modelo tiene un método de save 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 es cómo probablemente terminaremos usando Backbone en el trabajo. Si bien me encantaría construir una aplicación de una sola página, tenemos 10 años de trabajo en nuestra aplicación existente de varias páginas. Estamos buscando reconstruir algunos de nuestros componentes de interfaz de usuario más intensos en Backbone, luego sincronizar los cambios en el servidor antes de que el usuario se mueva a otra página.