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.
  • Using Strict mode by default: Yeah, strict mode is enabled by default in JavaScript modules.
  • The defer method is used by default
  • This means that your HTML code is loaded in parallel with JavaScript. So, you don’t need to add deferattribute to your script tag anymore when you use ECMAScript.
  • It imports your modules dynamically
  • With JavaScript Modules you can customize the loading of your modules by running a dynamic function that imports a module just in case you need it. This assumes that when a user visits your website, you have to load only the module that handles the profile just in case the user logged in. This is explained clearly in the example below:

usermodule.js

1*BBSJbj100sGSvDf_QtSZLQ

profile.js

1*ZMJhiekLpIo6CNUzwbo7mg

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.

1*oGuFFmwMqRp_UFui2o4nvg

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

1*hzQ-Yhnz6BPpjNB7c6JSXA

Using the export method in profile.js:

1*DS0f7mgYekI2QxlYbSZV9g

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

1*C-JPouX9w-nzK25EBHZpeQ

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: