{"componentChunkName":"component---src-templates-tags-js","path":"/tags/module/","result":{"data":{"allMarkdownRemark":{"totalCount":2,"edges":[{"node":{"id":"3a2ef0c1-4853-57b8-9882-8f239761ed6f","html":"

If you ever stumbled upon a piece of vanilla JavaScript code and wanted to refactor it to a module, or have a CommonJS module and want to convert it to ES6 Modules, you might have faced a couple of tricky situations. I had to go through one of those recently and stumbled upon some differences/points that you need to be aware of when working with modules. As always, thought sharing these would help someone else, so here we go 😊.

\n\n

CommonJS & require

\n

This is the most common type of code seen on many open source projects before ES6 was put on earth by the GODS 😁.

\n

Usage

\n\n \n Copy\n \n \n
const _ = require('underscore'); // from an npm package \r\n\r\nconst reverseString = require('./reverseString.js'); // from internal module
\n

Definition

\n

In the reverseString.js you would need to write something like this to get it working:

\n sentence.split("").reverse().join("");\r\n\r\nmodule.exports = reverseString;`, `87112583620739600000`)\"\n >\n \n Copy\n \n \n
const reverseString = (sentence) => sentence.split(\"\").reverse().join(\"\");\r\n\r\nmodule.exports = reverseString;
\n

The only thing you need to pay attention to is that the value you assign to module.exports is the same you get when using require. And if you want to use the function you just exported:

\n\n \n Copy\n \n \n
const reverseString = require('./reverseString.js');\r\n\r\nconsole.log(reverseString(\"madam\")); // madam, gotcha 😂
\n

Multi export

\n

In real life situations, we will need to export more than one function from our module. This is as easy as wrapping all of those in an object. Imagine you have a file called stringHelpers.js:

\n {...};\r\nconst toUpperCase = (sentence) => {...};\r\nconst convertToCamelCase = (sentence) => {...};\r\n\r\n\r\nmodule.exports = {\r\n reverseString: reverseString, \r\n toUpperCase, // you can omit the assignment if the name is equal\r\n toLowerCase: convertToLowerCase,\r\n};`, `7546110563202291000`)\"\n >\n \n Copy\n \n \n
const reverseString = (sentence) => {...};\r\nconst toUpperCase = (sentence) => {...};\r\nconst convertToCamelCase = (sentence) => {...};\r\n\r\n\r\nmodule.exports = {\r\n  reverseString: reverseString, \r\n  toUpperCase, // you can omit the assignment if the name is equal\r\n  toLowerCase: convertToLowerCase,\r\n};
\n

As you can see, the value of the module.exports will be an object, which means when using it, you will have to use the properties on the object:

\n\n \n Copy\n \n \n
const stringHelpers = require('./stringHelpers.js');\r\n\r\nconsole.log(stringHelpers.reverseString('racecar')); // racecar 🤣
\n

We can also rewrite our module in a different way:

\n {...};\r\nmodule.exports.toUpperCase = () => {...};\r\nmodule.exports.toLowerCase = () => {...};`, `24208613915776045000`)\"\n >\n \n Copy\n \n \n
module.exports = {};\r\n\r\nmodule.exports.reverseString = () => {...};\r\nmodule.exports.toUpperCase = () => {...};\r\nmodule.exports.toLowerCase = () => {...};
\n

These two ways of creating the module are exactly the same, it’s up to you which convention to follow.

\n

ES6 Modules

\n

ES6 Modules is created to create a format which both CommonJS and AMD (Async Module Definition) users are happy with. In their simplest form compared to CommonJS approach, ES6 Modules always export an object.

\n {...};\r\n\r\nexport default reverseString;`, `66089320339709160000`)\"\n >\n \n Copy\n \n \n
const reverseString = (sentence) => {...};\r\n\r\nexport default reverseString;
\n

Default export

\n

One of the major benefits of having modules are to hide the internal implementation details and expose only what’s needed. In this case I am just exporting one function, and in addition I am exporting it as default. When you export something as default, you get to import it with their original name or even an alias. Plus you get to omit the curly braces.

\n\n \n Copy\n \n \n
import reverseString from './reverseString.js';\r\n\r\nimport defaultExport from './reverseString.js';\r\n\r\nconsole.log(reverseString('madam')); //madam\r\nconsole.log(defaultExport('madam')); //madam
\n

\"Made

\n

If you look into the object which is exported from the file, you will see below object:

\n {...}\r\n}`, `79072593923678420000`)\"\n >\n \n Copy\n \n \n
{\r\n  default: (sentence) => {...}\r\n}
\n

You can also export the function directly:

\n {...};`, `39320245249825420000`)\"\n >\n \n Copy\n \n \n
export const reverseString = (sentence) => {...};
\n

Which will result in:

\n {...}\r\n}`, `51429440706387706000`)\"\n >\n \n Copy\n \n \n
{\r\n  reverseString: (sentence) => {...}\r\n}
\n

In which case you will need to use its name to be able to import it, plus you have to use curly braces:

\n\n \n Copy\n \n \n
import { reverseString } from './reverseString.js';\r\n\r\nconsole.log(reverseString('madam')); //madam
\n

Mixed export

\n

You can also have a default export alongside named ones:

\n {...};\r\nexport const toUpperCase = (sentence) => {...};\r\nconst convertToCamelCase = (sentence) => {...};\r\n\r\nexport default convertToCamelCase;`, `11247761288117864000`)\"\n >\n \n Copy\n \n \n
export const reverseString = (sentence) => {...};\r\nexport const toUpperCase = (sentence) => {...};\r\nconst convertToCamelCase = (sentence) => {...};\r\n\r\nexport default convertToCamelCase;
\n

Which then will give you:

\n {...},\r\n toUpperCase: (sentence) => {...},\r\n default: (sentence) => {...}\r\n}`, `19537403236813767000`)\"\n >\n \n Copy\n \n \n
{\r\n  reverseString: (sentence) => {...},\r\n  toUpperCase: (sentence) => {...},\r\n  default: (sentence) => {...}\r\n}
\n

And when importing, you can use their names, or import everything in one object:

\n\n \n Copy\n \n \n
import convertToCamelCase, { reverseString, toUpperCase } from './stringHelpers.js';\r\n\r\n// or\r\n\r\nimport * as stringHelpers from './stringHelpers.js';
\n

Now to be fair, you can change the name of a named export after exporting too:

\n\n \n Copy\n \n \n
import { reverseString as madeUpName } from './stringHelpers.js';
\n

Importing the whole module

\n

Sometimes you have a block of code which needs to be executed without the need to access any of the module’s internal values. In this case you can import the whole module just to have its global code executed:

\n\n \n Copy\n \n \n
// other code or possible exports\r\n\r\nwindow.addEventListener(\"load\", function() {\r\n    console.log(\"Window is loaded\");\r\n});
\n

Then import the whole module:

\n\n \n Copy\n \n \n
import './loadEventListener.js';
\n

Why should you use modules 😍?

\n

There are many benefits when it comes to use ES6 Modules (or even CommonJS format). I will go through some of those here:

\n
    \n
  • Ease in sharing the code (both internal and between projects).
    • \n
  • Independant testability.
    • \n
  • Having ability to hide the implementation details.
    • \n
  • Single responsibility principle, code can be split in smaller chunks with a specific purpose.
    • \n
  • Simplifying dependency detection/injection.
    • \n
  • Defining clear interface for a block of code.
    • \n
  • Can be used alongside a dependency injection system to load a block of code.
    • \n
  • Can help the tree shaking to eliminate unused code.
    • \n
\n

What’s the catch 🤔?

\n

There are a few points you should be aware of while using ES6 Modules:

\n
    \n
  • They are running in strict mode by default (you don’t need to have use strict anymore).
    • \n
  • Top level value of this is undefined.
    • \n
  • Top level variables are local to the module.
    • \n
  • ES6 Modules are loaded and executed asynchronously. This means the browser will finish parsing and loading the HTML first, and then executes the module code. The load can be in parallel or be done beforehand using link rel=preload.
    • \n
\n

Trick or treat?

\n

This one is probably my favourite part. You can dynamically load the module and execute it. This is done by using the import keyword as a function rather than normal command.

\n {\r\n // Do something with the module.\r\n });`, `43968591991716040000`)\"\n >\n \n Copy\n \n \n
import('/modules/my-module.js')\r\n  .then((module) => {\r\n    // Do something with the module.\r\n  });
\n

Or even better:

\n\n \n Copy\n \n \n
const module = await import('/modules/my-module.js');
\n

Wow that’s great, but why 🧐?

\n

Suppose you have an application which has different user experience or behaviour for mobile vs desktop. This problem can’t be solved just by having a responsive design, so you build a page renderer which loads and renders each page based on visitor’s platform.

\n

Technically this is just a strategy pattern where the page renderer decides which module to load at run time. This can be solved easily using dynamic imports. There are many other use cases out there which can be benefited from dynamic imports.

\n

However, with great power, comes great responsibility. You need to be careful when to use this fantastic feature as it has its own drawbacks. At the least, you lose automatic bundling of lazy-loaded chunks, type inference and more.

\n

How can I use them?

\n

I’ve shown you many examples in this article how to consume a module in another file or module. However, sometimes you need to consume them in browser (from HTML). Chrome, Safari, Firefox and Edge all support ES6 Modules, however you need to change your script tag’s type from script to module:

\n\n \n Copy\n \n \n
// html.js\r\nexport function tag (tag, text) {\r\n  const el = document.createElement(tag)\r\n  el.textContent = text\r\n\r\n  return el\r\n}
\n\r\n import { tag } from './html.js'\r\n\r\n const h1 = tag('h1', ' Hello Modules!')\r\n document.body.appendChild(h1)\r\n`, `32230064003187663000`)\"\n >\n \n Copy\n \n \n
<script type=\"module\">\r\n  import { tag } from './html.js'\r\n\r\n  const h1 = tag('h1', ' Hello Modules!')\r\n  document.body.appendChild(h1)\r\n</script>
\n

Or just simply import the module file into another file and use external reference:

\n\n \n Copy\n \n \n
// app.js\r\nimport { tag } from './html.js'\r\n\r\nconst h1 = tag('h1', ' Hello Modules!')\r\ndocument.body.appendChild(h1)
\n`, `93419032564653050000`)\"\n >\n \n Copy\n \n \n
<script type=\"module\" src=\"app.js\"></script>
\n

Tip: There are still some old browsers out there cough IE11 cough which doesn’t support it, so make sure you have a back up plan. This can be done using nomodule attribute.

\n\r\n`, `7448234496639384000`)\"\n >\n \n Copy\n \n \n
<script type=\"module\" src=\"module.js\"></script>\r\n<script nomodule src=\"fallback.js\"></script>
\n

Summary

\n

We had a look at before and after ES6 Modules and saw some of the differences in syntax. We saw the power of the module system in JavaScript and its benefits when it comes to using it in larger code bases. And at last we reviewed dynamic import which has massive potential but should be used with cautious.

\n

Hope you’ve enjoyed the read and till next time 👋🏼.

","timeToRead":6,"frontmatter":{"title":"JavaScript modules, the good, the bad and the ugly 🧐","unformattedDate":"2019-08-27T00:00:00.000Z","date":"Aug 27, 2019","path":"/js-modules/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","module"],"thumbnail":null}}},{"node":{"id":"c3b9a071-ca6c-5ec3-a3f4-cf19e0df7a17","html":"

Well for a long time I wanted to write a blog post about migrating Angular 1.x to 2, however, before doing so I thought it is really helpful to write about some prerequisites of that.

\n\n

This is the third article in ES6 new features series.

\n

Part I

\n

Part II

\n

9. Classes in ES6

\n

In many ways, they are a sham. Javascript classes don’t really exist other than for cosmetic reasons. They are syntactic sugar over existing Javascript prototypical inheritance. The reason for this was to ensure backwards compatibility, classes merely give you a cleaner way to organise your code.

\n

If you love object-oriented programming (OOP), then you’ll love this feature. In ES5 there wan not a class keyword.

\n\n \n Copy\n \n \n
class myClass {\r\n  constructor(name = 'default', age = 80) {\r\n    this.name = name\r\n    this.age = age\r\n  }\r\n\r\n  sayName() {\r\n    alert(this.name)\r\n  }\r\n\r\n  sayAge() {\r\n    alert(this.age)\r\n  }\r\n}\r\n\r\nconst myInstance = new myClass()\r\nmyInstance.sayName()
\n

Notice that I’m using default parameter values for name and age. Also, method names don’t need to have the word function or the colon (:) anymore.

\n

When it comes to inheritance it is very similar to OOP programming languages such as C# or any other one. The basic inheritance can be implemented as follow:

\n\n \n Copy\n \n \n
class childClass extends myClass {\r\n  constructor(name, age) {\r\n    super(name, age)\r\n  }\r\n\r\n  // Override the someClass method above\r\n  sayName() {\r\n    // This will call someClass.sayName() triggering the old alert\r\n    // Which will just display our name\r\n    super.sayName()\r\n\r\n    // This will trigger the new alert which has labels and our age\r\n    alert('Name:' + this.name + ' Age:' + this.age)\r\n  }\r\n}\r\n\r\nconst myChild = new childClass('dwayne', 27)\r\nmyChild.sayName()
\n

Notice that to call the parent constructor, effortlessly invoke super() with expected parameters. Isn’t it amazing?

\n

10. Modules in ES6

\n

As you might now, there were no native modules support in JavaScript before ES6. People came up with AMD, RequireJS, CommonJS and other workarounds. Now there are modules with import and export operands.

\n

The ES6 module standard has two parts:

\n
    \n
  • Declarative syntax (for importing and exporting)
    • \n
  • Programmatic loader API: to configure how modules are loaded and to conditionally load modules
    • \n
\n\n \n Copy\n \n \n
export const myName = 'Yaser'\r\n\r\nexport function getCreditCardNumber() {\r\n  //Not implemented yet, you can leave yours\r\n  //in the comments for the moment 😉\r\n}
\n

In other modules, we use import {myName} from 'my-module'syntax. For example:

\n\n \n Copy\n \n \n
import { myName, getCreditCardNumber } from 'module'\r\n\r\nconsole.log(myName) // Yaser
\n

Or we can import everything as a variable in other modules and use it as an object literal:

\n\n \n Copy\n \n \n
import * as myData from 'module'\r\n\r\nconsole.log(myData.myName) // Yaser
\n

Modules that only export single values are very popular in the Node.js community. But they are also common in front-end development where you often have constructors/classes for models, with one model per module. An ECMAScript 6 module can pick a default export, the most important exported value. Default exports are especially easy to import.

\n

The following ES6 module “is” a single function:

\n\n \n Copy\n \n \n
//------ myFunc.js ------\r\nexport default function () { ... };\r\n\r\n//------ main1.js ------\r\nimport myFunc from 'myFunc';\r\n\r\nmyFunc();
\n

An ES6 module whose default export is a class looks as follows:

\n\n \n Copy\n \n \n
//------ MyClass.js ------\r\nexport default class { ... };\r\n\r\n//------ main2.js ------\r\nimport MyClass from 'MyClass';\r\nlet instance = new MyClass();
\n

And finally having both default and named exports together will look like something like the following code. I used some underscore metadata to show how it can be used and simplify everything.

\n\n \n Copy\n \n \n
//------ underscore.js ------\r\nexport default function (obj) {\r\n    ...\r\n};\r\nexport function each(obj, iterator, context) {\r\n    ...\r\n}\r\nexport { each as forEach };\r\n\r\n//------ main.js ------\r\nimport _, { each } from 'underscore';
\n

11. How to use it

\n

Well ES6 is not currently supported by all browsers and also those who does support it only have implemented part of it, so you need a safe way to utilise its power.

\n

Here there are a couple of options but apparently best of which is Babel (which is a compiler). You can run it as a standalone tool or use with your build system. There are Babel plugins for Grunt, Gulp and webpack (again my favourite).

\n

\n \n