Intro to Backbone.js with Rails
40 likes23,025 views
The document provides an introduction to Backbone.js in the context of using it with Rails, emphasizing its importance for professional development and maintaining employability. It discusses the structure and functionalities Backbone.js offers, such as models, collections, views, and routers, and provides a step-by-step guide for setting up a Rails application integrated with Backbone.js. The document wraps up by highlighting the benefits of using a client-side MVC framework, including improved code organization and user experience.
![@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)](https://image.slidesharecdn.com/introtobackbone-jswithrails2-120525193632-phpapp02/85/Intro-to-Backbone-js-with-Rails-40-320.jpg)
![@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)](https://image.slidesharecdn.com/introtobackbone-jswithrails2-120525193632-phpapp02/85/Intro-to-Backbone-js-with-Rails-44-320.jpg)
Intro to Backbone.js with Rails
- 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
- 22. rails g backbone:scaffold task
- 23. Other Backbone Scaffolded Settings
- 24. Setup the Backbone routes
- 25. Tasks Collection
- 27. Where will this app appear?
- 28. Find a Spot
- 29. TasksIndex View
- 32. Fire up the rails server
- 33. Move require_tree to the bottom
- 34. Much Better
- 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
- 53. Questions?