JavaScript

AMD & RequireJS

Hi everyone, this is my first post here! So I encourage you to be comprehensive with my bad writing skills :)
That being said, let’s start!
In this post, I’ll give you a first glance about modules in javascript, and a library to load them, RequireJS, so you can keep your code modularized and loading faster than ever!

So, AMD, is not what you are thinking (Advanced Micro Devices), it actually stands for Asynchronous Module Definition. AMD definitions makes your modules faster to load, organizes your app, and let’s you load modules only when you need them.

I suggest you read this presentation about AMD as it helps you understand what is it, and how you can use it.

But no worries, I’ll explain that too!

How we define a javascript module using AMD? is super easy, this is a simple module:

To define a module, you need:

  • To define a dependency list (or not), that needs to be load in order to use this module.
  • And to define your javascript module. Just create a function, with the dependencies as parameters, and then return your module so it can be use from outside

That’s it!
Now that we have our module working, let’s learn how to load it, and that’s where require comes in.
In order to load a module, with its dependencies, asynchronously and only when you really need it, you need to use require as this:

To load a module, you need:

  • To ask for what modules you need using require
  • Once they are loaded, use them!!

Yup, that’s it.
Notice that the function using the modules, is a callback function, that means, it won’t execute until all modules finished loading.

Now let’s see some actual code.
First, you need to download RequireJS.
Once you downloaded it, create an index.html with a head that looks like this:

In this simple expample, our Structure is very very super! basic.

Let’s take a look at main.js

As we said before, we ask require for the modules we want to use (movie) and create a callback function (funciton(movie)) to use it. Here we are just seting its name to terminator, since is an awesome movie.

Now let’s take a look at movie.js

Let’s see the code:
First, we declare our dependencies (in this case, since we don’t have any, we just ommit them), then, we have the option to declare a module with a name. In this case I called it movie. And after that, the declaration of the module itself.

There are a few ways to do this, but to make the post shorter, I’ll explain one, using constructor, prototype, private vars, etc.

This code just creates a variable, called Movie, of type function, so it takes its prototype.

After that, we create a simple private variable that we’ll use as a hash table.

And then, we extend the prototype of the Movie variable.
We specify its constructor function (Wich is called Movie if you remember). After that we add two methos to set and get the values from our private variables.

And once we are done, we return our module :

There are several discussion topics in the last code, I encourage you to read about prototypes if you are interested on how they work.
And Here is my github code that shows something very similar to what is shown on this post

Ok that’s it for today, I hope I didn’t bored you to death and see you next time!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s