Presented at the Boston Code Camp 19. Demo app, CallButler can be found at http://ushag-backbonejs.site44.com/CallButler and the source code at https://github.com/ushag/call-butler

1. BACKBONE JS IN ACTION
@UshaGuduri

2. AGENDA
Web Apps Back Then
Web Apps Now
What the heck is the problem?!!
What is BackboneJS?
Lets get hands-on
Whats out there

3. ONCE UPON A TIME...

4. RIGHT HERE, RIGHT NOW!

5. HOW DO WE ACHIEVE DYNAMISM?
“ The best thing about JavaScript is its
implementation of functions. ”

6. JQUERY
AJAX
$(function () {
// do stuff after DOM has loaded
});
$.ajax({
url: "/myurl",
beforeSend: function ( xhr ) {
xhr.overrideMimeType("text/plain;");
},
success: function(response) {
// I AM INVINCIBLE!
},
error: function(response) {
// What, I FAILED ? :O
}
})

7. WHAT THE HECK IS THE PROBLEM?!!!
Lets check Boston.com

8. “ Backbone.js gives structure to web
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 API over a
RESTful JSON interface. ”

9. 6.3KB
Packed and gzipped !!

10. BACKBONEJS CONSTRUCTS
Model (and Collection): Application (domain) data objects
that are retrieved from and persisted to the server
View: HTML presentation of the data stored in the models
and DOM 'controller'
Router: Controller that saves the state of the application
via a url hash
History: Global router (per frame) to handle hashchange
events or pushState
Events: Module that can be mixed in to any object, giving
the object the ability to bind and trigger custom named
events.
Sync: Manages actual persistence by a "function that
Backbone calls every time it attempts to read or save a
model to the server."

12. HOW TO MAP BACKBONE TO MVC

13. MODEL
extend, initialize(constructor), url/urlRoot, id/idAttribute/cid,
get, set, defaults, fetch, save/destroy, validate
Also be aware of useful functions like:
escape, unset, clear, parse, clone, isNew, hasChanged/changed/changedAttributes,
previous/previousAttributes
var CallItem = Backbone.Model.extend({
urlRoot:"/call"
});
var myCall = new CallItem();
mycall.save({
name: "Leia",
phone: "1-213-345-2343",
call_on: "2013-03-10"
});

14. COLLECTION
extend, initialize(constructor), url, model, models, add,
remove, get, reset
Supports 28 underscore methods ! (forEach, map, min, max...)
Also be aware of useful functions like:
sort, pluck, comparator, where
var CallList = Backbone.Collection.extend({
model: CallItem,
url: '/calls'
});
var myCallList = new CallList();
myCallList.fetch();

15. VIEW
extend, initialize(constructor), tagName, className, events,
remove, delegateEvents, undelegateEvents
var CallItemView = Backbone.View.extend({
events:{
"click .edit" : "render"
},
initialize: function(){
this.model.bind("change", this.render, this);
},
render: function(event) {
this.$el.html(this.template(this.model.attributes));
return this; // allow chaining
}
});
var myCallItemView = new CallItemView({
model: myCall,
el: "#my-call-view"
});

16. el, $el

17. ROUTER
extend, initialize(constructor), navigate, route
var CallRouter = Backbone.Router.extend({
routes: {
"help": "help", // #help
"call/:id": "call", // #call/10
"search/:date(/p:page)": "search" // #search/2013-03-10 or #sea
rch/2013-03-10/2
},
help: function() {
//...your function
}
});
$(function(){
new CallRouter();
Backbone.history.start({pushState: true});
});

18. PUTTING IT ALL TOGETHER
Lets look at: Call Butler
src/
js/
init.js
callButlerApp.js
routers/
models/
callItem.js
callList.js
views/
callItem.js
callDetail.js

19. Over 35 Javascript MVC framework libraries showcased at
Jster Catalog

20. FURTHER RESOURCES
AngularJS Videos at
Using Knockoutjs and JQuery to Create Richer MVC 4
Applications at 11:40am
Backbone.JS
Backbone.JS Source Code
Call Butler Source Code
Backbone Tutorials
egghead.io
Bocoup Training at $1,149!

21. Good Luck BackboneJS Padawan!