Introduction to Backbone.js

Pragnesh Vaghela | @technologythree | technologythree.com

@ 2013 Technology Three 2

Problem1. web application that involves a lot of JavaScript2. applications end up as tangled piles of jQuery

selectors 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 - code

that is disorganized and difficult to follow

@ 2013 Technology Three 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 client4. open sourced by company called DocumentCloud5. light weight at under 4kb

@ 2013 Technology Three 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 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 6

Does it replace jQuery?

1. NO2. complementary in their scopes with almost no

overlaps in functionality3. Backbone handles all the higher level abstractions,

while jQuery – or similar libraries – work with the DOM, normalize events and so on

@ 2013 Technology Three 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 8

Real world Backbone.js Applications

@ 2013 Technology Three 9

USA Todaytakes 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 10

LinkedIn Mobileto 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 11

Walmart Mobile

to create the new version of their mobile web application

@ 2013 Technology Three 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 13

Pandorato 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

Thank You

Pragnesh Vaghela | @technologythree | technologythree.com