Module System of JavaScript

0 likes570 views

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

Software

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

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

❖ Two Speciﬁcation for module
system
❖ CommonJS
❖ AMD
Specifications of Module System
7

CommonJS
❖ Speciﬁcation of module system
❖ To deﬁne modules
❖ export or module.export
❖ To resolve dependence
❖ require
❖ Implementations
❖ Node.js (Server-Side)
❖ Browserﬁy (Client-Side)
❖ Reference
❖ CommonJS Speciﬁcation ( http://www.commonjs.org/ )
❖ Node.js HP ( https://nodejs.org/ )
❖ Browserify HP ( http://browserify.org/ )
8
Example

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

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

ECMAScript 6
❖ Speciﬁcation 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 (Polyﬁll)
❖ TypeScript (AltJS)
❖ References
❖ Babel ( https://github.com/babel/babel )
❖ ECMAScript 6 compatible table ( http://kangax.github.io/compat-table/es6/ )
❖ ECMAScript 6 modules: the ﬁnal syntax ( http://www.2ality.com/2014/09/es6-
modules-ﬁnal.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

Module System of JavaScript

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 Speciﬁcation 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

Module System of JavaScript

More Related Content

Similar to Module System of JavaScript (20)

Recently uploaded (20)

Module System of JavaScript