Module System of JavaScript

Junichi Shinohara @ HDE, Inc.

1

Motivation

❖ We don’t decide to use Module System of JavaScript yet

❖ So, I investigated module system of JavaScript

2

What is module system?

❖ Provided Features

❖ Namespace

❖ Dependence resolution

3

Past: The Dark Ages ～ 20114

JavaScript of Early Date

❖ No module system

❖ Only window as namespace

❖ jQuery

❖ $ (or jQuery)

❖ $.fn[pluginName]

❖ Not enough solution

❖ No dependence of resolution

5

Present: Age of Discovery 2011～20156

❖ Two Specification for module system

❖ CommonJS

❖ AMD

Specifications of Module System

7

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

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

...and then, toward the future? 201X～

10

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

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

You should adopt CommonJS Style so far

Conclusion

13