JavaScript Module System

Separate and Abstract code in its own scope, making it accessible and included again!

That’s the thing which JavaScript module systems help us to achieve. JavaScript applications tend to grow fast and without any kind of structure in-place, it would be very hard to keep a cleaner code-base. Traditionally different techniques like IIFE, Revealing Module Pattern etc are used to achieve modularity in the beginning but as application complexity grows more sophisticated systems are required and various module systems are available for us to use. This post will provide an introduction for these module system and in future posts we will be building on top of this knowledge.

In this Post I will describe what are JavaScript modules, why we need those and what are the benefits of using those.

If you are a C# developer, or a Java developer, we normally break down our code in different classes/files and then import those classes/files to another class (e.g. via using statement in C#) and with that the functionality is available in another classes to be used.
This way, we can structure and organize our code in a cleaner manner, This also promotes re-usability and separation of concerns etc.
JavaScript module system allow us to do same thing for the JavaScript and that is the focus of this post, to see how we can achieve the same effect ( separate and abstract code in its own scope, making it accessible and included again.)

Module system allows to separate code in different blocks (modules) and make it available in other parts of the application.
In JavaScript there are different formats and how to accomplish this challenge to separate and abstract code in its own scope, making it accessible and included again.

Module System depending on Environment

JavaScript can be executed on many places, to start with, in browser (for web UI ) and Node (for back-end services).

• Depending on the environment you are in (in a browser, or in a node application etc.) modules can and have to be written in many different systems, so that it can be used in many different environments.
• Each module system describes a different format in a way that code separation can be created (CommonJs, AMD, ESM).

Module Formats vs Loaders

• Module format is really just the syntax used to define the module. :Module Format -> Syntax.
• However, syntax is useless without something that understands how to execute it. That’s the role Module Loader play. they are usually JavaScript Libraries that you can include in your project.
• Using a particular module-format will also require a compatible module-loader. Not all module loaders support all module formats.

AMD VS ComonJS vs ESM

AMD and CommonJS are the popular module formats and the following details describe their general characteristics, However, the one which we are interested in is ECMAScript modules and we will use it in conjunction with TypeScript. For AMD and CommonJS you can search online for details, I just mention those here because you will most likely to read about those on various blog posts or articles.

Here is a code example of writing a basic module in typescript and then consuming this module in another module.

So this was the introduction to JavaScript module system. As I mentioned before that our focus in the upcoming posts will mostly involve typescript, so I will suggest you to visit http://www.typescriptlang.org/ to understand more about it. Also, typescript website will show you how to setup your development environment and some basic examples as well. In the next post we will be start our journey from this point onward. Happy Coding.