Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.6 hours
Toolsforjs
  • Overview
  • Transcript

4.1 Require.js

Modules have changed the way we write JavaScript, and while the next version of JavaScript will have built-in modules and a module loader, we need something now to load our current models. Require.js does just that.

Related Links

1.Introduction
1 lesson, 00:40

Free Lesson
1.1
Introduction
00:40

2.Code Editors
3 lessons, 23:10

Free Lesson
2.1
GitHub's Atom
09:30

2.2
Adobe's Brackets
06:06

2.3
Microsoft's Visual Studio
07:34

3.Runtime Environments
1 lesson, 10:41

3.1
Browser Development Tools
10:41

4.JavaScript Components
3 lessons, 39:01

4.1
Require.js
13:31

4.2
Modernizr
09:43

4.3
Handlebars
15:47

5.Node Packages
2 lessons, 23:47

5.1
NPM and Browserify
08:42

5.2
Grunt
15:05

6.Conclusion
1 lesson, 00:42

6.1
Conclusion
00:42


4.1 Require.js

There are few things that have fundamentally changed the way that we write and use JavaScript thin modules. In fact, modules have made such an impact that we are going to have native modules built in to the next version of JavaScript, and that's a wonderful thing. But unfortunately we won't be able to use those native features reliably across all browsers for many years. That's just the nature of web development. So until that point in time we're going to have to rely upon the solutions that we have currently as well as the solutions that will be introduced that will get us to where we can finally use those native features. But for right now we have several different types of modules, but the one that reigns supreme is called AMD. It stands for asynchronous module definition. And creating an AMD module is very easy. You call a function called define. Now let's first talk about what is a module? Well, really it's just a package of code. Usually it's something that you can reuse throughout your application. But then again, you could write your application's code as a module and then you can load it with what's called a module loader. And that's what we're going to look at in this lesson, is a tool called RequireJS, which is an AMD module loader. So here I have a file called app.js*, so the implication is that this is going to contain the code for the application. So if this is a single page application or a node application, this would be something that I would use throughout the entire application. If it's an application that has different pages, then it would probably be a file that would be loaded inside of each one of those pages. So whenever you're defining an AMD module, you pass arguments to this defined function, and usually the first argument is an array of dependencies. These are files that are going to be loaded so that you can use them inside of the module that you're defining. So since this is going to be the application module, if you will, we will probably use jQuery to do something. So we can load in jQuery. Now I have jQuery, let's look at my solution here. I have a folder called js > libs > handlebars, jquery, modernizer and then RequireJS. And some of these are tools that we are going to look at in future lessons. So if I wanted to load jQuery, I would add the name of the jQuery module, which is jquery, as an element to this array. Now jQuery is a little unique in that it actually defines the name of its module, which is something that you can do. If we wanted to explicitly call this module app, we could do that by passing the string "app" as the first argument to the defined function. But most modules don't do this. Instead, they omit this first argument which gives your module the name of your file name. So even though we haven't passed app as the first argument, this module that we are defining is still going to be called app because the file name is app.js. So this way the module name is implied by the file that contains it, and I personally find that easier to work with. So the second thing that we pass to the define function is a function that will execute whenever this module is loaded. So since this is the application code, we want to put the code that needs to execute for our application to run. And the dependencies that we specify within this array are going to be passed as arguments to this function. So we can refer to jQuery using $ here. Now if we wanted to, we could just go ahead and type the code that we want to execute and be done with that. But instead I am going to return an object that's going to have a method called init because we are going to load this module from a configuration file. Because we have jquery here, we need to set up an alias so that jquery actually points to the path of the jQuery file. So this init method is simply going to write something to the document. So let's append, let's use the div element and hello world. And then we're going to go to another file that I have already created called config.js. And this is where we are going to set up an alias for jquery. To do that we're going to use a function called require, but we're not going to execute it just yet because this has a static method called config where we can configure RequireJS. Now first of all, let me say that this require is not part of the AMD specification. This is part of RequireJS. So we are now talking about RequireJS as the tool, not so much as the AMD specification. So we want to config RequireJS, and the reason why we want to is because we need to set up an alias for our jQuery module. So we do that with this paths property. And this is another object where the property names are the names of the module, so in our case it's going to be jquery, and then we supply the path to the module. That is going to be libs\jquery.min. Because if we look at Solution Explorer, we're going to see that we have this js folder, and then libs, and then inside of libs we have jquery.min.js. There's a few things to note here. First of all, our path does not have the js directory in it, the reason being because we are inside of the js folder already. We are inside of a file called config.js. So the path that we set here is relative to this configuration file, so we don't have to use js here. Also we don't have to use the extension .js, because RequireJS is automatically going to look for a file called jquery.min.js. So those are three characters that we don't have to type. And this is all that we have to do to configure RequireJS to use this jQuery module. So let's go ahead and load our app module, and to do that we use the require function. And the API for this require function is a lot like the AMD's define. First of all, we pass in an array of dependencies of the modules that we want to load. So we are requiring our app module, and then we have a function that's going to use those dependencies. And then the parameters for this function map to the modules that we have loaded. So we have app here, and we're calling it app as our parameter. Now we could call this foo if we wanted to. It doesn't matter, because one of the things about loading a module is that we can give it whatever name that we need to as a parameter here. But we also need to make sense, so it's going to be app. And we want to call the init method, so init. That's going to call all of our application's initializing code, which isn't very much. So now we have our configuration file. It's going to load our app module. And we have our app module. Now we need to tell our webpage to first of all use RequireJS. And then we also need to say that we want to load this config file as the main file. So inside of our index.html, we're going to use our good old script element. We're going to set the source equal to js/libs/require.min.js. And then we need to specify the config.js file as the main file that we want to load. So here we use a data-main attribute. The name comes from traditional programming. If you're familiar with C or C++, or even C#, the entry point for the application is the main function or the main method. So here we have the intro point called main, and we want to load js/config. We don't have to have .js, because RequireJS is automatically going to add that there. So this is all that we need to do. We can go to the browser now, which I already have up. I can refresh and we should see something in the documents, but we don't. So let's open up the debugger and let's see what we have. We have a Failed to load resource, and it could not find js/libs/jquery, or actually there's no slash there. It's just libs and then jquery. So let's go back and let's look at my code inside of the config, because that is where I set up the alias for this jquery module. And it's probably this slash. So if I use the other slash and go back to the browser and refresh, and now our code is working. Now while RequireJS is primarily used for loading AMD modules, we can use it for loading just about any type of JavaScript file. But in order to do that, we need to go through some steps. Let's first of all add another JavaScript file, so inside of libs I'm going to add a JavaScript file called foo. And this is going to be very simple. It has the immediately invoked function. It creates a global variable called foo, which is an object that has a method called bar, and it just alerts something. So it's not a whole lot of code, but this at least demonstrates how we can add code that is not an AMD module using the RequireJS library. So the first thing we need to do is add another entry to our paths. So let's do foo: "libs/foo.js", although we don't need js here. But that's not all. We also have to shim this as an AMD module. And to do that, we add another property to this configuration object called shim. And this is where we define the module, which is called foo, because that is what we used up in the paths. And we have to say that this foo module exports something, and in this case it's exporting a global object called foo. So we say exports: "foo". And then we can use this as a dependency throughout our other calls to Require. So in this case, we can add foo as an element to this array, then we can add foo as a parameter, and then we can call foo.bar. So whenever we view this in the browser, we should see not only the text being written to the document but we should also see the alert box that says alert something. But let's go back to our foo.js and let's add some code that's going to use jQuery. So inside of bar we want to do more than just alert a message. Let's also append something to the document. So $(document.body) and then we will call the append method. Let's add another div element that says this is inside of foo.js. And because this is using jQuery, we need to tell Require that we need that jQuery dependency for foo. So we can go back to config, and inside of this object called foo inside of shim, we can add another property called deps. This is for dependencies, which is an array. And here we can say that this foo module depends upon jquery. And in our case we're not going to see really anything different. Of course, we will see some extra text inside of the document. Although, no we don't. We still saw the alert box, but we did not see any text being written to the page. So let's look at our debugger. Let's make sure everything is okay. Let's fire up Chrome, because Chrome's tools are a little bit better than Internet Explorer's. And it does work. It was just loading a cached version of foo.js. But let's go back to our config file and let's just play around with this. Instead of saying that we want app, let's get rid of app as a dependency. We will also comment out that line of code and get rid of this parameter. So now all we are doing is adding the foo dependency. Now remember that foo relies upon jquery, so we could add jquery here as a dependency. But since we set jquery as a dependency for foo, it's going to automatically include jquery whenever we include the foo module. So we can go back to the browser. Let's refresh. We see the alert box, and then we see the text being written inside of foo. So even though we didn't explicitly specify jquery here, we did inside of this shim for the foo module, and require knows that foo needs jquery. So RequireJS is a very nice tool. We can use it for loading AMD modules but we can also use it for loading any JavaScript that we might need throughout our application. And this can greatly cut down on the amount of script elements that we have within the document. But there are still some tools that we will want to manually add to the HTML, like modernizer, which we will look at in the next lesson.

Back to the top