Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the design of the ES6 module system.

ES6 Modules Design

ES6 modules are designed with specific properties in mind.

One of them is that default exports are favored.

The module structure is also static.

It supports both synchronous and async loading.

Cyclic dependencies between modules are also allowed.

Default exports are made to be as convenient as possible.

Also, modules are static so that they can be checked statically at compile time.

We only need to look at the code and don’t have to run it.

Therefore, we can’t write something like:

if (Math.random() < 0.5) {  
  import foo from 'foo';  
} else {    
  import bar from 'bar';  
}

with ES6 modules. But we can write something like:

let lib;  
if (Math.random() < 0.5) {  
  lib = require('foo');  
} else {  
  lib = require('bar');  
}

with CommonJS modules.

ES6 modules force us to import and export statically.

The benefit of static imports is that we can remove dead code when bundling.

The files we developed are usually bundled into one large before going into production.

After bundling, we need to load fewer files in order to load all the modules.

Compressing the bundled files is more efficient than bundling more files.

Also, unused exports can be removed during bundling to save space.

If the bundle is transferred over HTTP/1, then the cost of transferring multiple files is high.

But it doesn’t matter with HTTP/2 since there’s caching.

Having a standard module system eliminates the need for custom bundle formats.

The static structure of the means the bundle format doesn’t have to worry about conditionally loaded modules.

Read-only imports mean that we don’t have to copy exports.

Since they don’t change, we’ve to refer to them directly.

Imports being references to the original also means that lookup is faster.

CommonJS imports are whole objects, which are much bigger than references.

If we import a library in ES6, we know its contents and can optimize access.

Variable checking can also be done with a static module structure.

We know which variables are available at which location.

Global variables are no longer needed to be created to share resources and we would only be referencing global variables.

Module exports will be known immediately.

Variables that are local to modules will also be known.

The same checks can be done with other tools like linters like ESLint and JSHint.

Support for Both Synchronous and Asynchronous Loading

ES6 modules support both synchronous and async loading.

The import and export keywords allow for synchronous imports and exports.

There’s also the import function to let us import modules dynamically in an async manner.

The functions return a promise which lets us import a module.

Support for Cyclic Dependencies Between Modules

Cyclic dependency is a key goal of ES6 modules.

They can happen anywhere and they aren’t evil.

It can happen in large systems as we refactor our code.

Making ES6 modules support cyclic dependencies makes our lives easier since we don’t have to worry about them.

Conclusion

ES6 modules have multiple goals in mind.

Their design lets us statically analyze them and bundle them easily.

Cyclic imports are also supported.

The post Best of Modern JavaScript — Module Design appeared first on The Web Dev.