#323 Backbone on Rails Part 1 pro

Backbone and Rails is an awesome combination! Glad to see Backbone here on RailsCasts.

Another gem worth reviewing is backbone-rails. (https://github.com/codebrew/backbone-rails)

The scaffold generator of backbone-rails creates ready-to-run routers/models/collections/views/templates.

Is there any book/s about Rails + Backbone best practices?

since i have started using backbone, i've gravitated over to Sinatra.

The video is slightly cut-off at the end. Also the backbone-on-rails link in the show notes is pointing to another lib on github.

P.S. Great job as usual. Was meaning to play with backbone.

Awesome job! You have a knack for distilling a complex (or cumbersome) process into simple pieces.

Thanks for pointing out bind has changed. I just upgraded a site and ran into that... and for pointing out there's a third (context) item to pass into a backbone event - never knew that was there - although I'm still not sure what it does. Maybe explain that in part 2!

Thanks Ryan. I was wondering if you had any tips for using assets in the JST templates?

Hey Ryan,
it's about time! Thnx a lot for this.

I think a comparison off
Knockout, Spine and ember.js would be also very interesting!

There have a much simpler syntax then backbone.js I think AND,
coffee script (spine.js) is fully "supported".

The only thing I ask me all the time, which technology has a future, not all can coexists or for me at least, it doesn't make sense.

What's your opinion on this, have you already checked out other frameworks?

cheers

Thanks Ryan, Backbone and Rails is indeed an awesome combination.
I was wondering if you could provide the coffee script code in javascript code?

Great episode -

Why do you have to pass both params[:id] and params[:entry] to the update action in the entries controller?

Way cool Ryan.
How about doing at least a two part series on Twitter Bootstrap? Simple form 2.0 has built-in support for it. It is great for people like me who are programmers but are design challenged :)

Thanks heaps another marvelous cast

While following along I had trouble formatting the coffee script correctly in textmate any ideas?

Cheers
Dave

One thing i would REALLY like to know: With all these really nice client side mvc frameworks popping up, what the heck do we do about making our app's content searchable/crawlable? I really have not seen much insight into this problem.

Since most (all?) of the web crawlers don't use javascript, do we REALLY have to design separate pages for the spiders?

I get an exception thrown when I start dealing with the routers. I'm not going to ruin the forum by pasting my (exhaustively long) trace in here, but I am getting the following message: Error: Parse error on line 7: Unexpected 'TERMINATOR'. Can anyone point me in the right direction? This seems like a CoffeeScript thing that I'm just lost on. Thanks in advance!

I think it would be worth to mention ExtJS 4 / Sencha Touch 2. It is more comprehensive and powerful than Backbone. It uses similar approach - client side MVC but Sencha have also validators, a lot of widgets and the killer app - Sencha Designer 2, graphics IDE for fast building the whole application (see: http://vimeo.com/36420727) In all such solutions Rails can be narrowed to be just RESTfull server...

Woah, backbone.js is like a completely different framework from rails.

Following this tutorial felt like going through a Python tutorial, I don't understand anything. hahah :D

I need to look up how backbone.js work or what its purpose is because I don't know anything about it.

I really liked this railscast, but i'm wondering if can be the backbone/eco part easly separated from rails project and compiled to make an external client?

Just a suggestion to everyone here:

This tutorial is very much geared towards a particular way of using backbone on rails. (Understandable since this is a railscast)

I would suggest learning backbone yourself as a standalone html and js served out of public and communicating with your restful resources first, that way you can learn more about things like modularizing your app vs namespacing etc.

learn backbone, then backbone on rails.

Thanks Ryan for the episode.

If you will be covering KnockoutJS (which is currently my preference after evaluating most of the frameworks) then you may want to take a look at knockout-rails gem.

Simple screencast that demos validations part of it:
http://blog.approache.com/2011/12/knockoutjs-validations-video.html

(it went into Ruby5, so seems like people liked it).

Cheers.

i really can't see the benefits of using this kind of libraries inside rails. i mean, if i had to build something from scratch and have to structure the app, so maybe there something like backbone.js will be helpfull.

but i don't see the need of backbone.js inside rails since ror is already well structured and all the JS stuff can be fully served with jquery (or similar)...in fact, what i see here is backbone is complicating the "fun" of programming on rails.

...do im right? or i'm missing something? please, somebody help me to understand...

What about Knockback http://kmalakoff.github.com/knockback ? It is a hybrid of Backbone and Knockout, seems to take the best parts from both.

Can someone help me understand how to make this screencast work with monodb as my database while using mongoid. This is what I am seeing.

When I create a new entry via the console, similar to how Ryan did it in the video 'entry.create' , rails adds that entry just fine. Below are is my Ruby Log and my javascript headers log from Chrome Inspector.

Ruby Log

Started POST "/api/entries" for 127.0.0.1 at 2012-02-12 17:31:24 -0600
Processing by EntriesController#create as JSON
Parameters: {"name"=>"Heather", "entry"=>{"name"=>"Heather", "action"=>"create", "controller"=>"entries"}}
MONGODB w_market_development['system.namespaces'].find({})
MONGODB w_market_development['entries'].insert([{"_id"=>BSON::ObjectId('4f384bcc504b9348be000003'), "name"=>"Heather"}])
Completed 201 Created in 11ms (Views: 2.4ms)

Headers Log

Request URL:http://0.0.0.0:3000/api/entries
Request Method:POST
Status Code:201 Created
Request Headers (14)
Request Payload
{"name":"Heather"}

As you can see it posted fine. Now let me show you an update via the 'entry.save()' example Ryan showed us.

Ruby Log

Started POST "/api/entries" for 127.0.0.1 at 2012-02-12 17:34:25 -0600
Processing by EntriesController#create as JSON
Parameters: {"_id"=>"4f38152c504b9345dc000005", "name"=>"Bloip", "winner"=>true, "entry"=>{"_id"=>"4f38152c504b9345dc000005", "name"=>"Bloip", "winner"=>true, "action"=>"create", "controller"=>"entries"}}
MONGODB w_market_development['system.namespaces'].find({})
MONGODB w_market_development['entries'].insert([{"_id"=>BSON::ObjectId('4f38152c504b9345dc000005'), "name"=>"Bloip", "winner"=>true}])
Completed 201 Created in 12ms (Views: 2.7ms)

Headers Log

Request URL:http://0.0.0.0:3000/api/entries
Request Method:POST
Status Code:201 Created
Request Headers (14)
Request Payload
{"_id":"4f38152c504b9345dc000005","name":"Bloip","winner":true}

As you can see when I complete the 'entry.save()' on a current entry, which should be an update, the json is showing a POST instead of a PUT which mongoid is doing nothing with and the DB shows no changes. After googleing I found the following articles but nothing really helped.

link
link

I hope someone can help.

Thanks for covering this, Ryan. It's a bit of a divergence from the beaten path with Rails, but I think this is the future of web application development.

I've spent quite a bit of time coming up to speed with BB lately, including a 2 day training course with the Gaslight Software guys (I'm not affiliated with them: I highly recommend their course).

Initially I struggled with the fact that using BB (or any of the other similar libraries) means writing a lot more code. It's simply more complicated, especially when dealing with data persistence. Writing basic CRUD operations in plain Rails is pretty straight forward. Involving BB in CRUD is a lot of additional work.

My "ah-ha" moment came when I deployed my first BB/ Rails app to a development server. The performance was amazing. Making JSON requests via AJAX in the background (especially if you're caching) is so much more performant that doing page requests. And, pushing a lot of the application logic to the client is a big win in terms of server load.

I've come to the conclusion that BB is really amazing for client facing front end stuff where performance is a concern. It's less useful for backend admin stuff where simple Rails based page requests provide adequate performance.

What a great tutorial! This makes me want to use backbone to improve the responsiveness of my more complex pages. My biggest concern is how to test all this javascript. It leaves me feeling exposed to brokenness.

When I was going through the RailsCast as described above. I was using the entries controller that Ryan put together. After much searching, copying, pasting, and retrying I found that I need a completely new Controller set up. Below is what I originally had.

class EntriesController < ApplicationController
  respond_to :json

  def index
    respond_with Entry.all
  end

  def show
    respond_with Entry.find(params[:id])
  end

  def create
    respond_with Entry.create(params[:entry])
  end

  def update
    respond_with Entry.update(params[:id], params[:entry])
  end

  def destroy
    respond_with Entry.destroy(params[:id])
  end
end

This is the Controller code the fixed the issue for me.

class EntriesController < ApplicationController
def index
    render :json => Entry.all
  end

def show
  render :json => Entry.find(params[:id])
end

def create
  entry = Entry.create! params
  render :json => entry
end

def update
  entry = Entry.find(params[:id])
  entry.update_attributes!(params[:entry])
  render :json => entry
end

def destroy
  render :json => Entry.destroy(params[:id])
end
end

Thanks All!

Travis

why backbone submit with double params?

Parameters: {"name"=>"test", "entry"=>{"name"=>"test"}}

When I call entries.create my Rails app logs a GET request to /api/entries instead of a POST with params. Saving an updated entry works just fine.

I'm even getting this behavior running the railscast code from github.

Should I be using a different server than webrick?

I think there are a couple of .js.coffee files that have a .rb extension here.

nice tutorial!

but i can't initialize the router. i get an error telling me that "Bb.Routers.Entries is not a contructor". (my app is called Bb instead of Raffler.) i suspect this is related to load order, but get find a way to fix it.

file bb.js.coffee:

window.Bb =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  init: ->
        new Bb.Routers.Entries()     <--- this is the offending line
        Backbone.history.start()

$(document).ready ->
  Bb.init()

file entries_router.js.cofee:

class Bb.Routers.Entries extends Backbone.Router
        routes:
                '': 'index'
        
        index: ->
                alert 'homepage'

file application.js:

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require bb
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .

gem versions:
backbone-on-rails (0.9.1.0)
rails (3.2.1)
coffee-rails (3.2.2)

Hey Great screencast Ryan! I have a question, in the view, there is some syntax I don't understand. What is JST[]? Is that using the JST library? I'm trying to understand how backbone knows where and how to load the external template files. Any insight you could give on this would be VERY helpful.

Thanks!

Thanks for the great screencasts, Ryan! I found your explanations very helpful.

I am having a bit of a problem with a slightly more complicated variation of what you did for the Raffler application. I am trying to make a small "one-page" blog application, where posts can be commented. So far, I can fetch comments in a Collection, but I find it difficult to understand the strategy when to fetch, and how to update the posts index view when new comments were made.

I tried a first project template here: https://github.com/mulderp/backbone_testapp

Thanks for sharing some thoughts or feedback, if possible!
I would also be curious on thoughts how to do this TDD if possible...

I seem to be having issues, I am getting
Error: Parse error on line 2: Unexpected 'INDENT'
...raffler/app/assets/templates/entries/index.jst.eco)

I literally cut and paste the code in. Using rails 3.2.2, coffee-rails 3.2.2 I must say I am beginning to despair if it takes 4+ hours to get Hello World working with a railscast that is less than 30 days old

Raffler

<% for entry in @entries.models: %>
<%= entry.get('name') %>
<% end %>

I seem to be having issues, I am getting
Error: Parse error on line 2: Unexpected 'INDENT'
...raffler/app/assets/templates/entries/index.jst.eco)

I literally cut and paste the code in. Using rails 3.2.2, coffee-rails 3.2.2 I must say I am beginning to despair if it takes 4+ hours to get Hello World working with a railscast that is less than 30 days old

Raffler

<% for entry in @entries.models: %>
<%= entry.get('name') %>
<% end %>

Another odd thing, the generated application.js seemed to be escaping the '/' with '//' I had to manually fix that. HTH someone.

to get the value for each entry he used this:

<% for entry in @entries.models: %>
<%= entry.get('name') %>
<% end %>

that didn't work for me, I modified it to this one:

<% for entry in @entries.models: %>
<%= entry.get('entry').name %>
<% end %>

and it works,
Any Idea?, I want the sipler code rather than the code I came up

Thanks

I don't get the "home page" alert dialogue at 5:35. Note that I did get the "Hello from Backbone" alert at 3:45.

Any help will really be appreciated. I am running rails 3.1.2 in Ubuntu 10.04.

Also note that I had to include the gem "therubyracer" to get the server running at the start (I was facing the issue similar to https://github.com/rails/rails/issues/2963)

Below are the relevant parts of the code and the error trace I get in the console.

app/assets/javascripts/routers/entries.js.coffee

class Raffler.Routers.Entries extends Backbone.Router
  routes:
    '': 'index'

  index: ->
    alert "home page"

app/assets/javascripts/raffler.js.coffee

window.Raffler =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  init: ->
           new Raffler.Routers.Entries()
           Backbone.history.start()

$(document).ready ->
  Raffler.init()

The error trace I get in the console is:

In entries.js(5): Uncaught ReferenceError: Raffler is not defined

(function() {
  var __hasProp = Object.prototype.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

  Raffler.Collections.Entries = (function(_super) {
entries.js:5Uncaught ReferenceError: Raffler is not defined

    __extends(Entries, _super);

    function Entries() {
      Entries.__super__.constructor.apply(this, arguments);
    }

    Entries.prototype.model = Raffler.Models.Entry;

    return Entries;

  })(Backbone.Collection);

}).call(this);

In entry.js(5): Uncaught ReferenceError: Raffler is not defined

(function() {
  var __hasProp = Object.prototype.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

  Raffler.Models.Entry = (function(_super) {
entry.js:5Uncaught ReferenceError: Raffler is not defined

    __extends(Entry, _super);

    function Entry() {
      Entry.__super__.constructor.apply(this, arguments);
    }

    return Entry;

  })(Backbone.Model);

}).call(this);

In entries.js(23): Uncaught ReferenceError: Backbone is not defined

(function() {
  var __hasProp = Object.prototype.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

  Raffler.Routers.Entries = (function(_super) {

    __extends(Entries, _super);

    function Entries() {
      Entries.__super__.constructor.apply(this, arguments);
    }

    Entries.prototype.routes = {
      '': 'index'
    };

    Entries.prototype.index = function() {
      return alert("home page");
    };

    return Entries;

  })(Backbone.Router);
entries.js:23Uncaught ReferenceError: Backbone is not defined

}).call(this);

In index.js(17): Uncaught ReferenceError: Backbone is not defined

(function() {
  var __hasProp = Object.prototype.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

  Raffler.Views.EntriesIndex = (function(_super) {

    __extends(EntriesIndex, _super);

    function EntriesIndex() {
      EntriesIndex.__super__.constructor.apply(this, arguments);
    }

    EntriesIndex.prototype.template = JST['entries/index'];

    return EntriesIndex;

  })(Backbone.View);
index.js:17Uncaught ReferenceError: Backbone is not defined

}).call(this);

In raffler.js(9): Uncaught TypeError: Undefined is not a function

(function() {

  window.Raffler = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    init: function() {
      new Raffler.Routers.Entries();
raffler.js:9Uncaught TypeError: undefined is not a function
      return Backbone.history.start();
    }
  };

  $(document).ready(function() {
    return Raffler.init();
  });

}).call(this);