backbonejs on rails
TRANSCRIPT
![Page 1: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/1.jpg)
Developing Backbone.js Applications with RailsBACKBONE.JS ON RAILS
Luis Alfredo Porras PaezRails Developer@lporras16
![Page 2: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/2.jpg)
Give your JS App some Backbone with Models,Views, Collections, and Events
“Get yor truth out of the DOM”- Jeremy Ashkenas
![Page 3: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/3.jpg)
SIMPLE SMALL LIBRARY
OPEN SOURCE
![Page 4: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/4.jpg)
LIGHTWEIGHT
- Easy to read in an hour or two
- Focused functionality
- No UI widgets
- Template agnostic
- Use the HTML & CSS you already know
![Page 5: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/5.jpg)
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
![Page 6: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/6.jpg)
MODEL
WHAT DO THEY DO?
- Store data
- Provide get/set accessors
- Fire events when modified
- Optionally make REST calls to a server for persistence
![Page 7: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/7.jpg)
Backbone.Model: Definition and get/set attributes
![Page 8: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/8.jpg)
Backbone.Model: Sync with API
![Page 9: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/9.jpg)
Backbone.Model: Default Values
![Page 10: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/10.jpg)
Backbone.Model: Built-in Events
![Page 11: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/11.jpg)
Backbone.Model: Extend Models
![Page 12: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/12.jpg)
Backbone.Model: Some Useful Methods
![Page 13: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/13.jpg)
Backbone.Model: Parse Response
![Page 14: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/14.jpg)
VIEW
WHAT DO THEY DO?
- Display data & UI controls
- Render data with a template
- React to model changes - Act on use input
![Page 15: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/15.jpg)
Backbone.View: Fixing the EL
![Page 16: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/16.jpg)
Backbone.View: Template Engines
...
![Page 17: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/17.jpg)
Backbone.View: View Events
![Page 18: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/18.jpg)
Backbone.View: View Events
If you are using JQuery:
![Page 19: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/19.jpg)
Backbone.View: Model Changes
![Page 20: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/20.jpg)
COLLECTION
WHAT DO THEY DO?
Fecth model DataAdd to existing setRemove from set
Your custom query codeProvide useful suite of underscore.js methods
![Page 21: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/21.jpg)
Backbone.Collection
![Page 22: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/22.jpg)
Backbone.Collection: Getting Data from Server
![Page 23: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/23.jpg)
Backbone.Collection: Events
![Page 24: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/24.jpg)
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
![Page 25: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/25.jpg)
Backbone.Collection
![Page 26: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/26.jpg)
ROUTERS
WHAT DO THEY DO?
- Map url fragments into methods
- Hash fragments (#page), PushState
(optional)
![Page 27: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/27.jpg)
Backbone.Router
![Page 28: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/28.jpg)
Backbone.Router: More route Matches
![Page 29: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/29.jpg)
Backbone.Router: PushState
![Page 30: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/30.jpg)
Backbone.Router: Defining Router
![Page 31: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/31.jpg)
rails-backbone
![Page 32: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/32.jpg)
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
![Page 33: Backbonejs on Rails](https://reader033.vdocuments.mx/reader033/viewer/2022052618/554bcd1fb4c9058f6c8b4842/html5/thumbnails/33.jpg)
RESOURCES
Homepage http://documentcloud.github.com/backbone/
Tutorials, blog posts and example sites
Projects and Companies using Backbone
Extensions, Plugins, Resources
Contributing to Backbone