:::: MENU ::::

A Kick Start With Require.js

A Kick Start With Require.js

A Kick Start With Require.js Demo


Some people really don’t wanna mingle with too many javascript libraries, but in reality they sometimes found themselves into that trouble. The main irritating point comes when linking Javascript files runs into the dependency issues. The issue in sort of a particular JavaScript source file might have a dependency on another JavaScript source file that is not loaded yet, resulting the application gets into a deadly hault.

Miraculously we are gifted with an amazing library for dealing with interlinked JavaScript dependencies and module loading which is called : RequireJs

The Problem

Here the question might come what problem RequireJs is wiping out. In a large project, there might be tons of Javascript/Template resources needed. Managing resources might be the nightmare if its not modularized. Lets take a simple scenario, which is like a Jquery plugin needs the Jquery library beforehand. But if we try to be naughty with the arrangements of script tags, what happens you can see that below.

A Kick Start With Require.js

The plugin screams out saying it doesn’t know who the hell is Jquery. This might happen for other dependent calls also like some random function call might say he has peeked every corner but sadly couldn’t able to get the function definition.

A Charming Solution

We already stated the issue that RequireJs is going to flush out. It also gives us some bonus yet very powerful feature like asynchronous module loading and single startup point. it works upon few configuration patterns. Such as:

  • Define a module
  • Require a module
  • The modules dependencies (via a RequireJs config called shim)
  • The module paths

Its an Asynchronous Module Definition(AMD) which helps loading application’s module and its dependencies asynchronously. In RequireJS we separate code into modules and then we can branch out responsibilities. Now we need to get the latest RequireJs library for the development. I actually don’t like manual downloads, I prefer package manager Bower.js to get all the dependencies. We will get to know that in subsequent tutorials.

Lets Get Started

Today we will make a “Skill-Test” application with RequireJs. First we will download RequireJS. Once downloaded, we will copy the file to our project folder. Let’s assume our project’s directory structure is something like this:

A Kick Start With Require.js

We will be separating all the concerns into separate Javascript files. All of them including the RequireJS file, are located inside the scripts folder. The file main.js is used for initialization and the configuration while other files contain application’s logic. Let’s see how the scripts are included inside the HTML file.

This is the only script that would be required for initializing our application. The trick is, in RequireJS, 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. Now, let’s take a look at main.js.

For our development we need to configure our RequireJs. The config method takes an Object parameter where we can specify the dependencies. We can specify the path to all the dependencies and create namespaces for each of them. In path object, on the left side we have defined the namespace and in the right hand we have specified the path. All the dependencies are in the same folder where main.js is lying, so we just need to specify the file name only. Notice that we haven’t used .js extension anywhere because RequireJs only supports Javascript file and yells out if you dare to specify explicitly.

The shim property takes care of dependencies internally. This is useful when we use plugin who depends on any particular library. In our case we are using bootstrap.min.js and bootbox.min.js who depends upon Jquery. bootbox depends on bootstrap too, that’s why we have added the dependent at the left hand and specified all the dependencies that it needs at its right.

To load any module we require() it in RequireJs. The function gives the feature of immediate access to the required modules. RequireJs can do stuffs inside require() and at the end of it everything got flushed out.

Here we will require() two modules named skillstack and skillchange which has to be two separate Javascript files on the same scripts folder. In require() the second parameter it needs is a callback method where we can pass the dependencies. Here the dependencies are skillstack and skillchange. Now from inside the callback, we can call the methods from each dependency.

We are primarily loading the default active state of skills at the dashboard by calling skillstack.skillstate() and then we are attaching event listener to each skill by calling skillchange.eventListener()

Now lets take a look at skillstack.js

To access a module from other modules we need to define() it in RequireJs. That’s why to access skillstack, we defined it. It has a dependency of skillstore, which is getting us the complete skill set array. The same way from inside the callback method, we are getting the skill set and looping through it to make each skill active at the dashboard by targeting each element’s class attribute. Finally we need to return the skillstate function to make it available for the caller.

Now lets bring skillstore.js

Now its pretty simple for you to understand what’s happening here. We are setting the array and returning back to the caller.

The First part is done, Now we will attach the event listener to each skill.

Lets sneak in to the skillchange.js

We’ve defined skillchange and because we have a dependency here to work with, we added the bootbox namespace in the definition. Here we are getting all the skill elements and while looping through, we are adding click listener to each skill. The click listener will trigger a bootbox alert every-time when user clicks on skills. At the end we need to return the method to the caller.

That’s all for the application. Here we haven’t said anything about our HTML template and CSS. We have used bootstrap for our template. If you are new to the name, quickly take a look to the article here. Our image elements are having matching ids so that we can show which skills we have edited.

Things To Watch

We have to return the function from each modules if we want to call them from other modules. The config path property needs file path without the extension, so that’s very important thing to remind when we are developing applications with RequireJs.


You can take a look at A Kick Start With Require.js Demo here. You can Download it also to keep a working copy in your machine. I hope you have learned something from this article.

RequireJs is The AMD for me, what’s yours?

Indrajit Das
Follow me

Indrajit Das

Co-founder of CodeStrive [ Kind of a seeker for new dimensions in WEB world, sort of a Thinker, Blogger, Die-Hard Coder, Wash-Room Singer, Football Player, Gamer, Guitar Player, Cartoonist and the list goes on.. ]
Indrajit Das
Follow me

Latest posts by Indrajit Das (see all)

How Fast You Can Strap With Bootstrap
Pride that quarells at self-breath