Integrating Backbone JS with Rails Application

It is an era of Single Page Applications. So there are multiple javascripts framework available that supports SPA. Two most popular frameworks are:
Backbone JS
Angular JS
In this section we will talk about easily integrating backbone js with a rails application. If you want to integrate backone js with your rails application in a rails familiar way, rails-backbone gem is best to use. Lets simply see how easy it is.

1) Add rails-backbone gem to your Gemfile.

	rails-backbone

2) Then run bundle.

	bundle

3) After this to create the backbone directory structure you need to run this command:

	rails g backbone:install

	#=>
    insert  app/assets/javascripts/application.js
    create  app/assets/javascripts/backbone/routers
    create  app/assets/javascripts/backbone/routers/.gitkeep
    create  app/assets/javascripts/backbone/models
    create  app/assets/javascripts/backbone/models/.gitkeep
    create  app/assets/javascripts/backbone/views
    create  app/assets/javascripts/backbone/views/.gitkeep
    create  app/assets/javascripts/backbone/templates
    create  app/assets/javascripts/backbone/templates/.gitkeep
    create  app/assets/javascripts/backbone/backbone_app.js.coffee

Thus we can see in the app/assets/javascripts/backbone folder that it has created the architecture of backbone. You will be thinking from now you need to write everything on your own for controllers, models and all. but you are wrong, this gem provides generator which are similar to rails generate to take the headache from you.

Models: Suppose you have a product model with price and name, then you can create a corresponding model in backbone like this:

	rails g backbone:model Product name:string price:integer

	# This will create a model file like this
	
	class BackboneApp.Models.Product extends Backbone.Model
  paramRoot: 'product'

	  defaults:
	    name: null
	    price: null

	class BackboneApp.Collections.ProductsCollection extends Backbone.Collection
	  model: BackboneApp.Models.Product
	  url: '/products'

Routers: There is generator available also for routers, suppose you want to create the routes for the product model you can do that like this:

	rails g backbone:router products index
	
	# It will create these files:
	create  app/assets/javascripts/backbone/routers/products_router.js.coffee
  create  app/assets/javascripts/backbone/views/products/index_view.js.coffee
  create  app/assets/javascripts/backbone/templates/products/index.jst.ejs

Scaffold: Just like rails scaffold if you want to generate models, views and routes in one hit, this gem also supports scaffold generators. You can create everything at one hit like this:

	rails g backbone:scaffold item quantity:integer price:integer
	# It will generate these files:
	  create  app/assets/javascripts/backbone/models/item.js.coffee
    create  app/assets/javascripts/backbone/routers/items_router.js.coffee
    create  app/assets/javascripts/backbone/views/items/index_view.js.coffee
    create  app/assets/javascripts/backbone/templates/items/index.jst.ejs
    create  app/assets/javascripts/backbone/views/items/show_view.js.coffee
    create  app/assets/javascripts/backbone/templates/items/show.jst.ejs
    create  app/assets/javascripts/backbone/views/items/new_view.js.coffee
    create  app/assets/javascripts/backbone/templates/items/new.jst.ejs
    create  app/assets/javascripts/backbone/views/items/edit_view.js.coffee
    create  app/assets/javascripts/backbone/templates/items/edit.jst.ejs
    create  app/assets/javascripts/backbone/views/items/item_view.js.coffee
    create  app/assets/javascripts/backbone/templates/items/item.jst.ejs

Thus you can see that its very easy here to create the setup for backbone in your rails app. For learning more about backbone you can go through the link: http://backbonejs.org/