intro to backbone.js with rails
DESCRIPTION
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/todoTRANSCRIPT
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