RequireJS a must for every web developer

Loading scripts in web development has always been one of a web developers biggest problems. Imagine a modern web application, where modern web application, Backbone handles our models, collections and views, jQuery handles our DOM interactions, we’ll need something to glue all these dependencies together at an architectural level, Requirejs does this.

RequireJS will make your code more manageable. It is a library that’s simple, and makes it easier to pull JS libraries into your code, without muddling your code. It is implemented around Asynchronous Module Definitions (AMDs), which are designed to load modular code asynchronously in the browser and server.

RequireJS is a JavaScript file and module loader. It is optimised for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. It is used to manage dependencies between modules.

Large applications will require a number of Javascript files, for example, this is our folder structure:

Under js, we have JQuery.js, Backbone.js, Underscore.js

We’ll create a file main.js file that is used for initialization, and will look like this

// Filename: main.js

// Require.js allows us to configure shortcut alias
// There usage will become more apparent further along in the tutorial.
requirejs.config({
    //By default load any module IDs from js
    baseUrl: 'js',
    //except, if the module ID starts with 'app',
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a '.js' extension since
    //the paths config could be for a directory.
    paths: {
        JQuery: 'lib/jquery.min',
  Backbone: 'lib/backbone',
  Underscore: 'lib/underscore'
    }
});

In the above example, app is the directory/subdirectory where your javascript will be written.

// Filename: app/talkback.js

// the file prints some text.
Define([‘jquery’].function($){
  $('#letstalk').text('What’s going on buddy?');
});

Instead of adding all scripts to our index.html file, we’ll only add

<script data-main='js/main' src='js/require.js'></script>
<script>
require([talkback], function(
require(['app/talkback'])
));
</script>

That’s a very simple example of what RequireJS can do.

You can read more at RequireJS Website

Written on May 31, 2014