As already highlighted, JavaScript libraries play an integral role in web app development. While they can be loaded in the HTML one by one, when you start using multiple libraries, this can become a little bit tricky when they become dependent on each other.

RequireJS solves this elegantly by providing a library to load JavaScript files in a modular way, which improves the speed and the quality of the code.

So far we were loading JavaScript files by referencing them using a dedicated <script src="library"></script> tag.

A typical structure of loading files using RequireJS looks as follows:

define( ["./jquery",
          "css!./css/layout.css"
        ],
        function($) {
        //jQuery was loaded and can be reference using $ in the code.
        //a layout CSS files was loaded as well. As it's using the prefix CSS!, it's being treated as such and automatically appended to the HTML head
        }
);

Since the library only considers JavaScript (.js) files, all file extensions are omitted, hence jquery did not require the .js suffix in the previous example.

When loading JavaScript code from multiple files, there sometimes can exist dependencies. The classic way of loading files is illustrated in the following example:

<script src="library1.js"></script>
<script src="library2.js"></script>
<script src="library3.js"></script>
<script src="main.js"></script>

The code base in main.js depends on libraries 1 -3 to load first. Managing the dependencies, especially in large projects, can quickly get out of hand. RequireJS uses Asynchronous Module Loading (AMD) for loading files, meaning that each file will load asynchronously in the defined order. 

The previous loading example translated into RequireJS code, embedded in main.js, looks as follows:

//Main.js file
require(["library1","library2","library3"],
    function(a,b,c){ 
    //You can now use library a, b and c for your code
    }
);

To break the asynchronous loading for strong dependencies (for example, library 2 requires library 3 to be loaded first), a shim function can be used to configure the module loading process and specify the sequence of files to be loaded:

requirejs.config({
 shim: {
 'source1': ['library1','library3'],
 'source2': ['library2']
 }
});

require(["library1","library2","library3"],
    function(a,b,c){ 
    //You can now use library a, b and c for your code
    }
);

Source 1 will be loaded before source 2 to resolve dependency issues.

As illustrated in the previous examples, RequireJS greatly simplifies and organizes your code base, which is the reason why it's being so heavily used by Qlik and is a pillar of the framework for Qlik Sense extensions.