Where's My JavaScript?

A Closer Look at Loading Up Your Application

Managed <script> Tags

index.html
<script src="lib/dependency.js"></script>
<script src="app/module.js"></script>
<script src="app/main.js"></script>

Google Closure's calcdeps.py

person.js
goog.provide('example.model.Person');
example.model.Person = function() { ... };
people.js
goog.provide('example.model.People');
goog.require('example.model.Person');
example.model.People = function() {
  this.mainPerson = new example.model.Person();
};

CommonJS

helper.js
module.exports = function() { ... };
server.js
const helper = require('path/to/helper');

Node.js

webserver.js
const fs = require('fs');

Browserify

AMD (Asynchronous Module Definition)

dep1.js
define(function() { ... });
app.js
require(['dep1', 'dep2'], function(dep1, dep2) { ... });

RequireJS

UMD (Universal Module Definition)

  • developed to unify the browser and the server
  • supports both AMD and CommonJS modules
  • the way it works is essentially passing your module to an IIFE that determines the environment to produce the appropriate type of module

webpack

SystemJS

ES6 Modules

named.js
export const foo = 100;
export function bar(a, b) { return a + b; }
default.js
export default class Baz { ... }
app.js
import { foo, bar } from 'named';
import Baz from 'default'; // name doesn't have to match

Babel

input-es6.js
export const foo = 100;
output-commonjs.js
"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = exports.foo = 100;

TypeScript

input-es6.js
export const foo = 100;
output-amd.js
define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.foo = 100;
});

Moving forward

...in the browser

...on the server

HTTP/2