s.p.a com backbone.js
Post on 13-Jun-2015
2.231 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related