Intro to Backbone.js with Rails

  • 27,550 views
Uploaded 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 …

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: https://github.com/timtyrrell/todo

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    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
    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
    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
    Your message goes here
No Downloads

Views

Total Views
27,550
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
248
Comments
4
Likes
31

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intro to Backbone.js with Rails by: Tim Tyrrell @timtyrrell
  • 2. Agenda● Why?● No really, why???● Intro to Backbone.js● Using Backbone.js with Rails● Testing● Other Libraries● Wrap up● Questions
  • 3. Why should I care about Backbone.js? Rails is awesome!
  • 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. This is something that you can useto write better software
  • 6. Why not Ember.js or Spine.js?(or the dozens of other ones)
  • 7. I initially decided to learn Spine.js...... and then I had a question.
  • 8. Spine.js(Pic taken in May 2012)
  • 9. Backbone.js(Pic taken in May 2012)
  • 10. Why Rails instead of Node.js orSinatra? https://speakerdeck.com/u/brennandunn/p/rails-without-views
  • 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.http://documentcloud.github.com/backbone/
  • 12. Comparing ParadigmsBackbone.js Ruby on Rails● Models ● Models● Views & Routers ● Controllers● Templates ● Views● Collections
  • 13. Backbone.js Model● Manages data for an application● Not tied to markup, presentation, UI● Validates itself● Query methods (fetch, save)
  • 14. Backbone.js Collection● Manages an ordered set of models● Fetches, add, removes models● Gives you Underscore.js goodness● Listens for model events
  • 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. Backbone.js Router● Controller that responds to URLs ○ Hash Fragments (#page) ○ Standard URLs (/page)● Generally sets up model w/ View
  • 17. Backbone.js Template● HTML to be rendered● Template agnostic ○ Eco ○ Handlebars.js ○ Mustache.js ○ etc.
  • 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. rails g backbone:install
  • 20. rails g backbone:scaffold task
  • 21. Other Backbone Scaffolded Settings
  • 22. Setup the Backbone routes
  • 23. Tasks Collection
  • 24. Rails Scaffolded Tasks
  • 25. Where will this app appear?
  • 26. Find a Spot
  • 27. TasksIndex View
  • 28. TasksIndex Template
  • 29. TasksItem ViewItem Template
  • 30. Fire up the rails server
  • 31. Move require_tree to the bottom
  • 32. Much Better
  • 33. Wire-Up the Router
  • 34. Refresh the Browser
  • 35. Add some records to the database
  • 36. Add Tasks Template Change
  • 37. Add Tasks to TasksIndex View
  • 38. @collection.createStarted POST "/tasks" for 127.0.0.1 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. Add New Task to Page
  • 40. Delete a Task
  • 41. TasksItem View
  • 42. @model.destroy()Started DELETE "/tasks/5" for 127.0.0.1 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. Adding a Footer
  • 44. TasksIndex to Create the View
  • 45. Footer View and Template
  • 46. Done with the Example Now
  • 47. Testing
  • 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. 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. Resourceshttp://documentcloud.github.com/backbone/https://github.com/meleyal/backbone-on-railshttps://github.com/bradphelan/jasminericehttps://github.com/netzpirat/guard-jasminehttps://github.com/theironcook/Backbone.ModelBinderhttps://github.com/thedersen/backbone.validationhttps://github.com/PaulUithol/Backbone-relationalhttps://speakerdeck.com/u/brennandunn/p/rails-without-viewshttp://blog.carbonfive.com/2011/12/19/exploring-client-side-mvc-with-backbonejshttp://addyosmani.github.com/backbone-fundamentals/http://backbone-patterns.heroku.com/https://speakerdeck.com/u/sarahmei/p/using-backbonejs-with-rails
  • 51. Questions?
  • 52. Thanks for listening!http://speakerrate.com/talks/11021-intro-to-backbone-js-with-rails