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.

1. S.P.A. con Backbone.js
Julien Castelain
Denis Ciccale

2. 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
J. Castelain, D. Ciccale
MediaNet Software

3. ¿De qué vamos a hablar?
• Acerca de MediaNet Software
• Backbone.js & MVC
• Gestión de recursos
• Tests Unitarios
• Conclusiones
• ¿Preguntas?
J. Castelain, D. Ciccale 3
MediaNet Software

4. Acerca de MediaNet Software

5. EMPRESA ESPAÑOLA
FUNDADA EN 1995
TRAYECTORIA DE SPIN-OFFS Y
START-UPS
J. Castelain, D. Ciccale
MediaNet Software

6. PERFIL DE EMPRESA:
ARTESANÍA:
CONOCIMIENTO +
EXPERIENCIA http://www.flickr.com/photos/24443965@N08/
J. Castelain, D. Ciccale
MediaNet Software

7. 18/03/12 194 Medianos - Google Maps
PERFIL DE EMPRESA:
MÁS DE 200 ESPECIALISTAS
©2012 Google -
194 Medianos
Publicación restringida · 68 vistas
Creado el 12 de Mar · Por · Actualizado hace 2 días
J. Castelain, D. Ciccale
MediaNet Software
Argentina - Comodoro Rivadavia

8. UNA CULTURA BASADA EN
LA INNOVACIÓN
UN ENFOQUE CENTRADO
EN EL PROYECTO
J. Castelain, D. Ciccale
MediaNet Software

9. NUESTRA FÓRMULA:
COMPROMISO
VISIÓN A LARGO PLAZO
EQUIPO
J. Castelain, D. Ciccale
MediaNet Software

10. ¿QUÉ HACEMOS?
NUESTRAS ÁREAS DE
ACTIVIDAD
J. Castelain, D. Ciccale
MediaNet Software

11. Y SOBRE TODO:
LAS PERSONAS SON
SIEMPRE LO PRIMERO
J. Castelain, D. Ciccale
MediaNet Software

12. ¿Qué es Backbone.js?

13. Es una librería que permite estructurar una
aplicación web siguiendo el concepto de MVC
J. Castelain, D. Ciccale
MediaNet Software

14. Otros frameworks MVC
J. Castelain, D. Ciccale
MediaNet Software

15. Componentes de Backbone.js
J. Castelain, D. Ciccale 15
MediaNet Software

16. Models
• Representa los datos
J. Castelain, D. Ciccale 16
MediaNet Software

17. Models
var User = Backbone.Model.extend({
defaults: {
firstName: '',
lastName: '',
date: null
},
url: '/user'
});
J. Castelain, D. Ciccale 17
MediaNet Software

18. Models
• Representa los datos
• Notifica de cambios en sus atributos
J. Castelain, D. Ciccale 18
MediaNet 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)
J. Castelain, D. Ciccale 19
MediaNet Software

20. Models
var 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
J. Castelain, D. Ciccale 20
MediaNet Software

21. Collections
• Conjunto de modelos
J. Castelain, D. Ciccale 21
MediaNet Software

22. Collections
var Users = Backbone.Collection.extend({
model: User, // modelo que usa la colección
url: '/users' // url que devuelve los datos
});
J. Castelain, D. Ciccale 22
MediaNet Software

23. Collections
• Conjunto de modelos
• Se comporta como un modelo
J. Castelain, D. Ciccale 23
MediaNet Software

24. Collections
var users = new Users();
users.fetch(); // petición GET a /users
…
console.log(users.models);
J. Castelain, D. Ciccale 24
MediaNet Software

25. Collections
• Conjunto de modelos
• Se comporta como un modelo
• Eventos
• add, remove, refresh, reset
J. Castelain, D. Ciccale 25
MediaNet Software

26. Collections
var users = new Users();
users.on('reset', function () {
console.log('modelos reemplazados!');
});
users.fetch(); // GET /users
J. Castelain, D. Ciccale 26
MediaNet 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
J. Castelain, D. Ciccale 27
MediaNet Software

28. Views
• Representación gráfica de los datos
• template, initialize, model, render, el
J. Castelain, D. Ciccale 28
MediaNet Software

29. Views
var UserView = Backbone.View.extend({
template: _.template($('#userView').html()),
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
J. Castelain, D. Ciccale 29
MediaNet Software

30. Views
<!-- UserView template -->
<script type="text/template" id="userView">
<h2>Usuario</h2>
<p>Nombre: <%= firstName %></p>
<p>Apellido: <%= lastName %></p>
</script>
J. Castelain, D. Ciccale 30
MediaNet 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>
J. Castelain, D. Ciccale 31
MediaNet 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
J. Castelain, D. Ciccale 32
MediaNet Software

33. Views
var UserView = Backbone.View.extend({
…
initialize: function () {
this.model.on('change', this.render, this);
}
…
});
J. Castelain, D. Ciccale 33
MediaNet 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...)
J. Castelain, D. Ciccale 34
MediaNet Software

35. Views
var UserView = Backbone.View.extend({
initialize: function () {
_.bindAll(this);
},
events: {
'click #button': 'sayHello';
},
sayHello: function (event) {
console.log('hello', this.model.get('firstName'));
}
});
J. Castelain, D. Ciccale 35
MediaNet Software

36. Templating
• Underscore, Handlebars
J. Castelain, D. Ciccale 36
MediaNet Software

37. Templating
<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
<% _.each(users, function (user) { %>
<li>Usuario: <%= firstName %>, <%= lastName %></li>
<% }); %>
</ul>
</script>
J. Castelain, D. Ciccale 37
MediaNet Software

38. Templating
<script>
_.templateSettings = {
interpolate : /{{(.+?)}}/g
};
</script>
J. Castelain, D. Ciccale 38
MediaNet Software

39. Templating
<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
<% _.each(users, function (user) { %>
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
<% }); %>
</ul>
</script>
J. Castelain, D. Ciccale 39
MediaNet Software

40. Templating
var UserView = Backbone.View.extend({
template: Handlebars.compile($('#userView').html()),
...
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
J. Castelain, D. Ciccale 40
MediaNet Software

41. Templating
<script type="text/template" id="usersView">
<h2>Usuarios</h2>
<ul>
{{#each users}}
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
{{/each}}
</ul>
</script>
J. Castelain, D. Ciccale 41
MediaNet Software

42. ¿M.V…?

43. Router
• Controla la navegación
J. Castelain, D. Ciccale 43
MediaNet Software

44. Router
var Router = Backbone.Router.extend({
routes: {
'/': 'homePage',
'/users/:id': 'userPage'
}
});
J. Castelain, D. Ciccale 44
MediaNet Software

45. Router
var Router = Backbone.Router.extend({
...
userPage: function (id) {
console.log('Buscando el usuario:', id);
}
});
J. Castelain, D. Ciccale 45
MediaNet 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 });
J. Castelain, D. Ciccale 46
MediaNet Software

47. Events
• Comunicación entre objetos (Modelos,
Colecciones…)
J. Castelain, D. Ciccale 47
MediaNet Software

48. Events
var 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);
J. Castelain, D. Ciccale 48
MediaNet Software

49. Events
• Comunicación entre objetos (Modelos,
Colecciones…)
• Integrado en el núcleo de Backbone
• Modelos y colecciones publican
• Vistas se subscriben
J. Castelain, D. Ciccale 49
MediaNet Software

50. Events
var 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);
}
});
J. Castelain, D. Ciccale 50
MediaNet Software

51. Data binding
• Backbone no tiene data binding
J. Castelain, D. Ciccale 51
MediaNet 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)
J. Castelain, D. Ciccale 52
MediaNet Software

53. Gestión de recursos

54. Gestión de recursos
• ¿Muchos recursos?
J. Castelain, D. Ciccale 54
MediaNet 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>
...
J. Castelain, D. Ciccale 55
MediaNet Software

56. Gestión de recursos
• ¿Muchos recursos?
• RequireJS (module loader)
J. Castelain, D. Ciccale 56
MediaNet Software

57. Gestión de recursos
• ¿Muchos recursos?
• RequireJS (module loader)
• ¿Por qué RequireJS?
• yepnope, lab.js (script loaders)
J. Castelain, D. Ciccale 57
MediaNet Software

58. RequireJS
require(['libs/jquery.min'], function () {
console.log(jQuery);
});
J. Castelain, D. Ciccale 58
MediaNet Software

59. RequireJS
define('mymodule', ['libs/jquery.min', 'libs/underscore.min',
'libs/backbone.min'], function () {
var View = Backbone.View.extend({});
return {
id: 'mymodule',
route: '/mymodule',
View: View
};
});
J. Castelain, D. Ciccale 59
MediaNet Software

60. RequireJS
require(['mymodule'], function (mymodule) {
var view = new mymodule.View();
$('#container').append(view.render().el);
});
J. Castelain, D. Ciccale 60
MediaNet Software

61. RequireJS Plugins
• Para cargar:
• text (html, css)
• cs (coffeescript)
• async (de manera asíncrono)
• order (en orden)
J. Castelain, D. Ciccale 61
MediaNet Software

62. Tests Unitarios

63. Tests Unitarios
• Opciones
J. Castelain, D. Ciccale 63
MediaNet Software

64. QUnit
• Sencillo
• Buena documentación
• Tests de Backbone.js en QUnit
J. Castelain, D. Ciccale 64
MediaNet Software

65. QUnit
module('app', {
setup: function () {
/* se ejecuta antes de cada tests */
},
teardown: function () {
/* se ejecuta luego de finalizar un test */
}
});
J. Castelain, D. Ciccale 65
MediaNet Software

66. QUnit
test('Probamos el modelo User', function () {
var user = new User();
deepEqual(user.get('firstName'), '', 'Usuario sin nombre');
});
J. Castelain, D. Ciccale 66
MediaNet Software

67. Conclusiones

68. Recursos

69. Recursos
• Backbonejs.org
• Backbone Fundamentals
• PeepCode
• Los Techies
• Backbone source code
J. Castelain, D. Ciccale 69
MediaNet Software

70. ¿Preguntas?

71. J. Castelain, D. Ciccale
MediaNet Software

72. Gracias
Denis
- @tdecs
- github.com/dciccale
Julien
- @__juju__
- github.com/julien