Intro to Backbone.js with Rails

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 useto 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 orSinatra? https://speakerdeck.com/u/brennandunn/p/rails-without-views

What is Backbone.jsBackbone.js gives structure to web applicationsby 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 ParadigmsBackbone.js Ruby on Rails● Models ● Models● Views & Routers ● Controllers● Templates ● Views● Collections

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 URLs ○ Hash Fragments (#page) ○ Standard URLs (/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 ViewItem 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.createStarted 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, 20May 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-relationalhttps://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

http://willcode4beer.net	218
http://www.helpified.com	17
https://twitter.com	3
http://localhost	3
http://nodeslide.herokuapp.com	1
http://pinterest.com	1
http://feeds.feedburner.com	1

Intro to Backbone.js with Rails

by Tim Tyrrell

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 244

Statistics