Intro to Backbone.js with Rails by: Tim Tyrrell @timtyrrell 

Agenda ● Why? ● No really, why??? ● Intro to Backbone.js ● Using Backbone.js with Rails ● Testing ● Other Libraries ● Wrap up ● Questions 

Why should I care about Backbone.js? Rails is awesome! 

No content

NO REALLY, WHY SHOULD I CARE? ● Because you are a professional ● You want to be employable in the future ● You enjoy learning new things ● ... 

This is something that you can use to write better software 

Why not Ember.js or Spine.js? (or the dozens of other ones) 

I initially decided to learn Spine.js... ... and then I had a question. 

Spine.js (Pic taken in May 2012) 

Backbone.js (Pic taken in May 2012) 

No content

Why Rails instead of Node.js or Sinatra? https://speakerdeck.com/u/brennandunn/p/rails-without-views 

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/ 

Comparing Paradigms Backbone.js ● Models ● Views & Routers ● Templates ● Collections Ruby on Rails ● Models ● Controllers ● Views 

Backbone.js Model ● Manages data for an application ● Not tied to markup, presentation, UI ● Validates itself ● Query methods (fetch, save) 

Backbone.js Collection ● Manages an ordered set of models ● Fetches, add, removes models ● Gives you Underscore.js goodness ● Listens for model events 

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 

Backbone.js Router ● Controller that responds to URL's ○ Hash Fragments (#page) ○ Standard URL's (/page) ● Generally sets up model w/ View 

Backbone.js Template ● HTML to be rendered ● Template agnostic ○ Eco ○ Handlebars.js ○ Mustache.js ○ etc. 

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 

rails g backbone:install 

rails g backbone:scaffold task 

Other Backbone Scaffolded Settings 

Setup the Backbone routes 

Tasks Collection 

Rails Scaffolded Tasks 

Where will this app appear? 

Find a Spot 

TasksIndex View 

TasksIndex Template 

TasksItem View Item Template 

Fire up the rails server 

Move require_tree to the bottom 

Much Better 

Wire-Up the Router 

Refresh the Browser 

Add some records to the database 

Add Tasks Template Change 

Add Tasks to TasksIndex View 

@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) 

Add New Task to Page 

Delete a Task 

TasksItem View 

@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) 

Adding a Footer 

TasksIndex to Create the View 

Footer View and Template 

Done with the Example Now 

Testing 

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 

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 

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 

Questions? 

Thanks for listening! http://speakerrate.com/talks/11021-intro-to-backbone-js-with-rails