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

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 name: @$('#add-task').val() @collection.create name: @$('#add-task').val() @collection.create name: @$('#add-task').val() @collection.create name: @$('#add-task').val() @collection.create name: @$('#add-task').val() @collection.create

Started 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, 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 transactionCompleted 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 -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)

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

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-relational https://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

Questions?

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