WTF is RequireJS?

Instructor: [0:00] What is RequireJS really? It's a JavaScript library for managing dependencies. That's pretty much it. Scripts like libraries, components, and other dependencies are only loaded when they're called rather than all at once. This prevents downloads and instantiations of scrips when they're really not even in the use.

[0:19] Let's take a look at a quick example. We'll have a blank RequireJS demo project here. We'll create a new file named index.html. In this file, we'll have some boilerplate here, just to echo out a "Hi there" message and title.

[0:35] Let's add jQuery to this html file. Let's go ahead and download jQuery by going to jquery.com. We'll go ahead and click download jQuery. Scroll to this. We'll click on this compressed production version and just copy this. We'll go back to our IDE.

[0:50] We'll create a folder here named JS. This is the directory where we'll place all our JavaScript. We'll create another file here named jquery.js and paste in the contents from that big jQuery file. Let's make sure this jQuery works.

[1:07] First, we're going to add a <script src = js/jquery.js>. Next, we're going to add a script tag down here in the body, where we'll call jQuery function. We'll just log to the console a "Hi there," message.

[1:26] We'll open this in a browser window by just typing open in the index.html file. We'll see the "Hi there" message from the h1 tag. Let's go ahead and open up inspector and we'll also see "Hi there" logged to the console. This tells us our script is working just fine.

[1:43] There's some problems with implementing jQuery this way. Adding jQuery using a script tag to the head means it adds it to the global namespace. This means it's very hard to diagnose issues and it can cause conflicts with different libraries and versions available.

[1:58] There's also the issue with load ordering. jQuery plugins depend on the jQuery library and order is very important. Otherwise, they may fail to instantiate properly.

[2:08] This method is OK for simple scripts in sites. When your app grows, you'll have conflicting libraries and managing dependencies will be hard. It's just not ideal. There's going to also be a growth of a lot of megabytes in your code and using scripts that you don't need causing the performance to just not be that great.

[2:27] RequireJS was built to solve all of these problems. Let's go ahead and refactor this code using RequireJS. First, we'll download RequireJS by going to requirejs.org. From this page, we can click download in the left sidebar, and go to latest release, and go ahead and click the Minified button.

[2:46] We'll do the same method we did before. Just copying all, and then going back into our IDE creating another file called require.js within our JS folder, and pasting in the contents, and saving. Next, let's go to this index.html file. We'll refactor this code is RequireJS. First, we'll change is jquery.js to require.js.

[3:11] After including this library, we'll go down to our script tag here and call the require.config function. This function accepts a JavaScript object and we'll create a baseURL property with the value of JS. This tells RequireJS to look at our JS folder for any scripts that we're going to be calling with RequireJS.

[3:30] Next, since jQuery isn't available globally, this dollar sign will be unresolved. To get it to resolve with RequireJS, we're going to call the RequireJS function. This accepts two parameters.

[3:42] The first is an array of dependencies. Here, we'll type jQuery. This name directly maps to the RequireJS file in this JS folder. The parameters of this function will be directly tied to the dependencies that we just defined. Here we'll name the variable what we want to call it. In this case, $.

[3:59] This means that now within this function callback, we'll have access to this dollar sign function. Now we can move our existing code back up into this block. The $ will resolve to jQuery.

[4:13] Let's go ahead and open our file once again in Chrome and confirm all of the functionality still works as it was before and we can tell it does. Some notes here, this callback function was not executed until all of the requirements were loaded first.

[4:28] This means that whenever we use this dollar sign, we can be sure that jQuery is loaded within this function callback. Secondly, we're not polluting the global namespace. This dollar sign didn't exist until it was defined in our RequireJS callback. This makes our scripts much more dependable and easier to track over time.

[4:46] Finally, pages that don't use jQuery now won't load it, which makes our app much more performant.