s.p.a com backbone.js

S.P.A. con Backbone.js

Julien CastelainDenis Ciccale

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

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?

Acerca de MediaNet Software

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

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/

J. Castelain, D. CiccaleMediaNet Software

PERFIL DE EMPRESA:

MÁS DE 200 ESPECIALISTAS

PERFIL DE EMPRESA:

MÁS DE 200 ESPECIALISTAS

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

J. Castelain, D. CiccaleMediaNet Software

NUESTRA FÓRMULA:

COMPROMISOVISIÓN A LARGO PLAZOEQUIPO

NUESTRA FÓRMULA:

COMPROMISOVISIÓN A LARGO PLAZOEQUIPO

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

J. Castelain, D. CiccaleMediaNet Software

Y SOBRE TODO:

LAS PERSONAS SON SIEMPRE LO PRIMERO

Y SOBRE TODO:

LAS PERSONAS SON SIEMPRE LO PRIMERO

¿Qué es Backbone.js?

J. Castelain, D. CiccaleMediaNet Software

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

J. Castelain, D. CiccaleMediaNet Software

Otros frameworks MVC

J. Castelain, D. CiccaleMediaNet Software

15

Componentes de Backbone.js

J. Castelain, D. CiccaleMediaNet Software

16

Models

• Representa los datos

J. Castelain, D. CiccaleMediaNet Software

17

Modelsvar User = Backbone.Model.extend({

defaults: {

firstName: '',

lastName: '',

date: null

},

url: '/user'

});

J. Castelain, D. CiccaleMediaNet Software

18

Models

• Representa los datos

• Notifica de cambios en sus atributos

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)

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

J. Castelain, D. CiccaleMediaNet Software

21

Collections

• Conjunto de modelos

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

});

J. Castelain, D. CiccaleMediaNet Software

23

Collections

• Conjunto de modelos

• Se comporta como un modelo

J. Castelain, D. CiccaleMediaNet Software

24

Collections

var users = new Users();

users.fetch(); // petición GET a /users

…

console.log(users.models);

J. Castelain, D. CiccaleMediaNet Software

25

Collections

• Conjunto de modelos

• Se comporta como un modelo

• Eventos• add, remove, refresh, reset

J. Castelain, D. CiccaleMediaNet Software

26

Collections

var users = new Users();

users.on('reset', function () {

console.log('modelos reemplazados!');

});

users.fetch(); // GET /users

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

J. Castelain, D. CiccaleMediaNet Software

28

Views

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

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;

}

});

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>

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>

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

J. Castelain, D. CiccaleMediaNet Software

33

Views

var UserView = Backbone.View.extend({

…

initialize: function () {

this.model.on('change', this.render, this);

}

…

});

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

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

}

});

J. Castelain, D. CiccaleMediaNet Software

36

Templating

• Underscore, Handlebars

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>

J. Castelain, D. CiccaleMediaNet Software

38

Templating<script>

_.templateSettings = {

interpolate : /\{\{(.+?)\}\}/g

};

</script>

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>

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;

}

});

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>

¿M.V…?

J. Castelain, D. CiccaleMediaNet Software

43

Router

• Controla la navegación

J. Castelain, D. CiccaleMediaNet Software

44

Routervar Router = Backbone.Router.extend({

routes: {

'/': 'homePage',

'/users/:id': 'userPage'

}

});

J. Castelain, D. CiccaleMediaNet Software

45

Routervar Router = Backbone.Router.extend({

...

userPage: function (id) {

console.log('Buscando el usuario:', id);

}

});

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

J. Castelain, D. CiccaleMediaNet Software

47

Events

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

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

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

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

}

});

J. Castelain, D. CiccaleMediaNet Software

51

Data binding

• Backbone no tiene data binding

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)

Gestión de recursos

J. Castelain, D. CiccaleMediaNet Software

54

Gestión de recursos

• ¿Muchos recursos?

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>

...

J. Castelain, D. CiccaleMediaNet Software

56

Gestión de recursos

• ¿Muchos recursos?

• RequireJS (module loader)

J. Castelain, D. CiccaleMediaNet Software

57

Gestión de recursos

• ¿Muchos recursos?

• RequireJS (module loader)

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

J. Castelain, D. CiccaleMediaNet Software

58

RequireJS

require(['libs/jquery.min'], function () {

console.log(jQuery);

});

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

};

});

J. Castelain, D. CiccaleMediaNet Software

60

RequireJSrequire(['mymodule'], function (mymodule) {

var view = new mymodule.View();

$('#container').append(view.render().el);

});

J. Castelain, D. CiccaleMediaNet Software

61

RequireJS Plugins

• Para cargar:• text (html, css)

• cs (coffeescript)

• async (de manera asíncrono)

• order (en orden)

Tests Unitarios

J. Castelain, D. CiccaleMediaNet Software

63

Tests Unitarios • Opciones

J. Castelain, D. CiccaleMediaNet Software

64

QUnit

• Sencillo

• Buena documentación

• Tests de Backbone.js en QUnit

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 */

}

});

J. Castelain, D. CiccaleMediaNet Software

66

QUnittest('Probamos el modelo User', function () {

var user = new User();

deepEqual(user.get('firstName'), '', 'Usuario sin nombre');

});

Conclusiones

Recursos

J. Castelain, D. CiccaleMediaNet Software

69

Recursos

• Backbonejs.org

• Backbone Fundamentals

• PeepCode

• Los Techies

• Backbone source code

¿Preguntas?

J. Castelain, D. CiccaleMediaNet Software

Gracias

Denis

- @tdecs

- github.com/dciccale

Julien

- @__juju__

- github.com/julien