Intro to Backbone.js with Rails

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

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!
5. NO REALLY, WHY SHOULD I CARE? • Because you are a professional • You want to be employable in the future • You enjoy learning new things • ...
6. This is something that you can use to write better software
7. Why not Ember.js or Spine.js? (or the dozens of other ones)
8. I initially decided to learn Spine.js... ... and then I had a question.
9. Spine.js (Pic taken in May 2012)
10. Backbone.js (Pic taken in May 2012)
12. Why Rails instead of Node.js or Sinatra? https://speakerdeck.com/u/brennandunn/p/rails-without-views
13. What is Backbone.js Backbone.js gives structure to web applications by 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/
14. Comparing Paradigms Backbone.js • Models • Views & Routers • Templates • Collections Ruby on Rails • Models • Controllers • Views
15. Backbone.js Model • Manages data for an application • Not tied to markup, presentation, UI • Validates itself • Query methods (fetch, save)
16. Backbone.js Collection • Manages an ordered set of models • Fetches, add, removes models • Gives you Underscore.js goodness • Listens for model events
17. 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
18. Backbone.js Router • Controller that responds to URL's ◦ Hash Fragments (#page) ◦ Standard URL's (/page) • Generally sets up model w/ View
19. Backbone.js Template • HTML to be rendered • Template agnostic ◦ Eco ◦ Handlebars.js ◦ Mustache.js ◦ etc.
20. 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
21. rails g backbone:install
22. rails g backbone:scaffold task
23. Other Backbone Scaffolded Settings
24. Setup the Backbone routes
25. Tasks Collection
26. Rails Scaffolded Tasks
27. Where will this app appear?
28. Find a Spot
29. TasksIndex View
30. TasksIndex Template
31. TasksItem View Item Template
32. Fire up the rails server
33. Move require_tree to the bottom
34. Much Better
35. Wire-Up the Router
36. Refresh the Browser
37. Add some records to the database
38. Add Tasks Template Change
39. Add Tasks to TasksIndex View
40. @collection.create Started POST "/tasks" for 127.0.0.1 at 2012-05-20 17:16:17 -0500 Processing 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, 20 May 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 transaction Completed 201 Created in 19ms (Views: 2.7ms | ActiveRecord: 11.6ms)
41. Add New Task to Page
42. Delete a Task
43. TasksItem View
44. @model.destroy() Started DELETE "/tasks/5" for 127.0.0.1 at 2012-05-20 20:58:43 -0500 Processing 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 transaction Completed 204 No Content in 5ms (ActiveRecord: 3.3ms)
45. Adding a Footer
46. TasksIndex to Create the View
47. Footer View and Template
48. Done with the Example Now
49. Testing
50. 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
51. 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
52. Resources http://documentcloud.github.com/backbone/ https://github.com/meleyal/backbone-on-rails https://github.com/bradphelan/jasminerice https://github.com/netzpirat/guard-jasmine https://github.com/theironcook/Backbone.ModelBinder https://github.com/thedersen/backbone.validation https://github.com/PaulUithol/Backbone-relational https://speakerdeck.com/u/brennandunn/p/rails-without-views http://blog.carbonfive.com/2011/12/19/exploring-client-side-mvc-with- backbonejs http://addyosmani.github.com/backbone-fundamentals/ http://backbone-patterns.heroku.com/ https://speakerdeck.com/u/sarahmei/p/using-backbonejs-with-rails
53. Questions?
54. Thanks for listening! http://speakerrate.com/talks/11021-intro-to-backbone-js-with-rails