You’re just 2 steps away from implementing ‘Backbone’ in Rails 3

You’re just 2 steps away from implementing ‘Backbone’ in Rails 3

2 Minutes Read

backbone1-300x300-123

Before illustrating steps to implement ‘Backbone.js’, let me explain what ‘Backbone.js’ really is. It is a convenient way to organize client side ‘JavaScript’ code into MVC pattern of Rails server applications. Just like in Rails, It has ‘Models’ to represent data, ‘Views’ to render it and ‘Controllers’ to coordinate between the two. It also has an object called “collection” which manages a list of models. Backbone was also designed with Rails backend in mind, and is easier to connect to a server application using JSON in order to transfer data back and forth.

Why need to implement ‘Backone.js’ into Rails applications:

  • The major advantage of “Backbone.js” is that it’s simple, lightweight, and provides structure to organize large JavaScript projects.
  • “Backbone.js” helps to reduce the load of server for code that really doesn’t need to be executed server-side.
  • Flexible with regards to data persistence.
  • Easier 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”

Integration

Step#1

  • In rails 3.x

In Gemfile add below line

[sourcecode]gem ‘rails-backbone'[/sourcecode]

Run “bundle install”

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

[sourcecode]rails g backbone:install[/sourcecode]

This creates the following Directory structure under app/assets/javascripts/backbone.

[sourcecode]backbone/
routers/  (maps HTML routes to actions)
models/  (maintains state)
templates/ (presents clientside views)
views/ (presents model data in the DOM)[/sourcecode]

To setup initial requirements and name spacing, it also creates a coffee script file as app_name.js.coffee.

[sourcecode]app/assets/javascript/backbone/app_name.js.coffee[/sourcecode]

Step#2

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

Create a backbone model and collection inside app/assets/javascripts/backbone/models to be used to communicate with rails backend.

[sourcecode]rails g backbone:model model_name field_name:datatype[/sourcecode]

Create a backbone router with corresponding views and templates for the actions.

[sourcecode]rails g backbone:router[/sourcecode]

For Scaffolding

[sourcecode]rails g backbone:scaffold[/sourcecode]

Example

Create a new rails application called Demo

[sourcecode]rails new Demo[/sourcecode]

Edit, /Gemfile.rb

[sourcecode]gem ‘rails-backbone'[/sourcecode]

Install the gem and generate scaffolding by running following commands

[sourcecode]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[/sourcecode]

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

[sourcecode]<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>[/sourcecode]

Now start the server

[sourcecode]rails s[/sourcecode]

Then browse “localhost:3000/jobs” and now you will get a fully functioning single page crud app for Job model.

Benefits of implementing backbone on Rails application:

  • ‘Backbone’ speeds up loading of WebPages.
  • Backbone implementation is comparatively easier for the developers working on JavaScript applications.
  • It uses minimal set of data-structuring (Models and Collections) and user interface (Views and URLs).
  • It also facilitates in improving and maintaining the application structure.
Tags:
,
Jay
Jayadev Das
jayadev.das@andolasoft.com

Do what you do best in – that’s what I’ve always believed in and that’s what I preach. Over the past 25+ years (yup that’s my expertise ‘n’ experience in the Information Technology domain), I’ve been consulting to small, medium and large companies ‘bout Web Technologies, Mobile Future as well as on the good-and-bad of tech. Blogger, International Business Advisor, Web Technology Expert, Sales Guru, Startup Mentor, Insurance Sales Portal Expert & a Tennis Player. And top of all – a complete family man!

No Comments

Post A Comment

Exit pop up

Sad to see you leaving early...

From "Aha" to "Oh shit" we are sharing everything on our journey.
Enter your email address to stay up to date with the latest news.
Holler Box