Implementation of “Backbone.js” in Rails 3.X

Introduction

Build snappier, more interactive apps with cleaner code and better tests in less time.

Backbone.js is a great way to organize client Javascript code into MVC (model, view, controller) pattern that Rails server application uses. Just like in Rails, It use models to represent data, views to render the data, and controllers to coordinate between the two. It also has an object called a “collection” which manages a list of models. Backbone was also designed with a Rails backend in mind, and is easy to connect to a server application using JSON to transfer data back and forth.

Why to use ?

  • The major advantage of Backbone.js is that it’s simple, lightweight, and provides structure to organize large javascript projects.

  • Backbone.js helps take some of the load off server for code that really doesn’t need to be executed server-side.

  • Flexible with regards to data persistence.

  • Easy integration with RESTful interfaces.

  • 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, and connects it all to your existing API over a RESTful JSON interface.

Architecture of “Backbone.js”

 Image

Integration

Step#1

  • In rails 3.x

In Gemfile, add the below line

      gem ‘rails-backbone’

        Run “bundle install

    Then install Backbone.js in the app by running the following command

             rails g backbone:install

      Which creates the following Directory structure under app/assets/javascripts/backbone

backbone/

routers/ (maps HTML routes to actions)

models/ (maintains state)

templates/ (presents clientside views)

views/ (presents model data in the DOM)

     For setup initial requires and namespacing, it also creates a coffess script file as app_name.js.coffee

                       app/assets/javascript/backbone/app_name.js.coffee

Step#2

It also provides 3 simple generators which only create client side javascript code.

For Model (creates a backbone model and collection inside app/assets/javascripts/backbone/

models to be used to talk to rails backend)

rails g backbone:model model_name field_name:datatype

For Router (creates a backbone router with corresponding views and templates for the actions)

rails g backbone:router

For Scaffolding

rails g backbone:scaffold

Example

Create a new rails application called Demo

> rails new Demo

Edit, /Gemfile.rb

gem ‘rails-backbone’

Install the gem and generate scaffolding by running following commands

> bundle install

> rails g backbone:install

> rails g scaffold Job title:string description:string

> rake db:migrate

> rails g backbone:scaffold Job title:string description:string

Edit the jobs index view (app/views/jobs/index.html.erb)

<div id=”jobs”></div>

<script type=”text/javascript”>

$(function() {

// Demo is the app name

window.router = new Demo.Routers.JobsRouter({jobs: <%= @jobs.to_json.html_safe -%>});

Backbone.history.start();

});

</script>

Now start the server

> rails s

Browse to localhost:3000/jobs and now you will get a fully functioning single page crud app for Job model.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s