BACKBONE JS IN ACTION
@UshaGuduri
AGENDA
Web Apps Back Then
Web Apps Now
What the heck is the problem?!!
What is BackboneJS?
Lets get hands-on
Whats out the...
ONCE UPON A TIME...
RIGHT HERE, RIGHT NOW!
HOW DO WE ACHIEVE DYNAMISM?
“ The best thing about JavaScript is its
implementation of functions. ”
JQUERY
AJAX
$(function () {
// do stuff after DOM has loaded
});
$.ajax({
url: "/myurl",
beforeSend: function ( xhr ) {
xh...
WHAT THE HECK IS THE PROBLEM?!!!
Lets check Boston.com
“ Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events, collectio...
6.3KB
Packed and gzipped !!
BACKBONEJS CONSTRUCTS
Model (and Collection): Application (domain) data objects
that are retrieved from and persisted to t...
HOW TO MAP BACKBONE TO MVC
MODEL
extend, initialize(constructor), url/urlRoot, id/idAttribute/cid,
get, set, defaults, fetch, save/destroy, validate
...
COLLECTION
extend, initialize(constructor), url, model, models, add,
remove, get, reset
Supports 28 underscore methods ! (...
VIEW
extend, initialize(constructor), tagName, className, events,
remove, delegateEvents, undelegateEvents
var CallItemVie...
el, $el
ROUTER
extend, initialize(constructor), navigate, route
var CallRouter = Backbone.Router.extend({
routes: {
"help": "help"...
PUTTING IT ALL TOGETHER
Lets look at: Call Butler
src/
js/
init.js
callButlerApp.js
routers/
models/
callItem.js
callList....
Over 35 Javascript MVC framework libraries showcased at
Jster Catalog
FURTHER RESOURCES
AngularJS Videos at
Using Knockoutjs and JQuery to Create Richer MVC 4
Applications at 11:40am
Backbone....
Good Luck BackboneJS Padawan!
Backbone js in action
Upcoming SlideShare
Loading in …5
×

Backbone js in action

1,620 views
1,399 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,620
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Backbone js in action

  1. 1. BACKBONE JS IN ACTION @UshaGuduri
  2. 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. 3. ONCE UPON A TIME...
  4. 4. RIGHT HERE, RIGHT NOW!
  5. 5. HOW DO WE ACHIEVE DYNAMISM? “ The best thing about JavaScript is its implementation of functions. ”
  6. 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. 7. WHAT THE HECK IS THE PROBLEM?!!! Lets check Boston.com
  8. 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. 9. 6.3KB Packed and gzipped !!
  10. 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."
  11. 11. HOW TO MAP BACKBONE TO MVC
  12. 12. 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" });
  13. 13. 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();
  14. 14. 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" });
  15. 15. el, $el
  16. 16. 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}); });
  17. 17. 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
  18. 18. Over 35 Javascript MVC framework libraries showcased at Jster Catalog
  19. 19. 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!
  20. 20. Good Luck BackboneJS Padawan!

×