BackBone JS Una introducción.

Presentación del tema: "BackBone JS Una introducción."— Transcripción de la presentación:

1 BackBone JS Una introducción

2 Qué es BackBone es una librería de unos 4kb que provee una estructura para aplicaciones que se basan fuertemente en javascript. Provee “modelos” con bindeos de tipo key-value, eventos, colecciones con una API de funciones, vistas asociadas a los eventos, y conexión vía una interface RESTful con JSON. Funcionamiento: cuando alguna propiedad del modelo cambia, se notifica a las vistas que “escuchan” los cambios en el modelo y las vistas se actualizan automáticamente a sí mismas según corresponda, sin la necesidad de manejarlas manualmente. Permite separar más prolijamente los datos de la presentación. El modelo se sincroniza con el servidor mientras que las vistas escuchan cambios a los objetos suscriptos del modelo, y renderizan el HTML que les corresponde.

3 ¿Reemplaza a jQuery? No, no se superponen, más bien son complementarios, tienen alcances y usos diferentes. Backbone maneja abstracciones de un nivel más alto, mientras jQuery trabaja con el DOM, normaliza eventos, etc.

4 ¿Por qué usar Backbone? Porque muy frecuentemente el código de front-end se convierte en una madeja desprolija de callbacks anidados, manipulaciones al DOM, HTML de presentación, etc. Backbone ofrece una manera más limpia y elegante de manejar ese caos.

5 ¿Dónde usar Backbone? Backbone es ideal para front-ends pesados y con mucho manejo de datos. Por ejemplo, una aplicación con 50 eventos diferentes, con un modelo de varios tipos de datos, con objetos con 6 métodos de persistencia y de lógica de negocio cada uno, con interacción entre objetos y elementos del DOM, etc. Como podrían ser la interfaz de GMail, Twitter, Facebook, y otras aplicaciones con un front-end cargado y complejo. Backbone hace más fácil “navegar” y entender el código.

6 En definitiva … en lugar de manejar un JSON enorme, toquetear el DOM manualmente y realizar muchas llamadas ajax, se trata de poder llegar a escribir: book.save({title: "Lorem Ipsum"}); … y que todo el UI que referencia al libro se actualice automáticamente y los cambios se guarden en el servidor.

7 Modelo Un modelo representa una entidad, y contiene los datos y buena parte de la lógica: conversiones, validaciones, propiedades computadas, etc. var Game = Backbone.Model.extend({ initialize: function(){ alert(“¡Hola!”); }, defaults: { name: 'Default title', releaseDate: 2012, } });

8 Modelo /* New */ var juego = new Game({ name: “Maniac Mansion", releaseDate: 2012}); /* Get */ var release = juego.get('releaseDate'); /* Set (guarda en memoria, en cookies) */ juego.set({ name: “Maniac Mansion 2"}); /* Guardar (llama al servidor con POST por ser un nuevo objeto, sino sería una llamada PUT) */ juego.save();

9 Colección Las colecciones en Backbone son esencialmente una colección de modelos. Una colección de juegos: var GamesCollection = Backbone.Collection.extend({ model : Game, } });

10 Colección var GamesCollection = Backbone.Collection.extend({ model : Game, old : function() { return this.filter(function(game) { return game.get('releaseDate') < 2000; }); } }); var games = new GamesCollection games.get(3); /* Retorna el juego con id=3 */

11 Colección var GamesCollection = Backbone.Collection.extend({ model : Game, url: '/games' } }); var games = new GamesCollection games.fetch(); El método fetch hace una llamada asincrónica al servidor y popula la colección con los resultados.

12 Vista Para los puristas de MVC, parece más un controlador que una vista. Tiene fundamentalmente dos tareas: Escuchar a los eventos disparados por el DOM, modelos y colecciones. Representar el estado de la aplicación y el modelo de datos al usuario. GameView = Backbone.View.extend({     tagName : "div",     className: "game",     render : function() {       /* código para renderizar el html */     }   });  

13 Vista render : function() { $(this.el).html(“<b>” + this.model.get('name') + “</b>”); } El objeto el es el elemento del DOM al que hace referencia la vista. En este caso, el elemento div renderizará el nombre del juego. Para HTML más complejo, lo mejor es usar templates. Por default, Backbone provee la solución de templates de Underscore.JS.

14 Vista Definimos y atamos un evento a la vista. events: { 'click .name': 'handleClick' }, handleClick: function(){ alert(‘Clickeaste, chabón’); }

15 Vista GameView = Backbone.View.extend({ initialize: function (args) {
     _.bindAll(this, 'changeName');           this.model.bind('change:name', this.OnGameNameChanged);   },   });   En este ejemplo, cuando el atributo name del modelo cambie, se llamará a la función OnGameNameChanged. Además de change, Se puede hacer un polling de cambios usando add y remove. En el bind, se puede reemplazar model por collection para que escuchar cambios en la colección. BindAll es una función de Underscore.JS para mantener el objeto this en el callback.

16 Controlador Define la lógica de ruteo, relacionando una URL con una función javascript. Permite crear aplicaciones bookmarkeables usando hash tags (#). var MyGameController = Backbone.Controller.extend({   routes : {     "say/:something" : "say"   },   say : function(something) {     alert(something); /* Ej.: */   } }); var gameController = new MyGameController; Backbone.history.start();

17 Una app de ejemplo Una lista de tareas hecha con Backbone y ASP.Net MVC…

18 Fin }