Building Javascript Applications
With
Backbone.js
March 13, 2012
Ken Harris Sr. Developer, Telkonet.com
Trends in Web Apps
Fatter Clients
More Javascript
More CSS
More complex
Can turn into a mess
Needs structure
Backbone.js
MVC Framework for client side Javascript
Organize and simplify JS application
Lightweight only 4kb minified
Becoming popular
Sites using Backbone.js
LinkedIn Mobile
Diaspora
Foursquare
Blossom
Do
Quote Roller
Posterous
Salon.io
Groupon Now!
Pandora
Basecamp Mobile
Bit Torrent
Requirements
Underscore.js support library
Jquery or Zepto
Especially for collections
Uses jquery.ajax to access server DB
Json2.js for RESTful persistence
Booklist Example
Booklist Example
MVC Design Pattern
Model-View-Controller
Comes from Smalltalk-80
Popular pattern for server frameworks
Model = data
View = user display
Controller = Glue, accepts user interaction,
interfaces with models & dispatches views
Divide and conquer strategy
Backbone.Events
Mixin module can be added to any object
Bind, trigger, and unbind
Events are strings (eg. change)
Trigger can pass arguments
Changes to data models can trigger automatic
refresh of views
Backbone.Events
Var object = {};
_.extend(object, Backbone.Events);
object.bind(poke, function(msg) {
alert(Just got poked: +msg); });
object.trigger(poke, hello...);
Backbone.Model
Heart of the application
Data + logic (conversions, validations,
computed properties, access control, )
Create new model class by extending
Backbone.Model
Create instance from class with new
Backbone.Model
Book = Backbone.Model.extend({
initialize: function() { // do something
},
defaults: { loc : '', title : '', author : ''},
urlRoot: '/phpdemo/db.php/'
});
Book = new Book;
Backbone.Model
Properties
model.id unique server id
model.cid client id
model.defaults default attribute values
Methods
Initialize() - called on creation
get(attribute) - getter
set(attributes) - setter
validate() - validation
Backbone.Model
More methods
fetch()
save()
destroy()
toJSON()
Events
change, destroy, error
change event can be bound to render a view
Server Interaction
Makes RESTful calls to server
CRUD (create,read,update,delete)
Create POST
server/collection/id
Read
server/model/id
Update PUT
Delete DELETE
Data passed using JSON encoding
GET
Backbone.Collection
Ordered set of models
Can listen for events on any model
Create by extending Backbone.Collection
Crate an instance using new
Backbone.Collection
Booklist = Backbone.Collection.extend({
model : Book,
url : '/phpdemo/db.php'
});
booklist = new Booklist;
Backbone.Collection
Methods
add()
remove()
get(id)
getByCid(cid)
Comparator ordering function
Uses underscore.js for iteration methods
Backbone.View
Control piece that renders a view
Extend Backbone.View to create class
Use new to create an instance
View.el associated DOM element
initialize() function
render() function
$(selector) locally scoped jQuery
Backbone.View
Backbone.Router
Route client side pages and connect them to
actions and events
Interfaces with hashchange events
Reacts to history navigation
Need to be aware of possible server
interactions
Backbone.Router
References
Javascript Web Applications, Alex MacCaw,
O'Reilly (2011)
http://documentcloud.github.com/backbone/
Backbone.js
Underscore.js
Todos demo
Ken harris
[email protected]
@harris901
