Understanding RequireJS for Effective JavaScript Module Loading

Modular programming is used to break large applications into smaller blocks of manageable code. Module based coding eases the effort for maintenance and increases reusability. However, managing dependencies between modules is a major concern developers face throughout the application development process. RequireJS is one of the most popular frameworks around for managing dependencies between modules. This tutorial examines the need for modularized code, and shows how RequireJS can help.

Loading JavaScript Files

Large applications often require a number of JavaScript files. Generally, they are loaded one by one using <script> tags. Additionally, each file can potentially be dependent on other files. The most common example would be jQuery plugins, which are all dependent upon the core jQuery library. Therefore, jQuery must be loaded before any of its plugins. Let’s look at a simple example of JavaScript file loading in real applications. Assume we have the following three JavaScript files.

purchase.js

function purchaseProduct(){
  console.log("Function : purchaseProduct");

  var credits = getCredits();
  if(credits > 0){
    reserveProduct();
    return true;
  }
  return false;
}

products.js

function reserveProduct(){
  console.log("Function : reserveProduct");

  return true;
}

credits.js

function getCredits(){
  console.log("Function : getCredits");

  var credits = "100";
  return credits;
}

In this example, we are trying to purchase a product. First, it checks whether enough credits are available to purchase the product. Then, upon credit validation, it reserves the product. Another script, main.js, initializes the code by calling purchaseProduct(), as shown below.

  var result = purchaseProduct();

What Can Go Wrong?

In this example, purchase.js depends upon both credits.js and products.js. Therefore, those files need to be loaded before calling purchaseProduct(). So, what would happen if we included our JavaScript files in the following order?

<script src="products.js"></script>
<script src="purchase.js"></script>
<script src="main.js"></script>
<script src="credits.js"></script>

Here, initialization is done before credits.js is loaded. This will result in the error shown below. And this example only requires three JavaScript files. In a much larger project, things can easily get out of control. That’s where RequireJS comes into the picture.

Plain JavaScript Example

Introduction to RequireJS

RequireJS is a well known JavaScript module and file loader which is supported in the latest versions of popular browsers. In RequireJS we separate code into modules which each handle a single responsibility. Additionally, dependencies need to be configured when loading files. Let’s get started by downloading RequireJS. Once downloaded, copy the file to your project folder. Let’s assume our project’s directory structure now resembles the following image.

Folder Structure

All the JavaScript files, including the RequireJS file, are located inside the scripts folder. The file main.js is used for initialization, and the other files contain application logic. Let’s see how the scripts are included inside the HTML file.

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

This is the only code required to include files using RequireJS. You might be wondering what happened to the other files and how they are included. The data-main attribute defines the initialization point of the application. In this case, it is main.js. RequireJS uses main.js to look for other scripts and dependencies. In this scenario all the files are located in same folder. Using logic, you can move the files to any folder you prefer. Now, let’s take a look at main.js.

require(["purchase"],function(purchase){
  purchase.purchaseProduct();
});

In RequireJS, all code is wrapped in require() or define() functions. The first parameter of these functions specifies dependencies. In the previous example, initialization is dependent on purchase.js, since it defines purchaseProduct(). Note that the file extension has been omitted. This is because RequireJS only considers .js files.

The second parameter to require() is an anonymous function which takes an object that is used to call the functions inside the dependent file. In this scenario, we have just one dependency. Multiple dependencies can be loaded using the following syntax.

require(["a","b","c"],function(a,b,c){
});

Creating Applications with RequireJS

In this section we are going to convert the plain JavaScript example discussed in the previous section into RequireJS. We already covered main.js, so let’s move on to the other files.

purchase.js

define(["credits","products"], function(credits,products) {

  console.log("Function : purchaseProduct");

  return {
    purchaseProduct: function() {

      var credit = credits.getCredits();
      if(credit > 0){
        products.reserveProduct();
        return true;
      }
      return false;
    }
  }
});

First, we declare that purchase functionality depends on credits and products. Inside the return statement, we can define the functions of each module. Here, we have called the getCredits() and reserveProduct() functions on the objects passed. product.js and credits.js are similar, and are shown below.

products.js

define(function(products) {
  return {
    reserveProduct: function() {
      console.log("Function : reserveProduct");

      return true;
    }
  }
});

credits.js

define(function() {
  console.log("Function : getCredits");

  return {
    getCredits: function() {
      var credits = "100";
      return credits;
    }
  }
});

Both of these files are configured as independent modules – meaning they are not dependent on anything. The important thing to notice is the use of define() instead of require(). Choosing between require() or define() depends on the structure of your code, and will be discussed in the following section.

Using require() vs. define()

Earlier I mentioned that we can use both require() and define() to load dependencies. Understanding the difference between those two functions is essential to managing dependencies. The require() function is used to run immediate functionalities, while define() is used to define modules for use in multiple locations. In our example we need to run the purchaseProduct() function immediately. So, require() was used inside main.js. However, the other files are reusable modules and therefore use define().

Why RequireJS is Important

In the plain JavaScript example, an error was generated due to the incorrect order of file loading. Now, delete the credits.js file in the RequireJS example and see how it works. The following image shows the output of the browser inspection tool.

RequireJS Example

The difference here is that no code has been executed in the RequireJS example. We can confirm it since nothing is printed on the console. In the plain JavaScript example we had some output printed on the console before generating the error. RequireJS waits until all the dependent modules are loaded before executing the functionality. If any modules are missing, it doesn’t execute any code. This helps us maintain the consistency of our data.

Managing the Order of Dependent Files

RequireJS uses Asynchronous Module Loading (AMD) for loading files. Each dependent module will start loading through asynchronous requests in the given order. Even though the file order is considered, we cannot guarantee that the first file is loaded before the second file due to the asynchronous nature. So, RequireJS allows us to use the shim config to define the sequence of files which need to be loaded in correct order. Let’s see how we can create configuration options in RequireJS.

requirejs.config({
  shim: {
    'source1': ['dependency1','dependency2'],
    'source2': ['source1']
  }
});

RequireJS allows us to provide configuration options using the config() function. It accepts a parameter called shim which we can use to define the mandatory sequences of dependencies. You can find the complete configuration guide in the RequireJS API documentation.

define(["dependency1","dependency2","source1","source2"], function() {

);

Under normal circumstances these four files will start loading in the given order. Here, source2 depends on source1. So, once source1 has finished loading, source2 will think that all the dependencies are loaded. However, dependency1 and dependency2 may still be loading. Using the shim config, it is mandatory to load the dependencies before source1. Hence, errors will not be generated.

Conclusion

I hope this tutorial helps you get started with RequireJS. Although it seems simple, it is really powerful in managing dependencies in large scale JavaScript applications. This tutorial alone is not enough to cover all the aspects of RequireJs, so I hope you learn all the advanced configurations and techniques using the official website.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Simply JavaScript.

Comments on this article are closed. Have a question about JavaScript? Why not ask it on our forums?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • David

    We use this extensively at work. Your description is spot on and well said.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello David

      I am glad that you liked my tutorial. As a person with experience on requirejs,you might have lots of things to share with our readers. Is there any tips you can provide for begginers,which I have missed in tutorial?

      Thank you

  • John Chacko

    why can’t external js included in right order? whats stopping from doing that.

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello John

      Thank you for the comment.

      I am not clear about your question.

      Can you please explain further reffering to the speific code from tutorial,so that I can explain properly.

  • Luiz Estevam

    Very good! RequireJS is essential!

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello Luiz

      Thank you very much for liking my article. It is essential :)

  • Mario Gonzalez

    I hate how you have to stuff your dependencies in an array, then repeat the order as arguments immodestly after.

    It’s very error prone once you need to import 5-6 things.

    I wish there was just a simple import directive to declare dependencies. Why must I violate DRY in every file

    • http://www.innovativephp.com Rakhitha Nimesh

      Hello Mario

      Thanks for the comment and I get what you are saying.

      You can define the dependencies inside the config statement upfront to avoid repeating.

      Also please let us know if you have a better solution so that all our readers can use it when working with requirejs.

    • Juho Vepsäläinen

      You can do simply something like


      define(function(require)

      and then load imports with


      var dep = require('dep');

      See http://requirejs.org/docs/whyamd.html for more details.

      • http://www.innovativephp.com Rakhitha Nimesh

        Hello Juho

        Thank you very much for your suggestions and possible solutions.

        This article was intended for the beginners of requirejs. So I didn’t include advance techniques. May be we should do a article on advanced techniques covering all the points mentioned in the comments ar

  • moimikey

    typo:
    require(["a","b","c"],function(a.b.c){ [...][/code]

  • http://www.innovativephp.com Rakhitha Nimesh

    Hello Moimikey

    Thanks for pointing that out. I’ll try to get it fixed as soon as I can.

  • Stefaan Somers

    Hi Rakhita,

    do you happen to have the source-code in a ZIP-file. I don’t see anywhere in the renewed code, where you assign the value

    var result = purchaseProduct();

  • http://www.empreendecast.com.br Hugo Magalhães

    Hello Rakhita! I am publisher of a brazilian technology blog. Do you allow me to translate and publish your article in portuguese, giving you all credits and putting a link to the original source at the end? Congratulations and best regards!