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>

advantages: minimal dev tooling setup
disadvantages: not scalable (global namespace, managing dependencies manually)

Google Closure's calcdeps.py

calculates dependencies and can create an ordered list of script tags.

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');

developed primarily for execution on the server
advantages: Node implementation integrates well with npm
disadvantages: it's a global API rather than a standardized language construct, and therefore doesn't automatically scale to other platforms

Node.js

see Node docs: "Modules"

webserver.js

const fs = require('fs');

Browserify

"Browserify lets you require('modules') in the browser by bundling up all of your dependencies."

AMD (Asynchronous Module Definition)

dep1.js

define(function() { ... });

app.js

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

developed primarily for the browser
advantage/disadvantage: uses JS to load JS (rather than at the engine level)

RequireJS

implements define and require to asynchronously request files from the server (based on paths you define in dependency list, or in config)

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

module bundler
supports both AMD modules and CommonJS modules
can be customized via plugin ecosystem

SystemJS

module loader
supports ES6 modules, AMD modules, CommonJS modules, and even global scripts
supports the browser and Node
potential implementation for the internals of the ES6 module standard

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

the standard
to be implemented by all JS engines

Babel

compiles your ES6 Import/Export syntax (and all other ES6 features) into valid ES5.
still requires a CommonJS environment

input-es6.js

export const foo = 100;

output-commonjs.js

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = exports.foo = 100;

TypeScript

supports all ES6 features, as well as type annotations
still requires an AMD implementation

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

transpile ES6 modules with Babel or TypeScript
load and bundle them with SystemJS or rollup.js

...on the server

ES6 syntax with .mjs .js extension + package.json
(use Babel/TS if you need more ES6 than Node.js already supports)

HTTP/2

requests will be relatively cheaper, as servers can push multiple resources upon initial request
bundling JS into a large blob, therefore, might be suboptimal

Where's My JavaScript?

Managed <script> Tags

Google Closure's calcdeps.py

CommonJS

Node.js

Browserify

AMD (Asynchronous Module Definition)

RequireJS

UMD (Universal Module Definition)

webpack

SystemJS

ES6 Modules

Babel

TypeScript

Moving forward

...in the browser

...on the server

HTTP/2

Managed `<script>` Tags