Shared Code with AMD/RequireJS

Asynchronous Module Definition

The Asynchronous Module Definition (AMD) specification provides a framework for defining JavaScript modules and dependencies for predictable loading.

A fork of / transport for CommonJS
Brings require-like support to the frontend

Why AMD?

Frontend JavaScript dependencies are a mess.
Allow us the real potential to have shared code between the frontend and a backend Node.js server.

Our Project

Let's start with a small project:

lib-shared/shuffle.js
lib-server/server.js
lib-client/main.js

And some modules in package.json for our Node.js server:

"express":    "3.0.2",
"amdefine":   "0.0.2",
"underscore": "1.4.2"

Shuffle!

Our function looks like a basic Node.js backend function with a dependency on underscore.

// Shuffle a list string.
function shuffle (val) {
  val = val || "";
  return _.shuffle(val.split(/[\s,]+/));
};

// Examples
console.log(shuffle("1 2 3 4"));

Wrap Shared Code

Use amdefine boilerplate to make define available to Node.js in "lib-shared/shuffle.js":

if (typeof define !== 'function') {
  var define = require('amdefine')(module);
}

define(function(require) {
  var _ = require('underscore');
  
  return function shuffle(val) {
    val = val || "";
    return _.shuffle(val.split(/[\s,]+/));
  };
});

Express REST API

Let's create a JSON REST API in "lib-server/server.js" with our new function.

// At the top, a standard Node.js require ...
var shuffle = require('../lib-shared/shuffle');

// ... meanwhile, in our Express setup.
app.get("/shuffle", function (req, res) {
  var input = req.param('val'),
    shuffled = shuffle(input);
    
  return res.json(shuffled, 200);
});

RequireJS

Now, on to the browser...

RequireJS is an AMD-compatible script loader with features including:

Asynchronous script loading
Frontend asset bundling
Plugins: Internationalization, text (templates)

RequireJS Main

Let's start with a main insertion point in "index.html".

<script data-main="./lib-client/main"
        src="./lib-client/vendor/require-2.1.1.js"
        type="text/javascript"></script>

From here on, there are no other script includes!

RequireJS Configuration

Configure "lib-client/main.js" to point to our client libraries.

require.config({
  shim: {
    "underscore": { exports: "_" },
    "bootstrap": {
      deps: ["jquery"],
      exports: "$"
    }
  },
  paths: {
    "underscore": "vendor/underscore-min-1.4.2",
    "jquery":     "vendor/jquery-min-1.8.1",
    "bootstrap":  "vendor/bootstrap-min-2.2.1"
  },
});

Shuffle in the Browser

From here, we can define our client-side JavaScript code and see it in the demo.

require([
  "jquery",
  "../lib-shared/shuffle"
], function($, shuffle) {
  $(function () {
    // Bind shuffle to the client side form.
    $("form#client").submit(function () {
      var input = $("form#client #input").val(),
        $output = $("form#client #output");
        
      $output.text(shuffle(input).join(", "));
      return false;
    });
  });
});

Parting Thoughts

At Curiosity Media, we use RequireJS for shared code for:

Input validation
Internationalization
Error handling

Beyond this, RequireJS offers a lot more functionality than we've seen here today for managing your entire frontend asset collection.

Thanks!

slides: bit.ly/nodedc-requirejs

code: bit.ly/nodedc-requirejs-code

@ryan_roemer ryan@loose-bits.com

SpanishDict.com is hiring!

←→