A Guide for Using Native ECMAScript (ES) Modules

\
This article will present examples of ECMAScript (ES) modules—what you can achieve with them and where you will hit some limitations. All browsers released after May 2018 support ES modules, so you can assume they are safe to use in most cases.

\
table with browser's support for ES modules

\
source

Coding without ES modules

Before we had ES modules, all JS had to be imported globally. Each file could access variables previously defined and leave stuff for the code executed later. The order of imports mattered, especially because things imported later could override previous values. Old-school imports in action looked like the following:

\
display-data.js:

document.body.innerHTML = "lorem ipsum";

\
log.js:

console.log("Some test info");

\
index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>No modules</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./display-data.js"></script>
    <script src="./log.js"></script>
  </body>
</html>

index.html imports first display-data.js and then log.js

The example in action.

Problems

There are two main issues with this approach:

  1. It pollutes the global scope. If you have a few files defining the same value, then they will collide and override each other. Good luck finding and fixing the bugs it can cause. Example:

    \

data-1.js:

var data = “lorem ipsum”;

\
data-2.js:

var data = “sin dolor”;

\
index.html:

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Name collision</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./data-1.js"></script>
    <script src="./data-2.js"></script>
    <script>
      document.body.innerHTML = data;
    </script>
  </body>
</html>

\
This code live

\
The most common workaround was using an immediately invoked function expression. This isolated blocks of code and prevented global scope pollution, but at the same time, it made the code more confusing.

\

  1. Any dependency had to be managed and resolved manually. If you had one file depending on another, then you had to make sure to import those files in the correct order. For example:

    \

log-data.js:

console.log(data);

\
data.js:

const data = ‘some data’;

\
display-data.js:

document.html = data;

\
index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>File order</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./log-data.js"></script>
    <script src="./data.js"></script>
    <script src="./display-data.js"></script>
  </body>
</html>

\
As you can see here, the display data part works as expected, whereas logging data fails.

ES Modules in Action

What is the difference if we do the same thing with ES modules? First of all, you define the dependencies on the code level. So if in one file you want values from another, you just specify it in the same file. This approach makes a difference, especially in reading code: you just need to open one file to get the idea of all the context it’s using just by reading it.

So how do we use the ES modules?

\
data.js:

export const data = "lorem ipsum";

\
display-data.js:

import { data } from "./data.js";

document.body.innerHTML = data;

\
index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Simple modules</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
  </body>
</html>

\
The main changes in this code:

  1. adding type=”module” to <script> import in the HTML file.

  2. using export and import keywords in the JS files to define and load modules.
    index.html <- display-data.js <- data.js

    \
    Running example

Multiple Files, Importing the Same File

We can make our example more interesting by importing the same files twice. Because we need each file to be independent of the other, the import will be added twice—in each file separately. The browsers manage the import correctly and load the file only once.

\
data.js:

export const data = "lorem ipsum";

\
display-data.js:

import { data } from "./data.js";

document.body.innerHTML = data;

\
log-data.js:

import { data } from "./data.js";

console.log(data);

\
index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shared import</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
    <script type="module" src="./log-data.js"></script>
  </body>
</html>

index.html imports both display-data.js & log-data.js & each of them imports data.js

The example

Lazy Load

Lazy load delays the loading part of the application until the code is necessary. This is a more complicated optimization technique than loading everything at once, but it enables more control over what is loaded when. In the example below, I load and display data after a delay of half a second:

display-data.js:

setTimeout(
  () =>
    import("./data.js").then(({ data }) => {
      document.body.innerHTML = data;
    }),
  500
);

\
data.js:

export const data = "lorem ipsum";

\
index.html:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Lazy load</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
  </body>
</html>

index.html imports dislay-data.js, which after delay imports data.js

Lazy load example

Does the ES Module Cover All We Need in Modern JS?

Although native ES modules significantly improve previous models of including stuff, they lack a few essential features for modern JavaScript development. Right now, you cannot do the following:

\

  1. Import types other than JS. Some other files are in the pipeline JSON, but it will be a long time before we get it in the browser.
  2. Import third-party libraries in a Node.js-like way. You could copy files over during the build and import them from a location inside node_modules, but it feels much more complicated than just import “library”.
  3. There is no transpilation. Plenty of modern JS is written in other languages—for example, TypeScript. Even pure JS needs transpilation to support older browsers or use the most recent language features.

Because of these reasons, in most projects, you see JS bundlers, a kind of compiler that prepares the build for the deployments. If you are interested in bundlers, let me know in the comments and check out the links.

Summary

In this post, we walked through critical use cases of ES modules. The next step would be to set up some JS bundler to go over the limitations of the native modules.

\
First Published here

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...