S.P.A con Backbone.js

S.P.A. con Backbone.js

Julien Castelain
Denis Ciccale

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

¿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

EMPRESA ESPAÑOLA
EMPRESA ESPAÑOLA

FUNDADA EN 1995
FUNDADA EN 1995

TRAYECTORIA DE SPIN-OFFS Y
TRAYECTORIA DE SPIN-OFFS Y
START-UPS
START-UPS

MediaNet Software

PERFIL DE EMPRESA:
PERFIL DE EMPRESA:

ARTESANÍA:
ARTESANÍA:
CONOCIMIENTO +
CONOCIMIENTO +
EXPERIENCIA
EXPERIENCIA http://www.flickr.com/photos/24443965@N08/

MediaNet Software

18/03/12 194 Medianos - Google Maps

PERFIL DE EMPRESA:
PERFIL DE EMPRESA:

MÁS DE 200 ESPECIALISTAS
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
MediaNet Software
Argentina - Comodoro Rivadavia

UNA CULTURA BASADA EN
UNA CULTURA BASADA EN
LA INNOVACIÓN
LA INNOVACIÓN

UN ENFOQUE CENTRADO
UN ENFOQUE CENTRADO
EN EL PROYECTO
EN EL PROYECTO

MediaNet Software

NUESTRA FÓRMULA:
NUESTRA FÓRMULA:

COMPROMISO
COMPROMISO
VISIÓN A LARGO PLAZO
VISIÓN A LARGO PLAZO
EQUIPO
EQUIPO
MediaNet Software

tivo s
s
vo
bjje ti
e
e ob
o
n de
d
iciió n
ó
arttic
p r
mp a
Co m
¿QUÉ HACEMOS?
¿QUÉ HACEMOS?

Co
NUESTRAS ÁREAS DE
NUESTRAS ÁREAS DE
ACTIVIDAD
ACTIVIDAD

MediaNet Software

Y SOBRE TODO:
Y SOBRE TODO:

LAS PERSONAS SON
LAS PERSONAS SON
SIEMPRE LO PRIMERO
SIEMPRE LO PRIMERO

MediaNet Software

Es una librería que permite estructurar una
aplicación web siguiendo el concepto de MVC

MediaNet Software

Otros frameworks MVC

MediaNet Software

Componentes de Backbone.js

MediaNet Software

Models
• Representa los datos

MediaNet Software

Models
var User = Backbone.Model.extend({
defaults: {
firstName: '',
lastName: '',
date: null
},
url: '/user'
});

MediaNet Software

Models
• Notifica de cambios en sus atributos

MediaNet Software

Models
• Notifica de cambios en sus atributos
• Se comunica con el servidor para estar sincronizado
• fetch (GET), save (POST/PUT), destroy (DELETE)

MediaNet Software

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

MediaNet Software

Collections
• Conjunto de modelos

MediaNet Software

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

MediaNet Software

Collections
• Se comporta como un modelo

MediaNet Software

Collections
var users = new Users();
users.fetch(); // petición GET a /users
…
console.log(users.models);

MediaNet Software

Collections
• Eventos
• add, remove, refresh, reset

MediaNet Software

Collections
var users = new Users();
users.on('reset', function () {
console.log('modelos reemplazados!');
});
users.fetch(); // GET /users

MediaNet Software

Collections
• 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

MediaNet Software

Views
• Representación gráfica de los datos
• template, initialize, model, render, el

MediaNet Software

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;
}
});
MediaNet Software

Views

<script type="text/template" id="userView">
<h2>Usuario</h2>
<p>Nombre: <%= firstName %></p>
<p>Apellido: <%= lastName %></p>
</script>

MediaNet Software

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>
MediaNet Software

Views
• template, initialize, model, render, el
• Puede mantenerse sincronizada con el modelo o una
colección

MediaNet Software

Views
…
this.model.on('change', this.render, this);
}
…
});

MediaNet Software

Views
• template, Initialize, model, render, el
• Puede mantenerse sincronizada con el modelo o una
colección
• Eventos (click, submit...)

MediaNet Software

Views
_.bindAll(this);
},
events: {
'click #button': 'sayHello';
},
sayHello: function (event) {
console.log('hello', this.model.get('firstName'));
}
});
MediaNet Software

Templating
• Underscore, Handlebars

MediaNet Software

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

MediaNet Software

Templating
<script>
_.templateSettings = {
interpolate : /{{(.+?)}}/g
};
</script>

MediaNet Software

Templating
<h2>Usuarios</h2>
<ul>
<% _.each(users, function (user) { %>
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
<% }); %>
</ul>
</script>

MediaNet Software

Templating
template: Handlebars.compile($('#userView').html()),
...
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});

MediaNet Software

Templating
<h2>Usuarios</h2>
<ul>
{{#each users}}
<li>Usuario: {{ firstName }}, {{ lastName }}</li>
{{/each}}
</ul>
</script>

MediaNet Software

Router
• Controla la navegación

MediaNet Software

Router
var Router = Backbone.Router.extend({
routes: {
'/': 'homePage',
'/users/:id': 'userPage'
}
});

MediaNet Software

Router
var Router = Backbone.Router.extend({
...
userPage: function (id) {
console.log('Buscando el usuario:', id);
}
});

MediaNet Software

Router
• Controla la navegación
• Utiliza el History API de HTML5 (o un fallback)

var router = new Router();
Backbone.History.start({ pushState: true });

MediaNet Software

Events
• Comunicación entre objetos (Modelos,
Colecciones…)

MediaNet Software

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);

MediaNet Software

Events
• Comunicación entre objetos (Modelos,
Colecciones…)
• Integrado en el núcleo de Backbone
• Modelos y colecciones publican
• Vistas se subscriben

MediaNet Software

Events
this.model.on('change', this.render, this);
// para escuchar el cambio de una propiedad específica
// this.model.on('change:firstName', this.render, this);
}
});

MediaNet Software

Data binding
• Backbone no tiene data binding

MediaNet Software

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)

MediaNet Software

Gestión de recursos
• ¿Muchos recursos?

MediaNet Software

<!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>
...

MediaNet Software

• RequireJS (module loader)

MediaNet Software

• RequireJS (module loader)
• ¿Por qué RequireJS?
• yepnope, lab.js (script loaders)

MediaNet Software

RequireJS
require(['libs/jquery.min'], function () {
console.log(jQuery);
});

MediaNet Software

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
};
});

MediaNet Software

RequireJS
require(['mymodule'], function (mymodule) {
var view = new mymodule.View();
$('#container').append(view.render().el);
});

MediaNet Software

RequireJS Plugins
• Para cargar:
• text (html, css)
• cs (coffeescript)
• async (de manera asíncrono)
• order (en orden)

MediaNet Software

Tests Unitarios
• Opciones

MediaNet Software

QUnit
• Sencillo
• Buena documentación
• Tests de Backbone.js en QUnit

MediaNet Software

QUnit
module('app', {
setup: function () {
/* se ejecuta antes de cada tests */
},
teardown: function () {
/* se ejecuta luego de finalizar un test */
}
});

MediaNet Software

QUnit
test('Probamos el modelo User', function () {
var user = new User();
deepEqual(user.get('firstName'), '', 'Usuario sin nombre');
});

MediaNet Software

Recursos
• Backbonejs.org
• Backbone Fundamentals
• PeepCode
• Los Techies
• Backbone source code

MediaNet Software

MediaNet Software

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

S.P.A con Backbone.js

Más contenido relacionado

Similar a S.P.A con Backbone.js (20)

Último (20)

S.P.A con Backbone.js

Notas del editor