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

backbone1 300x300 123
Social sharing

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

gem 'rails-backbone'

Run “bundle install”

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

rails g backbone:install

This 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)

To setup initial requirements and name spacing, it also creates a coffee 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

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

rails g backbone:model model_name field_name:datatype

Create 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

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.

Your recently viewed posts:

    Contact Us

    We’d love to help & work with you




    When do you want to start ?


    Enter your email address to stay up to date with the latest news.
    Holler Box

    Orange Exit pop up

    Subscribe for the latest
    trends in web and
    mobile app development
    Holler Box

    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