A lo largo del Manual de Bakcbone.js hemos podido obtener una introducción teórica de lo que podemos hacer con este framework. Ahora que ya sabemos qué nos ofrece podemos ponernos manos a la obra y empezar a ver algo de código. Estoy seguro de que la mayoría estará con ganas, así que comencemos aprendiendo cómo podemos hacer disponible el framework BackboneJS en una página web.

Antes de comenzar, podemos hacer un análisis y es que BackboneJS es especialmente útil para "onepagesites", sitios que solo tienen un único documento HTML y donde toda la interacción con el usuario se implementa con Javascript, haciendo uso de AJAX para comunicar con el servidor. Por ello, en la mayoría de los proyectos tendremos un único archivo index.html. En ese index.html tendrás que incluir las librerías necesarias, con scripts que tendrás descargados en archivos .js, o utilizando los correspondientes CDN.

Descarga Backbone.js y Underscore.js

De momento vayamos a la página de BackboneJS para hacer la descarga del framework. Ofrecen el archivo en diversas versiones, para desarrollo o producción. Actualmente, el archivo de descarga para producción, "Gzipeado" y minimizado, ocupa 6.3kb, en la versión 1.0.0.

Además, BackboneJS tiene una dependencia con Underscore.js, que es una librería que amplía el API de Javascript nativo con muchas funciones y métodos adicionales, básicos para realizar tareas habituales en Backbone.js.

Puedes obtener esta dependencia de Backbone en la página de la librería Underscore.js, obra de los mismos autores que Backbone.js.

Instalando los scripts

Después de descargar estas librerías, crearás tu index.html incluyéndolas en el código con las siguientes etiquetas SCRIPT. <script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script> Esta parte no tiene misterios. A partir de ahora podremos disfrutar de Backbone.js en nuestro proyecto.

Creando un primer script con Backbone.js

Backbone.js no es una librería muy que se preste a hacer el típico "hola mundo" donde tengamos una idea buena de su potencia o flujo de trabajo habitual. Recuerda que si quieres aplicar un evento a un botón o hacer todo tipo de cosas simples, este framework no es para ti. Por eso, pensar en un primer script sencillo y representativo se hace un poco difícil.

No obstante, vamos a hacer unas pocas líneas de código en las que crearemos un modelo y ejecutaremos algunos métodos disponibles. La idea no es explicar todavía todos los detalles de estas líneas de código, así que te pedimos algo más de paciencia si piensas que dejamos en el aire explicaciones importantes.

Con las siguientes líneas creamos la clase de un modelo y un objeto de esa clase/modelo recién creado, al que le damos unos datos.

//creamos la clase del modelo
var Usuario = Backbone.Model.extend({});
//creamos una instancia de ese modelo
var miUsuario1 = new Usuario({
   nombre: "Erick"
});

Con esto no conseguimos nada representativo, ningún resultado aparente ni ningún mensaje, pero ahora fíjate en las siguientes líneas de código.

//asignamos un valor a la propiedad "url"
miUsuario1.url = "/usuarios";

La propiedad "url" la veremos más adelante, pero podemos decir ya que es la dirección donde entiende Backbone se realizarán las operaciones de guardado o lectura de los datos del modelo.

//guardo este usuario
miUsuario1.save();

Entonces verás en la consola de tu navegador que Backbone.js intenta hacer un "POST" de ese usuario al servidor. Esto lo hace Backbone por AJAX sin que tengamos que configurar nada, simplemente enviando los datos a la URL que habíamos definido anteriormente.

Luego, si yo quisiera recuperar los datos de ese usuario desde el servidor, podemos invocar a fetch() y Backbone ejecutará una operación GET, por AJAX, también de forma automática y sin que tenga que hacer nada explícitamente.

//recupero datos de un usuario
miUsuario1.fetch();

Los errores que podrás ver en la consola, como resultado de ejecutar estas sentencias llamando a los métodos save() y fetch() del modelo, te los muestra Backbone.js porque intentas acceder a la supuesta URL (que no existe), donde se supone debería realizarse la gestión de los usuarios. En concreto, podrás apreciar un mensaje en la consola de errores Javascript parecido al siguiente.

Failed to load resource: the server responded with a status of 404 (Not Found).

Aunque nos arroje un error, podemos comprobar hasta qué punto nos podrá simplificar la vida el trabajo con modelos y cómo es sencillo para volcarlos al servidor o traer sus datos actualizados. De todos modos, esto no es más que el principio.

En el siguiente artículo te explicaremos cómo implementar eventos en Backbone.js y podremos seguir aprovechando diversas de las cualidades más importantes de este framework.