JavaScript Modules John Novatnack / @jnovatnack @SquareNY New York Front End Coders Meetup 3/26/2014 

JavaScript Without Modules ● Code in the global namespace ● Poor code organization ● Difficult to share code between client and server ● Painful to use third-party libraries 

Existing Module Pattern var calendar = (function() { return { daysOfWeekUS : function() { return [ "Sunday" // ... "Saturday" ]}; }; })(); 

Existing Module Pattern var i18n = (function(calendar) { return { Calendar : function() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); } }; }}; })(calendar); 

Three JavaScript API Modules ● CommonJS ● Asynchronous Module Definition (AMD) ● ECMAScript 6 Harmony 

CommonJS ● CommonJS - Goal is to standardize JavaScript APIs to improve web, desktop, command line interoperability ● Node.JS is an implementation of CommonJS modules for server side 

Declaring CommonJS Modules function daysOfWeekUS() { // ... }; exports.daysOfWeekUS = daysOfWeekUS; 

Importing CommonJS Modules var calendar = require("./calendar"); function Calendar() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); } }}; exports.Calendar = Calendar; 

Browserify ● Browserify bundles CommonJS modules for shipping to the browser $ browserify calendar.js i18n.js -o bundle.js 

Node Libraries and Browserify ● In addition to your own modules, browserify will bundle browser compatible node modules 

Importing Node Library $ npm install console-browserify var calendar = require("./calendar"); var log = require("console-browserify"); function Calendar() { this.daysOfWeek = function(countryCode) { log.debug('daysOfWeek for countryCode: ', countryCode); // ... }}; exports.Calendar = Calendar; 

Asynchronous Module Definition (AMD) ● CommonJS modules have been criticized for not being ideal for browsers ● AMD modules focus on browser modules ○ Especially asynchronous loading 

Defining AMD Modules define([], function() { return { daysOfWeekUS : function() { return [ "Sunday", // ... "Saturday" ]; }}; }); 

Importing AMD Modules define(["calendar"], function(calendar) { return { Calendar : function() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return calendar.daysOfWeekUS(); }}; }}; }); 

RequireJS and AMD Modules ● RequireJS is a popular AMD module loader ○ Modules are loaded by the browser asynchronously as needed 

RequireJS Loading Example window.displayAvailabilityCalendar = function() { require(["i18n"], function(i18n) { alert("Displaying calendar with day ordering " + new i18n.Calendar().daysOfWeek("US")); }); } Dependencies loaded lazily Module executed after dependencies are loaded 

ECMAScript 6 (ES 6) Modules ● ECMAScript 6 Harmony next version of JavaScript specification ● Large number of language changes including classes, new iterators, collections library and modules 

Declaring ES6 Modules function daysOfWeekUS() { return [ "Sunday", // ... "Saturday", ]; } export { daysOfWeekUS }; 

Importing ES6 Modules import { daysOfWeekUS } from "./calendar"; function Calendar() { this.daysOfWeek = function(countryCode) { if (countryCode === 'US') { return daysOfWeekUS(); } }}; export { Calendar }; 

Additional ES6 Export Syntax // Export functions, vars and ES6 classes export function foo() { }; export var x = 10; export class Foo { }; // Export a default for the module export default daysOfWeekUS; 

Additional ES6 Import Syntax // Import the default export import dow from "./calendar"; // Rename an import import { daysOfWeekUS as dow } from "./calendar"; // Set module to an object module calendar from "./calendar"; 

Use ES6 Modules Today ● ES6 module transpiler is a project started by Square that maps ES6 modules to AMD, CommonJS, or global modules ● Google Traceur is a general ES6 compiler that also supports modules 

ES6 Module Transpiler Example $ npm install -g es6-module-transpiler $ compile-modules i18n.js calendar.js \ --to=build/ \ --type='cjs' 

Thanks! Source, Node & Grunt configs @ https://github.com/jnovatnack/js-modules-talk 

Learning More ● Writing Modular JavaScript With AMD, CommonJS & ES Harmony by Addy Osmani