Backbone.js

Transcript

1. Backbone.js
2. Javier Arce ↓ Front-end Dev. ↓ Vizzuality ↓ @javier
3. Backbone.js
4. Creado por Jeremy Ashkenas.
5. CoffeeScript Underscore.js DocumentCloud
6. ¿Qué es?
7. Framework de JavaScript para construir webapps.
8. < 4kb
9. RESTful friendly
10. Dependencias
11. + Underscore.js - json2.js - jQuery/Zepto
12. "Backbone supplies structure to JavaScript-heavy applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."
13. "Backbone supplies structure to JavaScript-heavy applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."
14. "Backbone supplies structure to JavaScript-heavy applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."
15. "Backbone supplies structure to JavaScript-heavy applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."
16. "Backbone supplies structure to JavaScript-heavy applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface."
17. MVC*
18. MVCollection MVController
19. Persistencia
20. WebSockets XML transport Local Storage
21. Ventajas
22. Simplifica la creación de webapps que hacen uso intensivo de JavaScript. Ventajas
23. Evita el spaghetti code. Ventajas
24. fs.stat(baseFolder, function(err, stats) { err && exit(err, null) || (function() { !stats.isDirectory() && exit(errors.NOTAREPO(baseFolder)) || (function() { fs.stat(objectsFolder, function(err, stats) { err && exit(err, null) || (function() { !stats.isDirectory() && exit(errors.NOTAREPO(objectsFolder)) || (function() { fs.readFile(indexFile, function(err, indexData) { err && exit(err, null) || (function() { fs.readFile(headFile, function(err, headData) { err && exit(err, null) || (function() { var odbObject = odb.ODB.init(); exit(null, new Repository(odbObject, indexData, headData, { 'repository':baseFolder, 'index':indexFile, 'head':headFile, 'objects':objectsFolder, 'bare':isBare })); })(); }); })(); }); })(); })(); }); })(); })(); }); Ventajas
25. Y el glue code. Ventajas
26. $("table#posts td.new li.items a.add span.active"). $("div.main section.readed ul.books li.fiction"). $("#inbox .emails ul.incoming li.starred a:hover"). Ventajas
27. Dota de estructura al código. Ventajas
28. Separa datos de presentación. Ventajas
29. Funcionamiento
30. "With Backbone, you represent your data as models, which can be created, validated, destroyed, and saved to the server." Funcionamiento
31. "Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the views that display the model's data are notified of the event, causing them to re-render." Funcionamiento
32. "Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the views that display the model's data are notified of the event, causing them to re-render." Funcionamiento
33. "You don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves." Funcionamiento
34. "You don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves." Funcionamiento
35. Componentes
36. Models
37. var Book = Backbone.Model.extend({}); Models
38. var Book = Backbone.Model.extend({ initialize: function(){ alert("Nice book!"); } }); Models
39. var Book = Backbone.Model.extend({…}); var book = new Book({ title: "Infinite Jest", author: "David F. Wallace" }); // "Nice book!" Models
40. // Getters book.get("title"); // "Infinite Jest" book.get("author"); // "David F. Wallace" // Setters book.set({ title: "Infinite Jest", author: "David F. Wallace" }); Models
41. // Métodos var Book = Backbone.Model.extend({ read: function(){ this.set({readed, true}); } }); Models
42. // Eventos var Book = Backbone.Model.extend({ initialize: function(){ this.bind("change:title", function(){ var title = this.get("title"); alert("Title changed to:" + title); }); } }); Models
43. // Eventos var Book = Backbone.Model.extend({ initialize: function(){ this.bind("change:title", function(){ var title = this.get("title"); alert("Title changed to:" + title); }); } }); book.set({ title: "Slaughterhouse-Five", author: "Kurt Vonnegut" }); // “Title changed to Slaughterhouse-Five” Models
44. // Validación var Book = Backbone.Model.extend({ validate: function(attrs) { if (attrs.author == "Paulo Coelho") { return "Argh!"; } } }); var book = new Book({}); book.bind("error", function(model, error) { alert(error); }); book.set({ author: "Paulo Coelho" }); // “Argh!” Models
45. Collections
46. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" });
47. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection;
48. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection; var book = new Book({ title: "The Information", author: "James Gleick" });
49. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection; var book = new Book({ title: "The Information", author: "James Gleick" }); Library.add(book);
50. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection; var book = new Book({ title: "The Information", author: "James Gleick" }); Library.add(book); book.save();
51. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection; var book = new Book({ title: "The Information", author: "James Gleick" }); Library.add(book); book.save(); POST
52. Collections var BookCollection = Backbone.Collection.extend({ model: Book, url: "/books" }); var Library = new BookCollection; var book = new Book({ title: "The Information", author: "James Gleick" }); Library.add(book); book.save(); POST PUT
53. Collections REST create → POST → /collection read → GET → /collection[/:id] update → PUT → /collection/:id delete → DELETE → /collection/:id
54. forEach map reduce reduceRight find filter reject every some include invoke max chain min sortBy sortedIndex toArray size first rest last without indexOf lastIndexOf isEmpty Underscore.js
55. Controllers
56. /#!/enrutado/
57. var AppController = Backbone.Controller.extend({ routes: { "/help/:name" : "helpRoute", "/downloads/*path" : "downloadRoute" "*path" : "defaultRoute", }, defaultRoute: function(path){ alert(path); }, helpRoute: function(name){ … }, downloadRoute: function(path){ … }, }); var appController = new AppController; Backbone.history.start(); Controllers
58. Views
59. Representan modelos.
60. Escuchan eventos.
61. Reaccionan a los eventos.
62. Relación 1:1 con modelos*.
63. var BookView = Backbone.View.extend({ tagName: "li", className: "book", events: { "click .add": "addPage", "click .remove": "removePage", "hover .information": "showToolTip" }, initialize: function() { _.bindAll(this, "render", "addPage", "removePage", "showToolTip"); }, addPage: function() { … }, removePage: function() { … } }); Views
64. var BookView = Backbone.View.extend({ tagName: 'li', className: 'book', bookTemplate: _.template("<strong><%= model.get('title') %></strong> <%= model.get('author') %> <span class='delete'>delete</span>"), initialize: function() { _.bindAll(this, 'render', 'clear', 'remove'); this.model.bind('remove', this.clear); }, events: { 'click .delete': 'remove' }, remove: function() { this.model.destroy(); }, render: function() { $(this.el).html(this.bookTemplate({ model: this.model })); return this; }, clear: function() { $(this.el).remove(); } });
65. … events: { "click .add": "addPage", "click .remove": "removePage", "hover .information": "showToolTip" }, … Views evento .selector nombreFuncion
66. mousedown mouseup mousemove mouseover keydown keyup keypress click dblclick focus focusin … hover custom events focusout blur Views jQuery v.1.6.1.
67. Alternativas
68. Spine Knockout Sproutcore <Angular/> JavascriptMVC
69. ¡Gracias!
70. Referencias / recursos Repositorio oficial https://github.com/documentcloud/backbone Documentación http://documentcloud.github.com/backbone/docs/backbone.html Backbone JS by Nick Gauthier http://ngauthier-backbone.heroku.com Backbone tutorials http://backbonetutorials.com Nailing the Interactions on Pageless Apps (with Backbone.js) http://vimeo.com/23948808 Re-using Backbone.js Models on the server with Node.js and Socket.io to build real-time apps http://andyet.net/blog/2011/feb/15/re-using-backbonejs-models-on-the-server- with-node Backbone.js tutorial http://www.plexical.com/blog/2010/11/18/backbone-js-tutorial
71. Referencias / recursos Spine.js http://maccman.github.com/spine An Introduction to Spine.js http://addyosmani.com/blog/bloguilding-apps-spinejs Sproutcore http://www.sproutcore.com Backbone.js vs SproutCore http://news.ycombinator.com/item?id=2119704 Sproutcore vs jQuery +backbone.js http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with- backbone-js Knockout.js http://knockoutjs.com Knockout.js vs. Backbone.js http://www.ifandelse.com/?p=61 JavascriptMVC http://javascriptmvc.com/ <angular/> http://angularjs.org
72. Esta obra se distribuye usando la licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported. Presentación realizada para el Meet App #8 del 17 de junio de 2011 en Madrid.