Backbonejs on Rails

1,428 views

Published on

Published in: Technology, Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,428
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Backbonejs on Rails

  1. 1. Developing Backbone.js Applications with Rails BACKBONE.JS ON RAILS Luis Alfredo Porras Paez Rails Developer @lporras16
  2. 2. Give your JS App some Backbone with Models, Views, Collections, and Events “Get yor truth out of the DOM” - Jeremy Ashkenas
  3. 3. SIMPLE SMALL LIBRARY OPEN SOURCE
  4. 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. 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. 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. 7. Backbone.Model: Definition and get/set attributes
  8. 8. Backbone.Model: Sync with API
  9. 9. Backbone.Model: Default Values
  10. 10. Backbone.Model: Built-in Events
  11. 11. Backbone.Model: Extend Models
  12. 12. Backbone.Model: Some Useful Methods
  13. 13. Backbone.Model: Parse Response
  14. 14. VIEW WHAT DO THEY DO? - Display data & UI controls - Render data with a template - React to model changes - Act on use input
  15. 15. Backbone.View: Fixing the EL
  16. 16. Backbone.View: Template Engines ...
  17. 17. Backbone.View: View Events
  18. 18. Backbone.View: View Events If you are using JQuery:
  19. 19. Backbone.View: Model Changes
  20. 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. 21. Backbone.Collection
  22. 22. Backbone.Collection: Getting Data from Server
  23. 23. Backbone.Collection: Events
  24. 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. 25. Backbone.Collection
  26. 26. ROUTERS WHAT DO THEY DO? - Map url fragments into methods - Hash fragments (#page), PushState (optional)
  27. 27. Backbone.Router
  28. 28. Backbone.Router: More route Matches
  29. 29. Backbone.Router: PushState
  30. 30. Backbone.Router: Defining Router
  31. 31. rails-backbone
  32. 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. 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

×