A gentle intro to Backbone.js

Yet another Backbone.js presentation. This was made for a talk given to my local tech community, in Faro (Portugal).

Transcript

1. Backbone.js organize your JS code
2. What? • The goal of all architecture is to build something well. • Backbone.js is an MVC library (not a framework) but… don't always strictly follow this pattern • So, Javascript frameworks are called MV*: since you're likely to have a Model and a View but a Controller might not be present.
3. What? (part 2) • On Backbone.js, the controller is in the View • Use it for single page apps • For simple use (e.g.: simple animations) might be overkill
4. Backbone.Model • It has getters and setters ( model.get(), model.set() ) • Best practice is to use get() and set() to retrieve and change model's attributes • Setters broadcast changes in model's attributes
5. Backbone.Model (part 2) • Add event listeners on model's initialize method • It's encouraged to validate your model's attributes through validate() • Syncing with a persistent layer uses ajax ( model.save(), model.sync(), model.destroy() ) • Http verbs:GET, POST, PUT, DELETE,
6. Backbone.View • Support models defining how they should be presented to the user • Uses a JS template engine (Mustache, $- tmpl, etc…), or underscore's... • el - two ways to associate a DOM element to a view: create a new one and then add it or make a ref to an existent one
7. Backbone.View (part 2) • el - two ways to associate a DOM element to a view: create a new one and then add it or make a ref to an existent one • Frequent calls to jQuery functions: backbone implements $el === $(view.el) and view.$(selector) === $(view.el).find(selector) • render() is an optional function and defines the logic for rendering the template
8. Backbone.View (part 3) • The events attribute allows us to attach event listeners directly to el or to el-relative selectors
9. Backbone.Collection • Collections are sets of models • You can get a model by issuing collection. get(id) or by their cid. • Models can be added or removed from a collection by issuing collection.add() and collection.remove().
10. Backbone.Collection (part 2) • You can update the entire set by calling collection.update(), which performs all the events bellow except reset • Events: add, remove, change and reset
11. Backbone.Events • Events are the standard way of dealing with user interface actions • Every class on Backbone is inherited from Backbone.Events • Events are a key part o Backbone.js, so one must understand them in order to become more productive with the framework
12. Backbone.Events (part 2) • on(), off() and trigger() allows us to attach, detach and fire object events • Use namespaced events if you end up using quite a few own events in your app • All event is made available if you want to attach a callback for every event that occurs on the object.
13. Backbone.Events (part 3) • listenTo() and stopListening() can be used to listen/stop listen events on another object. (v9.10+)
14. Backbone.Router • Helps manage app state and connect urls to app events • Uses hash tags with url fragments or browser's push state/history API • Backbone.history.start() indicates To Backbone that it's ok to start monitoring hashchange events in url
15. References • http://addyosmani.github.com/backbone- fundamentals/ • http://backbonejs.org/ • http://dailyjs.com/