Load jQuery UI with requireJS

RequireJS is one popular script loading framework out on the web. At the same time, most of the web applications and websites are now using jQuery and there are quiet a lot of them that use jQuery UI as well. You may know that jQuery UI is dependent on jQuery, meaning that in order for jQuery UI to load correctly, jQuery should be loaded first.

In older version of RequireJS, it was a lot more harder (and ugglier you may say) to include jQuery UI since the jQuery UI library (unlike jQuery) is not following an  Asynchronous Module Definition  (AMD) style. Then you need to include AMD-enabled scripts which were built within communities and especially James Burke. However, in the last versions of RequireJS, a lot of features were added regarding this.

Remark: If you are not familiar with Asynchronous Module Definition (AMD) and interested to know more, read this article Why AMD?

So let's get on with it. I presume that you are following a folder structure like this:

Here is how you minimal index.html file should look like:

One of the scripts that handles a lot of key information is the one attributed with data-main (i.e. main which stands for main.js). In this script you can define your library paths and a tag called shim which handles dependencies and non-AMD module loading. After that there is the code on how application will continue its initialisation process. This looks something like:

require.config({
    paths: {
        "jQuery": "../libs/jQuery//jquery-1.9.1",
        "jQueryUI": "../libs/jQueryUI/jquery-ui-1.10.3.custom"
    },
    shim: {
        "jQueryUI": {
            export:"$" ,
            deps: ['jQuery']
        }
    }
});

require(["app"], function(App)
{
    App.initialize();
});

As you can see with the paths you are declaring a key-value pair of library conventions and paths and with shim, you are flagging the non-AMD modules which in this case is also dependes on jQuery. In the last step, add the following to your app.js file:

define(["jQuery", "jQueryUI", "guiFunctions"], function ()
{
   var initialize = function ()
   {
      //jQuery, jQuery UI are added here now ...
   };
  
   return {
      initialize : initialize
   };
});

And that is it!