DEV Community: Ritik Banger

Best Practices for Designing Scalable and Resilient Systems

Ritik Banger — Wed, 13 Mar 2024 14:32:14 +0000

Hey developers! Are you looking to design robust systems that can handle changing requirements and unexpected failures? Here are some key points to consider:

Prioritize Requirements: Before diving into design, ensure you understand both the functional and non-functional requirements of your system.
Define Use Cases Clearly: Clearly define the system's use cases and constraints to guide your design decisions effectively.
Embrace Tradeoffs: Remember, there's no perfect solution. Design is about making tradeoffs that best suit your project's needs.
Flexibility is Key: Assume requirements will change, and design your system with flexibility in mind to adapt to these changes smoothly.
Ensure Fault Tolerance: Plan for failures by making your system fault-tolerant, anticipating that everything can and will fail at some point.
Avoid Over-Engineering: Don't add functionality until it's necessary. Over-engineering can lead to unnecessary complexity and maintenance overhead.
Scalability Matters: Design your system with scalability in mind from the beginning.
Horizontal Scaling Preference: Prefer horizontal scaling over vertical scaling for better scalability and resource utilization.
Implement Load Balancers: Ensure high availability and evenly distribute traffic with load balancers.
Choose Databases Wisely: Use SQL databases for structured data and ACID transactions, while opting for NoSQL databases for unstructured data.
Utilize Database Sharding: Scale SQL databases horizontally with database sharding for improved performance.
Optimize Data Retrieval: Utilize database indexing and search engines for efficient data retrieval.
Prevent Overloads: Implement rate limiting to prevent system overload and potential denial-of-service (DOS) attacks.
Real-Time Communication: Use WebSockets for real-time communication needs.
Failure Detection: Employ heartbeat mechanisms for timely failure detection.
Asynchronous Communication: Consider using message queues for asynchronous communication between components.
Partition Large Datasets: Implement data partitioning and sharding for handling large datasets effectively.
Denormalize for Performance: Consider denormalizing databases for read-heavy workloads to improve performance.
Decoupled Systems: Utilize event-driven architecture for building decoupled systems.
Reduce Latency: Use content delivery networks (CDNs) to reduce latency for a global user base.
Optimize for Write-Heavy Apps: Implement write-through cache for write-heavy applications to improve performance.
Optimize for Read-Heavy Apps: Use read-through cache for read-heavy applications to enhance performance.
Media Storage: Utilize blob/object storage for storing media files like images, videos, and documents.
Ensure Redundancy: Implement data replication and redundancy to avoid single points of failure.
Handle Traffic Spikes: Implement autoscaling to handle sudden traffic spikes seamlessly.
Background Task Processing: Utilize asynchronous processing for running background tasks efficiently.
Idempotent Operations: Make operations idempotent wherever possible to simplify retry logic and error handling.
Microservices Architecture: Consider using microservices for flexibility, scalability, and maintainability.
Analytics and Reporting: Utilize data lakes or data warehouses for analytics and reporting purposes.

By incorporating these best practices into your system design, you can create scalable, resilient, and high-performing applications that meet the demands of today's dynamic environments.

How to Build a Serverless Web Application

Ritik Banger — Tue, 12 Mar 2024 18:45:31 +0000

Ah, serverless computing - the buzzword that's been taking the tech world by storm. But what exactly is it, and why should you care? Simply put, serverless computing allows you to build and run applications without worrying about provisioning or managing servers. It's like having an army of invisible servers at your beck and call, ready to handle your application's logic whenever it's needed.

One of the coolest use cases for serverless technology is building web applications. Imagine a world where you can create a website without having to worry about scaling, patching, or maintaining servers. Sounds too good to be true, right? Well, buckle up, because that's exactly what we're going to do in this article.

Serverless is a cloud computing execution model where the cloud provider dynamically manages the allocation and provisioning of servers. With serverless, you don't have to worry about provisioning, scaling, or managing servers yourself. Instead, you deploy your code, and the cloud provider handles the server management and execution for you.

In a serverless architecture, your application's code runs in stateless compute containers that are event-triggered, ephemeral (they only run when needed and shut down automatically after use), and fully managed by the cloud provider. These containers, called "functions" in the serverless world, are typically triggered by events such as HTTP requests, database events, queue services, monitoring alerts, or other custom triggers.

The key characteristics of serverless computing include:

No Server Management: You don't have to provision, scale, or manage any servers. The cloud provider handles all the infrastructure management for you.
Event-Driven: Functions are triggered by specific events or requests, rather than running continuously.
Automatic Scaling: The cloud provider automatically allocates the necessary resources to handle the incoming workload, scaling out seamlessly as needed.
Pay-per-Use Billing: You only pay for the compute time your functions consume when they are running, plus any other cloud services used. This can result in significant cost savings compared to maintaining always-on servers.
High Availability and Fault Tolerance: Cloud providers ensure high availability and fault tolerance for serverless functions across multiple availability zones.

Popular serverless compute services include AWS Lambda, Google Cloud Functions, Azure Functions, and IBM Cloud Functions. These services allow you to deploy and run your code without provisioning or managing servers, enabling you to focus on writing application logic instead of infrastructure management.

Serverless architectures are well-suited for various workloads, including web applications, APIs, data processing, IoT backends, and more. They can help reduce operational overhead, increase scalability, and potentially lower costs for certain types of applications.

Setting the Stage

Before we dive into the code, let's set up our development environment. You'll need an AWS account and the AWS CLI installed on your machine. We'll also be using Node.js and the Serverless Framework, a popular open-source tool that makes building and deploying serverless applications a breeze.

First, install the Serverless Framework globally:

npm install -g serverless

Next, create a new directory for your project and navigate to it:

mkdir serverless-web-app
cd serverless-web-app

Initialize a new Serverless project:

serverless create --template aws-nodejs --path my-service

This will create a new directory my-service with a basic Lambda function and other boilerplate files.

Building the Web Application

Our serverless web application will consist of two main components: a static website hosted on AWS S3, and a Lambda function to handle server-side logic. Let's start with the static website.

Create a new directory called website in your project's root directory, and add an index.html file with some basic HTML:

<!-- website/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Serverless Web App</title>
  </head>
  <body>
    <h1>Welcome to my Serverless Web App!</h1>
    <p>This is a static website hosted on AWS S3.</p>
  </body>
</html>

Now, let's configure our Serverless project to deploy this website to an S3 bucket. Open serverless.yml and add the following resources:

# serverless.yml
service: serverless-web-app

provider:
  name: aws
  runtime: nodejs18.x

resources:
  Resources:
    WebsiteBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:service}-${opt:stage, self:provider.stage}
        WebsiteConfiguration:
          IndexDocument: index.html

# ... (existing Lambda function configuration)

This will create an S3 bucket with the name serverless-web-app-[stage], where [stage] is the deployment stage (e.g., dev, prod). The bucket will be configured to serve the index.html file as the website index.

To deploy the website, run:

serverless deploy

This will create the S3 bucket and upload the index.html file. The CLI output will include the website URL, which you can visit in your browser to see the static website.

Adding Server-Side Logic with Lambda

Now that we have our static website set up, let's add some server-side logic using AWS Lambda. We'll build a simple "contact form" functionality, where users can submit their name and email, and we'll save the data to a DynamoDB table.

First, we need to create the DynamoDB table. Add the following resource to serverless.yml:

# serverless.yml
resources:
  Resources:
    # ... (existing resources)
    ContactsTable:
      Type: AWS::DynamoDB::Table
      Properties:
        TableName: ${self:service}-contacts-${opt:stage, self:provider.stage}
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        BillingMode: PAY_PER_REQUEST

This will create a DynamoDB table called serverless-web-app-contacts-[stage] with a hash key id.

Next, let's create the Lambda function that will handle the contact form submissions. In the my-service directory, create a new file called handler.js with the following code:

// handler.js
import AWS from 'aws-sdk';

const dynamoDb = new AWS.DynamoDB.DocumentClient();

const TABLE_NAME = process.env.CONTACTS_TABLE;

export const handler = async (event) => {
  const { name, email } = JSON.parse(event.body);

  const params = {
    TableName: TABLE_NAME,
    Item: {
      id: `contact-${Date.now()}`,
      name,
      email,
    },
  };

  try {
    await dynamoDb.put(params).promise();
    return {
      statusCode: 200,
      body: JSON.stringify({ message: 'Contact form submitted successfully' }),
    };
  } catch (err) {
    console.error(err);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'Error submitting contact form' }),
    };
  }
};

This Lambda function expects a JSON payload with name and email properties in the event body. It generates a unique ID for the contact, and stores the contact data in the DynamoDB table.

Finally, we need to configure the Lambda function in serverless.yml:

# serverless.yml
functions:
  app:
    handler: handler.handler
    events:
      - http:
          path: submit-contact
          method: post
          cors: true
    environment:
      CONTACTS_TABLE: ${self:service}-contacts-${opt:stage, self:provider.stage}

This sets up an HTTP endpoint (/submit-contact) that will trigger the Lambda function when a POST request is made. The function will have access to the DynamoDB table name through the CONTACTS_TABLE environment variable.

To deploy the Lambda function and DynamoDB table, run:

serverless deploy

The complete severless.yml file looks like this:

service: serverless-web-app

provider:
  name: aws
  runtime: nodejs18.x

resources:
  Resources:
    WebsiteBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:service}-${opt:stage, self:provider.stage}
        WebsiteConfiguration:
          IndexDocument: index.html
    ContactsTable:
      Type: AWS::DynamoDB::Table
      Properties:
        TableName: ${self:service}-contacts-${opt:stage, self:provider.stage}
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        BillingMode: PAY_PER_REQUEST

functions:
  app:
    handler: handler.handler
    events:
      - http:
          path: submit-contact
          method: post
          cors: true
    environment:
      CONTACTS_TABLE: ${self:service}-contacts-${opt:stage, self:provider.stage}

Connecting the Frontend

With the backend logic in place, let's update the frontend to allow users to submit the contact form. Open website/index.html and add a form:

<!-- website/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Serverless Web App</title>
  </head>
  <body>
    <h1>Welcome to my Serverless Web App!</h1>
    <p>This is a static website hosted on AWS S3.</p>

    <h2>Contact Us</h2>
    <form id="contact-form">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <br />
      <button type="submit">Submit</button>
    </form>

    <script>
      const form = document.getElementById('contact-form');
      form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;

        const response = await fetch('/submit-contact', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ name, email }),
        });

        const data = await response.json();
        alert(data.message);
        form.reset();
      });
    </script>
  </body>
</html>

This adds a simple contact form to the HTML, and includes a JavaScript script that sends a POST request to the /submit-contact endpoint (which is the Lambda function we deployed earlier) when the form is submitted.

To deploy the updated website, run:

serverless client deploy

This will upload the index.html file to the S3 bucket again.

Now, if you visit the website URL and submit the contact form, you should see a success message. You can also check the DynamoDB table in the AWS console to see the submitted contact data.

Wrapping Up

And there you have it, folks! We've built a serverless web application using AWS Lambda, S3, and DynamoDB. We've covered setting up the development environment, deploying a static website, creating a Lambda function for server-side logic, and connecting the frontend to the backend.

Serverless architectures offer numerous benefits, including scalability, cost-efficiency, and reduced operational overhead. By leveraging services like AWS Lambda, you can focus on writing code and building features, without worrying about server management. It's like having a team of hardworking elves handling the tedious infrastructure tasks for you.

Of course, this is just a simple example, and real-world serverless applications can become much more complex. But hey, we all have to start somewhere, right? The principles and services demonstrated in this article provide a solid foundation for building more advanced serverless web applications.

So, what are you waiting for? Embrace the serverless revolution and start building your next big idea today!

Level Up Your Skills with the Ultimate TypeScript Guide!

Ritik Banger — Sat, 05 Aug 2023 08:28:11 +0000

🚀 Unleash Your Inner TypeScript Hero: From Zero to Super Coder! 📚🦸‍♂️

Hey fellow developers! Are you ready to become a TypeScript hero? 🔥 Whether you're a seasoned pro looking to expand your skillset or a TypeScript beginner eager to dive into the world of typed JavaScript, I've got some exciting news for you!

I created the most comprehensive TypeScript guide that will take you from Zero to Hero in no time! 🎓 This guide covers all the essentials, from TypeScript basics to advanced type systems, and even industry-proven best practices for writing clean and scalable TypeScript code. It's a game-changer!

🔍 What's Inside?

✅ TypeScript Basics: Master the fundamentals of TypeScript, including types and interfaces.
✅ Advanced Type System: Dive deep into TypeScript's powerful type system and unleash its full potential in your projects.
✅Best Practices: Discover battle-tested techniques for writing maintainable and efficient TypeScript code.
✅ Real-World Examples: Learn by doing with practical examples that reinforce your learning.

This guide is a treasure trove of knowledge that aims to empower developers of all levels to confidently embrace TypeScript in their workflows. Whether you're building web applications, backend services, or just exploring TypeScript, this guide will equip you with the knowledge and skills to take your projects to new heights.

So, what are you waiting for? Don't miss out on this amazing opportunity to level up your TypeScript journey!

Grab the PDF of this incredible guide here and start your transformation from a TypeScript novice to a TypeScript hero today!

And let's not keep this treasure to ourselves – share this post with your fellow developers who are as passionate about TypeScript as we are. Let's grow as a community and empower each other in our development journeys!

Remember, the power of TypeScript is at your fingertips, and with this guide, you'll be unstoppable! Happy coding! 💻💪

Ritik Banger (रितिक बांगड़) 🇮🇳 on LinkedIn: Typescript- the ultimate guide | 14 comments

Be the TypeScript Hero from Zero! 🔥 I am thrilled to share with you the ultimate TypeScript guide, the final part that will transform you from a TypeScript… | 14 comments on LinkedIn

linkedin.com

Boost Your React Performance with useDeferredValue Hook: An Example-driven Guide

Ritik Banger — Tue, 04 Apr 2023 16:25:43 +0000

One of the most popular JavaScript frameworks is React, which provides a number of hooks to make the process of creating online apps easier. UseDeferredValue hook is one such hook. The speed of the application can be enhanced by using this hook to delay state updates until the user has finished engaging with it. The useDeferredValue hook, its advantages, and how to use it in your React application will all be covered in this essay.

Benefits of useDeferredValue Hook

The useDeferredValue hook allows you to defer the updates of state changes until the user is done interacting with the application. This approach has several benefits, including:

Improving application performance: By deferring state updates, you can avoid unnecessary re-renders, which can significantly improve the performance of your application.
Smoother user experience: By delaying updates until the user is done interacting with the application, you can provide a smoother user experience, with fewer interruptions or unexpected changes.
More efficient rendering: With deferred updates, React can batch multiple updates into a single render pass, which can make rendering more efficient and reduce the overall workload on your application.

How to use the useDeferredValue Hook?

Utilizing the useDeferredValue method is not too difficult. You need to perform these actions in order to use it:

Import the hook: To use the useDeferredValue hook, you need to import it from the React library.
Create a deferred state: You can create a deferred state by calling the useDeferredValue hook and passing in the initial value.
Use the deferred state: You can use the deferred state just like any other state in your application, but React will defer updates to it until the user is done interacting with the application.

Here is an example of how to use the useDeferredValue hook in a React component:

Let's assume your React application has a search bar component that enables users to look for things in a list. You want to update the search results in real-time as the user enters a question into the search box, but you don't want to update the search results until the user has completed typing to prevent pointless re-renders. Here's an illustration of how to accomplish this using the useDeferredValue hook:



import React, { useState } from 'react';
import { useDeferredValue } from 'react';

function SearchBar({ items }) {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query, { timeoutMs: 500 });

  const searchResults = items.filter((item) =>
    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
  );

  function handleQueryChange(event) {
    setQuery(event.target.value);
  }

  return (
    <div>
      <input type="text" value={query} onChange={handleQueryChange} />
      <ul>
        {searchResults.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, we create a new state value called query using the useState hook. We also create a deferred state value called deferredQuery using the useDeferredValue hook, and we initialize it with the same initial value as query. We pass an options object to useDeferredValue to specify a timeout of 500 milliseconds, which means that updates to deferredQuery will be deferred for at least 500 milliseconds after the last change to query.

We use the searchResults variable to filter the items array based on the deferredQuery. The searchResults variable is re-computed whenever deferredQuery changes, which will happen after a short delay once the user has finished typing.

In the handleQueryChange function, we update the query state value whenever the user types into the search bar. This will cause deferredQuery to be updated, but the actual update will be deferred until the user has finished typing for at least 500 milliseconds.

By using the useDeferredValue hook in this way, we can provide real-time search results without causing unnecessary re-renders and without making the user interface feel sluggish or unresponsive.

Conclusion

The useDeferredValue hook is a powerful tool for improving the performance and user experience of your React applications. By deferring state updates until the user is done interacting with the application, you can reduce the number of unnecessary re-renders, provide a smoother user experience, and make rendering more efficient. If you are building a React application, consider using the useDeferredValue hook to improve your application's performance and user experience.

Cracking the Interview: Essential Advanced JavaScript Concepts You Need to Know

Ritik Banger — Sun, 12 Mar 2023 07:38:04 +0000

JavaScript is an incredibly powerful and popular programming language that is used in a wide range of applications. Whether you are a beginner or an experienced developer, there are many advanced JavaScript concepts that can take your skills to the next level. These concepts can help you write more efficient and maintainable code, as well as improve the performance and functionality of your applications. In this article, we'll explore some of the most important advanced JavaScript concepts that you should know to impress your interviewer and take your skills to the next level.

They say that learning advanced JavaScript is like unlocking a superpower - except instead of flying or x-ray vision, you can make websites that are way cooler than your competitors'. And let's be real, who needs to fly when you can make your web page elements dance around like nobody's watching? So get ready to level up your coding game and become the superhero of the internet - no cape required!

We'll cover some advanced JavaScript concepts such as web workers, proxies, the Reflect API, symbols, and iterators and generators. Each of these concepts has its own unique benefits and use cases, and mastering them can help you write more efficient, flexible, and maintainable code.

For example, web workers allow you to execute code in a separate thread, which can improve the performance of your web applications. Proxies let you intercept and modify the behavior of object properties, enabling you to implement advanced features like object privacy. The Reflect API provides a more flexible and consistent way to define object properties, access object properties, and invoke object methods. Symbols allow you to create unique, immutable values that can be used as object keys to implement object privacy. And iterators and generators give you more control over how your objects are iterated, as well as the ability to generate infinite sequences of values.

1. Web Workers

Web Workers are a powerful feature of JavaScript that allow you to run scripts in the background, without blocking the main thread. Web Workers can help you build more responsive web applications by offloading complex and time-consuming tasks to separate threads.

Use web workers to execute expensive or long-running tasks in a separate thread, leaving the main thread free to handle user input and updates. This can improve the overall responsiveness and performance of your web application. For example, you could use web workers to perform complex calculations or run data-intensive algorithms without blocking the user interface.

Use Case: A web-based game that requires complex physics calculations or artificial intelligence algorithms to be run in real-time could use web workers to handle those processes in a separate thread, freeing up the main thread to handle user input and rendering.

Example Code:

// Create a new web worker
const worker = new Worker('worker.js');

// Send a message to the worker
worker.postMessage('Hello from main thread!');

// Receive a message from the worker
worker.onmessage = (event) => {
  console.log('Message received from worker:', event.data);
};

// worker.js
self.onmessage = (event) => {
  console.log('Message received from main thread:', event.data);
  self.postMessage('Hello from worker!');
};

This example shows how to create and communicate with a web worker using the Worker API.

2. Proxies

Proxies are a feature of JavaScript that allow you to intercept and modify the behavior of objects and functions. Proxies can be used to implement advanced features like access control, data validation, and dynamic code generation.

For example, you could use proxies to implement object privacy, ensuring that certain properties or methods cannot be accessed or modified from outside the object.

Use Case: A JavaScript library or framework that needs to provide a secure and reliable way to manage user data could use proxies to enforce strict access controls on certain properties or methods of the data objects, ensuring that sensitive information is protected.

Example Code:

// Create a proxy object
const handler = {
  get(target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting property "${property}" to "${value}"`);
    target[property] = value;
    return true;
  },
};

const obj = new Proxy({}, handler);

// Use the proxy object
obj.name = 'Ritik';
console.log(obj.name);

This example shows how to create a proxy object using the Proxy constructor, and how to intercept and modify the behavior of object properties using the get and set traps.

3. Reflect API

The Reflect API is a powerful set of methods that allow you to interact with JavaScript objects in a more flexible and consistent way. The Reflect API includes methods for creating and manipulating objects, defining and accessing object properties, and invoking object methods.

This can help you write cleaner and more maintainable code. For example, you could use the Reflect API to define object properties with descriptors, access and set object properties, and invoke object methods.

Use Case: An e-commerce website that needs to display product data from a third-party API could use the Reflect API to define and manipulate the properties and methods of the product objects in a consistent and flexible way, allowing for easier integration and customization.

Example Code:

// Create an object
const obj = { name: 'Ritik' };

// Define a property using the Reflect API
Reflect.defineProperty(obj, 'age', {
  value: 23,
  writable: false,
});

// Get the value of a property using the Reflect API
const age = Reflect.get(obj, 'age');
console.log(age);

// Invoke a method using the Reflect API
Reflect.apply(console.log, console, ['Hello, world!']);

This example shows how to use the Reflect API to define object properties, access object properties, and invoke object methods in a more flexible and consistent way.

4. Symbols

Symbols are a feature of JavaScript that allow you to create unique, immutable values that can be used as object keys or method names. Symbols can be used to implement advanced features like object privacy, method customization, and interface design.

This can help you implement object privacy, since symbols cannot be accessed or modified by outside code. For example, you could use symbols to define private methods or properties that can only be accessed from within the object.

Use Case: A password manager application that needs to store user credentials securely could use symbols to define private methods and properties within the password object, preventing unauthorized access or modification.

Example Code:

// Define a symbol
const KEY = Symbol('my secret key');

// Create an object with a private property
const obj = {
  [KEY]: 'secret value',
  publicProperty: 'public value',
};

// Access the private property using the symbol
console.log(obj[KEY]);
console.log(obj.publicProperty);

This example shows how to use symbols to create unique, immutable values that can be used as object keys to implement object privacy.

5. Iterators and Generators

Iterators and Generators are powerful features of JavaScript that allow you to iterate over collections of values in a more flexible and efficient way. Iterators and Generators can be used to implement advanced features like lazy evaluation, infinite sequences, and custom data structures.

Use iterators and generators to control the iteration of objects and generate sequences of values. This can help you write more efficient and expressive code, as well as enable advanced features like lazy evaluation and infinite sequences. For example, you could use iterators and generators to implement lazy loading of data or generate infinite sequences of random numbers.

Use Case: A data visualization tool that needs to handle large or complex datasets could use iterators and generators to implement lazy loading of data, allowing only the necessary data to be loaded and displayed at any given time, improving performance and reducing memory usage.

Example Code:

// Define an iterable object
const obj = {
  data: [1, 2, 3, 4],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      },
    };
  },
};

// Use the iterator to iterate over the object
for (let value of obj) {
  console.log(value);
}

// Define a generator function
function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield b;
    [a, b] = [b, a + b];
  }
}

// Use the generator to generate an infinite sequence
const sequence = fibonacci();
console.log(sequence.next().value);
console.log(sequence.next().value);
console.log(sequence.next().value);

This example shows how to use iterators to implement custom iteration behavior for objects, and how to use generators to generate infinite sequences of values.

In Conclusion, having a solid grasp of these advanced JavaScript concepts can help you stand out in a crowded job market and impress your interviewers with your skills and knowledge. By understanding the benefits and use cases of web workers, proxies, the Reflect API, symbols, iterators, and generators, you can write more efficient, flexible, and maintainable code that meets the needs of your users and stakeholders. Whether you're a front-end developer, back-end developer, or full-stack developer, these concepts are essential to take your skills to the next level and achieve success in your career.

Node.js Revealed: A Comprehensive Guide to Its Inner Workings

Ritik Banger — Thu, 09 Mar 2023 18:50:17 +0000

Have you ever wanted to build a web application that can handle a massive amount of traffic without slowing down? Or wondered how some of the world's most popular websites, like Netflix and LinkedIn, can handle millions of users at once? The answer lies in Node.js, the innovative tool that's taking the web development world by storm.

Node.js is a unique platform that can handle multiple requests at once, making it ideal for building high-performance web applications. Node.js is a powerful open-source, cross-platform, JavaScript runtime environment designed for building scalable network applications. It allows developers to write server-side applications in JavaScript. Node.js works on the event-driven, non-blocking I/O model, which makes it ideal for building high-performance, real-time web applications.

In this article, we'll take a deep dive into the technical workings of Node.js, exploring how it uses single-threaded event looping to handle multiple requests and how it's designed to handle asynchronous operations. So if you're ready to take your web development skills to the next level, join us as we explore the exciting world of Node.js!

Architecture

Node.js architecture consists of three main components:

The V8 engine
Libuv
Node.js core

The V8 Engine

The V8 engine is an open-source JavaScript engine developed by Google for use in the Chrome browser. It compiles JavaScript code to native machine code, which makes it incredibly fast. Node.js uses the V8 engine to execute JavaScript code.

Libuv

Libuv is a multi-platform support library with a focus on asynchronous I/O. It provides Node.js with an event loop, a thread pool, and an API for handling file system operations, TCP/UDP sockets, and other low-level tasks. The event loop is the core of Node.js, and it is responsible for managing all asynchronous operations.

Node.js Core

The Node.js core is a collection of modules that provide various functionalities, such as network I/O, file system operations, and buffer manipulation. These modules are written in C++ and are exposed to JavaScript via a set of JavaScript APIs.

Event Loop

The event loop is the most critical component of Node.js. It is responsible for managing all asynchronous I/O operations, including network I/O, file system operations, and timers. The event loop is a single-threaded loop that runs continuously, waiting for events to occur.

When an event occurs, such as a new connection or a completed I/O operation, the event loop adds the corresponding callback function to a queue. The event loop then continues to run, processing the next event in the queue. When the event loop encounters a callback function in the queue, it executes the function, and the associated I/O operation completes.

Node.js uses an event-driven, non-blocking I/O model, which means that it can handle a large number of concurrent connections without blocking the event loop. This allows Node.js to be highly scalable and efficient.

Consider a simple example that shows how asynchronous operations work in Node.js using a simple addition operation and setTimeout function:

console.log("Start");

setTimeout(() => {
  console.log("Addition operation");
  const result = 2 + 2;
  console.log("Result:", result);
}, 2000);

console.log("Finish");

In this example, we have a simple addition operation that takes 2 seconds to complete, which we simulate using the setTimeout function. Here's how the flow would look like:

The Node.js application starts by logging a message to the console indicating that it has started.
The application calls the setTimeout function to execute the addition operation after a delay of 2 seconds.
While the setTimeout function is in progress, the event loop continues to process other events in the queue, such as incoming HTTP requests or other code in the application.
After 2 seconds, the setTimeout function sends an event to the event loop indicating that the delay has ended and the addition operation should be executed.
The event loop processes the event and executes the corresponding callback function, which performs the addition operation and logs the result to the console.
Finally, the application logs a message to the console indicating that it has finished.

Note that the setTimeout function is an example of an asynchronous function that allows Node.js to continue
processing other events while waiting for the delay to complete. This is a key feature of Node.js that allows it to handle multiple concurrent requests efficiently, making it an ideal choice for building scalable web applications.

Is Node.js single threaded or multi threaded?

Node.js is a single-threaded runtime environment. However, it is important to note that Node.js is also capable of handling multiple concurrent requests and performing I/O operations in parallel.

Node.js achieves this concurrency by leveraging the event-driven, non-blocking I/O model. When a request is received, Node.js adds it to the event loop's event queue and continues to process other events in the queue. This allows Node.js to handle multiple requests simultaneously, without blocking the event loop or the thread.

Node.js also utilizes a thread pool to perform CPU-intensive operations asynchronously. When a CPU-bound operation is encountered, Node.js hands it off to the thread pool, which executes the operation in a separate thread. Once the operation is complete, the thread pool returns the result to the event loop, which then executes the corresponding callback function.

How Node.js do multiple concurrent operations?

Node.js can perform multiple operations concurrently using its event-driven, non-blocking I/O model. This means that Node.js can handle multiple requests and perform I/O operations in parallel without blocking the event loop.

When a request or an I/O operation is initiated in Node.js, it is added to the event loop's event queue. The event loop continuously checks the event queue for new events and processes them in the order they were received. However, if an event takes a long time to complete, such as reading a large file from disk or making an HTTP request to an external API, Node.js will not block the event loop while waiting for the operation to complete. Instead, Node.js will add the operation to a separate thread and continue to process other events in the event loop.

For example, let's say we have a Node.js application that needs to read data from a database and then send an HTTP response to the client. The flow would look something like this:

The Node.js application receives an HTTP request from the client.
The application initiates a read operation on the database to retrieve the required data.
The read operation is added to the event loop's event queue.
While the read operation is in progress, the event loop continues to process other events in the queue, such as processing other incoming HTTP requests or executing other code in the application.
Once the read operation is complete, the database driver sends an event to the event loop indicating that the operation is done.
The event loop processes the event and executes the corresponding callback function.
The callback function retrieves the data from the database and generates an HTTP response to send back to the client. The response is added to the event loop's event queue, and the event loop sends it back to the client.

In this way, Node.js can perform multiple operations concurrently and efficiently without blocking the event loop or the thread.

How does Node.js handle memory management?

Node.js uses a garbage collector to automatically manage memory. When a variable or object is no longer needed, the garbage collector will free up the memory it was using. Node.js also uses a technique called "buffering" to handle memory-intensive tasks like reading and writing large files.

Node.js uses a custom memory allocator called "v8::Malloc", which is optimized for handling small, short-lived objects. Node.js also provides several tools for monitoring memory usage and detecting memory leaks, such as the "heapdump" and "memwatch" modules.

Node.js uses a generational garbage collector that separates objects into two generations: the young generation and the old generation. Objects in the young generation are frequently garbage collected, while objects in the old generation are garbage collected less frequently. Node.js also provides several tools for tuning the garbage collector, such as the "gc" module and the "--max-old-space-size" flag.

How does Node.js handle security?

Node.js provides several built-in security features, including the ability to enforce SSL/TLS encryption, perform input validation and sanitization, and prevent cross-site scripting (XSS) and other common web vulnerabilities. Developers can also use third-party security libraries and tools to further enhance the security of their Node.js applications. Node.js uses a sandboxed environment to execute code, which isolates the code from the rest of the system and prevents it from accessing sensitive resources or data.

Can Node.js be used for machine learning and AI?

Yes, Node.js can be used for machine learning and AI applications through libraries like TensorFlow.js, Brain.js, and Nodebrain. These libraries allow developers to build and train machine learning models using JavaScript and Node.js.

How does Node.js handle file I/O?

Node.js uses non-blocking I/O to handle file operations, allowing it to read and write files without blocking the event loop. Node.js also provides a built-in "fs" module for working with the file system, which includes methods for reading, writing, and manipulating files.

How does Node.js handle long-running processes?

Node.js provides several techniques for handling long-running processes, including child processes, worker threads, and cluster modules. These techniques allow Node.js to handle CPU-intensive tasks without blocking the event loop or slowing down the entire application.

How does Node.js handle networking?

Node.js provides several built-in modules for handling networking, including the "http" and "net" modules. These modules allow developers to create servers, clients, and sockets for handling HTTP, TCP, and UDP traffic. Node.js also provides a built-in DNS resolver for resolving domain names.

How does Node.js handle multi-core processors?

Node.js uses a technique called "cluster modules" to handle multi-core processors. This allows Node.js to create multiple processes (or "workers") to handle incoming requests, spreading the load across multiple CPU cores. Node.js also provides a built-in load balancing mechanism to distribute requests evenly across workers.

How does Node.js handle memory leaks?

Node.js provides several built-in tools for detecting and resolving memory leaks, including the "heapdump" and "memwatch" modules. These tools allow developers to analyze memory usage and identify memory leaks, as well as take action to free up memory when it is no longer needed.

In conclusion, Node.js is a game-changing tool that's revolutionizing the world of web development. Its ability to handle multiple requests with ease and speed makes it the perfect solution for building high-performance web applications. By using single-threaded event looping, Node.js can handle hundreds, if not thousands of requests simultaneously without slowing down. And with its ability to handle asynchronous operations, Node.js is designed to tackle the challenges of modern web development head-on.

Whether you're a seasoned developer or just starting out, Node.js is an essential tool to have in your toolkit. With its power and versatility, Node.js can help you build robust and scalable web applications that can handle any amount of traffic.

So why wait? Start exploring the exciting world of Node.js today and unlock the full potential of modern web development!

How to write Git commit messages like a Pro!

Ritik Banger — Mon, 10 Oct 2022 18:59:43 +0000

When a developer go back into time to look for something he has worked on six months ago, many times he does not understand why he made that particular commit and the only reason is that he has not followed the right way to write the commit message.

There are commit message standards that devs practice around the world, and it is good to follow popular standards so that when you come back after a good amount of time or someone else looks at your commit messages, it would not look like cringe!

The most effective technique to inform other developers of the context of a change is with a well-written Git commit message.

Teams should first decide on a commit message convention that specifies the version control history of the product they are building.

A great Git commit message should have a proper style, content, and the metadata.

A known Git commit follows this convention:

<type>(<scope>): <message>

<type> can be one of the following:

feat for a new feature.
refactor for refactoring production code, e.g. renaming a function.
docs for changes to the documentation.
fix for a bug fix for the user.
perf for performance improvements.
style for formatting changes, missing semicolons, etc.
test for adding missing tests, refactoring tests.
build for updating build configuration, development tools or other changes irrelevant to the user.

You can also add your custom type too, depending on the standards your team follows. The above standards are followed by ESlint team. You can check their commit messages here.

The scope is optional, and the message part should include a single line statement, not more than 72 characters, to sum up what the commit is for.

Many developers also use the message as the subject line and add a body too, that is basically the description of the commit, but a one-liner commit message is preferable as long as you can tell about the context (commit what's and why's), if the commit demands a more detailed description that can not be explained in a single line, commit body is always necessary.

You can also use tools like Glitter or Commitizen to standardize your commit messages.

Not only this, You might also wonder that there is a tool that checks for your commit message and pops an error if it does not follow the guidelines. Commit lint is one of them. It helps your team adhere to a commit convention.

Many times, industry experts use their JIRA or Click Up ticket as the commit message so that everything can be link or trace back anytime and the codebase remain maintainable for future developers.

Some teams also like to add emoji to their commit messages. I have curated a list of emojis and their respective meanings, you can check it out here.

At the end, the important thing is that your commit message should be meaningful and does not confuse your fellow developers or the future developers about what a particular change is up to.

If you wish to learn more about conventional commits, semantic commits, or the practices that industry follows, here are some resources for you:

Hacktoberfest 2022 is here. Git repo to contribute, participate, and win SWAG 🤯

Ritik Banger — Sat, 01 Oct 2022 07:58:22 +0000

If you already know about open-source and hacktoberfest-
Go to Hacktoberfest2022-DSA

Event details :

Hacktoberfest is a month-long challenge. It happens every year in the month of October.

Hacktoberfest is open to everyone, and it marks the celebration of Open Source. It's the biggest Open Source event that encourages newbies to participate in Open Source and create their 1st meaningful PR.

Hacktoberfest will be hosted by Digital Ocean for the 9th year in a row in partnership with GitHub and other companies.

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community.

All backgrounds and skill levels are encouraged to complete the challenge.

Hacktoberfest is a celebration open to everyone in our global community.

You can sign up anytime between September 26 and October 31.

How can you join?

Step - 1:
Create a GitHub account, if you don't already have one.

Step - 2:
Register for Hacktoberfest: Navigate to the Hacktoberfest registration page and follow the instructions. But, read the rules carefully before you do, and then sign In using your GitHub credentials.

Step - 3:
Find good projects worth contributing on the GitHub page. You can type label:hactoberfest is:issue is:open

You can contribute for DSA related problems here:

Hacktoberfest2022-DSA

You can add a language label of your choice to filter open issues. If you are a beginner and can’t find good issues then there’s tag label:good first issue which filters out issues for beginners who want to contribute.

Here's something beginner-friendly for you:

https://www.firsttimersonly.com/
https://github.com/mungell/awesome-for-beginners

Step - 4:
Submit PRs: Try and submit at least 4 PRs and wait for it to be verified. Make sure to submit quality PRs.

Hacktoberfest Rules :

To earn your Hacktoberfest tee or tree reward, you must register and make four valid pull requests (PRs) between October 1-31 (in any time zone).

Pull requests can be made in any participating GitHub or GitLab hosted repository/project. Look for the Hacktoberfest topic to know if a repository/project is participating in Hacktoberfest.

Pull requests must be approved by a maintainer of the repository/project to count.

If a maintainer reports your pull request as spam or behaviour not in line with the project’s code of conduct, you will be ineligible to participate.

This year, the first 40,000 participants who successfully complete the challenge will be eligible to receive a prize.
For your PR to count, it must be:

Submitted in a public repo, AND the PR is labelled as hacktoberfest-accepted by a maintainer. Or
Submitted in a repo labelled hacktoberfest , AND Merged, OR Approved

You can opt not to receive a t-shirt and stickers, and you can choose to have a tree planted in your name and help make Hacktoberfest 2022 more carbon-neutral.

Whether it’s your first or fiftieth pull request, there’s always more to learn!

Rules To Contribute To This Repo- Hacktoberfest2022-DSA

You can write solutions in C/C++/Java/Python for Data Structure and Algorithms.
Follow file naming convention for all your pull requests.
While adding any content, it should be inside its appropriate directory
if there is any problem with inaccurate solution, create an issue!

Repo contain folders of all the data structures and algorithms topics with some pre-addressed questions. You can add a solution to a question (present in the readme of particular topic folder) that is unanswered.

You can update existing solution with a better one ( better complexity).

Participants can even add new questions and solutions of their interest.

Solve issues raised by other people or yourself.

Make webpage ( hosted from GitHub readme ) more appealing and updated.

Well-documented source code with detailed explanations provides a valuable resource for educators and students alike.
Steps For Contribution

Fork this repo
Star this repo
Add a file ( txt/cpp ) inside appropriate folder
commit the code
Make pull request

Features

Beginner-friendly
Targeted for developers, content writers, and programming enthusiasts.
Would also help participants who are not familiar with development but are eager to participate in open source.

I have created a new npm package to take OTP Inputs, here is the why and how?

Ritik Banger — Sun, 14 Aug 2022 11:30:00 +0000

Before starting, please give a star to this project by clicking here.

A few days back, I was stuck with an #NPM package that is an #OTP input component (react-otp-input) module with an average of 65,000 weekly downloads. Quite good numbers. I was facing an issue that the package has a peer dependency of react v16 while I am currently working on v18, but I used the npm i react-otp-input with the -f option and forcefully installed the package. Sooner or later I realised that there is no effects on pressing the "enter" key while working with this package. The requirement was to hit the submit button on keydown. I had an option to put the package component under a form tag and use preventdefault() to fix it but it may generate any side effects too. Looking for the solution to the issue I was facing, I went to the Git repository of the package and found that there are a lot of bugs and issues with the package with no repsonse from the maintainer at all.

So, I decided to create my own package. I noticed that the package I have installed is licenced under MIT that means I can modify the package and publish it as my own with the modifications. So I took a clone and started working on the project. After lots of challenges and logic, I have published my very own NPM package over the internet with the name React18-input-otp.

I have tried different logics and almost tweaked the code to create this out and at the end, I have create an NPM account and followed these steps to publish the package using terminal:

cd react18-input-otp folder
Login using npm login
npm publish

That's it and your package will be live.

Codesandbox is here.

Now, let us talk about the package I have created:

The package is a fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

You can use npm i react18-input-otp to install it in your web app.

Features of the package:

A fully customisable OTP input package with support of React 18 and Typescript.
It works great on both react and ionic app. Works like a charm on mobile too.
You can specify only numeric inputs with inputNum prop.
Works perfectly with clipboard paste feature on web and mobile.
The only OTP input package on npm that supports 'enter' key to submit.
Zero OTP paste issues on Android.
Easy paste on iOS chrome, read from SMS feature.
Supports onSubmit optional prop. You do not even need a button to submit.
You can use this package for phone number inputs too.
You can use this package for passcode fields too with inputSecure prop.
You can provide custom css as well as input props to the React18-input-otp.
0 dependencies.
Minzipped size only 3.6 kb.
No open issues.
No security bugs.

If you use OTP inputs in your web/mobile apps that are built over #react. Do give it a try and let me know if there is anything I can enhance.

Don't forget to follow me and to give this project a star!

Advanced Typescript Series: Generics

Ritik Banger — Thu, 04 Aug 2022 08:31:33 +0000

As we all know, the power of Typescript and how typescript leverage the power of types to make the codebase robust. I am coming up with a full-fledged series on advanced typescript topics.

I would be covering Generics, Intersection types, Union types, Utility types, Infer types, conditional types, mapped types, template literal types as well as type guards in this series.

Today, I am covering the generics in typescript.

The development in today's world is focused on component reusability so that not only today but the component can be reused tomorrow too. The word 'reusable' itself is self-explanatory, and it makes our codebase flexible.

But there is a problem that it is not easy to write reusable code, and we simply write code while focusing on a single kind of data or type and later when some new data or type come into picture, we need to write another component rather than using the previous one.

One another scenario a developer working with typescript and some package for example, say, react hook form faces when he writes a reusable component like, common input component, but he is unable to give type to the register or the control function of the react hook form and typescript infer somethng by itself and the developer will face errors at the end. Here generics can help out. Depending on your field values, you can pass the interface to generic component, and it would do the rest.

Now, let us understand how generics can help us to solve such problems.

Generics is the way which allow us to write such flexible code that can work with different data types rather than a single data type. This enforces code reusability and avoid duplication of the code. It also adds an extra layer of abstraction.

Generics is a fully supported feature of typescript. With generics, one can pass types as parameters to another type, function, class, or interface.

Generics in TypeScript code can be written in angle brackets <>, in the format , where T represents a passed-in type. can be read as a generic of type T. The T is also known as the type parameters.

Let us start with a very basic code to understand this.
We have a function here that takes a string argument and returns a string.

function returnString(arg: string): string {
  return arg;
}

Another such function doing the same kind of task for number can be,

function returnNumber(arg: number): number {
  return arg;
}

Now, we can create a common function for both the use cases with the help of generics.

function returnGeneric<Type>(arg: Type): Type {
  return arg;
}

const output = returnGeneric<string>("some string goes here");

Pretty simple right, now let us take another example for API Call.

type Students = {
  name: string;
  section: string;
}

type Faculty = {
  name: string;
  subject: string;
}

async function genericFetchApi<T>(path: string): Promise<T> {
  const response = await fetch(`https://yourdomain.com/api${path}`);
  return response.json();
}

const studentsData = await fetchApi<Students[]>('/students')
const facultyData = await fetchApi<Faculty[]>('/faculty')

export {}

Now, this is how we can consume a common function with different type of arguments and different return type for different use cases.

On moving further, there is Something in generics that you should have an idea of. It is generic type constraint. Using constraints is basically to put restrictions. JavaScript revolves around objects, and some scenario exists where you expect something and receive something else from the backend. In such cases or other, these constraints are helpful. Only specific types must be permitted to be given into the generic via a generic type argument. You can impose restrictions on your parameter to offer an extra level of precision and narrowing the types to your generic.

You can use something like .
'extends Record' is known as generic type constraint. It enables you to define that the type that follows the extends keyword must be assignable to your generic type. Record in this context denotes an object with strings as the key type and any as the value type. You can replace the 'any' with the value type of your object. Also, Any valid TypeScript type may be extended by your type parameter.

Usage:

const genericFunc = <T extends number>(x: T) => x;
const stringTest = genericFunc('a'); //  Argument of type 'string' is not assignable to parameter of type 'number'
const numberTest = genericFunc(99); //passes

End Note: Generics will make your codebase robust, and they really help in some way or other. You can anytime start using generics. Let me know in the discussions if you like this article or not, also, if you have any suggestions, do let me know.

I would be coming out with the next learning in this series very soon. Stay tuned and follow me for more updates.

How to setup Infinite Scroll in your react component?

Ritik Banger — Sun, 03 Jul 2022 18:07:36 +0000

Infinite scroll is the thing of today. Unlike pagination with pages, people prefer scrolling infinitely to get more and more data, Facebook and Instagram are very fine example leveraging the power of Infinite Scroll.

I have come across an infinite scroll package which is quite popular and many developers across the world are using this fine npm package in their web apps.

This npm package is of small size, i.e., 177kb. It takes a few props, which are as follows:

The first prop is dataLength which is the length of the data.
After dataLength, we have the next prop. This is one of the most important prop, We pass a loadMoreData function to it that triggers some action which fetches the next data. This fetched data is passed as children to the InfiniteScroll component, and note that the data should contain previous data too. So, it is basically, [newData, ...PreviousData]
The third prop is hasMore, it is clear by its name that it takes a boolean value and tells InfiniteScroll whether to call next function on reaching the bottom or shows an endMessage to the user if next is not called i.e., hasMore is false.
The fourth prop, loader takes an element which is shown as a fallback to show while the component waits for the next load of data.
The fifth prop is endMessage, which tells the user that there is no more data and hasMore is false.

You can check out a codesandbox illustrating InfiniteScroll here.

Don't forget to give your data as children in between the opening and closing tag of InfiniteScroll.

<InfiniteScroll
  dataLength={dataItems.length}
  next={LoadMoreData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>You have seen all the data</b>
    </p>
  }
>
  {dataItems}
</InfiniteScroll>

There are few other props too that are useful in different scenarios but the above five props are sufficient to have a cool infinite scroll on board.

Note: If you are working with InfiniteScroll inside a popup or a modal, then ScrollableTarget prop would help. You need to create a parent div of InfiniteScroll with an id attribute and give this id as an argument to ScrollableTarget prop. A codesandbox is available here.

If you came across any other Infinite Scroll package then do mention it in the discussion and I would be happy to give it a try.

Event Emitter with Typescript- Advanced Usage

Ritik Banger — Sun, 19 Jun 2022 08:02:58 +0000

Passing functional props to great grand child components and then invoking the function on some data changes is hectic and do side effects. Also, such passing down of props is not a very good way to write react or typescript code.

Here comes the event emitter. Event Emitter is a common term if you are working with an Angular or NodeJs project but when it comes to react, developers hardly heard this term. So, let me straight down to what event emitter is, what it do, how it do?

What is an Event Emitter?

An event emitter is a code pattern that listens to a named event, fires (or calls) a callback function, then emits that event with a value. Sometimes this is referred to as a “pub/sub (publisher-subscriber)” model, or listener.

Why do we need Event Emitter?

They are very useful when you have some function that needs to execute “whenever this other thing happens”, without requiring that function to finish or even work for that matter.

What Event Emitter do?

Event Emitter solve complex business solutions that requires to invoke certain functionality on the basis of change in some other thing.

A complex Use Case: I have a sale post component in which I can post some title, price and images and other users can offer me a price to buy the item. Now, I wish to list down all the offers in the form of comments below the post, then this can be done with the help of backend.
If somebody gives an offer then save the offer detail in the offer table and also save a comment User.name gives $offer in the comments table in database.

Now there exists an entry for every offer in the comments table but the comment component on the frontend does not know this. Here, event emitter can helps. Whenever somebody gives an offer, emit an event to re-fetch the comments and thus a complex problem to show offer comments as soon as an offer is given is solved.

How Event Emitter works?

Now, let us jump to the coding part. I know it may be complex for some users to understand this as it is advanced react, but still in many cases it helps.

1. We will create a file eventEmitter.ts that will be the core part of our event emitter.

In this we will have an enum EventType that will keep track of events similar to action types set as variables in redux.

Then we have a complex object eventEmitter, Many of you would wonder that I have created an object in which I am executing functions, quite complex but cool.

We have an events properties that is basically another object that will list the event name with their respective callbacks. It is readonly as we do not wish it to be changed by an outside function. It is similar to the use of private access modifier in classes.

After that we have dispatch function that will dispatch the event and call the callback for every event.

Subscribe will subscribe the event with a specific callback and Unsubscribe will unsubscribe the event to avoid unnecessary event calls.

export enum EventType {
  REFETCH_COMMENT = 'refetchComment',
}

/**
 * Event emitter to subscribe, dispatch, and unsubscribe to events.
 */
export const eventEmitter: {
  readonly events: Record<string, (() => void)[]>
  dispatch(eventType: EventType, uniqueSuffix: string | number): void
  subscribe(eventType: EventType, uniqueSuffix: string | number, callback: () => void): void
  unsubscribe(eventType: EventType, uniqueSuffix: string | number): void
  getEventKey(eventType: EventType, uniqueSuffix: string | number): string
} = {
  //This is event object to store events.
  events: {},
  //Internal function to get event name from type and suffix
  getEventKey(eventType: EventType, uniqueSuffix: string | number) {
    return `${eventType} ${uniqueSuffix}`
  },
  //This will dispatch the event and call the callback for every event.
  dispatch(event, uniqueSuffix) {
    const eventName = this.getEventKey(event, uniqueSuffix)
    if (!this.events[eventName]) return
    this.events[eventName].forEach((callback: () => void) => callback())
  },
  //This will subscribe the event with a specific callback
  subscribe(event, uniqueSuffix, callback) {
    const eventName = this.getEventKey(event, uniqueSuffix)
    if (!this.events[eventName]) this.events[eventName] = []
    if (!this.events[eventName]?.includes(this.events[eventName][0])) this.events[eventName]?.push(callback)
  },
  //This will unsubscribe the event to avoid unnecessary event calls
  unsubscribe(event, uniqueSuffix) {
    const eventName = this.getEventKey(event, uniqueSuffix)
    if (!this.events[eventName]) return
    delete this.events[eventName]
  },
}

2. Now, In the offer component where we would be sending offers, we will dispatch the events and unsubscribe the events after dispatch like this:

eventEmitter.dispatch(EventType.REFETCH_COMMENT, uniqueSuffix)
eventEmitter.unsubscribe(EventType.REFETCH_COMMENT, uniqueSuffix)

3. Here, we would be subscribing the event with a callback in the comments component that will re-fetch the comments.

 eventEmitter.subscribe(EventType.REFETCH_COMMENT, uniqueSuffix, () => fetchLatestPostComments())

Here, fetchLatestPostComments is the function that will refetch the comments from the backend.

This is how we have solved a complex business problem with the help of event emitters.

Though, with day-to-day developments, mutation comes into existence and these complex tasks can be performed by packages like React-Query too.