Intro to Backbone.js with Rails


Published on

Ruby on Rails is awesome…why should you care about Backbone.js? Tim will give an overview of why Rails developers should care about Javascript MVC frameworks and how you can easily integrate one into a Rails application. He’ll also will explain the structure of a Backbone.js application and how the paradigm jives with its Rails counterparts. You should be able to walk away from this presentation and add Backbone.js to your resume.

Code here:

Published in: Technology, Education
  • Ah, great catch! I just updated the project and pushed the changes to github, thank you for your help.
    Are you sure you want to  Yes  No
    Your message goes here
  • After digging around with the slide tutorial I found that it doesn't appear to work with backbone 1.0 because fetch() doesn't implicitly call reset anymore. to fix it, in the TasksRouter the line should read tasks.fetch(reset: true)
    Are you sure you want to  Yes  No
    Your message goes here
  • Can you link me to your source if it is different than my repo? I just cloned my 'todo' repo, bundled, did a rake db:migrate, hit localhost:3000/items and I am able to add items, delete, etc.
    Are you sure you want to  Yes  No
    Your message goes here
  • Went through the tutorial, was never able to have tasks display despite no errors in the javascript console and the page erb's rendering correctly. Tried to download github source, only got a 'Todo' with a link that doesn't do anything ... wtf?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intro to Backbone.js with Rails

  1. 1. Intro to Backbone.js with Rails by: Tim Tyrrell @timtyrrell
  2. 2. Agenda● Why?● No really, why???● Intro to Backbone.js● Using Backbone.js with Rails● Testing● Other Libraries● Wrap up● Questions
  3. 3. Why should I care about Backbone.js? Rails is awesome!
  4. 4. NO REALLY, WHY SHOULD I CARE?● Because you are a professional● You want to be employable in the future● You enjoy learning new things● ...
  5. 5. This is something that you can useto write better software
  6. 6. Why not Ember.js or Spine.js?(or the dozens of other ones)
  7. 7. I initially decided to learn Spine.js...... and then I had a question.
  8. 8. Spine.js(Pic taken in May 2012)
  9. 9. Backbone.js(Pic taken in May 2012)
  10. 10. Why Rails instead of Node.js orSinatra?
  11. 11. What is Backbone.jsBackbone.js gives structure to web applicationsby providing:● models with key-value binding and custom events● collections with a rich API of enumerable functions● views with declarative event handling● connects it all to your existing API over a RESTful JSON interface.
  12. 12. Comparing ParadigmsBackbone.js Ruby on Rails● Models ● Models● Views & Routers ● Controllers● Templates ● Views● Collections
  13. 13. Backbone.js Model● Manages data for an application● Not tied to markup, presentation, UI● Validates itself● Query methods (fetch, save)
  14. 14. Backbone.js Collection● Manages an ordered set of models● Fetches, add, removes models● Gives you Underscore.js goodness● Listens for model events
  15. 15. Backbone.js View● Controller that responds to DOM events● Displays data from a model w/template● Reacts to model changes● Reacts to DOM events● Handle presentation logic for a part of the UI
  16. 16. Backbone.js Router● Controller that responds to URLs ○ Hash Fragments (#page) ○ Standard URLs (/page)● Generally sets up model w/ View
  17. 17. Backbone.js Template● HTML to be rendered● Template agnostic ○ Eco ○ Handlebars.js ○ Mustache.js ○ etc.
  18. 18. Getting started with Rails● rails new todo_list -T● cd todo_list● echo "gem backbone-on-rails" >> Gemfile● bundle● rails g scaffold task name:string complete: boolean● rake db:migrate● rm -f app/views/tasks/*● touch app/views/tasks/index.html.erb
  19. 19. rails g backbone:install
  20. 20. rails g backbone:scaffold task
  21. 21. Other Backbone Scaffolded Settings
  22. 22. Setup the Backbone routes
  23. 23. Tasks Collection
  24. 24. Rails Scaffolded Tasks
  25. 25. Where will this app appear?
  26. 26. Find a Spot
  27. 27. TasksIndex View
  28. 28. TasksIndex Template
  29. 29. TasksItem ViewItem Template
  30. 30. Fire up the rails server
  31. 31. Move require_tree to the bottom
  32. 32. Much Better
  33. 33. Wire-Up the Router
  34. 34. Refresh the Browser
  35. 35. Add some records to the database
  36. 36. Add Tasks Template Change
  37. 37. Add Tasks to TasksIndex View
  38. 38. @collection.createStarted POST "/tasks" for at 2012-05-20 17:16:17 -0500Processing by TasksController#create as JSON Parameters: {"name"=>"Walk the dog", "task"=>{"name"=>"Walk the dog"}} (0.1ms) begin transaction SQL (9.7ms) INSERT INTO "tasks" ("complete", "created_at", "name","updated_at") VALUES (?, ?, ?, ?) [["complete", nil], ["created_at", Sun, 20May 2012 22:16:17 UTC +00:00], ["name", "Walk the dog"], ["updated_at", Sun,20 May 2012 22:16:17 UTC +00:00]] (1.8ms) commit transactionCompleted 201 Created in 19ms (Views: 2.7ms | ActiveRecord: 11.6ms)
  39. 39. Add New Task to Page
  40. 40. Delete a Task
  41. 41. TasksItem View
  42. 42. @model.destroy()Started DELETE "/tasks/5" for at 2012-05-20 20:58:43 -0500Processing by TasksController#destroy as JSON Parameters: {"id"=>"5"} Task Load (0.2ms) SELECT "tasks".* FROM "tasks" WHERE "tasks"."id" = ?LIMIT 1 [["id", "5"]] (0.1ms) begin transaction SQL (0.2ms) DELETE FROM "tasks" WHERE "tasks"."id" = ? [["id", 5]] (2.9ms) commit transactionCompleted 204 No Content in 5ms (ActiveRecord: 3.3ms)
  43. 43. Adding a Footer
  44. 44. TasksIndex to Create the View
  45. 45. Footer View and Template
  46. 46. Done with the Example Now
  47. 47. Testing
  48. 48. Other Libraries● ModelBinder ○ HTML Binding ○ Recursive Binding ○ Calculated Fields● Backbone-relational ○ one-to-one ○ one-to-many ○ many-to-one● Backbone-validation ○ Validate model properties ○ Notify users of erros
  49. 49. Wrap Up● A Javascript client-side MV* framework can help you write better code. ○ It forces you separate the presentation logic away from the business logic ○ It helps to make you javascript more testable ○ It allows for more responsive user experience ○ It is a tool that you will want to add to your toolbox ○ These same concepts apply to other JS frameworks ○ It is fun
  50. 50. Resources
  51. 51. Questions?
  52. 52. Thanks for listening!