This document provides an overview of using Backbone.js for developing JavaScript applications with Rails. It discusses the key components of Backbone - Models, Views, Collections, and Routers. Models store and retrieve data, provide accessors, and fire events. Views display data from templates and react to model changes. Collections manage collections of models and provide useful methods. Routers map URLs to methods. Backbone has few dependencies and is lightweight. It works well with Rails, though Rails adds wrapping to JSON that can be disabled.

1. Developing Backbone.js Applications with Rails
BACKBONE.JS ON RAILS
Luis Alfredo Porras Paez
Rails Developer
@lporras16

2. Give your JS App some Backbone with Models,
Views, Collections, and Events
“Get yor truth out of the DOM”
- Jeremy Ashkenas

3. SIMPLE SMALL LIBRARY
OPEN SOURCE

4. LIGHTWEIGHT
- Easy to read in an hour or two
- Focused functionality
- No UI widgets
- Template agnostic
- Use the HTML & CSS you already know

5. 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

6. MODEL
WHAT DO THEY DO?
- Store data
- Provide get/set accessors
- Fire events when modified
- Optionally make REST calls to
a server for persistence

7. Backbone.Model: Definition and get/set attributes

8. Backbone.Model: Sync with API

9. Backbone.Model: Default Values

10. Backbone.Model: Built-in Events

11. Backbone.Model: Extend Models

12. Backbone.Model: Some Useful Methods

13. Backbone.Model: Parse Response

14. VIEW
WHAT DO THEY DO?
- Display data & UI controls
- Render data with a template
- React to model changes
- Act on use input

15. Backbone.View: Fixing the EL

16. Backbone.View: Template Engines
...

17. Backbone.View: View Events

18. Backbone.View: View Events
If you are using JQuery:

19. Backbone.View: Model Changes

20. COLLECTION
WHAT DO THEY DO?
Fecth model Data
Add to existing set
Remove from set
Your custom query code
Provide useful suite of underscore.js methods

21. Backbone.Collection

22. Backbone.Collection: Getting Data from Server

23. Backbone.Collection: Events

24. 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

25. Backbone.Collection

26. ROUTERS
WHAT DO THEY DO?
- Map url fragments
into methods
- Hash fragments
(#page), PushState
(optional)

27. Backbone.Router

28. Backbone.Router: More route Matches

29. Backbone.Router: PushState

30. Backbone.Router: Defining Router

31. rails-backbone

32. 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

33. RESOURCES
Homepage http://documentcloud.github.com/backbone/
Tutorials, blog posts and example sites
Projects and Companies using Backbone
Extensions, Plugins, Resources
Contributing to Backbone