Using BackboneJS to improve your JavaScript code organization over a Ruby on Rails app

Introduction

Sometimes when we started a new Ruby on Rails project, sooner or later we have to add Javascript code, most Ruby developers aren’t confortable with Javascript, so they make some mistakes which waste project’s time.

This article should help them to organize its Javascript code using a BackboneJS approach in new or existing projects.

Approach advantages

• Easy scripting debugging and indentification.
• Good practices.
• Useful and easy implementation.
• Easy to test.

Preparing our app

We’re going to prepare our app to use my approach.

Remove Trubolinks

We must remove Turbolinks of our app because its cache system and reload effect don’t add much to our project and it also allow to developer to add JavaScript code in wrong places.

To remove it from a Ruby on Rails app, we must:

1. Remove turbolinks gem from our Gemfile.
2. Remove the line //= require turbolinks from our application.js
3. Remove data-turbolinks-track attributes from our application layout application.html.slim (if you’re using slim)

Organize our layout

We’re going to move the statement javascript_include_tag from the head to body bottom.

Add Backbone and its dependencies

There are different ways to get BackboneJS and its dependecies.

1. Downloading it from its webpage.
2. Using Bower manager.
3. Using NPM.

Once got BackboneJS and its dependencies, add them to our app.

1. Move the downloaded files to vendors/assets/javascript
2. Add them to application.js

Note: i prefer to use Lo-dash instead UnderscoreJS

Structure our code

We’re going to see how to organize our files and folders.

Folder structure

I use a simple folder structure. I add a folder called app or backbone in app/assets/javascripts and then:

• A folder to storage the controllers.
• Folders for storage the models and collections.
• A folder to storage the views.

I place the main files as routes.js and app.js in the root folder. I also add subfolder if I want to use modules.

Our base app

We’re going to define our aplication namespace in a file (app.js). It‘ll save the parts of our app such as models, views, collections and controllers.

Backbone Models

The BackboneJS models might be used for information storage, using an object oriented structure. You can use them with their pairs in the server side or like a pieces of “page” as BackboneJS use in its webpage.

Backbone Collections

The BackboneJS collections might be used to store a group of models.

Backbone Views

We’re going to use the BackboneJS views to organize our page behavior. You can chose between two ways to organize them.

1. As event controller
   As an example, we could have in different part of our app a modal to accept or decline something. We need to handle the server response when an User accept or decline. If it accept, the modal should disappear or display an error message otherwise.
2. As template render
   You can get an example of this in the BackboneJS website because it’s the most used.

Here, you can see the first example:

Controllers

We’re going to use an object to structure our code better. In those ones, we’re going to define functions which will be used in the routes.

Those functions could be used to instantiate views, make operations, make calls to server, fill models or collections and for another useful thing that I forget.

Backbone Routes

We’re going to use the BackboneJS routes to specify where our script should be ran. This feature is optional but highly recommended. We can use the BackboneJS views only, but the routes is better than an overload of conditionals and instantiated elements.

To define them we must use Backbone.Routes. Once defined we need to storage that in a variable.

We’re going to enable pushState option to avoid the Hash # usage in the URL.

Final thought

As seen above, we can use BackboneJS for organize the scripts of a Ruby on Rails app.

Thanks for read my article and IMHE (experience). I hope you can add some comments here, they’re important for me.