Introduction to RequireJS

John Lindquist: I'll start by installing RequireJS through bower and bower install RequireJS. Then I'll go ahead and create my index HTML file to load in RequireJS. Require.

I'll also need a data main attribute. Data main. This is going to say where my main JavaScript file is that's going to use RequireJS. Let's go ahead and create that as well, JS/main.

Now, in here is where I'm going to start defining dependencies to load in. The problems that RequireJS solves are things like keeping your code organized and in separate files, lazy loading of files, managing dependencies, things like that.

The first thing we're going to do is require an alerter using this array syntax and then a function that has a matching alerter. You see we have alerter here, alerter here.

Then, when I try to load this in, it's going to look for this alerter file and load it up. You see that it did not find it. I'll need to create the alerter file.

We'll call this "alerter." You'll see that, now, it successfully loaded it. Let's turn this into something that require can use.

Instead of require, we will say, "Define" and pass in a function that's going to return something. It will return a function that alerts some message. This function is going to pass in a message.

In our main file, once we use the alerter, we're going to say, "Hello." One we refresh this, you'll see it alerts "Hello" because I'm getting this function back with this alert in it. Now my alerter can alert "Hello."

You can see that it loads these files in order. It loads require, the library file, my main file, and then my alerter file.

Let's separate this a bit more by creating an app file. I'll just say, "App." We'll define a function that takes require so we can actually use require to require other files. We're require the alerter. This can be our alerter. We can say, "Alert. Hello from the app."

If we change this around a bit, in our main, instead of requiring the alerter, we'll require our app. We don't really have to run anything there.

We've separated everything out. Main's going to load up our app. Then our app will load up the alerter by requiring alerter. Then the alerter returns that message. You can see "Hello from the app" and, in that order, main, app, alerter.

To lazy load this, let's use the syntax. Instead of just passing in a single string, we'll pass in an array which returns a function. Again, this is very similar to the syntax before.

To show this working, we'll do document, create element, button. We'll create a button which, on click, we will do all this stuff.

When we click it, we can use our alerter to say, "Hello from the app." Our button text content will be "Click me to load the alerter."

Then we will document body, append child, button. We should be golden from there. I'll click refresh.

You can see that main has loaded the app, but app has not yet loaded the alerter because we're using this syntax instead of just the single-string syntax.

Once I click the button, you can see that I made the mistake of not putting this inside my require. Once I click the button, it loads it. It invokes alerter. It says, "Hello from the app."

There are a few more things, such as optimization and configuration, that we can cover in future RequireJS tutorials. This is enough for an intro.

Just remember that you use require to load in a main file, which will basically set up the dependencies and what you want to load. Your configuration stuff could go here as well.

Then you'll load in other files, which can load in other files. You can manage your dependencies like that and lazy load based on when your project needs those files.