Why do we have to require the JS files inside application.js in rails?

Question

I am new to rails so pardon the question. Now, why do we have to require the JS files inside the application.js file or the css files inside the application.css file? As far as I have read that when we launch the server rails loads all the javascript and css files from the directory into one file, so if it already loads all the files from the directory why there is a need to write inside the application.js or application.css file?

For example:

//= require abc
//= require xyz

If I already have abc.js and xyz.js file, why should I require them inside application.js file?

Answer 1

You are misunderstanding the concept. Let me explain the process. As you know, when you launch the server, rails first precompiles the files inside the assets folder with the help of sprockets-rails gem, but it does so by following the directives specified inside the manifest files i.e application.js and application.css.

Now inside the application.js you have "//= require_tree .", this tells sprockets to load all the files inside the javascript directory, process them, compress and combine them to produce one master Javascript file, this helps to reduce the page load time of the website. Now,here is your question, since "//= require_tree ." directive already takes all the javascript files present inside the javascript directory, why there is a need to specify the javascript files inside application.js? The answer is "Order".

"//= require_tree ." it loads, compress and combine all the JS files in an unspecified order or random order. Now, if you are a web developer or have started now, you might know or will come to know that many times you have to load JS files in some specific order, otherwise there may arise some conflict when we implement them, they might not work as we want them to.

One such famous combo is jquery and bootstrap. In order to use bootstrap JS part it needs jQuery, so you have to initialise jquery first and then bootstrap. Precisely for this reason in rails you require the files inside application.js specifying the order in which you want the sprockets to load,compress and combine into one master JS file. As sprockets processess the directives from top to bottom in the order specified in the application.js file, it becomes important to require the files in application.js file. If you have 2 javascript or css files which in no way connflict with each other then, there is no need for you to require the files inside application.js or application.css file and they will still work fine.

For example:

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .

Above, the sprockets-rails gem will first load jquery.js file then jquery_ujs.js file and then bootstrap.min.js file in that order. There is no need to add the extension as it assumes that all the files will be of type javascript only.

The above whole explanation also applies for the precompilation of css files specified inside application.css.

For more information, I advise you to visit http://guides.rubyonrails.org/asset_pipeline.html and read about rails asset pipeline.