#modular javascript

Installation and Setup

Add 'requirejs-rails' gem in the Gemfile of your project. It relieves you from some manual labour.

Get rid of everything from your application.js which is located under /assets/javascripts/application.js

Now locate your application layout under views/layouts/application.html.erb

Replace your

<%= javascript_include_tag :application %>

with

<%= requirejs_include_tag :application %>

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

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

  6. Avoid config.assets.precompile

Test if all of the steps above were successful

Open application.js

Paste the following code in it

require([], function(){ window.alert( Hello require.js ); });

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

define([], function() { //return an object to define the “ajaxLoader" module. var ajaxLoader = { addLoader: function() { // Method }, removeLoader: function() { // Method } } return ajaxLoader; });

You define a module by using ‘define’ and it usually takes 2 arguments 1st of which is an array of it’s 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 ajaxloader module depends on jQuery. jQuery needs to be passed as a reference. Like this

define([jQuery], function($) { //return an object to define the “ajaxLoader” module. var ajaxLoader = { addLoader: function(element) { // sample method // Perform operation on element passed // Like this console.log($(element)); }, removeLoader: function(element) { // Method // Perform operation on element passed // Like this console.log($(element)); } } return ajaxLoader; });

You must wonder, how does ‘define’ find dependancies? Well, we need to tell require.js about the location where it can find modules, dependencies.

Configure require.js

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

Syntax:

require.config({ paths: { jquery: [ ’//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery’, // your cdn ’vendor/jquery.min’ ] } });

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 dependancy (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 ajaxloader module. Follow the steps below

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

require([‘ajaxloader’], function(){ // This is will only load our ajaxloader module but no need to write anything though });

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:

require.js

application.js

jquery.min

ajaxloader.js (Loaded after jQuery because it depended on jQuery)

In closing, require.js helps you

Abstract your code without polluting the global namespace by using AMD pattern in your modules.

Manage Dependencies in a much more structured way.

Lazy load your modules.

Optimize your modules