How to use ECMAScript modules to build modular components in JavaScript

SaidHayani@
Aug 12, 2018 · 4 min read

JavaScript modules are now supported by the browser. This means you can use this great addition in JavaScript, introduced by ECMAScript 2015, in the browser. Previously, you had to use a bundler such as a webpack in order to use modules. But no more. How cool is that!

So, in this article, we will walk through JavaScript modules and explore how we can use them in our web application.

What are JavaScript modules and why you should use them instead of a classic script?

JavaScript modules basically allow us to import a file into another file using import and export methods. They also allow us to build modular components that can be reusable.

Why use JavaScript modules?

There are many advantages that come with using JavaScript modules in your app instead of a classic script:

  • Separating your app into modules: Building your app with modules makes it more efficient and increases the performance of your code. By using these modules, you can lazy load your code and you can use only the code that you need and avoid unused code.

usermodule.js

profile.js

How to use modules

Now, in this part, we are going to explore the ways to use JavaScript modules. You can easily use a JavaScript Module by specifying the attribute type to the module in the script tag that implements your main JavaScript file. Now, you can use the import and export method to import your modules.

And inside your main.js you can import and export your modules:

Using the export method in profile.js:

As shown in the above example, it’s easy to use ECMAScript modules — there is no complex code in this case.

When you set the type in the module, the browser detects automatically that the file is a module and treats it as a JavaScript module.

In another way, you can set the .mjs extension to the file so the browser can identify the module. But this doesn’t make big changes if you set the type attribute as a module to the script tag.

Browser support

It seems that only the modern browsers support JavaScript modules. But that’s alright if you use great browsers like Chrome, Edge, and Firefox.

I don’t need to use bundlers anymore?

Addy Osmani and Mathias Bynens explain in this article that you probably don’t need a web bundler such as webpack if you develop a web app with less than 100 modules. You can check out the article where they have exposed the best practices and good usage of ECMAScript modules here.

Find the code in the GitHub repository here.

Wrapping up

JavaScript modules are a great way to increase the performance of your app. They allow you to do many things that make your app more performant like a dynamic load of your modules, lazy loading, and more. Moreover, the great thing is that it supports the browser. So, don’t hesitate to take advantage of them if you don’t use a file bundler.

Originally published on Zeolearn

Join My Class to learn Bootstrap on Skill Share

Previous Articles:

We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store