ES modules build for modern browsers

[TobiaszCudnik]

ES modules build for modern browsers will allow us to avoid transpilation for runtimes which dont need it. Should work based on the script[nomodule] attribute.

[TobiaszCudnik]

There's several benefits from this approach, I'll try to break them down here:

Smaller builds

Avoiding polyfills, regenerator and down-leveling other ES6/7 features to ES3.

Faster execution

Native implementations are faster then their ES3 equivalents.

Readable code

Debugging without source maps, which often are problematic, especially in ES7->ES3.

Faster builds

Less transpiling means faster builds. ESM would be the build we use during the development.

Public Relations

It'd give us some credit among our (tech savvy) users if we tell them we're shipping ES7.

According to caniuse.com 75% of global traffic has support for ES6 modules. Every browser which supports ES6 modules also happens to support ES7 (at least async/await), which makes it a very handy breakpoint (can be seen as feature detection).

I'm not saying it a high priority, but it's also not that much work.

[roosmaa]

Ok, I do like the smaller bundle aspect. We don't have that much business logic that faster execution would come into play much, I'm guessing.

How would we solve the part of shipping the correct build (polyfills for legacy browsers and ES7 for newer) to the user? I can think of couple of options, but would like to hear your thoughts on this before I spurt out my initial ideas.

[TobiaszCudnik]

Ok, I do like the smaller bundle aspect.

We can also take the source of Material UI and ship it that way too (or other ES6 deps, for that case)

We don't have that much business logic that faster execution would come into play much, I'm guessing.

It's not the case for us, although seeing non-transpiled source during development would really help.

How would we solve the part of shipping the correct build (polyfills for legacy browsers and ES7 for newer) to the user?

That's the whole trick - you send ES7 as an ES6 module (although still bundled), and if the browser doesnt support ESM, it takes the ES3 version (script[nomodule]). Some code examples:

    <!--
    Only the browsers WITH ECMAScript modules (aka ES6 modules)
    support will execute the following script
    -->
    <script type="module" src="./ecmascript-modules-main.js"></script>

    <!--
    Only the browsers WITHOUT ES modules support
    will execute the following script.
    Browsers WITH ES modules support will ignore it.
    -->
    <script nomodule src="./bundled-main.js"></script>

[roosmaa]

Currently not a priority issue, so closing it for now.