Introduction to Backbone.js


Published on

Published in: Technology, Education
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Backbone.js

  1. 1. Introduction toBackbone.jsPragnesh Vaghela | @technologythree |
  2. 2. Problem1. web application that involves a lot of JavaScript2. applications end up as tangled piles of jQueryselectors and callbacks3. hard to keep data in sync between the HTML UI,JavaScript logic & the database4. you can end up with a pile of spaghetti code - codethat is disorganized and difficult to follow@ 2013 Technology Three 2
  3. 3. What is Backbone.js?1. lightweight JavaScript library that adds structure toyour client-side code2. makes it easy to manage and decouple concerns inyour application3. MVC for the client4. open sourced by company called DocumentCloud5. light weight at under 4kb@ 2013 Technology Three 3
  4. 4. Backbone.js MVC1. your data as Models, which can be created, validated,destroyed, and saved to the server2. UI action causes an attribute of a model to change, themodel triggers a "change" event; all the Views that displaythe models state can be notified of the change, so that theyare able to respond accordingly, re-rendering themselveswith the new information3. when the model changes, the views simply updatethemselves4. Backbone.Router provides methods for routing client-sidepages, and connecting them to actions and events.@ 2013 Technology Three 4
  5. 5. Backbone.js dependencies1. only hard dependency is either Underscore.js ( >=1.4.3) or Lo-Dash2. either jQuery ( >= 1.7.0)or Zepto@ 2013 Technology Three 5
  6. 6. Does it replace jQuery?1. NO2. complementary in their scopes with almost nooverlaps in functionality3. Backbone handles all the higher level abstractions,while jQuery – or similar libraries – work with theDOM, normalize events and so on@ 2013 Technology Three 6
  7. 7. Where should I use Backbone.js?1. ideally suited for creating front end heavy, datadriven applications2. scales well, from embedded widgets to massiveapps3. think Gmail@ 2013 Technology Three 7
  8. 8. @ 2013 Technology Three 8Real worldBackbone.jsApplications
  9. 9. USA Todaytakes advantage of themodularity ofBackbonesdata/model lifecycle —which makes it simpleto create, inherit,isolate, and linkapplication objects —to keep the codebaseboth manageable andefficient. Website alsomakes heavy use ofthe Backbone Routerto control the page forboth pushState-capable and legacybrowsers@ 2013 Technology Three 9
  10. 10. LinkedIn Mobileto create its next-generation HTML5mobile web app.Backbone made iteasy to keep the appmodular, organizedand extensible sothat it was possibleto program thecomplexities ofLinkedIns userexperience@ 2013 Technology Three 10
  11. 11. Walmart Mobileto create the new version oftheir mobile web application@ 2013 Technology Three 11
  12. 12. Airbnbin many of itsproducts. It startedwith Airbnb MobileWeb (built in 6weeks by a team of3) and has sincegrown to WishLists, Match,Search,Communities,Payments, andInternal Tools@ 2013 Technology Three 12
  13. 13. Pandorato help manage theuser interface andinteractions. Forexample, theres amodel that representsthe "currently playingtrack", and multipleviews thatautomatically updatewhen the currenttrack changes. Thestation list is acollection, so thatwhen stations areadded or changed, theUI stays up to date@ 2013 Technology Three 13
  14. 14. Thank YouPragnesh Vaghela | @technologythree |