Getting Started With RequireJs

Before I begin to jot down the concepts of RequireJS, Let me just specify this post is for the folks who are having a hard time learning this framework. In today’s world of development whether its a web or a mobile application everything is Performance. Performance which has become a cornerstone for the development, a lot of developers faces the problem to optimize the performance of the applications. For all those RequireJS is the answer. So lets begin.

What is Require JS ?

As per the definition provided by the RequireJS folks,

RequireJs is Javascript file and module loader.

RequireJs as per the line specified above, is not only the solution to load files but also helps to maintain our code and add modularity to Javascript which is not a part of the Javascript Library.

CornerStones of RequireJS

When I started to learn this library, I really had a hard time to find the answers which allows me to understand the core concepts. I did Google a lot and at the end of it was able to list the main concepts that helps to understand and use the framework as such. All the features of the library revolves around these three concepts:

  • define()
  • require()
  • require.config()

We will see the use of all three in just a moment. I always believe that its better to showcase the concepts then writing a lot theory about it. It helps the readers to understand the concepts as well as allow them to grasp the concepts exceptionally well. I am going to take a very simple example which is going to explain the concept of the three main components listed above.

How To Structure The Project

As per the RequireJS folks, they expect you to have all the files inside a script folder located in your project structure. Donot dive to deep into it otherwise reference to your files will become a bit trouble some.

Screen Shot 2014-05-26 at 1.12.47 AM

As per the image above, I am keeping all the framework files in the framework folder. Note that I have removed the version numbers from the files keeping it simple. Best Practices says that you should not include the version number with the js files instead to keep a text file along with it to have a reference to it.

Lets understand the files that are there:

index.html : As the common convention, this file initiates our application.

main.js : This is main file which is required for the require js configuration and loading the start module for the application to load all the dependencies.

jquery-private.js: This file defines a module that returns a jquery object to be used in our application code.

jquery.js: Jquery Framework file.

require.jsRequireJS Framework file.

Adding RequireJS

Its very easy to add RequireJS to the code. You can add RequireJS as another javascript library but remember there are no other libraries that are added along with it to avoid conflicts on the main html page.


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

Lets understand the main part of this code fragment.

This code adds the RequireJS to our project along with a data-main attribute.

data-main: This attribute specifies the location of the main javascript file which consists of the configuration options along with the startup module.

Note that the data-main attribute doesnot require the .js extension along with the file. The extension is added automatically by RequireJS library.

Remember more or less we donot require to explicitly tell the RequireJS library for the JS extension. All the files with the extensions as JS are added automatically to the files, we will see that in a moment.

Main Javascript File

Lets lay down the configuration options and initialization module for the application. We will load the jQuery as the dependency in our application for some DOM manipulation.


require.config({
 baseUrl:"js/frameworks",
 paths:{
 "jquery-private":"../jquery-private"
 },
 shim:{
 'jquery':{
 exports: 'jquery'
 }
 }
 });

Require JS loads the configuration using require.config(). It consists of various options that I am not going to cover in this post. I will cover the basic options that are more or less required while defining the config for the application using RequireJS. So lets see the options one by one specified above.

baseUrl: the root path to use for all module lookups. We can opt not to define this option in the configuration.

In such a case the baseUrl is by default the page in which requireJs is loaded. If the data-main property has been used then the baseUrl is the path used in the data-main attribute.

paths: These are the mapping that are not found under baseUrl. Its not required in case you have all the paths in the same directory as the baseUrl. But its preferred to specify this option as it helps to define the alias for the libraries.

shim: It configures the dependencies, exports and custom initialization for the older/traditional brower globals that do not use define() to declare dependencies and set a module value.

 Defining the Module

The module in the requireJs is defined using the define() function. We need to just remember a thumb rule that define always returns something back to the script. These modules are the reusable code that we can use in the application to write the dependent scripts.

We can use define the following ways:

Simple Name/Value pairs


define({

name:"Codemaster",

snippet: "Gabriel"

});

As you can see that there are no dependencies in this case, So we can pass an object literal in such a case for the module. If you note that we are not returning any value in this case. Its an exception here where we are just defining the module using the object literal. This can be helpful if you are keeping a group of preferences in the application or using it to have some static data that is to be reused by the scripts.

Definition Functions


define(function()

{

//Some code work

var obj1 = {

name: "Codemaster"

snippet: "Gabriel"

}

return obj1;

});

Here as you can see we are defining a module with no dependencies and returning an object at the end of it. This is helpful when we have to write a code snippet which has no dependencies to the libraries and is self existing set of code.

Definition Functions with Dependencies


define(["dep1"],function(dep1){

var obj1 = dep1.function1();

return obj1;

});

You will be having this kind of a scenario in the majority of the applications. Here this module have a dependency on Module dep1. So we load the dependency and pass it as an argument of the function.

Please Note: The order of arguments should be same as that of the dependencies that are listed in [].

Now lets see a custom definition of the module in our code that we are referencing to make changes to the DOM element. Here we create a new module as jquery-private which consists of the custom code and it returns a function object.


define(['jquery'],function($){
var contentObj = {
'appendText': function(){
$("#testid").append("<br/>Content changed by jquery-private Js file");
}
};
return contentObj;
});

This will be saved in the jquery-private.js file for the reference. As you go back to the configuration options we can see that we have loaded this file in the path object for the configuration.

Calling require() to load modules

Now the last step is to call the require() function to initiate the process to load the module. Lets add this code to our main.js file to initialize the process to load modules.


require(['jquery-private'],function(jqPr){
jqPr.appendText();
});

require() function helps to load the modules that are defined within the application. We can load as many modules as we want as dependencies but the best part is we can choose which modules to load which alternatively reduces the payload in the application for script files.

There is one more thing that we need to remember while using requireJs. The main file for the application is loaded asynchronously. Also the load time for loading the main js file will be more than the modules that are to be loaded as it does not finish loading till application has finished loading the required modules.

So that’s it. You are ready to use the RequireJs in your application.

To refer to the example code you can visit the following link to download the source code files. Download Here

I hope that you enjoyed the post.