s.p.a com backbone.js
DESCRIPTION
Medianet Software fue patrocinador Platinum en el evento Codemotion. Nuestros compañeros Julien Castelain y Denis Ciccale impartieron una charla técnica sobre S.P.A Con Backbone.js. Durante la charla técnica hablaron sobre la aplicación web SPA que se construye con una única página, con el objetivo de proveer un comportamiento parecido a una aplicación de escritorio. El propósito de la charla consistió en intentar cubrir todos los conceptos necesarios para poder desarrollar una SPA en Backbone.js, hablando sobre templating, require, unit testing con QUnit y minificación de recursos estáticos.En esta presentación aparece toda la documentación expuesta durante la charla técnica.TRANSCRIPT
![Page 1: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/1.jpg)
S.P.A. con Backbone.js
Julien CastelainDenis Ciccale
![Page 2: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/2.jpg)
J. Castelain, D. CiccaleMediaNet Software
Nosotros
Desarrolladores front auto-didactas
• Trabajan en MediaNet Software como UX Technical Leaders
• Actualmente usando Backbone.js en un proyecto para uno de los 5 bancos más grandes de Europa
![Page 3: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/3.jpg)
J. Castelain, D. CiccaleMediaNet Software
3
¿De qué vamos a hablar?
• Acerca de MediaNet Software
• Backbone.js & MVC
• Gestión de recursos
• Tests Unitarios
• Conclusiones
• ¿Preguntas?
![Page 4: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/4.jpg)
Acerca de MediaNet Software
![Page 5: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/5.jpg)
J. Castelain, D. CiccaleMediaNet Software
EMPRESA ESPAÑOLA
FUNDADA EN 1995
TRAYECTORIA DE SPIN-OFFS Y START-UPS
EMPRESA ESPAÑOLA
FUNDADA EN 1995
TRAYECTORIA DE SPIN-OFFS Y START-UPS
![Page 6: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/6.jpg)
J. Castelain, D. CiccaleMediaNet Software
PERFIL DE EMPRESA:
ARTESANÍA:CONOCIMIENTO + EXPERIENCIA
PERFIL DE EMPRESA:
ARTESANÍA:CONOCIMIENTO + EXPERIENCIA
http://www.flickr.com/photos/24443965@N08/
![Page 7: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/7.jpg)
J. Castelain, D. CiccaleMediaNet Software
PERFIL DE EMPRESA:
MÁS DE 200 ESPECIALISTAS
PERFIL DE EMPRESA:
MÁS DE 200 ESPECIALISTAS
![Page 8: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/8.jpg)
J. Castelain, D. CiccaleMediaNet Software
UNA CULTURA BASADA EN LA INNOVACIÓN
UN ENFOQUE CENTRADO EN EL PROYECTO
UNA CULTURA BASADA EN LA INNOVACIÓN
UN ENFOQUE CENTRADO EN EL PROYECTO
![Page 9: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/9.jpg)
J. Castelain, D. CiccaleMediaNet Software
NUESTRA FÓRMULA:
COMPROMISOVISIÓN A LARGO PLAZOEQUIPO
NUESTRA FÓRMULA:
COMPROMISOVISIÓN A LARGO PLAZOEQUIPO
![Page 10: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/10.jpg)
J. Castelain, D. CiccaleMediaNet Software
¿QUÉ HACEMOS?
NUESTRAS ÁREAS DE ACTIVIDAD
¿QUÉ HACEMOS?
NUESTRAS ÁREAS DE ACTIVIDAD
Com
parti
ción
de o
bjeti
vos
Com
parti
ción
de o
bjeti
vos
![Page 11: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/11.jpg)
J. Castelain, D. CiccaleMediaNet Software
Y SOBRE TODO:
LAS PERSONAS SON SIEMPRE LO PRIMERO
Y SOBRE TODO:
LAS PERSONAS SON SIEMPRE LO PRIMERO
![Page 12: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/12.jpg)
¿Qué es Backbone.js?
![Page 13: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/13.jpg)
J. Castelain, D. CiccaleMediaNet Software
Es una librería que permite estructurar una aplicación web siguiendo el concepto de MVC
![Page 14: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/14.jpg)
J. Castelain, D. CiccaleMediaNet Software
Otros frameworks MVC
![Page 15: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/15.jpg)
J. Castelain, D. CiccaleMediaNet Software
15
Componentes de Backbone.js
![Page 16: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/16.jpg)
J. Castelain, D. CiccaleMediaNet Software
16
Models
• Representa los datos
![Page 17: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/17.jpg)
J. Castelain, D. CiccaleMediaNet Software
17
Modelsvar User = Backbone.Model.extend({
defaults: {
firstName: '',
lastName: '',
date: null
},
url: '/user'
});
![Page 18: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/18.jpg)
J. Castelain, D. CiccaleMediaNet Software
18
Models
• Representa los datos
• Notifica de cambios en sus atributos
![Page 19: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/19.jpg)
J. Castelain, D. CiccaleMediaNet Software
19
Models
• Representa los datos
• Notifica de cambios en sus atributos
• Se comunica con el servidor para estar sincronizado• fetch (GET), save (POST/PUT), destroy (DELETE)
![Page 20: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/20.jpg)
J. Castelain, D. CiccaleMediaNet Software
20
Modelsvar user = new User();
user.on('change', function () {
console.log(user.toJSON());
});
user.fetch(); // GET json
// actualización
user.set({firstName: 'Jeremy', lastName: 'Ashkenas'});
user.save(); // POST/PUT
![Page 21: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/21.jpg)
J. Castelain, D. CiccaleMediaNet Software
21
Collections
• Conjunto de modelos
![Page 22: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/22.jpg)
J. Castelain, D. CiccaleMediaNet Software
22
Collections
var Users = Backbone.Collection.extend({
model: User, // modelo que usa la colección
url: '/users' // url que devuelve los datos
});
![Page 23: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/23.jpg)
J. Castelain, D. CiccaleMediaNet Software
23
Collections
• Conjunto de modelos
• Se comporta como un modelo
![Page 24: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/24.jpg)
J. Castelain, D. CiccaleMediaNet Software
24
Collections
var users = new Users();
users.fetch(); // petición GET a /users
…
console.log(users.models);
![Page 25: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/25.jpg)
J. Castelain, D. CiccaleMediaNet Software
25
Collections
• Conjunto de modelos
• Se comporta como un modelo
• Eventos• add, remove, refresh, reset
![Page 26: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/26.jpg)
J. Castelain, D. CiccaleMediaNet Software
26
Collections
var users = new Users();
users.on('reset', function () {
console.log('modelos reemplazados!');
});
users.fetch(); // GET /users
![Page 27: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/27.jpg)
J. Castelain, D. CiccaleMediaNet Software
27
Collections
• Conjunto de modelos
• Se comporta como un modelo
• Eventos• add, remove, refresh, reset
• Fácil manipulación gracias a Underscore.js• forEach (each), map, reduce (foldl, inject), reduceRight (foldr), find (detect), filter (select), reject,
every (all), some (any), include, invoke, max, min, sortBy, groupBy, sortedIndex, shuffle, toArray, size, first, initial, rest, last, without, indexOf, lastIndexOf, isEmpty, chain
![Page 28: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/28.jpg)
J. Castelain, D. CiccaleMediaNet Software
28
Views
• Representación gráfica de los datos• template, initialize, model, render, el
![Page 29: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/29.jpg)
J. Castelain, D. CiccaleMediaNet Software
29
Viewsvar UserView = Backbone.View.extend({
template: _.template($('#userView').html()),
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
![Page 30: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/30.jpg)
J. Castelain, D. CiccaleMediaNet Software
30
Views<!-- UserView template -->
<script type="text/template" id="userView">
<h2>Usuario</h2>
<p>Nombre: <%= firstName %></p>
<p>Apellido: <%= lastName %></p>
</script>
![Page 31: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/31.jpg)
J. Castelain, D. CiccaleMediaNet Software
31
Views// instanciamos la vista
var userView = new UserView({model: user});
userView.el.appendTo(document.body);
....
<div>
<h2>Usuario</h2>
<p>Nombre: Jeremy</p>
<p>Apellido: Ashkenas</p>
</div>
![Page 32: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/32.jpg)
J. Castelain, D. CiccaleMediaNet Software
32
Views
• Representación gráfica de los datos• template, initialize, model, render, el
• Puede mantenerse sincronizada con el modelo o una colección
![Page 33: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/33.jpg)
J. Castelain, D. CiccaleMediaNet Software
33
Views
var UserView = Backbone.View.extend({
…
initialize: function () {
this.model.on('change', this.render, this);
}
…
});
![Page 34: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/34.jpg)
J. Castelain, D. CiccaleMediaNet Software
34
Views
• Representación gráfica de los datos• template, Initialize, model, render, el
• Puede mantenerse sincronizada con el modelo o una colección
• Eventos (click, submit...)
![Page 35: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/35.jpg)
J. Castelain, D. CiccaleMediaNet Software
35
Viewsvar UserView = Backbone.View.extend({
initialize: function () {
_.bindAll(this);
},
events: {
'click #button': 'sayHello';
},
sayHello: function (event) {
console.log('hello', this.model.get('firstName'));
}
});
![Page 36: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/36.jpg)
J. Castelain, D. CiccaleMediaNet Software
36
Templating
• Underscore, Handlebars
![Page 37: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/37.jpg)
J. Castelain, D. CiccaleMediaNet Software
37
Templating<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
<% _.each(users, function (user) { %>
<li>Usuario: <%= firstName %>, <%= lastName %></li> <% }); %>
</ul>
</script>
![Page 38: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/38.jpg)
J. Castelain, D. CiccaleMediaNet Software
38
Templating<script>
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
</script>
![Page 39: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/39.jpg)
J. Castelain, D. CiccaleMediaNet Software
39
Templating<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
<% _.each(users, function (user) { %>
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
<% }); %>
</ul>
</script>
![Page 40: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/40.jpg)
J. Castelain, D. CiccaleMediaNet Software
40
Templatingvar UserView = Backbone.View.extend({
template: Handlebars.compile($('#userView').html()),
...
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
![Page 41: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/41.jpg)
J. Castelain, D. CiccaleMediaNet Software
41
Templating<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
{{#each users}}
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
{{/each}}
</ul>
</script>
![Page 42: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/42.jpg)
¿M.V…?
![Page 43: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/43.jpg)
J. Castelain, D. CiccaleMediaNet Software
43
Router
• Controla la navegación
![Page 44: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/44.jpg)
J. Castelain, D. CiccaleMediaNet Software
44
Routervar Router = Backbone.Router.extend({
routes: {
'/': 'homePage',
'/users/:id': 'userPage'
}
});
![Page 45: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/45.jpg)
J. Castelain, D. CiccaleMediaNet Software
45
Routervar Router = Backbone.Router.extend({
...
userPage: function (id) {
console.log('Buscando el usuario:', id);
}
});
![Page 46: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/46.jpg)
J. Castelain, D. CiccaleMediaNet Software
46
Router
• Controla la navegación
• Utiliza el History API de HTML5 (o un fallback)
var router = new Router();
Backbone.History.start({ pushState: true });
![Page 47: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/47.jpg)
J. Castelain, D. CiccaleMediaNet Software
47
Events
• Comunicación entre objetos (Modelos, Colecciones…)
![Page 48: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/48.jpg)
J. Castelain, D. CiccaleMediaNet Software
48
Eventsvar obj = _.extend(Backbone.Events, {});
obj.on('search:user', function (id) {
console.log('Buscando al usuario:', id);
// Buscando al usuario: 567
});
...
obj.trigger('search:user', 567);
![Page 49: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/49.jpg)
J. Castelain, D. CiccaleMediaNet Software
49
Events
• Comunicación entre objetos (Modelos, Colecciones…)
• Integrado en el núcleo de Backbone• Modelos y colecciones publican
• Vistas se subscriben
![Page 50: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/50.jpg)
J. Castelain, D. CiccaleMediaNet Software
50
Eventsvar UserView = Backbone.View.extend({
initialize: function () {
this.model.on('change', this.render, this);
// para escuchar el cambio de una propiedad específica
// this.model.on('change:firstName', this.render, this);
}
});
![Page 51: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/51.jpg)
J. Castelain, D. CiccaleMediaNet Software
51
Data binding
• Backbone no tiene data binding
![Page 52: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/52.jpg)
J. Castelain, D. CiccaleMediaNet Software
52
Data binding
• Backbone no tiene data binding
• Comunicación entre modelos y vistas a través de eventos
• var pubsub = _.extend(Backbone.Events, {});
• jquery.xxspubsub.js (https://gist.github.com/1653547)
• Pubsub en CoffeScript (https://gist.github.com/2175018)
![Page 53: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/53.jpg)
Gestión de recursos
![Page 54: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/54.jpg)
J. Castelain, D. CiccaleMediaNet Software
54
Gestión de recursos
• ¿Muchos recursos?
![Page 55: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/55.jpg)
J. Castelain, D. CiccaleMediaNet Software
55
Gestión de recursos
• ¿Muchos recursos?<!doctype html>
<head>
<script src="libs/jquery.min.js"></script>
<script src="libs/underscore.min.js"></script>
<script src="libs/backbone.min.js"></script>
<script src="modules/chat.js"></script>
<script src="modules/dashboard.js"></script>
<script src="app/main.js"></script>
</head>
...
![Page 56: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/56.jpg)
J. Castelain, D. CiccaleMediaNet Software
56
Gestión de recursos
• ¿Muchos recursos?
• RequireJS (module loader)
![Page 57: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/57.jpg)
J. Castelain, D. CiccaleMediaNet Software
57
Gestión de recursos
• ¿Muchos recursos?
• RequireJS (module loader)
• ¿Por qué RequireJS?• yepnope, lab.js (script loaders)
![Page 58: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/58.jpg)
J. Castelain, D. CiccaleMediaNet Software
58
RequireJS
require(['libs/jquery.min'], function () {
console.log(jQuery);
});
![Page 59: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/59.jpg)
J. Castelain, D. CiccaleMediaNet Software
59
RequireJSdefine('mymodule', ['libs/jquery.min', 'libs/underscore.min',
'libs/backbone.min'], function () {
var View = Backbone.View.extend({});
return {
id: 'mymodule',
route: '/mymodule',
View: View
};
});
![Page 60: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/60.jpg)
J. Castelain, D. CiccaleMediaNet Software
60
RequireJSrequire(['mymodule'], function (mymodule) {
var view = new mymodule.View();
$('#container').append(view.render().el);
});
![Page 61: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/61.jpg)
J. Castelain, D. CiccaleMediaNet Software
61
RequireJS Plugins
• Para cargar:• text (html, css)
• cs (coffeescript)
• async (de manera asíncrono)
• order (en orden)
![Page 62: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/62.jpg)
Tests Unitarios
![Page 63: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/63.jpg)
J. Castelain, D. CiccaleMediaNet Software
63
Tests Unitarios • Opciones
![Page 64: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/64.jpg)
J. Castelain, D. CiccaleMediaNet Software
64
QUnit
• Sencillo
• Buena documentación
• Tests de Backbone.js en QUnit
![Page 65: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/65.jpg)
J. Castelain, D. CiccaleMediaNet Software
65
QUnitmodule('app', {
setup: function () {
/* se ejecuta antes de cada tests */
},
teardown: function () {
/* se ejecuta luego de finalizar un test */
}
});
![Page 66: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/66.jpg)
J. Castelain, D. CiccaleMediaNet Software
66
QUnittest('Probamos el modelo User', function () {
var user = new User();
deepEqual(user.get('firstName'), '', 'Usuario sin nombre');
});
![Page 67: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/67.jpg)
Conclusiones
![Page 68: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/68.jpg)
Recursos
![Page 69: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/69.jpg)
J. Castelain, D. CiccaleMediaNet Software
69
Recursos
• Backbonejs.org
• Backbone Fundamentals
• PeepCode
• Los Techies
• Backbone source code
![Page 70: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/70.jpg)
¿Preguntas?
![Page 71: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/71.jpg)
J. Castelain, D. CiccaleMediaNet Software
![Page 72: S.P.A com Backbone.js](https://reader037.vdocuments.net/reader037/viewer/2022102711/557bb55fd8b42a525b8b47ec/html5/thumbnails/72.jpg)
Gracias
Denis
- @tdecs
- github.com/dciccale
Julien
- @__juju__
- github.com/julien