Skip to main content

Practical Workflows for ES6 Modules

Guy Bedford (Verve Interactive)
Pure Code and JavaScript, The Leading Edge, Tools, Platforms, and APIs
Location: Salon 14 Level: Intermediate
Average rating: ****.
(4.00, 5 ratings)

This talk will cover some of the methods for working with ES6 modules and how to practically use them in browsers today.

The ES6 specification defines a dynamic module loader for JavaScript environments. This allows dynamic loading of dependency-managed script modules as needed, enabling modular architecture and code reuse natively.

Using the ES6 Module Loader polyfill, it is possible to get the advantages of ES6 modules and the module loader in browsers today. We will see how to include the loader in a page to load ES6 modules and their dependencies. The polyfill also provides the ability to integrate with Traceur. In this way, new ES6 syntax such as classes can be dynamically compiled in the browser back into ES5.

This is a useful build-less workflow in development, but for production we need a more performant approach. Build tools such as Traceur and the ES6 module transpiler can be used to statically convert modules into ES5 for RequireJS or even global use. Various output formats can be used based on the specific project needs.

Having seen the general concepts, JSPM is introduced as an example loader with a RequireJS-style configuration. It can load AMD, CommonJS, ES6 and global scripts as a custom ES6 module loader itself.

The JSPM CDN and registry allows loading scripts from NPM and Github directly avoiding the need for any install step. The goal being to enable easy modular development, without a large initial overhead for setting up projects.

The JSPM command-line tool provides a managed build workflow, moving from the development CDN to a production build seamlessly. See how to use this build workflow with an example app.

The hope is for attendees to gain a wider understanding of the approaches and possibilities of working with ES6 modules, as well as to get more developers involved in actively working with and refining these workflows.

Guy Bedford

Verve Interactive

Guy is a JavaScript developer who is passionate about working on open source projects. He previously co-founded a web development company based in London, before moving back to his home town in South Africa and focussing on open source contributions. From working on RequireJS plugins, he has recently been contributing to the ES6 Module Loader Polyfill as well as launching, a browser package management system.