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.