Modular JavaScript with
AMD and RequireJS

Jarrod Overson

• http://jarrodoverson.com/
• http://jarrodoverson.com/g+
• http://jarrodoverson.com/twitter
• http://jarrodoverson.com/linkedin
• http://jarrodoverson.com/github

Modular JavaScript and AMD

Who Am I?

Why are we here?

JavaScript is going through some growing pains

• JavaScript SLOC in web sites is growing rapidly 1,1,1,1,2,2,2,3,3,3,4,5,6,7,8,9,10,15,20,30

• JavaScript on the server side brings more code to the table

• Ways to manage this code have been custom solutions, lacking long term support, or required you to buy into an entire framework

How do you organize your code now?

1. Namespaces?

   var yourblog = { account : {}, posts : [], comments : [] }

1. Namespaces?

   yourblog.js

   var yourblog = {}

   account.js

   yourblog.account = { stuff : {} }

   posts.js

   yourblog.posts = { moreStuff : {} }

   comments.js

   yourblog.comments = { blech : {} }

   index.html

   <script src="yourblog.js"></script> <script src="yourblog/account.js"></script> <script src="yourblog/posts.js"></script> <script src="yourblog/comments.js"></script>

2. Globally Accessible Modules?

   <script src="Module1.js"></script> <script src="Module2.js"></script> <script src="Module3.js"></script> <script src="app.js"></script>

2. Globally Accessible Modules?

   <script src="Module1.js"></script> <script src="Module2.js"></script> <script src="Module3.js"></script> <script src="Module4.js"></script> <script src="Module5.js"></script> <script src="Module6.js"></script> <script src="Module7.js"></script> <script src="Module8.js"></script> <script src="Module9.js"></script> <script src="Module10.js"></script> <script src="Module11.js"></script> <script src="Module12.js"></script> <script src="app.js"></script>

2. Globally Accessible Modules?

   <script src="Module1.js"></script> <script src="Module2.js"></script> <script src="Module3.js"></script> <script src="Module4.js"></script> <script src="Module5.js"></script> <script src="Module12.js"></script> <!-- want to use 6 in 12... --> <script src="Module6.js"></script> <script src="Module7.js"></script> <script src="Module8.js"></script> <script src="Module9.js"></script> <script src="Module10.js"></script> <script src="Module11.js"></script> <script src="app.js"></script>

2. Globally Accessible Modules?

   <script src="Module1.js"></script> <script src="Module2.js"></script> <script src="Module3.js"></script> <script src="Module4.js"></script> <script src="Module9.js"></script> <!-- Was 9 dependent on 12? --> <script src="Module5.js"></script> <script src="Module12.js"></script> <!-- 12 --> <script src="Module6.js"></script> <script src="Module7.js"></script> <script src="Module8.js"></script> <script src="Module10.js"></script> <script src="Module11.js"></script> <script src="app.js"></script>

4. One Massive File?

   // No, you don't do this // right?

Your code is already trying to be modular.

Why AMD?

If there already are solutions, and even more that have fizzled, What's different with AMD?

AMD

Asynchronous Module Definition

1. AMD is not a library.
2. AMD is a set of rules that define what your code means.

You buy into a small set of transferable rules

You buy into a philosophical module

To the code!

define() function

The specification defines a single function "define" that is available as a free variable or a global variable.

The Module Pattern, a recap

Module Pattern in AMD style

var testModule = (function(){
  var counter = 0;
  return {
    incrementCounter: function() {
      console.log(counter++);
    },
    resetCounter: function() {
      console.log('counter value prior to reset:' + counter);
      counter = 0;
    }
  };
})();

testModule.incrementCounter();
testModule.incrementCounter();
testModule.resetCounter();

Module Pattern in AMD style

var testModule = (function(){
  var counter = 0;
  return {
    incrementCounter: function() {
      console.log(counter++);
    },
    resetCounter: function() {
      console.log('counter value prior to reset:' + counter);
      counter = 0;
    }
  };
})();

testModule.incrementCounter();
testModule.incrementCounter();
testModule.resetCounter();

Module Pattern in AMD style

                  function(){
  var counter = 0;
  return {
    incrementCounter: function() {
      console.log(counter++);
    },
    resetCounter: function() {
      console.log('counter value prior to reset:' + counter);
      counter = 0;
    }
  };
}



  

Module Pattern in AMD style

                  function(){
  var counter = 0;
  return {
    incrementCounter: function() {
      console.log(counter++);
    },
    resetCounter: function() {
      console.log('counter value prior to reset:' + counter);
      counter = 0;
    }
  };
}



  

Module Pattern in AMD style

define(           function(){
  var counter = 0;
  return {
    incrementCounter: function() {
      console.log(counter++);
    },
    resetCounter: function() {
      console.log('counter value prior to reset:' + counter);
      counter = 0;
    }
  };
});

/* et voila */

  

AMD module with dependencies

define(['TestModule'], function(TestModule) {
    TestModule.incrementCounter();
    return { /* stuff */ }
});

AMD module with a Class

define(function() {
  function Shape(x,y) {
    this.x = x;
    this.y = y;
  }
  Shape.prototype.move = function(x,y) {
    this.x += x;
    this.y += y;
  }
  return Shape
});

AMD module with a Class cont.

define(['Shape'],function(Shape) {
  function Circle(x,y,radius) {
    Shape.call(this,x,y);
    this.radius = radius;
  }

  Circle.prototype = new Shape();
  Circle.prototype.constructor = Circle;

  return Circle;
});

AMD module as object data

define({
  'foo' : 42,
  'bar' : Math.PI
});

Think JSONP with the callback always being define()

AMD module with plugins

CoffeeScript

define(['cs!coffeescriptModule.cs'],function(csModule){
  csModule.foo(); // ready to use in JavaScript
})

AMD defines how to write the modules

Not how to load or use them

AMD defines how to write the modules

Not how to load or use them

require.js - requirejs.org

AMD defines how to write the modules

Not how to load or use them

curl.js - github

Application structure

project-root/
  index.html
  scripts/
    lib/
      require.js
    dep1.js
    dep2.js
    main.js

index.html

<html>
  <head>
    <script src="scripts/lib/require.js"></script>
  </head>
  <body>
  </body>
</html>

index.html

<html>
  <head>
    <script data-main="scripts/main.js"
            src="scripts/lib/require.js"></script>
  </head>
  <body>
  </body>
</html>

Instruct require.js to run scripts/main.js on load

index.html

<html>
  <head>
    <script data-main="scripts/main.js"
            src="scripts/lib/require.js"></script>
  </head>
  <body>
  </body>
</html>

The scripts/ directory will be the baseUrl for our modules

main.js

require(['dep1','dep2'],function(dep1,dep2){
  // And away we go!
})

Optimization and Building

$ npm install requirejs
$ r.js -o app.build.js

where app.build.js is your build configuration file

({
  baseUrl: ".",
  name: "main",
  out: "main-built.js",
  modules: [
    {
      name: "main"
    }
  ]
})

r.js can also copy your source tree into a new build dir, and minify and build your CSS.

AMD support/use in the wild

Loaders

• require.js

• curl.js

• Dojo

• MooTools

• lsjs

• and more!

Modules/Software

• jQuery

• Firebug

• underscore.js

• backbone.js

• EmbedJS

• and more!

Where to go from here?

<nutshell>require.js & AMD</nutshell>

There is much more! Stay up to date and start coding now!

AMD/RequireJS is not a silver bullet, but it gets us to a better place

Thank you!

- Jarrod Overson / jsoverson

The presentation thanks Deck.js, jQuery sparklines, Codemirror plugin for Deck.js,