Enhancing JavaScript Code with ES Modules: Export, Import, and Beyond

Avishka Kapuruge — Sat, 20 Jul 2024 17:21:41 +0000

JavaScript modules are a way to organize and reuse JavaScript code. Using modules can break up the code into smaller, manageable pieces, which can then be imported and used in other parts of an application as needed. This modular approach helps in maintaining a clean codebase, makes it easier to debug, and enhances code reusability.

ES Modules vs. CommonJS

There are different module systems in the JavaScript ecosystem. ES Modules (ESM) is the standard in the ECMAScript specification, used mainly in the browser and increasingly supported in Node.js. CommonJS is another module system that was traditionally used in Node.js.

ES Modules (ESM)

ES Modules (ESM) are a standardized module system in JavaScript, which was introduced in ECMAScript 2015 (ES6). They allow for better organization and reusability of code by enabling the import and export of functions, objects, and primitives between different files. This module system is widely supported in modern JavaScript environments, including browsers and Node.js.

Export and Import

The export keyword labels variables and functions that should be accessible from outside the current module, allowing them to be reused in other parts of your application. The import keyword allows the import of these functionalities from other modules, enabling modular programming and code reuse.

Named export allows multiple items to be exported from a module. Each item must be imported with the same name it was exported with.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

When importing named exports, you need to use the same names as the exports.

import { greet } from './module.js';
greet(); // Hello, World!

Default export allows a single default export per module. The item can be imported with any name.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

When importing the default export, you can use any name.

import message  from './module.js';
message(); // Hello, World!

Using Modules in HTML

When using modules in a browser, you need to include them in your HTML file. You use the type="module" attribute in the <script> tag.

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

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Js:modules</title>
</head>

<body>
   <script type="module" src="main.js"></script>
</body>

</html>

Browser Support

Modern browsers support JavaScript modules natively. This includes Chrome, Firefox, Safari, Edge, and Opera. However, older browsers like Internet Explorer do not support modules. For those, you may need to use a bundler like Webpack or a transpiler like Babel.

Using Modules in Node.js
To use ES Modules in Node.js, you can use the .mjs file extension or set "type": "module" in the package.json file.

// package.json
{
 "type": "module"
}

Import Aliases

Aliases in JavaScript modules allow you to import and export functionalities using different names. This can be useful for avoiding naming conflicts or for providing more descriptive names in the context of the module that imports them.

// math.js
export function add(a, b) {
   return a + b;
}
 export function subtract(a, b) {
   return a - b;
}

You can import these functions with different names using aliases:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Importing the Entire Module as an Alias

You can import the entire module as a single alias, which allows you to access all exports under a namespace.

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

Dynamic Import

You can also import modules dynamically using the import() function, which returns a promise. This is useful for code-splitting and lazy loading.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

In this example, the math.js module is loaded dynamically when the loadModule function is called.

CommonJS (CJS)

CommonJS is a module system primarily used in Node.js. It was the default module system before ES Modules were standardized and is still widely used in many Node.js projects. It uses require() to import modules and module.exports or exports to export functionality from a module.

In CommonJS, both module.exports and exports are used to export values from a module. exports is essentially shorthand for module.exports, allowing either to be used. However, it's typically advised to use module.exports consistently to avoid potential confusion or unexpected behaviour.

In this example, module.exports is assigned a function, so the require call in app.js returns that function.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

In this example, exports is used to add properties to module.exports. The require call in app.js returns an object with add and subtract functions.

// math.js
exports.add = function(a, b) {
   return a + b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

JavaScript modules offer numerous benefits that improve the organization, maintainability, and performance of code.

Reusability
Modules allow you to write reusable pieces of code that can be imported and used in different parts of your application or even in different projects.
Maintainability
By breaking code into smaller, self-contained modules, you can manage and maintain your codebase more effectively. This makes it easier to update, refactor, and debug individual modules without affecting the entire application.
Code Splitting
Modules enable code splitting, which allows you to load only the necessary code when needed, improving initial load times and overall performance.
Improved Testing
Modular code is easier to test because you can test individual modules in isolation. This leads to more reliable and maintainable tests.
Tree Shaking
Modern module bundlers like Webpack and Rollup can perform tree shaking, a technique that removes unused code from the final bundle, resulting in smaller and more efficient code.

Conclusion

In JavaScript development, the introduction of ES Modules has marked a significant shift from the traditional CommonJS module system. ES Modules offer a standardized and efficient way to manage dependencies and improve maintainability. The export and import syntax provides a clear and concise way to define and use modules, promoting better organization and readability in the codebase.

What is OpenGL, WebGL, Three.js, and WebXR?

Avishka Kapuruge — Sat, 13 Jul 2024 18:08:01 +0000

OpenGL

OpenGL (Open Graphics Library) is a cross-language, cross-platform application programming interface (API) for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics processing unit (GPU), to achieve hardware-accelerated rendering. It is widely used in video games, CAD, virtual reality, scientific visualization, and more.

Resources:
OpenGL

WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. It is based on OpenGL ES (a subset of OpenGL for embedded systems).
Major browser vendors Apple (Safari), Google (Chrome), Microsoft (Edge), and Mozilla (Firefox) are members of the WebGL Working Group.

Resources:
WebGL
WebGL: 2D and 3D graphics for the web

Three.js

Three.js is a popular JavaScript library that simplifies the creation and display of 3D graphics in a web browser using WebGL. It supports VR and AR, offers cross-browser compatibility via WebGL, provides extensive tools for adding materials, textures, and animations, and allows for the integration of models from other 3D modeling software.

Key Features

Scene Graph: It uses a scene graph structure, allowing developers to create and manage 3D objects, cameras, lights, and other elements in a hierarchical manner.
Geometries and Materials: Three.js provides a variety of built-in geometries (e.g., cubes, spheres, planes) and materials (e.g., basic, lambert, phong, standard) that can be easily customized and combined.
Animation: The library supports animations, including skeletal animations, morph targets, and keyframe animations, making it suitable for creating animated 3D content.
Shaders and Post-Processing: Three.js allows the use of custom shaders written in GLSL and supports post-processing effects such as bloom, depth of field, and motion blur.

Resources:
Three.js
Fundamentals
Discover threejs

Other graphic libraries:
Babylon.js
A-Frame

WebXR

WebXR (Web Extended Reality) is a web standard that provides support for both virtual reality (VR) and augmented reality (AR) experiences directly in web browsers.

Resources:
WebXR
Fundamentals of WebXR

React Three Fiber (R3F)

React Three Fiber (R3F) is a powerful library that brings the capabilities of Three.js into the React ecosystem.

Resources:
R3F documentation
Building an interactive 3D event badge with React Three Fiber

Conclusion
OpenGL is a powerful API for creating high-performance graphics applications across various domains. WebGL extends these capabilities to the web, enabling rich, interactive graphics directly in browsers and integrating seamlessly with HTML5. Three.js further simplifies web-based 3D graphics creation with its extensive features, making it a popular choice for both simple visualizations and complex animations. WebXR brings VR and AR capabilities to the web, allowing developers to build immersive, cross-device experiences. React Three Fiber combines Three.js with React's declarative nature, making 3D graphics development more accessible and manageable in React applications.

Forem: Avishka Kapuruge