s.p.a com backbone.js

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

Upload: medianet-software

Post on 13-Jun-2015

2.228 views

Category:

Technology


0 download

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

S.P.A. con Backbone.js

Julien CastelainDenis Ciccale

Page 2: S.P.A com Backbone.js

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

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

Acerca de MediaNet Software

Page 5: S.P.A com Backbone.js

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

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

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

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

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

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

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

¿Qué es Backbone.js?

Page 13: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

Otros frameworks MVC

Page 15: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

15

Componentes de Backbone.js

Page 16: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

16

Models

• Representa los datos

Page 17: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

18

Models

• Representa los datos

• Notifica de cambios en sus atributos

Page 19: S.P.A com Backbone.js

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

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

J. Castelain, D. CiccaleMediaNet Software

21

Collections

• Conjunto de modelos

Page 22: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

23

Collections

• Conjunto de modelos

• Se comporta como un modelo

Page 24: S.P.A com Backbone.js

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

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

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

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

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

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

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

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

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

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

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

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

J. Castelain, D. CiccaleMediaNet Software

36

Templating

• Underscore, Handlebars

Page 37: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

38

Templating<script>

_.templateSettings = {

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

};

</script>

Page 39: S.P.A com Backbone.js

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

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

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

¿M.V…?

Page 43: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

43

Router

• Controla la navegación

Page 44: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

44

Routervar Router = Backbone.Router.extend({

routes: {

'/': 'homePage',

'/users/:id': 'userPage'

}

});

Page 45: S.P.A com Backbone.js

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

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

J. Castelain, D. CiccaleMediaNet Software

47

Events

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

Page 48: S.P.A com Backbone.js

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

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

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

J. Castelain, D. CiccaleMediaNet Software

51

Data binding

• Backbone no tiene data binding

Page 52: S.P.A com Backbone.js

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

Gestión de recursos

Page 54: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

54

Gestión de recursos

• ¿Muchos recursos?

Page 55: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

56

Gestión de recursos

• ¿Muchos recursos?

• RequireJS (module loader)

Page 57: S.P.A com Backbone.js

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

J. Castelain, D. CiccaleMediaNet Software

58

RequireJS

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

console.log(jQuery);

});

Page 59: S.P.A com Backbone.js

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

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

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

Tests Unitarios

Page 63: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

63

Tests Unitarios • Opciones

Page 64: S.P.A com Backbone.js

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

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

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

Conclusiones

Page 68: S.P.A com Backbone.js

Recursos

Page 69: S.P.A com Backbone.js

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

¿Preguntas?

Page 71: S.P.A com Backbone.js

J. Castelain, D. CiccaleMediaNet Software

Page 72: S.P.A com Backbone.js

Gracias

Denis

- @tdecs

- github.com/dciccale

Julien

- @__juju__

- github.com/julien