Con el pasar del tiempo en el mundo del desarrollo web, hemos visto la aparición de cientos de Frameworks con el objetivo de agilizar el proceso de desarrollo. Javascript no ha sido ajeno a esta corriente y hoy día podemos encontrar Mootools, Dojo, Ext Core, Prototype y jQuery entre otros más.
A pesar de ser tan poderosas herramientas de desarrollo, ninguna posee algún tipo de lineamiento o estructura para crear nuestro código y con el pasar del tiempo nos vamos llenando de una cantidad de líneas y archivos en JS con un montón de selectores y funciones por todos lados (Código Spaghetti).
Hoy hablaremos sobre Backbone.js, una librería Javascript creada por Jeremy Ashkenas, el mismo señor que ha creado CoffeeScript . Esta librería nos da la posibilidad de implementar el patrón de desarrollo MVC en Javascript además de otra gran cantidad beneficios.
Backbone.js posee cuatro clases principales:
- Model
- View
- Router
- Collection
El siguiente tutorial es obtenido a partir de la lectura de otros tutoriales, la documentación de Backbone.js y las experiencias durante este proceso.
Manos a la obra
Primero vamos a crear una estructura HTML desde donde llamar nuestros archivos JS.
Código :
<!DOCTYPE html> <html lang="es"> <head> <meta charset='utf-8'> <title>Introduccion a Blackbone.js + Mustache.js</title> </head> <body> <!-- script --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/underscore-min.js"></script> <script type="text/javascript" src="js/backbone-min.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>
Blackbone.js requiere estrictamente la librería Underscore.js para funcionar. Esta debe ir primero que blackbone.js
Model
En Backbone.js los modelos son el corazón de nuestra aplicación, imaginémoslos como un conjunto de atributos y métodos de la forma {key:value} donde los valores pueden ser funciones, objetos o arreglos.
Código :
(function(){
var DesarrolladorModel = Backbone.Model.extend();
})();
De esta forma hemos extendido todos los métodos y atributos de la clase Backbone.Model en DesarrolladorModel .Agreguemos algunos atributos a nuestra clase DesarrolladorModel:
Código :
(function(){
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
}
});
})();La función initialize como su nombre lo indica se ejecuta automáticamente al crear una nueva instancia de nuestro modelo. Por el momento no veremos ningún cambio.
El atributo "defaults" nos permite definir valores por defecto para nuestro modelo.
Ahora vamos a crear una instancia de nuestro modelo DesarrolladorModel:
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
})();Si nos fijamos en nuestra consola, vamos a ver el mensaje que definimos en la función del atributo initialize.
Para ver que atributos posee nuestro nuevo modelo puedes hacer esto:
Código :
console.dir(desarrollador.attributes);
También podemos definir unos atributos durante la creación del modelo:
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
})();Podemos definir atributos aun después de creado el modelo a través del método .set():
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
// Agregando atributos posteriormente
desarrollador.set({editor: "Notepad++"});
})();Para obtener los atributos individuales de cada modelo podemos usar el método .get():
Código :
desarrollador2.get("editor");Ahora vamos a crear un método para nuestro modelo que nos permita agregar lenguajes de programación a las instancias.
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
},
addLenguaje: function(nuevoLenguaje){
//Obtenemos lenguajes del model
var array_lenguajes = this.get('lenguajes');
//Adicionamos el nuevo lenguaje
array_lenguajes.push(nuevoLenguaje);
// Redefinimos el atributo lenguajes
this.set({lenguajes:array_lenguajes});
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
// Agregando atributos posteriormente
desarrollador.set({editor: "Notepad++"});
// Agregar nuevo lenguaje
desarrollador.addLenguaje("Python");
})();Bueno, hasta ahora nada del otro mundo, un montón de objetos con funciones dentro podrían decir ustedes, por eso seguimos con lo bueno de esta librería.
En Backbone.js podemos asignar eventos de escucha, es decir, cuando un atributo del modelo cambie generamos un evento particular.
Cuando la propiedad editor de nuestro modelo cambie, dispararemos un evento que genere un mensaje en consola:
En este caso pondremos en escucha el evento desde el atributo "initialize", pero también puede ser llamado desde la instancia del modelo.
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
// Escuchando cambios para el modelo
this.on("change:editor", function(){
console.log("Has modificado el editor");
});
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
},
addLenguaje: function(nuevoLenguaje){
var array_lenguajes = this.get('lenguajes');
array_lenguajes.push(nuevoLenguaje);
this.set({lenguajes:array_lenguajes});
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
// Agregando atributos posteriormente
desarrollador.set({editor: "Notepad++"});
// Agregar nuevo lenguaje
desarrollador.addLenguaje("Python");
})();En la consola debemos estar visualizando el mensaje que definimos en el evento change:editor.
Si deseáramos que el evento se iniciara al modificar cualquier atributo del modelo lo haríamos retirando el valor de change para que escuche sobre cualquier atributo.
Código :
this.on("change", function(){ ... }); Como dije anteriormente también podemos llamar el evento desde la instancia de nuestro modelo.
Código :
desarrollador.on("change:editor", function(){ ... });Otra función de las muchas que poseen los modelos de Backbone.js es validate, la cual nos permite realizar validaciones previas a los cambios que se apliquen a las instancias de nuestros modelos.
Imagina que la función validate es un policía que te chequea antes de entrar, Si cumples con los requisitos te dejará pasar y podrás realizar tus actividades. Pero si no los cumples no te dejará pasar y mandará un mensaje de error.
Realizaremos una validación en nuestro modelo que se encargará de verificar si el editor de uno de nuestros desarrolladores (instancias de modelo) es Dreamweaver. Luego tendremos un evento en escucha de este error que nos genere un log en la consola con el mensaje de error.
Código :
(function(){
// Crear modelo
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
this.on("change:editor", function(){
console.log("Has modificado el editor");
});
// Evento a la escuha del error
this.on("error", function(model, error){
console.log(error);
});
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
},
addLenguaje: function(nuevoLenguaje){
var array_lenguajes = this.get('lenguajes');
array_lenguajes.push(nuevoLenguaje);
this.set({lenguajes:array_lenguajes});
},
// Funcion de validacion
validate: function(attributes){
if(attributes.editor == "Dreamweaver"){
return "Dreamweaver no es un editor permitido!";
}
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
// Agregando atributos posteriormente
desarrollador.set({editor: "Notepad++"});
desarrollador.set({editor: "Dreamweaver"});
// Agregar nuevo lenguaje
desarrollador.addLenguaje("Python");
})();Según lo anterior, en nuestra consola deberíamos tener dos mensajes. El primero con el mensaje de cambio de editor realizado correctamente y el segundo avisándonos que Dreamweaver no es un editor válido.
La función validate es muy sencilla. Recibimos los atributos, los verificamos y retornamos un mensaje de error.
Código :
// Funcion de validacion
validate: function(attributes){
if(attributes.editor == "Dreamweaver"){
return "Dreamweaver no es un editor permitido!";
}
}El evento on.("error") ubicado en el atributo de initialize recibe el modelo donde se produjo el error y el mensaje de dicho error. Finalizando la actividad que disparó el evento sin que ésta se lleve a cabo.
Código :
// Evento a la escuha del error
this.on("error", function(model, error){
console.log(error);
});Podemos obtener valores de los atributos aplicando el método ".get()" al modelo que recibimos en el evento error.
De esta forma terminamos el primer tutorial de Blackbone.js y modelos. Los invito a que lean la documentación que es muy completa y con ejemplos para todos los métodos.
En el segundo tutorial de Blackbone.js trataremos las vistas. Espero que este haya sido de su agrado.
Yo también soy novato en el mundo de Blackbone.js, cualquier duda o sugerencia trataremos de resolverla entre todos. @vlycser 
Por nicolas el 01 de Mayo de 2012
Por el 01 de Mayo de 2012
nicolas-blog :
Anonymous :
aaa no soporto a la gente que critica un trabajo que no es de el, si no te gusta simplemente no lo leas cristalab no te va a extrañar
PD: De buenos tutoriales esta lleno la internet. Solo hace falta buscarlos. Para un ejemplo este: http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/ que es muy bueno, tiene una aplicacion practica y hacen un ejemplos de back-end en PHP y JAVA
Saludos a todos
Gracias por el tuto @vlycser, me pareció muy interesante
Por ale el 06 de Mayo de 2012
Por el 07 de Mayo de 2012
Por orochies el 07 de Mayo de 2012
Por Matias Mancini el 16 de Mayo de 2012
Muchas gracias a vlycser!!!
Por Oraina el 17 de Julio de 2012
Por Andres el 21 de Julio de 2012
Por MagickGame el 23 de Julio de 2012
Por jose david el 03 de Septiembre de 2012
Por Gabi el 23 de Septiembre de 2012
Por Tute el 06 de Octubre de 2012
Lamentable criticar el esfuerzo desinteresado...
Por Ever el 01 de Noviembre de 2012
En el segmento incial de HTML tiene que debemos usar un " app.js " pero no sé de donde sale, ni tampoco se que hace hablando del model si yo no lo veo importado o llamado en ninguna parte del HTML.
Pueden llamarme ignorante o despistado, pero desde el punto de vista didactico... Nicolas el del segundo post tiene toda la razón.
vlycser felicitaciones por esta introducción, se ve muy practica para comenzar con backbone.js
Por Alan Cristhian el 22 de Enero de 2013
Por jmmunoz el 23 de Enero de 2013
Faltaría que ampliaras información de las otras areas importantes de backbone, pero ya lo harás
Puedo tener empatía ante las críticas que le realizan algunas personas... Aunque también entiendo, que la persona que ha realizado el tutorial, es un programador... Y la explicación la ha expuesto como tal.
Yo personalmente, he entendido a la perfección sin ninguna controversia o ambigüedad lo que quería explicar, y quizá de ahí que vengan las críticas, porque no es un manual para personas que no tengan una base.
Personalmente pienso que el autor, debería continuar con su andadura y por mi parte, le ánimo a continuar escribiendo y ayudando a toda persona que el pueda!!
Yo personalmente intentaré seguirte en este tipo de andaduras!
Un saludo
jmmunoz-blog :
Faltaría que ampliaras información de las otras areas importantes de backbone, pero ya lo harás
Puedo tener empatía ante las críticas que le realizan algunas personas... Aunque también entiendo, que la persona que ha realizado el tutorial, es un programador... Y la explicación la ha expuesto como tal.
Yo personalmente, he entendido a la perfección sin ninguna controversia o ambigüedad lo que quería explicar, y quizá de ahí que vengan las críticas, porque no es un manual para personas que no tengan una base.
Personalmente pienso que el autor, debería continuar con su andadura y por mi parte, le ánimo a continuar escribiendo y ayudando a toda persona que el pueda!!
Yo personalmente intentaré seguirte en este tipo de andaduras!
Un saludo
He leído tu comentario y gracias, muchas gracias, has sacado una sonrisa de mi rostro. Prometo seguir con las siguientes áreas de Backbone.js (Views, Collections, Router & Sync )
Alan Cristhian-blog :
Del lado del servidor debes utilizar un lenguaje que detecte estos tipos de peticiones HTTP como Node, PHP, Python o Ruby.
En el cliente con Backbone.js existen ciertos métodos que al ejecutarse sobre los modelos envían estos diferentes tipos de peticiones HTTP.
Ejemplo:
Si tengo un modelo recién creado (sin ID) y hago un save, esta petición sera un POST (Create)
Código :
Al ejecutar save sobre un modelo que posee un ID, esta petición sera un PUT (Update)
Código :
Si invocamos el método fetch sobre un modelo o una colección, genera una petición GET (Read)
Código :
Llamando al método destroy sobre un modelo, genera una petición DELETE (Delete)
Código :
Por Chofoteddy el 19 de Febrero de 2013
Gracias!
Por hersheylg el 04 de Abril de 2013