ECMAScript Modules (ESM) are clearly superior to "requirejs" AMD modules and now supported by all web browsers. I'm curious why this JET project hasn't migrated to ESM?

ESM supports static module structure enabling static analysis and tree-shaking
ESM also supports dynamic and conditional module loading
ESM better handles circular dependencies
ESM has a simple and intuitive syntax using simple import and export statements or functions

But I think most importantly:

ESM is a standard, part of the ECMAScript language specification
ESM does not require importing any javascript for the module functionality (it is native)
all browsers have been supporting ESM since ~2018

Attempting to illustrate the more intuitive and concise code with ESM, I created a slightly contrived example, creating a module mathUtils that supports add(), multiply() and trig functions which are imported from another module, but exported as part of mathUtils.

**Example of ESM export and import **

Note: there is no extra code that must be loaded for module support as ESM modules are native to the ECMAScript standard supported by browsers since ~2017-2018

// trig.mjs (ESM)
export const sin = x => Math.sin(x);
export const cos = x => Math.cos(x);
export const tan = x => Math.tan(x);

// calc.mjs (ESM)
export { sin, cos, tan } from './trig.mjs';
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<!-- No additional JavaScript necessary for module support, 
it is natively supported by ECMAScript in browsers -->
<body>
    <script>
        import * from './calc.mjs';
        console.log('Result:', add(sin(0), cos(0)));
    </script>
</body>
</html>

Example of AMD (RequireJS) export and import :

Note: excluding comments 73% more lines of code (excluding comments) than the ESM implementation, and less intuitive than the ESM import / export statements

// trig.js (AMD)
// assumes that the client has already have loaded the Require.js module before this module
define(() => ({
    sin: x => Math.sin(x),
    cos: x => Math.cos(x),
    tan: x => Math.tan(x)
}));

// calc.js (AMD)
// assumes that the client has already have loaded the Require.js module before this module
define(['trig'], trig => ({
    add: (a, b) => a + b,
    multiply: (a, b) => a * b,
    sin: trig.sin,
    cos: trig.cos,
    tan: trig.tan
}));

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Include RequireJS to support AMD modules -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
    <!-- Your application content here -->
    <script>
        // Load your main module
        require(['calc'], function (calc) {
            console.log('Result:', math.add(math.sin(0), math.cos(0)));
        });
    </script>
</body>
</html>

Can anyone explain why JET has not migrated to ESM?

OJET support for ESM modules #93

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions