Activity

1. marke-apexit commented on May 29, 2024

   

   marke-apexit

   on May 29, 2024

   More actions

   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?