Skip to content
By Sebastian Porto

A better way to modularise your JS in Rails

When building a Rails application with considerable JavaScript you might get to a point where the loading order of your JavaScript files matters. Take for example the following code:

    APP.Car = App.Vehicle.extend(...

In this code we expect to find an object in the App.Vehicle namespace, so obviously the code that defines App.Vehicle has to be loaded beforehand. So we will need to be careful with the loading order of our JS files. Because of this you could end up with a JavaScript manifest file that has dozens of entries e.g.

//= require jquery
//= require underscore
//= require_tree app/views
//= require app/models/vehicle
//= require app/models/car
//= require_tree app/controllers
//= require_tree app/helpers
...

Note how we need to manually require vehicle.js before car.js to have the code work as expected.

Managing the loading order of your JavaScript files by hand like this is a terrible prospect, especially if you have hundreds of them, so instead of having something like the code above wouldn't it be much better to have something like this?

//= require jquery
//= require underscore
//= require_tree .

Just load the libraries plus everything in the 'assets/javascripts' tree. But that is not going to work as with our previous example (car will be loaded before vehicle).

Namespacing

Namespacing your objects in JS is a good idea, but simply doing this is not going to help at all with the loading order issue.

Angular

Angular has its own module system that makes this a non-issue. So if you are using Angular the load order of files won't matter.

Require JS

Require JS is great, but using it with the Rails asset pipeline is an unnecessary doubling up of efforts. Both Require.js and the asset pipeline solve the same issues:

  • Load all individual files in development
  • Provide a way of concatenating files in production

So if you are using the asset pipeline these two problems are already solved for you, Require JS just bring unnecessary complexity, so it is not a good fit.

Enter ModuleJS

We have been using a great library to deal with this problem called ModuleJS. It is a great fit for Rails because it allows us to declare modules and dependencies without adding the extra complexity that comes with Require.js.

ModuleJS doesn't do asynchronous loading of files like Require.js, it just expects you to load the files by some other means, which is just what we want as the assets pipeline takes care of that part.

For example:

In file app/assets/javascripts/models/vehicle.js

modulejs.define('models/vehicle', function () {

    var Vehicle = ... definition of vehicle model

    return Vehicle;
});

In file app/assets/javascripts/models/car.js

modulejs.define('models/car', ['models/vehicle'], function (Vehicle) {

    var Car = Vehicle.extend(...);

    return Car;
});

ModuleJS completely removes the need to worry about the loading order of JS files and it works a treat with the Rails assets pipeline so now our JavaScript manifest can look like this:

//= require jquery
//= require underscore
//= require_tree .

Try it out.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email