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
5. 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
J. Castelain, D. Ciccale
MediaNet Software
6. PERFIL DE EMPRESA:
PERFIL DE EMPRESA:
ARTESANÍA:
ARTESANÍA:
CONOCIMIENTO +
CONOCIMIENTO +
EXPERIENCIA
EXPERIENCIA http://www.flickr.com/photos/24443965@N08/
J. Castelain, D. Ciccale
MediaNet Software
8. 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
J. Castelain, D. Ciccale
MediaNet Software
10. 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
J. Castelain, D. Ciccale
MediaNet Software
11. Y SOBRE TODO:
Y SOBRE TODO:
LAS PERSONAS SON
LAS PERSONAS SON
SIEMPRE LO PRIMERO
SIEMPRE LO PRIMERO
J. Castelain, D. Ciccale
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
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
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
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
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
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
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
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
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE MediaNet Software es una empresa española consultora en TIC fundada en 1995, con sede principal en Madrid y delegación técnica en Oviedo. Cuenta con un equipo especializado en diferentes tecnologías de la información, que ha crecido de forma ordenada hasta más de 200 profesionales, dejando en el camino numerosas spin-offs y startups especializadas en modelos de negocio en internet como BuyVIP y MercaDeuda. La historia de Media Net Software y de las empresas surgidas desde su base, está llena de pequeños logros que han posibilitado nuevas apuestas y proyectos más ambiciosos en cada uno de sus pasos. El interés por conservar la identidad y cultura de la profesionalidad, el compromiso y la calidad ha hecho que el crecimiento haya sido lento, ordenado y también constante incluso en momentos recesivos de la economía 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE MediaNet Software es una empresa que valora principalmente el interés técnico y fomenta la formación de sus profesionales. No somos una empresa que resuelve los problemas gracias a formar grandes equipos de trabajo; al contrario, formamos pequeños equipos de personas de excelente nivel humano y técnico. 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE La plantilla de MediaNet está formada por más de 200 especialistas que comparten su vocación tecnológica, sus ganas de aprender y su compromiso con el trabajo bien hecho. 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE Nuestros clientes delegan en MediaNet Software la creación de sistemas críticos para su negocio porque compartimos sus objetivos. A lo largo de nuestros más de 16 años de actividad, hemos entendido los condicionantes y el contexto de cada proyecto, hemos gestionado riesgos con transparencia, hemos aplicado metodologías ágiles, hemos asignado a personas con capacidad y actitud para sacar los retos adelante. Creemos que después de más de 300 proyectos realizados, los factores comunes que han caracterizado a cada uno de ellos son, en definitiva, la profesionalidad de las personas asignadas a un proyecto y la responsabilidad y compromiso de todas ellas con el éxito del mismo. 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE La fórmula de nuestro éxito pasa por el compromiso con nuestros clientes y nuestra plantilla, la visión estratégica a largo plazo y la importancia que tiene nuestro equipo de profesionales 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE Consultoría Tecnológica. Es nuestra principal área de actividad. El equipo de MNS está actualmente formado por más de 200 profesionales de formación técnica. Realizamos estudios de viabilidad tecnológica y análisis de herramientas; definimos entornos de desarrollo corporativos, e implantamos metodologías de trabajo ágiles. Todo según estándares de mercado, patrones y arquitecturas de referencia y buenas prácticas de referencia. Desarrollo a medida. Construimos aplicaciones que se adaptan a los requisitos específicos de nuestros clientes; integrándonos cuando es necesario con su infraestructura y parque de aplicaciones. Nuestras tecnologías de referencia son J2EE y .NET Movilidad. Desarrollamos aplicaciones de movilidad corporativas multi-plataforma; tanto en tecnología nativa (iOS, Android) como en HTML5 Experiencia de Usuario. Nuestro equipo de especialistas en User eXperience conceptualizan y definen la interacción del usuario con las aplicaciones que posteriormente desarrollamos. Las técnicas de prototipado y wireframming aseguran la agilidad en el uso de la aplicación y el soporte crossbrowsing Además, nuestro compromiso con el uso de estándares de mercado como WAI-AA, HTML 5 y JQERY y normativa internacional garantiza la accesibilidad de las aplicaciones Gestión de Proyectos. Colaboramos con grandes organizaciones en la gestión integral de proyectos, innovación y factorías de Software. Nuestro modelo de gestión parte de nuestro profundo conocimiento del mundo de la tecnología, Actualmente, los profesionales de MediaNet gestionan más de 400.000 horas de ingeniería al año. Gestión de infraestructuras. Definimos arquitecturas de sistemas, que implantamos, explotamos y gestionamos para nuestros clientes. Tanto en servidores físicos como en la nube. Desde 2008 somos proveedores de servicios Cloud, y actualmente somos socios tecnológicos de AWS y Azure Nuestro valor diferenciador es la capacidad de operar la infraestructura, y la información adicional de control de gestión que procesamos para nuestros clientes . eCommerce. Una de nuestras principales áreas de actividad es el desarrollo de modelos de e-commerce. Desde la venta privada a la tienda online con catálogo. 06/03/12 AUTORE
06/03/12 AUTORE 06/03/12 AUTORE 06/03/12 AUTORE En MediaNet las personas son siempre lo primero, porque hay otra forma de entender la tecnología. 06/03/12 AUTORE