What are ES-Modules ?

https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive https://jakearchibald.com/2017/es-modules-in-browsers https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules https://www.sitepoint.com/using-es-modules/

Browser Support and shimming ?

All the major browsers have a base-line support for es-modules and the current state, the browser support for them is 94.45%. Some of the missing features and language syntaxes like dynamic-import and import-maps are not supported fully yet. Or behind the flag in some browsers. We can solve, this my using shims. More about shimming can be found here https://caniuse.com/es6-module https://github.com/guybedford/es-module-shims

Node-modules vs remote CDN

• Caching modules improves the load times. Each dependency is individuay served to the users, and they need to load the package that is only updated. And the reset of the modules will be loaded from cache.
• No need to reundle the entire application everytime.
• Transpilation, polyfilling and production optimizations happen ahead of time.

ES-Modules and CDN

Each module is a piece of code that is executed once it is loaded. (https://exploringjs.com/es6/ch_modules.html)

This makes the es-modules more powerful, when combines with caching and optimisizing them ahead-of-time. Today we have a handful of cdn providers which does this jspm, skypack, esm.sh and even deno.land/x.

These cdn's takes all the package in npm traspiles them, converts them to esm where in the case of cjs modules and serves these modules so users can directly use them in browsers.

In a stanrd npm and node_modules mode of development, we need to configure our bundlers, to transpile, polyfill, and even provide interop now. And this happens every time, we install our packages and build them. Image the time, users can save from eliminating these steps, during the time of development to running them in CI.

More about the CDN's in their respective pages https://jspm.org/docs/cdn#module-cdn-semantics https://docs.skypack.dev/skypack-cdn/api-reference

ES Modules from teleportHQ studio

At teleportHQ, we are on and off of this topic with research for a while, the current level at which browser support and bundlers starting to adopt these workflows.

• Serving components from the studio as npm installable packages.
• And creating a mirror for npm for converting and serving all packages to esm. You can find more of it here https://github.com/teleporthq/registry/blob/cleanup-github-ci/src/index.ts#L171

Modules in teleportHQ uses "bare-module-specifiers". This gives control to the end-users from where the external-dependencies are imported. So, at any instance, these modules load only code that is generated from the studio and code-generators. This helps users to ship with confidence and security, as users can choose from where the external dependencies are loaded.