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

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 Ruby on Rails
● Models ● Models
● Views & Routers ● Controllers
● Templates ● Views
● Collections

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