Your SlideShare is downloading. ×
0
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
S.P.A com Backbone.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

S.P.A com Backbone.js

2,209

Published on

Medianet Software fue patrocinador Platinum en el evento Codemotion. …

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,209
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
62
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. S.P.A. con Backbone.jsJulien CastelainDenis Ciccale
  • 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. ¿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. Acerca de MediaNet Software
  • 5. EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS J. Castelain, D. Ciccale MediaNet Software
  • 6. PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA http://www.flickr.com/photos/24443965@N08/ J. Castelain, D. Ciccale MediaNet Software
  • 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. UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO J. Castelain, D. Ciccale MediaNet Software
  • 9. NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO J. Castelain, D. Ciccale MediaNet Software
  • 10. ¿QUÉ HACEMOS?NUESTRAS ÁREAS DEACTIVIDAD J. Castelain, D. Ciccale MediaNet Software
  • 11. Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO J. Castelain, D. Ciccale MediaNet Software
  • 12. ¿Qué es Backbone.js?
  • 13. Es una librería que permite estructurar unaaplicación web siguiendo el concepto de MVC J. Castelain, D. Ciccale MediaNet Software
  • 14. Otros frameworks MVC J. Castelain, D. Ciccale MediaNet Software
  • 15. Componentes de Backbone.js J. Castelain, D. Ciccale 15 MediaNet Software
  • 16. Models• Representa los datos J. Castelain, D. Ciccale 16 MediaNet Software
  • 17. Modelsvar 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. 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. Collections• Conjunto de modelos J. Castelain, D. Ciccale 21 MediaNet Software
  • 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. Collections• Conjunto de modelos• Se comporta como un modelo J. Castelain, D. Ciccale 23 MediaNet Software
  • 24. Collectionsvar 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. Collectionsvar 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. 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. 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. 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. 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. Viewsvar 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. 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. Templating• Underscore, Handlebars J. Castelain, D. Ciccale 36 MediaNet 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. Ciccale 37 MediaNet Software
  • 38. Templating<script> _.templateSettings = { interpolate : /{{(.+?)}}/g };</script> J. Castelain, D. Ciccale 38 MediaNet 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. Ciccale 39 MediaNet 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. Ciccale 40 MediaNet Software
  • 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. ¿M.V…?
  • 43. Router• Controla la navegación J. Castelain, D. Ciccale 43 MediaNet Software
  • 44. Routervar Router = Backbone.Router.extend({ routes: { /: homePage, /users/:id: userPage }}); J. Castelain, D. Ciccale 44 MediaNet Software
  • 45. Routervar 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
  • 47. Events• Comunicación entre objetos (Modelos, Colecciones…) J. Castelain, D. Ciccale 47 MediaNet 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. 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. 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. Data binding• Backbone no tiene data binding J. Castelain, D. Ciccale 51 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
  • 53. Gestión de recursos
  • 54. Gestión de recursos• ¿Muchos recursos? J. Castelain, D. Ciccale 54 MediaNet 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. Ciccale 55 MediaNet Software
  • 56. Gestión de recursos• ¿Muchos recursos?• RequireJS (module loader) J. Castelain, D. Ciccale 56 MediaNet Software
  • 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. RequireJSrequire([libs/jquery.min], function () { console.log(jQuery);}); J. Castelain, D. Ciccale 58 MediaNet 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. Ciccale 59 MediaNet Software
  • 60. RequireJSrequire([mymodule], function (mymodule) { var view = new mymodule.View(); $(#container).append(view.render().el);}); J. Castelain, D. Ciccale 60 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
  • 62. Tests Unitarios
  • 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. 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. 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. Conclusiones
  • 68. Recursos
  • 69. Recursos• Backbonejs.org• Backbone Fundamentals• PeepCode• Los Techies• Backbone source code J. Castelain, D. Ciccale 69 MediaNet Software
  • 70. ¿Preguntas?
  • 71. J. Castelain, D. Ciccale MediaNet Software
  • 72. GraciasDenis - @tdecs - github.com/dciccaleJulien - @__juju__ - github.com/julien

×