Viking academy backbone.js


Published on

Introduction to backbone.js

1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Viking academy backbone.js

  1. 1. backbone.js and single-page web apps Wijnants - Mobile Vikings - 9 november 2012
  2. 2. Lets start with a little historyJavascript was invented by Netscape in 1995,and the web looked like...
  3. 3. iteractive website:<marquee>, <blink>
  4. 4. the rise of AJAX (2004)gmail is the first single-page web app
  5. 5. more and more javascripta website is:lots of html pages with some javascriptajax returns htmla webapp is:lots of javascript with some html pagesajax returns jsonfront-end is taking over program logicnecessary to create highly responsive user interfaces
  6. 6. #7 6 in top 7 on Github is javascript
  7. 7. Why another framework? weve got jQuery, right?
  8. 8. Whats wrong with jQuery?jQuery is very useful for DOM manipulations,events, ajax,... (cross-browser)and btw: use zepto.js for mobile devices (webkit only)DOM manipulation = very expensive taskbreaks hardware accelerationalways avoid unnecessary DOM manipulationsespecially on mobile devicesToo easy to use the DOM for state of your app
  9. 9. How to avoid DOM manipulations? important rule The DOM is write-only! dont use it to store the state of your app its for presentation purposes only
  10. 10. Bad:$(".button").click( function(event) { if (!$(this).hasClass("selected")) { $(this).parent().find(".button.selected").removeClass("selected); $(this).addClass("selected") }});Dont read from the DOM to know which of the buttons isselected
  11. 11. But where to store everythingif DOM is not allowed?Here backbone.js kicks in...
  12. 12. backbone.jsevery good framework has "a sentence" :-)Backbone.js gives structure to web applications byproviding models with key-value binding and custom events, collections with arich API of enumerable functions, views with declarative event handling, andconnects it all to your existing API over a RESTful JSON interface.Single-page web apps with hundreds of lines of javascript.Most apps just give structure with namespaces:var namespace = (function() { return { .... }})(); We need more structure than this!
  13. 13. backbone.jsPretty maturestarted 2 years agopopular on githubversion 0.9.2, 1.0 coming upfrom the creators of underscore.js and coffeescriptLightweightjust 2 dependencies: underscore, jquery/zeptoAlso runs on node.jsSame models in front-end and back-end
  14. 14. Annotated source
  15. 15. MVC framework or whateverits not really MVC, its MVVM!ModelViewViewModel (=DOM)where is the controller?skinny controller, fat modelprogram logic in models and views
  16. 16. DOM Model MODEL html javascript is the only source of truth! is pure javascript Models and Collections Collection is an array of Models
  17. 17. EventsLots of events are firedwith these naming conventions:"add" (model, collection) — when a model is added to a collection."remove" (model, collection) — when a model is removed from a collection."reset" (collection) — when the collections entire contents have been replaced."change" (model, options) — when a models attributes have changed."change:[attribute]" (model, value, options) — when a specific attribute has been updated."destroy" (model, collection) — when a model is destroyed."sync" (model, collection) — triggers whenever a model has been successfully synced to the server."error" (model, collection) — when a models validation fails, or a save call fails on the server."route:[name]" (router) — when one of a routers routes has matched."all" — this special event fires for any triggered event, passing the event name as first argument.
  18. 18. render change eventsDOM View Model html events change data VIEW observes model changes html javascript is pure javascript render function to write to DOM this.el is the element in DOM observes events from DOM (click, touchmove, ...)
  19. 19. Model-backed viewsvar model = new Todo({ title: foo, done: false});var view = new TodoView(model);View has direct access to model.Model does not. View listens to change events.
  20. 20. Persistency a.k.a the databasejavascript applications usually work like this:get_all()get_one()save_one()update_one()delete_one()and the same on server-side: CRUDLots of code for repetitive operations
  21. 21. SyncBackbone.js has a sync moduleCRUD interfaceGET /modelGET /model/<id>POST /modelUPDATE /model/idDELETE /model/idcan be overwritten granularly. examples:use localstorage for all fetch operationsuse sockets instead of REST over http
  22. 22. render change eventsDOM View Model html events change data sync web service html javascript SYNC asynchronous persistency
  23. 23. Model.syncIn a Model or Collection:fetch()save()remove()dont care about whats going on in the back
  24. 24. More stuff:Model validation on client-sideyou can only save() a valid modelRoutereasy url handling (with # or #!)works with History API, so back button worksUnderscore functionsmap, reduce, for each, client-side templates, ...
  25. 25. example: Modelvar Todo = Backbone.Model.extend({ defaults: { "title" : "(empty)", "done" : false }, toggle: function() { this.set({ "done" : !this.get("done") });; }, clear: function() { this.destroy(); }});
  26. 26. example: Collectionvar TodoList = Backbone.Collection.extend({ model: Todo, initialize: function() { this.fetch(); }, done: function() { return this.filter(function(todo){ return todo.get(done); }); }, remaining: function() { return this.without.apply(this, this.done()); },});
  27. 27. example: Viewvar TodoView = Backbone.View.extend({ tagName: "li", template: Templates.todo, initialize: function() { this.model.bind(change, this.render, this); this.model.bind(destroy, this.remove, this); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass(done, this.model.get(done)); return this; }});
  28. 28. example: View (continued)events: { "click .toggle" : "toggleDone", "click .clear" : "clear"},toggleDone: function() { this.model.toggle();},clear: function() { this.model.clear();}
  29. 29. ProblemsSyntax is not very clearLots of ( { "=> coffeescript can help with thisThe use of thisyou loose scope quite easily in javascript=> var self = this to the rescueSteep learning curvebut documentation is very goodlots of support on stackoverflow
  30. 30. Advantagesstructured javascriptwrite-only DOMdesigned for web appssyncing with back-end = trivialnaming conventions (events, render, ...)model change => view rendervery popular: big community
  31. 31. Getting startedhttp://backbonejs.orgEverything you need is hereOr check out the webapp for VikingSpots Questions? Remarks?