How should you organize JavaScript in Rails app?

There’s no escaping JavaScript when it comes to building a Rails application. Whether we prefer it or not from a small script to a full-blown JavaScript framework websites, have become far more dependent on JavaScript. Back in the day, all you needed was a single stylesheet for a project. Today, Rails projects have an asset pipeline which helps us create different sets of stylesheets or manifests. You run through the stylesheets and tie it all to the javascript architecture. This asset pipeline has made it a lot easier to include JavaScript in Rails applications. The code included in your application is executed on all pages without any extra changes. Nevertheless, you can isolate certain JavaScript code to run only on specific pages by combining CSS class scopes and a jQuery plugin.

When it comes to assets, Rails is known to be opinionated. See you can go the manual route and by hand, include assets everywhere but it’s a lot better to bundle it all into a single file. This way, JavaScript is loaded once and lives cached on the client. Also, while using Turbolinks page load times are faster, as nothing more needs to be loaded and only the body is replaced.

We’ve all seen Rails projects which lack organization, modularity, and flexibility. Having to take over these projects are a headache. Turbolinks is meant to solve this issue. But, if you've not been introduced to Turbolinks and how it helps you organize your JavaScript, you’ve probably just removed it from your project. Here, we’ll give you an introduction to it.

The Problem

The core principle of Rails revolves around embracing conventions to simplify teamwork and reduce effort. However, when it comes to organizing JavaScript files, there is no widespread or accepted practice. Leaving specks of JavaScript throughout a Rails application can soon get clumsy if you’re not consistent. Ideally we would have certain techniques and guidelines to keep the Javascript organized in our projects, and moreover, we do not want to have to disable Turbolinks to make our application work as desired.

How should you organize JavaScript in Rails app

As Rails developers we are comfortable with convention over configuration. So let’s work out a mechanism which allows us to do everything mentioned below when organizing our Javascript code.

• Page specific code which gets executed only on a particular page
• The ability to create a CoffeeScript file and a CoffeeScript class which will get executed automatically when the page is loaded
• All we need to do is create a CoffeeScript class which follows our convention and executes without further configuration when we have a new page.

The Solution

The behavior of JavaScript can usually be traced back to the following two categories:

• The “always on” behavior
• And behavior triggered by a user action

Before you tackle these, you need to take care of certain things to help you stay organized.

• Class Scoping: This allows you more than just control access to the DOM through jQuery when you need to, but also provides you certain high-level styling classes to enable you to add page-specific CSS easily.
• Default Application Manifest: This step will ensure the javascript files in the folder are loaded in alphabetical order.
• “Always On” Javascript Functionality: Once you have the defaults out of the way, start by adding some behavior.
• User-Triggered Javascript: As the name suggests, this type of JavaScript is JavaScript invoked as a result of a user clicking or performing any action. You're used to probably adding a random file to the JavaScript directory and throwing in some jQuery for this step. While doing so will functionally work just fine, Structurally keeping these files similar will give you peace of mind going forward.

Hopefully, you gained some understanding of how to keep the Javascript in your Rails applications organized and predictable. One thing which is a bonus about this approach is there are no extra plugins used anywhere. It’s followed using all the tools existing in a basic Rails application, meaning one less thing to keep up to date and maintain.