Home > software_development > What You Need To Know About Modularization and Bundlers In JavaScript

What You Need To Know About Modularization and Bundlers In JavaScript

Modularization is the breaking down of large codebase into smaller reusable modules. It facilitates ease of codebase management, integration of new features, and to build scalable applications without affecting other functionality.

By :Thomas Inyangđź•’ 1 Apr 2025

modularization javascript

Introduction

Modularization is the decomposition of a large code base into independent, reusable, manageable components called modules. This approach is similar to the 'divide and conquer' strategy from algorithm design, where complex systems are broken into smaller, more solvable parts. When a large code base is separated into modules, it gives room for the developers to improve code maintainability, reduce redundancy, and simplify collaboration.


Without modularization, the software codebase will grow large and as such increase complexity and code ambiguity making the codebase difficult to read, debug, or modify syntaxes without accidentally impacting other parts of the system. Other problems include:

  1. A challenge in collaboration and long build time–more developers cannot work on the same codebase simultaneously.
  2. More time is required to implement test features, as logic can’t be validated independently.
  3. Maintaining a large codebase is costly to maintain, as even small changes risk breaking dependencies.


In this post, I'll walk you through

  1. the concept of modularization and its relevance to software development using JavaScript programming language.
  2. Examples of modularization in JavaScript.
  3. How to Export and Import Modules in JavaScript.
  4. Tools needed to bundle large modularized Javascript codebase.

Prerequisite

  1. VSCode Editor.
  2. Knowledge of JavaScript Event.

What is Modularization in JavaScript?

JavaScript is a multi-paradigm programming language that is widely used for building dynamic software applications.


Javascript has a feature that can split a large codebase into reusable independent modules (files or components). This code-splitting approach allows developers to import and use these modules when and where they are needed which simplifies code management, reusability, and creates room for collaboration so other developers can work on separate modules simultaneously

Modularization in JavaScript is supported in modern browsers through commonJS or requireJS without the need for transpilation or any external tools.

Example of Modularization in JavaScript.

In this section, you will learn how to modularize your code base. To begin with, an example of Javascript modularization (module), let's get to see the different methods that are used to create modules in Javascript.


Javascript modules can be implemented either through CommonJS (`require/module.exports` in Node.js) or ES Modules (`import/export` in browsers), to organize functionality, reduce complexity, and streamline collaboration.


For this example, we will use the ES Modules method because of its ability to run natively on browsers without the use of WebPack.


Example.

This example is about creating modules (standalone files) that calculate and return the values of the area of a semi-circle and quadratic equation.


Step1

⇒Create a project dir (folder), javascript_module, and open it with a code editor (VSCode).

⇒Open the terminal and this command to initialize the project dir.

npm init -y.

This will initialize the project and also create a package.json file.

⇒In the package.json file make the following update by including "type": "module" and "start": "node index.js"

{
"name": "javascript_module",
"version": "1.0.0",
"description": "",
"type": "module",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Step2

⇒Navigate to the extensions section of VSCods and install LiveServer.

liveserver


Step3

Folder Structure: Your folder structure should be in this format

|---modules

| |---semiCircle.js

| |---quadratic.js

|

|---index.html

|---index.js

|---package.json


⇒ in the modules folder, create semiCircle.js and enter this code

export function SemiCircleArea(radius) {
let r = Number(radius);

if (radius === "") {
return "Please enter a radius";
}
return (Math.PI * r * r) / 2;
}

==>This code is a module due to the “export” keyword.

==>This function is used to calculate the area of a semi-circle, the radius value is passed into the function as argument, it will check if the input field for radius is empty, it returns a “Please enter a radius” when True, or returns the actual result.

P.s Math.PI is a javascript static data property that represents the ratio of a circumference.


⇒ Create quadratic.js in the modules folder and enter this code

export function solveQuadratic(a, b, c) {

const rule = b * b - 4 * a * c;
if (rule < 0) {
return "No real roots";
}

const root1 = (-b + Math.sqrt(rule)) / (2 * a);
const root2 = (-b - Math.sqrt(rule)) / (2 * a);
return [root1, root2];
}

==>This code is now a module because of the keyword “export” used in declaring the function.

==>The function is used to calculate quadratic equations, it will accept 3 arguments, a, b, and c.

==>It returns a “No real roots” message when the rule value is less than zero (0). If this is false… and returns both the subtraction and addition result of the operation in an array.

P.S Math.sqrt is a JavaScript method that returns the square root of a number.


Step4

In the index.js file, enter the following. This will be used to test the semi-circle module when a user enters a value–-radius via the browser.

import { SemiCircleArea } from "./modules/semiCircle.js";

document.getElementById("submit_circle").addEventListener("click", () => {
const radius = document.getElementById("radius").value;
const result = SemiCircleArea(radius);

document.getElementById(
"show_result"
).innerHTML = `Area of Semi-Circle: ${result}`;
});

==>In this code, the SemiCircle Area is imported as a module.

==>The addEventListener is used to get the HTML button element id which is submit_circle. The event is "click", which means that, when the button element is clicked, it triggers the SemiCircleArea function.

See Also: What you Need to Know about JavaScript Events

==>The radius value is obtained using the "document.getElementById("radius").value" from the input HTML element with id "radius".

==>The result is then populated to a p HTML element with the id "show_result".


Step5

Let’s use this in the html file. In the index.html file, enter this code.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Module</title>
</head>

<body>
<script type="module" src="./index.js"></script>
<h1>Calculate area of a semi-circle</h1>

<div class="container" id="circle" style="width: 200px; display: flex; flex-direction: column; gap: 10px;">
<label for="radius">Radius:
<input type="number" id="radius" value="" />
</label>

<button type="submit" id="submit_circle">Calculate Area of a Semi-Cricle</button>
<p id="show_result"></p>
</div>
</body>

</html>

⇒This is an entry code that will be used to collect the radius value from the user and calculate the area of a semi-circle when the button element (“Calculate Area of a Semi-Cricle”) is clicked via the browser.

⇒The input element type is set as a number, this means that no other data type will not be accepted


Step6

This step is to import and use the quadratic module.


In the index.js file, add the following after the semiCircle code base. This will be used to test the quadratic module when a user enters values–a, b, and c via the browser.

document.getElementById("calculate_quadratic").addEventListener("click", () => {
const a = document.getElementById("a").value;
const b = document.getElementById("b").value;
const c = document.getElementById("c").value;

const result = SolveQuadratic(a, b, c);

document.getElementById(
"show_result_quadratic"
).innerHTML = `Roots of the quadratic equation: ${result}`;
});

⇒This code is similar to that of a semi-circle with more add-ons.

⇒ the values for a, b, and c from all the associated HTML input fields.


Step8

Update the index.html file with this code.

<h1>Quadratic Calculation</h1>
<div class="container" id="circle" style="width: 200px ;display: flex; flex-direction: column; gap: 10px;">

<label for="a">Enter A value:
<input type="number" name="a" id="a" value="" />
</label>
<label for="b">Enter B value:
<input type="number" name="b" id="b" value="" />
</labe>
<label for="c">Enter C value:
<input type="number" name="c" id="c" value="" />
</labe>

<button type="submit" id="calculate_quadratic">Calculate Area of a Semi-cricle</button>
<p id="show_result_quadratic"></p>

</div>

⇒This code will be used to retrieve the values of a, b, and c.

⇒ When the HTML button (“Calculate Area of a Semi-cricle”) is clicked, the calculate_quadratic event is triggered.

⇒ The result is then shown in the HTML p tag with id (show_result_quadratic).

The complete codes.

⇒This is how the final index.js codebase will look like.

import { SolveQuadratic } from "./modules/quadratic.js";
import { SemiCircleArea } from "./modules/semiCircle.js";

// For SemiCircleArea function
document.getElementById("submit_circle").addEventListener("click", () => {
const radius = document.getElementById("radius").value;
const result = SemiCircleArea(radius);

document.getElementById(
"show_result"
).innerHTML = `Area of Semi-Circle: ${result}`;
});

// For SolveQuadratic function
document.getElementById("calculate_quadratic").addEventListener("click", () => {
const a = document.getElementById("a").value;
const b = document.getElementById("b").value;
const c = document.getElementById("c").value;

const result = SolveQuadratic(a, b, c);
document.getElementById(
"show_result_quadratic"
).innerHTML = `Roots of the quadratic equation: ${result}`;
});

See Also: How to Get Started with Web Development

⇒This is how the final index.html codebase will look like.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Module</title>
</head>
<body>
<script type="module" src="./index.js"></script>
<h1>Calculate area of a semi-circle</h1>

<div class="container" id="circle" style="width: 200px; display: flex; flex-direction: column; gap: 10px;">
<label for="radius">Radius:
<input type="number" id="radius" value="" />
</label>

<button type="submit" id="submit_circle">Calculate Area of a Semi-cricle</button>
<p id="show_result"></p>

</div>

<h1>Quadratic Calculation</h1>
<div class="container" id="circle" style="width: 200px ;display: flex; flex-direction: column; gap: 10px;">

<label for="a">Enter A value:
<input type="number" name="a" id="a" value="" />
</label>
<label for="b">Enter B value:
<input type="number" name="b" id="b" value="" />
</labe>
<label for="c">Enter C value:
<input type="number" name="c" id="c" value="" />
</labe>

<button type="submit" id="calculate_quadratic">Calculate Area of a Semi-cricle</button>
<p id="show_result_quadratic"></p>

</div>

</body>
</html>

Run The JavaScript Module Examples on The Browser.

In the VSCode editor, navigate to the bottom and click on the "Go Live" option. This will run the index.html which will allow users to enter all the values.

javascript modularization


What Tools Bundle your Modularized Project in JavaScript.

javascript bundling


After modularizing your project, you will need to bundle them as static assets. This is where tools like Webpack and Rollup are designed. They act as static module bundlers for modern JavaScript applications, they process your application, build a dependency graph from one or more entry points internally and then combine every module your project needs with single or multiple bundles, which are static assets to serve your content.


These tools enable developers to integrate modern ES6+ syntax, TypeScript, or CSS modules while ensuring cross-browser compatibility. Both Webpack and Rollup are advantageous as they are used to automatically resolve dependencies, and manage code organization, which then boosts code reusability, improves software maintenance, and supports codebase scaling.


By incorporating any of these bundlers into your development workflow, you are simplifying the management of large and ambiguous codebases, and also ensuring that your web applications run faster and more reliably.

Conclusion

In this post, I shared how Modularization is the breaking down of large codebase into smaller reusable modules. It facilitates ease of codebase management, integration of new features, and to build scalable applications without affecting other functionality. Also, modularization improves code readability and encourages reusability and overall maintenance.


You are encourage to apply the example that is used in this post for smaller task and leverage advance tools like Webpack and RollUp Bundlers for larger project with dependencies, and multiple files.


Please Share

console.logHello

You may also like