BackboneJS, la alternativa a AngularJS y EmberJS: claves para desarrolladores

BackboneJS, la alternativa a AngularJS y EmberJS: claves para desarrolladores

Este marco de aplicaciones web de una sola página rivaliza dentro del mercado con otras dos opciones de enorme poderío dentro de la comunidad: AngulaJS y EmberJS. BackboneJS es una solución para proyectos complejos con uso intensivo de JavaScript.

BBVAOpen4U
|
23 Dic. 2015

AngularJS y EmberJS son los principales marcos de desarrollo de aplicaciones por el lado del cliente, pero no son los únicos. La tercera alternativa, también muy utilizada dentro de la comunidad de desarrolladores, es BackboneJS. Son tres frameworks basados en el paradigma Modelo-Vista-Controlador con los que cualquier programador puede crear la estructura de un proyecto digital. Esta es una guía de claves para acometer desarrollos con BackboneJS.

Hoy en día son muchos los programadores que escogen un marco de desarrollo MVC para el diseño de aplicaciones porque así dejan en manos del framework la sincronización de los cambios entre el documento HTML y el DOM. Es el propio marco el que realiza cada modificación de forma automática sin necesidad de intervención por parte del desarrollador. Al igual que AngularJS y EmberJS, BackboneJS se apoya en bibliotecas JavaScript para el diseño visual del front-end: fundamentalmente jQuery y jQuery Mobile.

Características de BackboneJS

BackboneJS dispone de algunas características que pueden ser una ventaja para cualquier desarrollador de aplicaciones web. Algunas de ellas son:

  • Es un marco para aplicaciones con un uso intensivo de JavaScript.
  • BackboneJS se utiliza para el desarrollo de aplicaciones web de una sola página (SPAs). Dan una experiencia de usuario fluida. Eso se consigue cargando funcionalidades a medida que el usuario las necesita.
  • Una curva de aprendizaje muy corta si el desarrollador ya tiene experiencia con librerías JavaScript como jQuery o Underscore.js, una biblioteca JavaScript para la que BackboneJS tiene dependencia. Comparado con AngularJS o EmberJS, los inicios a la hora de programar suelen ser menos dolorosos para los desarrolladores de JavaScript.
  • BackboneJS es una librería para proyectos complejos. Aplicaciones web con gran cantidad de funcionalidades dinámicas, mucha interacción y muchos eventos trabajando simultáneamente.
  • Binding de datos entre componentes. Automatiza la sincronización de los cambios en los datos entre el código HTML y el DOM.
  • Una solución que permite el uso de colecciones de modelos.
  • Simplifica mucho el uso de vistas.
  • Ordena y facilita el código de las peticiones AJAX al servidor.
  • Integración con API RESTful.   
     

Las partes de BackboneJS

BackboneJS dispone de algunos elementos básicos cuya existencia son fundamentales en el uso de este marco de desarrollo. Son los siguientes:

Modelos y Vistas.

Como cualquier marco de desarrollo basado en el paradigma Modelo-Vista-Controlador, la lógica de negocio está separada de la interfaz de usuario. Así es mucho más fácil trabajar la interfaz por parte del equipo de desarrollo porque evita cualquier problema. El modelo es el núcleo del marco, que se encarga de ordenar los datos de la aplicación web: organiza la lógica de datos y negocio y emite eventos cuando los datos cambian.

Así se crea un modelo en BackboneJS:

var Human = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});

var human = new Human(); 

Cualquier cambio que se realice en el modelo se puede guardar en la base de datos mediante el uso del método save (un tutorial del site StackOverFlow).

La vista es la parte visible, la interfaz de usuario de la aplicación que se está desarrollando con BackboneJS. Se encarga de gestionar los elementos del DOM. Normalmente las vistas reaccionan ante cualquier cambio en los datos de un modelo y se renderizan de forma automática para sincronizarse. Esto convierte el desarrollo en una tarea más sencilla.

Por tanto, la vista hace tres cuestiones principalmente:

  1. Reacciona ante los cambios de los datos del modelo y renderiza de nuevo la interfaz de usuario para actualizarla.
  2. Maneja toda la interactividad con el usuario.
  3. Remite al modelo los inputs de esa interacción del usuario.
     

Colecciones

Una colección permite manejar un conjunto de modelos relacionados. Proporciona todo tipo de funciones para la realización, por ejemplo, de cálculos en un grupo de modelos y facilita la gestión de la carga de los nuevos modelos por parte del servidor. Las colecciones generan un evento add (añadir) o remove (eliminar) cada vez que llega o se va un elemento a esa colección. Cada evento que se produzca en uno de los modelos provoca de forma automática un evento en la colección. 

Los modelos dentro de una colección suelen estar ordenados por defecto según el orden de inserción. De todas formas, es posible cambiar el orden de los elementos de la colección mediante la función comparator, que ordena los elementos de forma automática cada vez que se produce una adición nueva a ese conjunto de modelos.   

Clientes = Backbone.Collection.extend({
    comparator: function(cliente){
        // ordenamos por el atributo nombre
        return cliente.get('nombre');
    }
    // ...
});

Routing con urls

El Router permite que el usuario pueda navegar por la aplicación y encuentre en cada momento urls vinculadas y actualizadas en cada lugar de esa app. Es lo que permite que el usuario no se pierda nunca en esa navegación, puede avanzar a nuevas páginas dentro de la app o bien volver a hacia atrás. El usuario cambia de vistas y modelos, pero el comportamiento es idéntico.

Primeros pasos para empezar a programar

Para comenzar a utilizar BackboneJS es necesario seguir estos pasos: 

  • Instalación primero de todas las dependencias de BackboneJS. Para la gestión de las vistas y la interfaz de usuario es necesario la configuración de jQuery. Para funciones de tipo auxiliar, BackboneJS tiene una dependencia en Undersore.js. Además, para el procesamiento de JSON necesita la librería json2.js: proporciona dos funciones importantes para BackboneJS (JSON.parse y JSON.stringify).
  • Si el desarrollo de la aplicación se quiere hacer con Backbone Boilerplate, este tiene un par de dependencias en estas dos bibliotecas: Grunt, un gestor de proyectos mediante líneas de comandos, y Grunt-bbb, el core de Backbone Boilerplate. Este a su vez tiene dependencia de Git, el software de control de versiones. También tiene una dependencia del entorno de desarrollo por el lado del cliente en JavaScript Node.js. Este enlace sirve para su descarga e instalación.
  • El paso final es la configuración de los scripts. El desarrollador debe crear su index.html incluyendo los scripts de las librerías que va a usar:

<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>

Síguenos en @BBVAAPIMarket