RequireJS

A JavaScript Module Loader

Greg Franko

1/30/2014

Use arrow keys to navigate

About The Speaker

Greg Franko

JavaScript Engineer at AddThis

Open Source Developer

Author

Speaker

Why Do People Use RequireJS?

Performance

Asynchronous and Dynamic Loading

Maintainability

Decoupled Code into Modules

Workflow

No Build Step Required

What Projects/Companies Use RequireJS?

jQuery

Used in Development, Removed In Production

SoundCloud

RequireJS in Development, AlmondJS In Production

PayPal

Used In Both Development and Production

BBC News

Used In Both Development and Production

AddThis

RequireJS in Development, AMDCleanJS In Production

Are You Using RequireJS?

It's Okay If You Aren't

RequireJS Basics

Let's Learn

Most Projects Start Like This:

JavaScript files are included as HTML script tags

<body>
<script src='jquery.js'></script>
<script src='jquery-ui.js'></script>
<script src='lodash.js'></script>
<script src='backbone.js'></script>
<script src='init.js'></script>
<script src='app.js'></script>
</body>

This Is Fine...

If you don't have many dependencies
If you don't care about page load performance
If you don't like decoupled code

This Is Better:

Only Require.js is included as an HTML script tag

<body>
<script src='require.js' data-main='init'></script>
</body>

`data-main` - Tells Require.js to load `init.js` first

Huh?

`init.js` is getting loaded, but none of my other JavaScript files are

RequireJS is the worst

Everything Will Be Okay!

You haven't told RequireJS that `init.js` depends on jQuery, jQueryUI, Lodash, and Backbone

How Do I Tell RequireJS About My File Dependencies?

By writing init.js in a format that Requirejs understands

What Format?

AMD

Asynchronous Module Definition

init.js AMD Example

// init.js
// Depends on jQuery, jQueryUI, Lodash, and Backbone
define(['jquery', 'jqueryui', 'lodash', 'backbone'], function($, null, _, Backbone) {
  /* This function gets called after
    jquery.js, jqueryui.js, lodash.js,
    and backbone.js are loaded
  */
});

Awesome, It Works!

RequireJS Is The Best

Please Tell Me More About AMD

AMD

Module Format Used By RequireJS
Exposes Two Global Methods:

define()

require()

define(id?, dependencies?, factory)

Communicates a File's Dependencies and Return Value
Can return any type of value (e.g object, function, string) and defaults to undefined if no return value is specified.
The module id and dependencies arguments are optional

// example.js
// Does not depend on any files and returns a string
define(function() {
  return 'No dependencies, returns a string';
});

If define Is Confusing You...

Let's See How It Would Look In Plain JavaScript

var example = function() {
  return 'No dependencies, returns a string';
}();

define(id?, dependencies?, factory)

Let's Look At A Slightly More Complicated Example

// getUser.js
// Depends on a file (users.js), and returns a getUser function
define(['./users'], function(users) {
  return function getUser(username) {
    return users[username];
  };
});

If define Is Still Confusing...

Let's See How It Would Look In Plain JavaScript

var getUser = function(users) {
  return function getUser(username) {
    return users[username];
  };
}(usersCollection);

Is That It?

Nope, There Are Many Ways To Define an AMD Module
Check Out More Module Definitions

require(Array, Function)

Loads One Or More AMD Modules

// Loads the example.js module from our first define() example
require(['./example.js'], function(exampleText) {
  // Prints: 'example.js return value: No dependencies, returns a string'
  console.log('example.js return value: ', exampleText);
})

That's All There Is To The require() Method

Should I Use `define` or `require`?

You Should Use Both
Use define to wrap logic that you would like to re-use somewhere else in your application
Use require when you just want a dependency to be loaded onto the page.

Now What?

Now That You Understand How To Create And Load AMD Modules...
Let Me Answer Your Question With A Question
Have You Ever Used JavaScript Code That You Didn't Write?

Third Party Libraries

Cannot Assume AMD Is Being Used
Can Still Provide Conditional Support

How Would A Third Party Library Provide AMD Support?

By Conditionally Wrapping Itself in a `define` method

// If an AMD compatible loader is on the page
if ( typeof define === "function" && define.amd ) {
    define([], function() {
        return exampleLib;
    });
}

Third Party Examples

jQuery

Provides AMD Support via a Named AMD module

// jQuery Source
if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

Lodash

Provides AMD Support via an Anonymous AMD module

// Lodash Source
if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
  root._ = _;
  
  define(function() {
    return _;
  });
}

Backbone

Does Not Provide AMD Support yet

// Backbone Source
var Backbone;
if (typeof exports !== 'undefined') {
  Backbone = exports;
} else {
  Backbone = root.Backbone = {};
}

How Do You Use Scripts That Are Not AMD Compatible?

Use the RequireJS Shim Configuration

Shim Configuration

Useful for libraries that export a global variable

requirejs.config({
  shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
  }
});

Is This Black Magic?

No, RequireJS just creates a define wrapper for all shimmed libraries

define("backbone", ["underscore","jquery"], (function (global) {
    return function () {
        var ret, fn;
        return ret || global.Backbone;
    };
}(this)));

Shim Configuration

Also Useful for Declaring Dependencies

require.config({
  shim: {
    'jquery.ui.widget': ['jquery'],
    
    'jquery.selectBoxIt': ['jquery.ui.widget']
  }
});

Hold Up

Can You Explain The require.config() Method?

RequireJS Config

RequireJS allows you to set application-level configuration options
The configuration options should be set before you define/require any modules

Popular Config Options

baseurl
The beginning file path that is used for all of the file lookups
paths
Allows you to map module IDs to alias names (easier to type 'jquery' than '../../jquery')
shim
Allows you to make third-party libraries AMD compatible

Let's Review

Define() allows you to create AMD modules
Require() allows you to load one or more AMD modules onto the page
RequireJS configuration options provide flexibility and convenience
Last but not least...

Building with The RequireJS Optimizer

The RequireJS Optimizer

Node.js Command-Line Build Tool
Concatenates Your AMD Project Into One File
A Ton Of Options
Can Be Used with Grunt or Gulp

Example Build Profile

{
  baseUrl: "public/js/",
  paths: {
    "desktop": "app/config/Init"
  },
  optimize: "uglify",
  mainConfigFile: "public/js/app/config/Init.js",
  include: ["desktop"],
  out: "public/js/app/config/Init.min.js"
}

Common Optimizer Questions

I thought RequireJS Didn't Require A Build Step?

It doesn't, the optimizer is optional.
Why Would I use the RequireJS Optimizer?

If you want to build your project into one file
Do I Still Need RequireJS After I Build?

If you need to load any additional network resources with RequireJS, then yes. Otherwise, you may use Almond.js or AMDClean.js.

Almond.js

A Minimal (~400 line) RequireJS Replacement After Optimized Builds
Does Not Allow Loading Network Resources
Does Not Transform Source Code
Example Build With Almond.js

AMDClean.js

An AMD Build Tool That Converts AMD Code To Standard JavaScript
Allows You To Use AMD In Development Without Having To Include an AMD Library In Production
Does Not Allow Loading Network Resources
Transforms Source Code
Example Build With AMDClean.js

RequireJS

A JavaScript Module Loader

Greg Franko

1/30/2014

Use arrow keys to navigate

About The Speaker

Greg Franko

JavaScript Engineer at AddThis

Open Source Developer

Author

Speaker

Why Do People Use RequireJS?

Asynchronous and Dynamic Loading

Decoupled Code into Modules

No Build Step Required

What Projects/Companies Use RequireJS?

Used in Development, Removed In Production

RequireJS in Development, AlmondJS In Production

Used In Both Development and Production

Used In Both Development and Production

RequireJS in Development, AMDCleanJS In Production

Are You Using RequireJS?

It's Okay If You Aren't

RequireJS Basics

Let's Learn

Most Projects Start Like This:

JavaScript files are included as HTML script tags

This Is Fine...

If you don't have many dependencies

If you don't care about page load performance

If you don't like decoupled code

This Is Better:

Only Require.js is included as an HTML script tag

data-main - Tells Require.js to load init.js first

Huh?

init.js is getting loaded, but none of my other JavaScript files are

RequireJS is the worst

Everything Will Be Okay!

You haven't told RequireJS that init.js depends on jQuery, jQueryUI, Lodash, and Backbone

How Do I Tell RequireJS About My File Dependencies?

By writing init.js in a format that Requirejs understands

What Format?

Asynchronous Module Definition

init.js AMD Example

Awesome, It Works!

RequireJS Is The Best

Please Tell Me More About AMD

AMD

Module Format Used By RequireJS

Exposes Two Global Methods:

Communicates a File's Dependencies and Return Value

If define Is Confusing You...

Let's See How It Would Look In Plain JavaScript

Let's Look At A Slightly More Complicated Example

If define Is Still Confusing...

Let's See How It Would Look In Plain JavaScript

Is That It?

Nope, There Are Many Ways To Define an AMD Module

Check Out More Module Definitions

Loads One Or More AMD Modules

That's All There Is To The require() Method

Should I Use define or require?

You Should Use Both

Use define to wrap logic that you would like to re-use somewhere else in your application

Use require when you just want a dependency to be loaded onto the page.

Now What?

Now That You Understand How To Create And Load AMD Modules...

Let Me Answer Your Question With A Question

Have You Ever Used JavaScript Code That You Didn't Write?

Third Party Libraries

Cannot Assume AMD Is Being Used

Can Still Provide Conditional Support

How Would A Third Party Library Provide AMD Support?

By Conditionally Wrapping Itself in a define method

Third Party Examples

jQuery

Provides AMD Support via a Named AMD module

Lodash

Provides AMD Support via an Anonymous AMD module

Backbone

`data-main` - Tells Require.js to load `init.js` first

`init.js` is getting loaded, but none of my other JavaScript files are

You haven't told RequireJS that `init.js` depends on jQuery, jQueryUI, Lodash, and Backbone

By writing `init.js` in a format that Requirejs understands

That's All There Is To The `require()` Method

Should I Use `define` or `require`?

Use `define` to wrap logic that you would like to re-use somewhere else in your application

Use `require` when you just want a dependency to be loaded onto the page.

By Conditionally Wrapping Itself in a `define` method

No, RequireJS just creates a `define` wrapper for all shimmed libraries

Can You Explain The `require.config()` Method?

`Define()` allows you to create AMD modules

`Require()` allows you to load one or more AMD modules onto the page