DEV Community: Jagannath

Concurrency and Parallelism in Node.js

Jagannath — Sun, 04 May 2025 17:26:21 +0000

Introduction

When people think of Node.js, they think “non-blocking I/O”, “event loop”, or “JavaScript on the server.” But one of the most underrated capabilities of Node.js is how elegantly it handles concurrency and parallelism - despite Javascript being single-threaded.

If you’ve ever believed that Node.js isn’t built for CPU-intensive tasks or can’t run things in parallel, think again. Underneath the simplicity of asynchronous fs.readFile lies a surprisingly powerful ecosystem for managing concurrent and parallel tasks.

Let’s dive into this hidden gem and learn how to unlock its full potential.

Concurrency vs. Parallelism

Before we get into Node.js internals, let’s understand what these terms mean:

Concurrency is the ability to manage multiple tasks at once, regardless of whether they run in parallel.
Parallelism is doing multiple things at the same time, often leveraging multiple cores or threads.

Node.js is single-threaded since it is a runtime environment for JavaScript which is single-threaded. But, it is concurrent and even parallel under the hood. That’s the key insight that most developers fail to realize.

Node.js Event Loop

The event loop is the heart of Node.js concurrency. It allows Node to handle thousands of simultaneous I/O operations - like reading files, querying databases, handling HTTP requests, etc. without blocking.

Let’s consider an example:

const fs = require('fs');

console.log("Start");

fs.readFile('file.txt', 'utf8', () => {
  console.log("File read");
});

console.log("End");

Output:

Start
End
File read

Without using threads, Node.js can process the file read operation asynchronously, thanks to its event loop and non-blocking APIs.

But what about Parallelism?

This is where things get really interesting. It often gets overlooked.

Node.js can do real parallelism, even for CPU-heavy operations, via the following methods:

1. Worker Threads: Actual Multithreading in JavaScript

A surprisingly underused module in Node.js is worker_threads. It allows you to run JavaScript code in actual separate threads, perfect for CPU-bound work.

Let’s see an example of a CPU-intensive operation being run on a worker thread.

// index.js
const { Worker } = require('worker_threads');

const run = () => {
 return new Promise((resolve, reject) => {
   const worker = new Worker('./worker.js', { workerData: 40 });
   worker.on('message', resolve);
   worker.on('error', reject);
   worker.on('exit', (code) => {
    if (code !== 0)
        reject(new Error(`Worker stopped with exit code ${code}`));
    });
 });
};

run().then(console.log);

// worker.js
const { workerData, parentPort } = require('worker_threads');

function fibonacci(n) {
  return n <= 1 ? 1 : fibonacci(n - 1) + fibonacci(n - 2);
}

parentPort.postMessage(fibonacci(workerData));

2. Child Processes: Run external programs or scripts

Need to run a Python script, Bash command, or an isolated Node process? child_process module makes this easy.

Let’s see how a child-process can be spawned to carry out an operation. We will run a unix command to lists files in the current directory in long format as an example.

const { exec } = require('child_process');

exec('ls -la', (err, stdout) => {
  if (err) return console.error(err);
  console.log(stdout);
});

3. Cluster Module: Scaling across CPU Cores

For web servers, the cluster module can be used to fork multiple instances of Node.js. It helps to distribute workload among multiple CPU cores, making the app truly parallel.

const cluster = require('node:cluster');
const http = require('node:http');
const os = require("node:os");
const process = require("node:process");

const numCPUs = os.availableParallelism();

if (cluster.isPrimary) {
  console.log(`Primary process with ID:${process.pid} is running`);

  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`worker process with ID:${worker.process.pid} exited`);
  });
} else {
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('hello world\n');
  }).listen(3000);

  console.log(`Worker process with ID:${process.pid} started`);
}

The libuv Thread Pool

Even when you don’t use workers or child processes, Node.js runs I/O operations in a thread pool (via libuv) under the hood - allowing tasks like fs.readFile , crypto.pbkdf2 , dns.lookup , etc. to run in parallel under the hood.

Conclusion

Node.js is not just for I/O. It’s a surprisingly capable runtime for concurrent and even parallel workloads. What’s often seen as a limitation “JavaScript is single-threaded”, is in fact a design trade-off backed by powerful native systems like libuv, worker threads, and OS-level processes.

Whether you’re building APIs, doing heavy computation, or scraping the web in batches, Node.js gives you the tools - you just have to reach for them.

Internationalization in React: A Beginner's Guide to i18n

Jagannath — Sun, 27 Apr 2025 12:34:32 +0000

Introduction

Internationalization (i18n) and localization (l10n) are essential for building web applications that cater to users across different languages and regions across the world. Internationalization is the process of enabling an application to be easily adaptable in various languages and locales, while localization involves translating and formatting content for a specific language or region. As the internet is available on a global scale, providing a localized experience enhances user satisfaction and expands your app's reach.
React, by default, doesn't include built-in internationalization support, but there are powerful libraries available that simplify this process. One of the most widely used libraries for this purpose is i18next, along with its React bindings react-i18next. In this guide, we'll walk through how to set up i18next in a React app, manage translations, enable dynamic language switching, and follow best practices for internationalization.

Setting Up Localization in a React App

1. Installing dependencies

First, install the necessary libraries:

npm install i18next react-i18next

This installs the core i18next library and its integration with React.

2. Project structure for translations

Organize the translations in JSON files within a folder structure like this:

src/
  config/
    locales/
      en/
        translation.json
      es/
        translation.json
      hi/
        translation.json

Each translation.json file contains key-value pairs for translated text.

Example:
en/translation.json

{
  "greeting_message": "Hi, how are you?"
}

es/translation.json

{
  "greeting_message": "¡Hola, ¿cómo estás?"
}

hi/translation.json

{
  "greeting_message": "नमस्ते | आप कैसे हैं?"
}

3. Initializing i18next

Create a configuration file to initialize i18next:

src/config/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslations from './locales/en/translation.json';
import esTranslations from './locales/es/translation.json';
import hiTranslations from './locales/hi/translation.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslations },
    es: { translation: esTranslations },
    hi: { translation: hiTranslations },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

4. Loading i18n in Your App

Import the i18n configuration in your app root file. The following is an example that uses vite to bootstrap a react app.

src/main.jsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import './config/i18n';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Translating Text in Components

Use the useTranslation hook to translate text in any component. Let's create a Greeting.jsx component to greet the user.

import { useTranslation } from 'react-i18next';

export default function Greeting() {
  const { t } = useTranslation();
  return <h1>{t('greeting_message')}</h1>;
}

You can also interpolate dynamic values using placeholders:
en/translation.json

{
  "welcome_user": "Welcome, {{name}}!"
}

Component:

<p>{t('welcome_user', { name: 'Baburao' })}</p>

Dynamic Language Switching

Enable users to switch languages at runtime using i18n.changeLanguage . Let's create a LanguageSwitcher.jsx component for this purpose.

import { useTranslation } from 'react-i18next';

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const handleLanguageChange = (e) => {
    i18n.changeLanguage(e.target.value);
  };

  return (
    <select onChange={handleLanguageChange} value={i18n.language}>
      <option value='en'>English</option>
      <option value='es'>¡Español!</option>
      <option value='hi'>हिंदी</option>
    </select>
  );
}

Results

Best Practices

Plan early: Incorporate i18n from the start to avoid retrofitting later.
Meaningful keys: Use descriptive keys like "nav.home" rather than full sentences.
Avoid concatenation: Use complete sentences in translation files and placeholders for dynamic content.
Pluralization and formatting: Utilize i18next's support for pluralization and date/number formatting.
Test thoroughly: Check your app in multiple languages for layout issues and missing translations.
RTL language support: Ensure your app supports right-to-left languages by adjusting layouts and direction attributes.

Conclusion

Internationalizing a React app is straightforward with tools like i18next. With this approach, you can create a user-friendly multilingual application. Following best practices ensures your app remains scalable and accessible to a global audience.

Scalable File Upload System with React.js, Express.js and AWS S3 (Using AWS SDK v3)

Jagannath — Fri, 18 Apr 2025 20:10:52 +0000

Introduction

File uploading is a common feature in web applications. AWS provides a robust solution with S3 (Simple Storage Service) as an object storage to store files as objects.
If your server handles every file directly, it quickly becomes a bottleneck as the client sends the entire file to the server which then sends it again to S3, using up CPU, memory, and bandwidth. That's why scalable systems offload this responsibility to cloud storage using pre-signed URLs. In this guide, we'll build a scalable file upload system using React.js, Express.js, AWS S3, and pre-signed URLs, powered by the modern AWS SDK v3.

In this guide, we’ll build a scalable file upload system using React.js, Express.js, AWS S3, and pre-signed URLs, powered by the modern AWS SDK v3.

What’s a Pre-Signed URL?

A pre-signed URL allows you to grant temporary upload/download access to a specific S3 object, without exposing your AWS credentials to the client or opening up public access.

Benefits

No server bottleneck: clients upload directly to S3.
Scalable: your server handles only metadata to create a pre-signed URL.
Secure: limited-time access, file type and path constraints.

Server-side Code

Let's see how we can create a simple file upload API using Express.js and AWS SDK v3.

import express from "express";
import dotenv from "dotenv";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { v4 as uuidv4 } from "uuid";

dotenv.config();
const app = express();
const PORT = process.env.PORT || 3000;

const s3 = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  },
});

app.get("/api/generate-presigned-url", async (req, res) => {
  const fileName = `${uuidv4()}.jpg`; // You can use other extensions or get extension from client side using query params
  const bucketName = process.env.S3_BUCKET_NAME;

  const command = new PutObjectCommand({
    Bucket: bucketName,
    Key: fileName,
    ContentType: "image/jpeg", // You could allow dynamic types by getting content type from client side using query params
  });

  try {
    const url = await getSignedUrl(s3, command, { expiresIn: 60 });
    res.json({ uploadURL: url, fileName });
  } catch (err) {
    console.error("Error generating pre-signed URL:", err);
    res.status(500).json({ error: "Could not generate pre-signed URL" });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Client-side Code

Let's create a simple React component to upload a file from client side.

import React, { useState } from 'react';

export default function S3Uploader() {
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);

  const handleUpload = async () => {
    if (!file) {
      alert('No file selected');
      return;
    }

    try {
      setUploading(true);

      // Step 1: Get pre-signed URL from backend
      const res = await fetch(`${process.env.SERVER_BASE_URL}/api/generate-presigned-url?fileName=${encodeURIComponent(file.name)}`);
      const { uploadURL, fileName } = await res.json();

      // Step 2: Upload the file to S3 using the pre-signed URL
      const upload = await fetch(uploadURL, {
        method: 'PUT',
        headers: { 'Content-Type': file.type },
        body: file,
      });

      if (!upload.ok) {
        alert('Upload failed!');
        return;
      }

      alert(`File uploaded! Name: ${fileName}`);
    } catch (err) {
      console.error(err);
      alert('Something went wrong!');
    } finally {
      setUploading(false);
      setFile(null);
    }
  };

  return (
    <div>
      <input
        type="file"
        accept="image/jpeg"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
      />
      <button
        onClick={handleUpload}
        disabled={!file || uploading}
      >
        {uploading ? 'Uploading...' : 'Upload'}
      </button>
    </div>
  );
};

Improvements

Modify pre-signed URL endpoint to accept command type based on query params to use GetObject command for downloading files.
Validate file types and size on the backend before generating a pre-signed URL.
Store file metadata in your DB after upload for future use.
Add authentication to protect the pre-signed URL endpoint.

Summary

Pre-signed URLs are a clean, efficient, and secure way to implement file uploads, keeping scalability in mind. With the AWS SDK v3, the integration is simple, modular and future-proof.

My First Open Source Contribution

Jagannath — Sun, 22 Oct 2023 06:49:37 +0000

Hacktoberfest 2023 marked my first foray into the world of open source contributions. In this article, I'll share the highlights of my journey, from selecting the right project to the valuable lessons learned along the way.

My open source journey began with the curiosity to give back to the community. After diligent research and exploration, I found a suitable project related to web development that aligned with my interests and skills.

I added a new feature, adhering to the project's guidelines and coding standards. Collaboration with experienced maintainers provided valuable feedback and guidance throughout the process.

I faced some challenges, impostor syndrome being the biggest one apart from technical hurdles and time management. Through these obstacles, I learned the power of collaboration, the abundance of learning opportunities, and the value of building a strong developer portfolio.

My inaugural open source contribution in Hacktoberfest 2023 was a remarkable experience that reinforced the importance of giving back to the open source community and the incredible personal and professional growth it offers. If you haven't ventured into open source yet, I highly recommend giving it a try. It's a journey worth embarking on.