• Save
Backbone js in action
Upcoming SlideShare
Loading in...5
×
 

Backbone js in action

on

  • 1,350 views

Presented at the Boston Code Camp 19.

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

Statistics

Views

Total Views
1,350
Views on SlideShare
1,350
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Backbone js in action Backbone js in action Presentation Transcript

  • 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 there
  • 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 ) { xhr.overrideMimeType("text/plain;"); }, success: function(response) { // I AM INVINCIBLE! }, error: function(response) { // What, I FAILED ? :O } })
  • 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, 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. ”
  • 6.3KB Packed and gzipped !!
  • 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."
  • HOW TO MAP BACKBONE TO MVC
  • 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" });
  • 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();
  • 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" });
  • el, $el
  • 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}); });
  • 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
  • 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.JS Backbone.JS Source Code Call Butler Source Code Backbone Tutorials egghead.io Bocoup Training at $1,149!
  • Good Luck BackboneJS Padawan!