Developing Backbone.js Applications with RailsBACKBONE.JS ON RAILS

Luis Alfredo Porras PaezRails Developer@lporras16

Give your JS App some Backbone with Models,Views, Collections, and Events

“Get yor truth out of the DOM”- Jeremy Ashkenas

SIMPLE SMALL LIBRARY

OPEN SOURCE

LIGHTWEIGHT

- Easy to read in an hour or two

- Focused functionality

- No UI widgets

- Template agnostic

- Use the HTML & CSS you already know

Underscore.js

Backbone's only hard dependency. http://underscorejs.org

JSON2.js

Needed if you'd like to parse and serialize JSON in older browsers (read: "Internet Explorer") https://github.com/douglascrockford/JSON-js

jQuery

Recommended for DOM manipulation and Ajax. http://jquery.com

Zepto

Recommended as a jQuery alternative for mobile apps http://zeptojs.com

DEPENDENCIES

MODEL

WHAT DO THEY DO?

- Store data

- Provide get/set accessors

- Fire events when modified

- Optionally make REST calls to a server for persistence

Backbone.Model: Definition and get/set attributes

Backbone.Model: Sync with API

Backbone.Model: Default Values

Backbone.Model: Built-in Events

Backbone.Model: Extend Models

Backbone.Model: Some Useful Methods

Backbone.Model: Parse Response

VIEW

WHAT DO THEY DO?

- Display data & UI controls

- Render data with a template

- React to model changes - Act on use input

Backbone.View: Fixing the EL

Backbone.View: Template Engines

...

Backbone.View: View Events

Backbone.View: View Events

If you are using JQuery:

Backbone.View: Model Changes

COLLECTION

WHAT DO THEY DO?

Fecth model DataAdd to existing setRemove from set

Your custom query codeProvide useful suite of underscore.js methods

Backbone.Collection

Backbone.Collection: Getting Data from Server

Backbone.Collection: Events

Backbone.Collection

forEach (each)

map

reduce (foldl, inject)

reduceRight (foldr)

find (detect)

filter (select)

reject

every (all)

some (any)

include

invoke

max

min

sortBy

groupBy

sortedIndex

shuffle

toArray

size

first

initial

rest

last

without

indexOf

lastIndexOf

isEmpty

chain

Backbone.Collection

ROUTERS

WHAT DO THEY DO?

- Map url fragments into methods

- Hash fragments (#page), PushState

(optional)

Backbone.Router

Backbone.Router: More route Matches

Backbone.Router: PushState

Backbone.Router: Defining Router

rails-backbone

Working with Rails

Backbone.js was originally extracted from a Rails application; getting your client-side (Backbone) Models to sync correctly with your server-side (Rails) Models is painless, but there are still a few things to be aware of.

By default, Rails adds an extra layer of wrapping around the JSON representation of models. You can disable this wrapping by setting:

ActiveRecord::Base.include_root_in_json = false

RESOURCES

Homepage http://documentcloud.github.com/backbone/

Tutorials, blog posts and example sites

Projects and Companies using Backbone

Extensions, Plugins, Resources

Contributing to Backbone