So what is a module? Essentially, a module is a separate TypeScript file that exposes classes, interfaces, or functions for reuse in other parts of the project. Creating modules helps to structure your code files into logical groups. As your application becomes larger and larger, it makes sense to have each of your Models, Views, Controllers, helper functions, and so on, in separate source files, so that they can be easily found.
Consider the following directory tree:
In this project structure, we have a separate directory for controllers, models, utils, and views. Within each of these directories, we have several files. Each filename is a clear indication of what we expect the file to contain. A FooterControler.ts file, for example, is expected to contain a controller class that handles the footer of our application. This structure makes our programming lives much simpler.
The problem with so many source files is that each file needs to be referenced by our HTML page in order for the application to work. Given the preceding directory structure, our HTML page would need to name each file as a source script, as follows:
<html>
<head>
<script src="./Main.js"></script>
<script src="./controllers/FooterController.js"></script>
<script src="./controllers/LoginController.js"></script>
<script src="./controllers/MainPageController.js">
</script>
<script src="./controllers/MenuBarController.js"></script>
<script src="./controllers/ProductListController.js">
</script>
<!--all other files here ..-->
<script src="./views/ToolbarView.js"></script>
</head>
<body>
</body>
</html>
Including each JavaScript file in the HTML page is both time-consuming and error-prone. To overcome this issue, there are two options available—either use a bundling process, or use a module loader. Bundling essentially means that we run a post-compile step to copy (or bundle) all of the source files into a single file, so that we only need to include a single file in our HTML page. While this is a valid solution to our problem, it means that the HTML page must load this bundled file all in one go before the web page is ready to render. If this bundled file is large, it means that our browser will need to wait until the file is loaded, which could impact on our overall page loading time.
Module loaders, on the other hand, allow the browser to load all files simultaneously in separate threads, meaning that our page loading time is significantly reduced. Module loaders also allow for each of our individual JavaScript source files to define which files they have a dependency on. In other words, if our HTML page loads the Main.js file, and the Main.js file specifies that it needs the FooterController.js file as well as the MainPageController.js file, the module loader will ensure that these two files are loaded before executing the logic in the Main.js file. This technique essentially allows us to define a dependency tree per source file.