A Quick Overview of Backbone

What is it?

● Minimal Javascript library for building Web apps

● Built on top of Underscore.js, a utility library by the same developer

What does it provide?

● Model● View● Router● Events● That’s it!

So, it’s MVC?

What doesn’t it provide?

● Automatic data binding (like Ember, Angular)

● Template rendering● Pretty much anything else

Models

● Sync (CRUD)○ model.fetch(), model.save(), model.destroy()○ override Backbone.sync() to implement custom

syncing functionality for all models● Collections

○ Contain models, models can contain collections○ Lots of useful operations

■ map, reduce, filter, sort, shuffle, etc

Views

“...are almost more convention than they are actual code”

- the source

Views

● Creates an element○ Give your view class some combo of properties tagName,

className, id○ Or pass in a pre-existing DOM element

● Delegates events○ ‘click a.someClass’: ‘goToLink’; calls this.goToLink()

● view.$○ jQuery/Zepto object in the context of the view’s DOM

element (i.e. this.$(‘a.someClass’).hide();)

Why Backbone?

● Small — <20k! (minified)○ Compared to Ember (64k) or Angular (81k)○ Great for mobile!

● No magic● Intuitive

Backbone & Node?

Sure, why not?

Backbone & Node?

● DIY○ Models: just override Backbone.sync()○ Views: render templates and serve them as HTML

instead of injecting into DOM?● AirBNB Rendr

○ Express Middleware○ Handles all that for you

Fin