> Manuales > Manual de BackboneJS

Qué son los modelos y las colecciones, y qué ventajas nos ofrece BackboneJS para tratarlos.

A lo largo del Manual de BackboneJS estamos explorando las posibilidades de este framework Javascript. Hemos dedicado los artículos precedentes a las generalidades de esta herramienta y a las posibilidades de los eventos.

En este artículo nos centraremos en las posibilidades de los modelos, que no son más que la manera que usamos en Backbone para almacenar los datos de la aplicación. Además, dedicaremos también unas líneas para introducir otro de los integrantes de Backbone.JS estrechamente ligado a los modelos, como son las colecciones.

Modelos en BackboneJS

A continuación veamos qué son los modelos en el framework Javascript BackboneJS y para qué nos sirven, de modo que podamos entender las ventajas que podemos disfrutar al usarlos.

Los modelos, como en otros sistemas enfocados a MCV, se refieren a los datos de la aplicación. Si tengo una aplicación que trabaja con suscripciones de correo electrónico, el modelo será cada una de las cuentas de usuario del sistema. Si tengo una aplicación que se encarga de mostrar una base de datos de películas, el modelo será cada una de esas películas.

Los modelos en BackboneJS se pueden crear con cualquier objeto en notación JSON. En ellos se escriben los datos que podemos tener dentro del modelo. Al extenderlos con la funcionalidad de BackboneJS vamos a conseguir varias mejoras:

Esto, en pocas palabras, hace posible que, si modificas un valor de un modelo, la aplicación puede reaccionar en varios otros objetos que estén suscritos a los eventos de cambios en los datos de un modelo.

Para entender la potencia de esto, supongamos que estás mostrando en algún lugar los datos de un usuario. Si modificas con Javascript los datos de ese usuario en un lugar, tienes que estar repasando a mano todos los otros lugares donde estás mostrando esos datos de ese usuario y actualizarlos manualmente. Usando Backbone todo esto es automático y tienes los modelos desacoplados de las vistas, comunicando a través de eventos. Cuando cambias algo en un modelo, se producen eventos y esos eventos los puedes estar escuchando en varias vistas diferentes que podrían actualizarse automáticamente cuando se producen cambios en el modelo.

Esto te permite no solo automatizar muchos de los procesos de visualización de la información actualizada a lo largo del sitio web, sino que facilita la reutilización de los modelos en otros proyectos, manteniendo de una manera sencilla las automatizaciones.

Sincronización con el servidor

Otra de las genialidades de BackboneJS está en el "sync", pues si yo lo deseo, al crear el modelo puedo proveerle de una URL y hacer "save" en el modelo para llamar al servidor a esa URL y guardar sus cambios. Dicho de otra forma, desde un modelo puedo ejecutar una función de guardado que automáticamente hace una solicitud por AJAX a mi servidor, enviándole los datos nuevos que debe guardar.

Es decir, no tienes que hacer mucho, simplemente tienes tus modelos y al hacer el "save" de sus valores, BackboneJS llama por si solo al servidor por AJAX. En esa llamada automática Backbone ya envía los datos con un formato que facilita su recepción.

Nota: Obviamente, esto requiere que en el backend, con programación del lado del servidor en cualquier lenguaje de tu preferencia, te programes la página que va a recibir esos datos y que va a actualizar las estructuras donde los guardas, como base de datos. Sin embargo, una vez las tienes creadas es muy fácil reutilizarlas en otros proyectos donde también utilices ese modelo.

Colecciones en BackboneJS

Ahora nos vamos a dedicar a entender qué son las colecciones en BackboneJS y qué procesos pueden facilitarnos.

Una colección, como su propio nombre indica, es un conjunto de datos. En BackboneJS generalmente una colección será un conjunto de modelos.

Nota: Realmente por la arquitectura del framework en una colección no estamos obligados a guardar únicamente modelos. Sin embargo, como podremos observar en la práctica, en las colecciones acabarás guardando modelos y es allí donde las cosas tendrán más sentido al usar BackboneJS y podrás sacarle mayor partido a estas estructuras.

Con las colecciones, del mismo modo que ocurría con los modelos, tenemos a nuestra disposición la posibilidad de escuchar y producir eventos y la interfaz "sync" para la sincronización con el servidor.

Gracias a la sincronización, si tienes una colección y le has hecho cambios, podrás hacer un "save" y entonces los datos que hay en los modelos de la colección se enviarán al servidor mediante AJAX y de manera automática para el desarrollador. De manera similar, cuando carga la aplicación, también en las colecciones podremos hacer "fetch" para cargar datos en ellas que nos vienen del servidor. Automáticamente, la colección hace por AJAX el "get" al servidor y va a cargar en ella los datos que éste le devuelva.

Conclusión

La idea de este artículo ha sido más bien el aclarar conceptos y entender por qué BackboneJS es una herramienta tan útil. Todavía tenemos otras estructuras y clases que debemos identificar para poder observar el alcance global de backbone.JS y seguiremos con ello en el siguiente artículo.

Nota:Las implementaciones en código fuente de modelos y colecciones los veremos un poco más adelante, cuando comencemos con las prácticas.

En el siguiente artículo podrás conocer con detalle qué son las vistas para Backbone.JS y cuáles son sus utilidades en el desarrollo web basado en este framework.

Erick Ruiz de Chavez

Desarrollador web, Geek "de hueso colorado", Marido feliz.

Manual