Require.js with Rails

If you know what require.js does and Ruby on Rails is your thing, then you have come to the right place. If not, I encourage you to read up on following topics:

1. Modular approach to writing JavaScript
2. AMD and JavaScript
3. Dependency management, Module Loading, and Lazy Loading

Installation and Setup

1. Add ‘requirejs-rails’ gem in the Gemfile of your project. It relieves you from some manual labour.
2. Get rid of everything from your application.js which is located under /assets/javascripts/application.js
3. Now locate your application layout under views/layouts/application.html.erb
4. Replace yourwith
5. Do ‘Bundle Install’ and Restart rails server. When your server is back up and running, view page source and you should see following in your HEAD

6. <script data-main="application" src="/assets/require.js"></script>

6. Avoid config.assets.precompile
Test if all of the steps above were successful

1. Open application.js
2. Paste the following code in it

If everything went well thus far, you should see an alert and if you are using Google Chrome, you should also see that in ‘Developer Tools’, under ’Network’, require.js and then application.js loaded.

Start writing your modules

Let’s say you need an Ajax loader for your Ajax requests and you wish to write a separate module for it. Great idea. Now, let me tell you how you can write a module that can be loaded with require.js. In other words, this module that we are about to write will comply to AMD (Asynchronous module definition)

Basic module syntax:

ajaxloader.js
You define a module by using ‘define’ and it usually takes 2 arguments 1st of which is an array of its dependencies and 2nd is an anonymous function. You can either return a value, another function or an object literal as above.

Basic module with dependencies:

Let’s say our ajax loader module depends on jQuery. jQuery needs to be passed as a reference. Like this
You must wonder, how does ‘define’ find dependencies? Well, we need to tell require.js about the location where it can find modules, dependencies.
Configure require.js

1. Open your application.js and let’s add jQuery as your dependency.

Syntax:

There’s a lot of configuration options available at http://requirejs.org/docs/api.html#config however, for now, we shall focus on setting jQuery as a dependency (jQuery is AMD compatible unlike Backbone, underscore, and many other popular libraries, however, SHIM config can help you our in that regard http://requirejs.org/docs/api.html#config-shim).

Explanation:

Now it’s time to tell require.js about our ajax loader module. Follow the steps below

1. Add the following code in application.js right below require.config chunk of code

Now, let’s take a look at our module. our first string parameter in a dependency array is ‘jQuery’ and according to our require.config jquery if CDN fails will be pulled from a ‘vendor’ directory.
Order on which require.js pulls files and sticks them in the head:

1. require.js
2. application.js
3. jquery.min
4. ajaxloader.js (Loaded after jQuery because it depended on jQuery)

In closing, require.js helps you

1. Abstract your code without polluting the global namespace by using AMD pattern in your modules.
2. Manage Dependencies in a much more structured way.
3. Lazy load your modules.
4. Optimize your modules

For more information visit http://requirejs.org/