This document discusses the history and current state of module systems in JavaScript. It covers: - Early JavaScript had no module system and only the window namespace, requiring solutions like jQuery - CommonJS and AMD specifications introduced in 2011-2015 to provide modularity through namespaces and dependency management - ECMAScript 6 in 2015 included a native module syntax that is not fully supported in browsers yet - Common implementations include Node.js for CommonJS and RequireJS for AMD - AngularJS has supported CommonJS since 2014 and Angular 2 will support ES6 modules

1. Module System of
JavaScript
Junichi Shinohara @ HDE, Inc.
1

2. Motivation
❖ We don’t decide to use Module
System of JavaScript yet
❖ So, I investigated module
system of JavaScript
2

3. What is module system?
❖ Provided Features
❖ Namespace
❖ Dependence resolution
3

4. Past: The Dark Ages ∼ 2011
4

5. JavaScript of Early Date
❖ No module system
❖ Only window as namespace
❖ jQuery
❖ $ (or jQuery)
❖ $.fn[pluginName]
❖ Not enough solution
❖ No dependence of resolution
5

6. Present: Age of Discovery 2011∼2015
6

7. ❖ Two Specification for module
system
❖ CommonJS
❖ AMD
Specifications of Module System
7

8. CommonJS
❖ Specification of module system
❖ To define modules
❖ export or module.export
❖ To resolve dependence
❖ require
❖ Implementations
❖ Node.js (Server-Side)
❖ Browserfiy (Client-Side)
❖ Reference
❖ CommonJS Specification ( http://www.commonjs.org/ )
❖ Node.js HP ( https://nodejs.org/ )
❖ Browserify HP ( http://browserify.org/ )
8
Example

9. AMD (Asynchronous Module Definition)
❖ Specification of module system
❖ Load modules asynchronously
❖ To define modules / To resolve
dependence
❖ define
❖ Implementations
❖ RequireJS
❖ References
❖ AMD API Specification ( https://github.com/amdjs/
amdjs-api/wiki/AMD )
❖ RequireJS HP ( http://requirejs.org/ )
9
Example

10. ...and then, toward
the future?
201X∼
10

11. ECMAScript 6
❖ Specification of scripting languages such as
JavaScript
❖ In June 2015, ES 6th Edition was issued
❖ Module syntax
❖ CommonJS Style
❖ Named Exports
❖ All browsers don’t implement the syntax yet
❖ Implementations
❖ Babel (Polyfill)
❖ TypeScript (AltJS)
❖ References
❖ Babel ( https://github.com/babel/babel )
❖ ECMAScript 6 compatible table ( http://kangax.github.io/compat-table/es6/ )
❖ ECMAScript 6 modules: the final syntax ( http://www.2ality.com/2014/09/es6-
modules-final.html )
❖ ECMA-262 6th Edition (http://www.ecma-international.org/ecma-262/6.0/ )
11
CommonJS Style
Named Exports

12. Module System of AngularJS
❖ AngularJS has an original module
system
❖ AngularJS supports CommonJS
style from 1.4, 1.3.14
❖ AngularJS 2 will support ES6-
module
❖ References
❖ About Angular 1.4 ( http://
angularjs.blogspot.jp/2015/02/new-angularjs-
releases-140-beta5-and.html )
❖ About Angular 2.0 ( http://
angularjs.blogspot.jp/2014/03/angular-20.html )
12
Example

13. You should adopt CommonJS Style so far
Conclusion
13