ES6-modules and why you should care

tl;dr ES6-modules are amazing and are blessing for web development, they help you build the app modularly without worrying about including, and polluting the html, like in old days also without the overhead of any third-party module loaders or dependency resolvers.

We are well aware of modules and import statements, require in nodejs, we all have used it in one place or the other during the course of coding. We all know how powerful and convenient they are. Javascript (on browser front) lacked this feature, until recently. YES! browsers are implementing modules, sadly enough at the time of writing this article only Safari 10.1 had the default support for it (yeah, surprising chrome did not!!!).

To better understand es6-module I recommend you read up this blog post by Axel Rauschmayer. The blog post gives the full detail on ES6-module system.

To see if your current browser had support for it or not use this link. I’ve also created a small project (bare bones, plan to make it better) which you can find at this location https://github.com/chhetrisushil/module-example

Brief About the example

The example is a simple javascript quiz. Questions are fetched from an API, composed with html template presented to the user. User makes a selection from the choices provided and proceeds to the next question once the last question is answered a result summary is provided which consists of a tabular for of Question, correct answer, answer chose by user and how many of them were correct answer out of total question.

I’ve made use of most of the ES6 features in this example to name a few, async/await, generators, template literals and of course es6-modules. As of now I’ve defined all the template in a Javascript which I’m planning to move to html and use another feature of HTML5 called templates.

The key parts to notice about ES6-modules are now we have a value to the “type” attribute in script tag as “module” so the tag looks like this <script type=”module” src=”./path/to/module.js”></script>. In this “module.js” now u can make use of “import” statements the usual way.

Another attribute has been introduced to script called “nomodule” which I’m exploring and perhaps my next article might as well be about it and how it’s helpful for migration and different from “module”.

Hope this article is enough to get you curious about ES6-modules and may as well motivate to experiment/build apps using ES6-modules.

EDIT: Thanks Sravan kumar Rekandar for the feedback :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.