Modular JavaScript - EclipseCon Europe 2019 · 2017-12-06 · The original approach Script tags!...

ModularJavaScriptAndrew Eisenberg

Tasktop Technologies

��1

ModularJavaScriptAndrew Eisenberg

Tasktop Technologies

��1

(Non-)

A story about JavaScript and modularization in 4

parts

��2


parts

��2

No Modules (ancient history)


parts

��2


Module Pattern (industrial revolution)


parts

��2



Module loaders (today)


parts

��2




Harmony Modules (tomorrow)


parts

��2




Harmony Modules (tomorrow)

This is really the story of a language reaching maturity

We are Java Devs. Why should we care?JavaScript is not just blinky text and popups

Massive applications being built with it on client AND server

JavaScript is useful and ubiquitous

TIOBE index #9 (March 2014)

But JavaScript is (or was) only a toy language

��3

blinky

We are Java Devs. Why should we care?JavaScript is not just blinky text and popups

Massive applications being built with it on client AND server

JavaScript is useful and ubiquitous

TIOBE index #9 (March 2014)

But JavaScript is (or was) only a toy language

��3

But there is a core goodness

��4

No modules

Part I --- Ancient History (c. 1995)

��5

The original approach

Script tags

All code is global

��6


Script tags

All code is global

��6

<html> <script “foo.js”/> <script “bar.js”/> </html>


Script tags

All code is global

��6


// foo.js var x = 9;


Script tags

All code is global

��6


// foo.js var x = 9;

// bar.js console.log(x);

Prognosis?

Name clashes

No explicit dependencies

Order is important

Just pray that all dependencies are available

��7

Prognosis?

Name clashes

No explicit dependencies

Order is important


��7

Ugggh!

Module pattern

Part II --- Industrial Revolution (c. 2006)

��8

Module pattern

All code is still global

Each script defines its own namespace

Pattern has many variations

��9

Module pattern




��9


Module pattern




��9

<html> <script “foo.js”/> <script “bar.js”/> </html>// foo.js foo = foo || {}; foo.x = 9;

Module pattern




��9

<html> <script “foo.js”/> <script “bar.js”/> </html>// foo.js foo = foo || {}; foo.x = 9;// bar.js (function(foo) { var x = “Number ”; console.log(x + foo.x); })(foo);

Still very populare.g., jQuery fn namespace*

��10

* jQuery 1.7 introduced AMD modules

Still very populare.g., jQuery fn namespace*

��10

(function( $ ) { $.fn.myPlugin=function(args){ // awesome plugin stuff }; })( jQuery );

$.fn.myPlugin(args);* jQuery 1.7 introduced AMD modules

Prognosis?

Name clashes,

but far less common

Easier to mock dependencies

But…

Order matters


��11

Prognosis?

Name clashes,

but far less common


But…

Order matters


��11

Better

Prognosis?

Name clashes,

but far less common


But…

Order matters


��11

Better

But still ugggh!

Module loadersPart III --- Today

��12

The module explosion

��13

Idea! Use the environment to selectively load modules in order

The module explosion

��13


Relies on a module loader outside the language specification

The module explosionFormats

CommonJS

AMD

��13



The module explosionFormats

CommonJS

AMD

Loaders

node (CJS)

requireJs (AMD)

curl (AMD)

…

��13



CommonJS

Used by node

Bad news for the web

��14

var modA = require(‘moduleA’), modB = require(‘moduleB’); !

export.aVal = modA.myVal; export.bVal = modB.myVal;

CJS is not web-friendly

��15

// main.js if (needSub) { require('./sub'); }

// sub.js console.log(‘here’);

Conditional loading of modules. (Yay!) But, that means synchronous loading Synchronous loading makes for horrendous web experience

Asynchronous module definition (AMD)

Asynchronous loading of modules

Makes a happy web

Syntax more cumbersome

��16

define(‘myModule’, [‘moduleA’, ‘moduleB], function(a, b) { return { aVal: a.myVal, bVal : b.myVal } });

Require.js: a sort of deep dive

(There’s magic, but the good kind)

��17

Universal Module Declarations (UMD)

Attempt to unify client and server side modules

BUT not a standard

Semantics different browser vs. server

��18

Universal Module Declarations (UMD)

Attempt to unify client and server side modules

BUT not a standard

Semantics different browser vs. server

��18

define(function(require,export,module){ var modA = require(‘moduleA’), modB = require(‘moduleB’); export.aVal = modA.myVal; export.bVal = modB.myVal; });

But UMD needs even more boilerplate

��19

All sorts of UMD proposals here: https://github.com/umdjs/umd

https://github.com/umdjs/umd

But UMD needs even more boilerplate

��19

All sorts of UMD proposals here: https://github.com/umdjs/umd

// Boilerplate if (typeof module === 'object' && typeof define !== 'function') { var define = function (factory) { module.exports = factory(require,exports,module); }; } // Here is the actual module define(function (require, exports, module) { var b = require('b'); return function () {}; });


Browserify: no more boilerplate

Pre-processor

converts CJS -> AMD

something browser compatible

Avoid AMD boilerplate

Can use some node.js libs in browser

��20

*http://browserify.org/

http://browserify.org/

Browserify example

��21

// require the core node events module!var EventEmitter = require(‘events')!! .EventEmitter;!!//create a new event emitter!var emitter = new EventEmitter;!!// set up a listener for the event!emitter.on('pizza', function(message){! console.log(message);!});!!// emit an event!emitter.emit('pizza', ‘yummy!');

Browserify example

��21

// require the core node events module!var EventEmitter = require(‘events')!! .EventEmitter;!!//create a new event emitter!var emitter = new EventEmitter;!!// set up a listener for the event!emitter.on('pizza', function(message){! console.log(message);!});!!// emit an event!emitter.emit('pizza', ‘yummy!');

$ browserify index.js > bundle.js

Prognosis?

��22

Prognosis?No more language level name clashes

Not order dependent

Dependencies explicit in module

Load and edit time checkers

��22


Not order dependent



��22

Yay! We did it!


Not order dependent



��22

Yay! We did it!

...right?


Not order dependent



BUT...

Too many competing module systems

modules for client and server

Modules still not first class

Boilerplate

��22

Yay! We did it!

...right?


Not order dependent



BUT...

Too many competing module systems

modules for client and server

Modules still not first class

Boilerplate

��22

Yay! We did it!

...right?

Ugggh!

Harmony ModulesPart IV --- Tomorrow

��23

Real Modules

ES6 Harmony

Official JavaScript module spec

Sync and async friendly

Browser and server friendly

��24

ES6 Harmony

��25

// foo.js module "foo" { export var x = 42; }

// bar.js import "foo" as foo; console.log(foo.x);

ES6 modules, today!Using the ES6 Module Transpiler*

��26

*https://github.com/square/es6-module-transpiler

https://github.com/square/es6-module-transpiler

Prognosis ES6?Finally, modules are first class in the language!

Loaders/runtimes will implement spec differently

sync loading possible

async loading possible

��27

Prognosis ES6?Finally, modules are first class in the language!

Loaders/runtimes will implement spec differently

sync loading possible

async loading possible

��27

Expected release date? 201X?

Prognosis JavaScript?

��28

Prognosis JavaScript?Plagued by poor design choices early on

��28


JS used to be a toy language

��28


JS used to be a toy language

Hard, but possible to fix past mistakes.

��28

ResourcesES6 module transpiler

https://github.com/square/es6-module-transpiler AMD module specification (draft, never ratified):

http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition CommonJS module specification:

http://wiki.commonjs.org/wiki/Modules UMD modules (various proposed implementations):

https://github.com/umdjs/umd ES6 Harmony draft specification

http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts JavaScript Module pattern

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Browserify http://browserify.org http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify (borrowed browserify example)

��29

https://github.com/square/es6-module-transpiler

http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition

http://wiki.commonjs.org/wiki/Modules


http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify

Questions?

Andrew Eisenberg

twitter: @werdnagreb

email: [email protected]

��30

Story parts

No modules

Module pattern

Module loaders

Language modules

mailto:[email protected]?subject=

Modular JavaScript - EclipseCon Europe 2019 · 2017-12-06 · The original approach Script tags!...

Documents

Transcript of Modular JavaScript - EclipseCon Europe 2019 · 2017-12-06 · The original approach Script tags!...