S.P.A. con Backbone.jsJulien CastelainDenis Ciccale
NosotrosDesarrolladores front auto-didactas• Trabajan en MediaNet Software como UX Technical  Leaders• Actualmente usando ...
¿De qué vamos a hablar?•   Acerca de MediaNet Software•   Backbone.js & MVC•   Gestión de recursos•   Tests Unitarios•   C...
Acerca de MediaNet Software
EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS                             J. Castelain, D. Ciccale   ...
PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA          http://www.flickr.com/photos/24443965@N08/                 ...
18/03/12                                       194 Medianos - Google MapsPERFIL DE EMPRESA:MÁS DE 200 ESPECIALISTAS       ...
UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO                        J. Castelain, D. Ciccale       ...
NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO                       J. Castelain, D. Ciccale                       ...
¿QUÉ HACEMOS?NUESTRAS ÁREAS DEACTIVIDAD                    J. Castelain, D. Ciccale                        MediaNet Software
Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO                     J. Castelain, D. Ciccale                         Media...
¿Qué es Backbone.js?
Es una librería que permite estructurar unaaplicación web siguiendo el concepto de MVC                                J. C...
Otros frameworks MVC                  J. Castelain, D. Ciccale                      MediaNet Software
Componentes de Backbone.js                             J. Castelain, D. Ciccale   15                                 Media...
Models• Representa los datos                         J. Castelain, D. Ciccale   16                             MediaNet So...
Modelsvar User = Backbone.Model.extend({ defaults: {      firstName: ,      lastName: ,      date: null }, url: /user});  ...
Models• Representa los datos• Notifica de cambios en sus atributos                                         J. Castelain, D...
Models• Representa los datos• Notifica de cambios en sus atributos• Se comunica con el servidor para estar sincronizado   ...
Modelsvar user = new User();user.on(change, function () { console.log(user.toJSON());});user.fetch(); // GET json// actual...
Collections• Conjunto de modelos                        J. Castelain, D. Ciccale   21                            MediaNet ...
Collectionsvar Users = Backbone.Collection.extend({ model: User, // modelo que usa la colección url: /users // url que dev...
Collections• Conjunto de modelos• Se comporta como un modelo                               J. Castelain, D. Ciccale   23  ...
Collectionsvar users = new Users();users.fetch(); // petición GET a /users…console.log(users.models);                     ...
Collections• Conjunto de modelos• Se comporta como un modelo• Eventos   •   add, remove, refresh, reset                   ...
Collectionsvar users = new Users();users.on(reset, function () {  console.log(modelos reemplazados!);});users.fetch(); // ...
Collections• Conjunto de modelos• Se comporta como un modelo• Eventos    •   add, remove, refresh, reset• Fácil manipulaci...
Views• Representación gráfica de los datos    •   template, initialize, model, render, el                                 ...
Viewsvar UserView = Backbone.View.extend({ template: _.template($(#userView).html()), initialize: function () {      this....
Views<!-- UserView template --><script type="text/template" id="userView"> <h2>Usuario</h2> <p>Nombre: <%= firstName %></p...
Views// instanciamos la vistavar userView = new UserView({model: user});userView.el.appendTo(document.body);....<div> <h2>...
Views• Representación gráfica de los datos    •   template, initialize, model, render, el• Puede mantenerse sincronizada c...
Viewsvar UserView = Backbone.View.extend({ … initialize: function () {      this.model.on(change, this.render, this); } …}...
Views• Representación gráfica de los datos    •   template, Initialize, model, render, el• Puede mantenerse sincronizada c...
Viewsvar UserView = Backbone.View.extend({ initialize: function () {       _.bindAll(this); }, events: {      click #butto...
Templating• Underscore, Handlebars                           J. Castelain, D. Ciccale   36                               M...
Templating<script type="text/template" id="usersView">  <h2>Usuarios</h2>  <ul>  <% _.each(users, function (user) { %>    ...
Templating<script> _.templateSettings = {  interpolate : /{{(.+?)}}/g };</script>                                   J. Cas...
Templating<script type="text/template" id="usersView"> <h2>Usuarios</h2> <ul> <% _.each(users, function (user) { %>   <li>...
Templatingvar UserView = Backbone.View.extend({ template: Handlebars.compile($(#userView).html()), ... render: function ()...
Templating<script type="text/template" id="usersView"> <h2>Usuarios</h2> <ul> {{#each users}}   <li>Usuario: {{ firstName ...
¿M.V…?
Router• Controla la navegación                           J. Castelain, D. Ciccale   43                               Media...
Routervar Router = Backbone.Router.extend({ routes: {      /: homePage,      /users/:id: userPage }});                    ...
Routervar Router = Backbone.Router.extend({      ... userPage: function (id) {      console.log(Buscando el usuario:, id);...
Router• Controla la navegación• Utiliza el History API de HTML5 (o un fallback)var router = new Router();Backbone.History....
Events• Comunicación entre objetos (Modelos,  Colecciones…)                                     J. Castelain, D. Ciccale  ...
Eventsvar obj = _.extend(Backbone.Events, {});obj.on(search:user, function (id) { console.log(Buscando al usuario:, id); /...
Events• Comunicación entre objetos (Modelos,  Colecciones…)• Integrado en el núcleo de Backbone    •   Modelos y coleccion...
Eventsvar UserView = Backbone.View.extend({ initialize: function () {      this.model.on(change, this.render, this);      ...
Data binding• Backbone no tiene data binding                                   J. Castelain, D. Ciccale   51              ...
Data binding• Backbone no tiene data binding• Comunicación entre modelos y vistas a través de  eventos    •   var pubsub =...
Gestión de recursos
Gestión de recursos• ¿Muchos recursos?                      J. Castelain, D. Ciccale   54                          MediaNe...
Gestión de recursos• ¿Muchos recursos?<!doctype html><head> <script src="libs/jquery.min.js"></script> <script src="libs/u...
Gestión de recursos• ¿Muchos recursos?• RequireJS (module loader)                              J. Castelain, D. Ciccale   ...
Gestión de recursos• ¿Muchos recursos?• RequireJS (module loader)• ¿Por qué RequireJS?    •   yepnope, lab.js (script load...
RequireJSrequire([libs/jquery.min], function () { console.log(jQuery);});                                     J. Castelain...
RequireJSdefine(mymodule, [libs/jquery.min, libs/underscore.min,    libs/backbone.min], function () { var View = Backbone....
RequireJSrequire([mymodule], function (mymodule) { var view = new mymodule.View(); $(#container).append(view.render().el);...
RequireJS Plugins• Para cargar:    •   text (html, css)    •   cs (coffeescript)    •   async (de manera asíncrono)    •  ...
Tests Unitarios
Tests Unitarios•   Opciones                  J. Castelain, D. Ciccale   63                      MediaNet Software
QUnit• Sencillo• Buena documentación• Tests de Backbone.js en QUnit                                  J. Castelain, D. Cicc...
QUnitmodule(app, { setup: function () {      /* se ejecuta antes de cada tests */ }, teardown: function () {      /* se ej...
QUnittest(Probamos el modelo User, function () { var user = new User(); deepEqual(user.get(firstName), , Usuario sin nombr...
Conclusiones
Recursos
Recursos•   Backbonejs.org•   Backbone Fundamentals•   PeepCode•   Los Techies•   Backbone source code                    ...
¿Preguntas?
J. Castelain, D. Ciccale    MediaNet Software
GraciasDenis   - @tdecs   - github.com/dciccaleJulien   - @__juju__   - github.com/julien
Upcoming SlideShare
Loading in...5
×

S.P.A com Backbone.js

2,236

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,236
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

S.P.A com Backbone.js

  1. 1. S.P.A. con Backbone.jsJulien CastelainDenis Ciccale
  2. 2. NosotrosDesarrolladores 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. 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
  4. 4. Acerca de MediaNet Software
  5. 5. EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS J. Castelain, D. Ciccale MediaNet Software
  6. 6. PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA http://www.flickr.com/photos/24443965@N08/ J. Castelain, D. Ciccale MediaNet Software
  7. 7. 18/03/12 194 Medianos - Google MapsPERFIL DE EMPRESA: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 J. Castelain, D. Ciccale MediaNet Software Argentina - Comodoro Rivadavia
  8. 8. UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO J. Castelain, D. Ciccale MediaNet Software
  9. 9. NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO J. Castelain, D. Ciccale MediaNet Software
  10. 10. ¿QUÉ HACEMOS?NUESTRAS ÁREAS DEACTIVIDAD J. Castelain, D. Ciccale MediaNet Software
  11. 11. Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO J. Castelain, D. Ciccale MediaNet Software
  12. 12. ¿Qué es Backbone.js?
  13. 13. Es una librería que permite estructurar unaaplicación web siguiendo el concepto de MVC J. Castelain, D. Ciccale MediaNet Software
  14. 14. Otros frameworks MVC J. Castelain, D. Ciccale MediaNet Software
  15. 15. Componentes de Backbone.js J. Castelain, D. Ciccale 15 MediaNet Software
  16. 16. Models• Representa los datos J. Castelain, D. Ciccale 16 MediaNet Software
  17. 17. Modelsvar User = Backbone.Model.extend({ defaults: { firstName: , lastName: , date: null }, url: /user}); J. Castelain, D. Ciccale 17 MediaNet Software
  18. 18. Models• Representa los datos• Notifica de cambios en sus atributos J. Castelain, D. Ciccale 18 MediaNet Software
  19. 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. 20. Modelsvar user = new User();user.on(change, function () { console.log(user.toJSON());});user.fetch(); // GET json// actualizaciónuser.set({firstName: Jeremy, lastName: Ashkenas});user.save(); // POST/PUT J. Castelain, D. Ciccale 20 MediaNet Software
  21. 21. Collections• Conjunto de modelos J. Castelain, D. Ciccale 21 MediaNet Software
  22. 22. Collectionsvar 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. 23. Collections• Conjunto de modelos• Se comporta como un modelo J. Castelain, D. Ciccale 23 MediaNet Software
  24. 24. Collectionsvar users = new Users();users.fetch(); // petición GET a /users…console.log(users.models); J. Castelain, D. Ciccale 24 MediaNet Software
  25. 25. Collections• Conjunto de modelos• Se comporta como un modelo• Eventos • add, remove, refresh, reset J. Castelain, D. Ciccale 25 MediaNet Software
  26. 26. Collectionsvar users = new Users();users.on(reset, function () { console.log(modelos reemplazados!);});users.fetch(); // GET /users J. Castelain, D. Ciccale 26 MediaNet Software
  27. 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. 28. Views• Representación gráfica de los datos • template, initialize, model, render, el J. Castelain, D. Ciccale 28 MediaNet Software
  29. 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. Ciccale 29 MediaNet Software
  30. 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. Ciccale 30 MediaNet Software
  31. 31. Views// instanciamos la vistavar 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. 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. 33. Viewsvar UserView = Backbone.View.extend({ … initialize: function () { this.model.on(change, this.render, this); } …}); J. Castelain, D. Ciccale 33 MediaNet Software
  34. 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. 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. Ciccale 35 MediaNet Software
  36. 36. Templating• Underscore, Handlebars J. Castelain, D. Ciccale 36 MediaNet Software
  37. 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. Ciccale 37 MediaNet Software
  38. 38. Templating<script> _.templateSettings = { interpolate : /{{(.+?)}}/g };</script> J. Castelain, D. Ciccale 38 MediaNet Software
  39. 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. Ciccale 39 MediaNet Software
  40. 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. Ciccale 40 MediaNet Software
  41. 41. Templating<script type="text/template" id="usersView"> <h2>Usuarios</h2> <ul> {{#each users}} <li>Usuario: {{ firstName }}, {{ lastName }}</li> {{/each}} </ul></script> J. Castelain, D. Ciccale 41 MediaNet Software
  42. 42. ¿M.V…?
  43. 43. Router• Controla la navegación J. Castelain, D. Ciccale 43 MediaNet Software
  44. 44. Routervar Router = Backbone.Router.extend({ routes: { /: homePage, /users/:id: userPage }}); J. Castelain, D. Ciccale 44 MediaNet Software
  45. 45. Routervar Router = Backbone.Router.extend({ ... userPage: function (id) { console.log(Buscando el usuario:, id); }}); J. Castelain, D. Ciccale 45 MediaNet Software
  46. 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
  47. 47. Events• Comunicación entre objetos (Modelos, Colecciones…) J. Castelain, D. Ciccale 47 MediaNet Software
  48. 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. Ciccale 48 MediaNet Software
  49. 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. 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. Ciccale 50 MediaNet Software
  51. 51. Data binding• Backbone no tiene data binding J. Castelain, D. Ciccale 51 MediaNet Software
  52. 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
  53. 53. Gestión de recursos
  54. 54. Gestión de recursos• ¿Muchos recursos? J. Castelain, D. Ciccale 54 MediaNet Software
  55. 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. Ciccale 55 MediaNet Software
  56. 56. Gestión de recursos• ¿Muchos recursos?• RequireJS (module loader) J. Castelain, D. Ciccale 56 MediaNet Software
  57. 57. Gestión de recursos• ¿Muchos recursos?• RequireJS (module loader)• ¿Por qué RequireJS? • yepnope, lab.js (script loaders) J. Castelain, D. Ciccale 57 MediaNet Software
  58. 58. RequireJSrequire([libs/jquery.min], function () { console.log(jQuery);}); J. Castelain, D. Ciccale 58 MediaNet Software
  59. 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. Ciccale 59 MediaNet Software
  60. 60. RequireJSrequire([mymodule], function (mymodule) { var view = new mymodule.View(); $(#container).append(view.render().el);}); J. Castelain, D. Ciccale 60 MediaNet Software
  61. 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
  62. 62. Tests Unitarios
  63. 63. Tests Unitarios• Opciones J. Castelain, D. Ciccale 63 MediaNet Software
  64. 64. QUnit• Sencillo• Buena documentación• Tests de Backbone.js en QUnit J. Castelain, D. Ciccale 64 MediaNet Software
  65. 65. QUnitmodule(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. 66. QUnittest(Probamos el modelo User, function () { var user = new User(); deepEqual(user.get(firstName), , Usuario sin nombre);}); J. Castelain, D. Ciccale 66 MediaNet Software
  67. 67. Conclusiones
  68. 68. Recursos
  69. 69. Recursos• Backbonejs.org• Backbone Fundamentals• PeepCode• Los Techies• Backbone source code J. Castelain, D. Ciccale 69 MediaNet Software
  70. 70. ¿Preguntas?
  71. 71. J. Castelain, D. Ciccale MediaNet Software
  72. 72. GraciasDenis - @tdecs - github.com/dciccaleJulien - @__juju__ - github.com/julien
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×