Introduction to Backbone.js
Download as PPTX, PDF2 likes5,230 views
1. Backbone.js is a lightweight JavaScript library that adds structure to client-side code and makes it easy to manage concerns in an application. 2. It uses an MVC pattern with models to manage data, views to manage the UI display, and routers to manage client-side pages and links events to actions. 3. Backbone.js dependencies include Underscore.js and either jQuery or Zepto, but it does not replace jQuery which handles DOM interactions and events.
Introduction to Backbone.js
- 1. Introduction to Backbone.js Pragnesh Vaghela | @technologythree | technologythree.com
- 2. Problem 1. web application that involves a lot of JavaScript 2. applications end up as tangled piles of jQuery selectors and callbacks 3. hard to keep data in sync between the HTML UI, JavaScript logic & the database 4. you can end up with a pile of spaghetti code - code that is disorganized and difficult to follow @ 2013 Technology Three 2
- 3. What is Backbone.js? 1. lightweight JavaScript library that adds structure to your client-side code 2. makes it easy to manage and decouple concerns in your application 3. MVC for the client 4. open sourced by company called DocumentCloud 5. light weight at under 4kb @ 2013 Technology Three 3
- 4. Backbone.js MVC 1. your data as Models, which can be created, validated, destroyed, and saved to the server 2. UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information 3. when the model changes, the views simply update themselves 4. Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. @ 2013 Technology Three 4
- 5. Backbone.js dependencies 1. only hard dependency is either Underscore.js ( >= 1.4.3) or Lo-Dash 2. either jQuery ( >= 1.7.0)or Zepto @ 2013 Technology Three 5
- 6. Does it replace jQuery? 1. NO 2. complementary in their scopes with almost no overlaps in functionality 3. Backbone handles all the higher level abstractions, while jQuery – or similar libraries – work with the DOM, normalize events and so on @ 2013 Technology Three 6
- 7. Where should I use Backbone.js? 1. ideally suited for creating front end heavy, data driven applications 2. scales well, from embedded widgets to massive apps 3. think Gmail @ 2013 Technology Three 7
- 8. @ 2013 Technology Three 8 Real world Backbone.js Applications
- 9. USA Today takes advantage of the modularity of Backbone's data/model lifecycle — which makes it simple to create, inherit, isolate, and link application objects — to keep the codebase both manageable and efficient. Website also makes heavy use of the Backbone Router to control the page for both pushState- capable and legacy browsers @ 2013 Technology Three 9
- 10. LinkedIn Mobile to create its next- generation HTML5 mobile web app. Backbone made it easy to keep the app modular, organized and extensible so that it was possible to program the complexities of LinkedIn's user experience @ 2013 Technology Three 10
- 11. Walmart Mobile to create the new version of their mobile web application @ 2013 Technology Three 11
- 12. Airbnb in many of its products. It started with Airbnb Mobile Web (built in 6 weeks by a team of 3) and has since grown to Wish Lists, Match, Search, Communities, Payments, and Internal Tools @ 2013 Technology Three 12
- 13. Pandora to help manage the user interface and interactions. For example, there's a model that represents the "currently playing track", and multiple views that automatically update when the current track changes. The station list is a collection, so that when stations are added or changed, the UI stays up to date @ 2013 Technology Three 13
- 14. Thank You Pragnesh Vaghela | @technologythree | technologythree.com