Forem: moayad khader

When Async Keyword Becomes Evil

moayad khader — Fri, 26 Jan 2024 10:51:32 +0000

Async here and Async there, Just Async everywhere.

What could go wrong if I just added this innocent keyword in in function's definition that doesn't involve asynchronous operations ?

async function innocentFunction() {

    // No asynchronous operations here

    console.log("Just Relax It's Just a Keyword!");

}

Well to answer this question , we need to know how event loop in JS is working.

The event loop allows JavaScript to be non-blocking and handle asynchronous operations efficiently.

In a nutshell, the event loop continuously checks the message queue for tasks. When a function is asynchronous, it can yield control back to the event loop while waiting for external resources or operations to complete. The event loop then picks up the next task from the queue.

The Unintended Consequences: Performance Overhead

When an async function doesn't involve any asynchronous operations, it still undergoes the process of creating a micro-task and being added to the end of the micro-task queue. This additional step introduces unnecessary overhead.

So, as more experienced Developer. how can you prevent this innocent mistake to affect your codebase.

Firstly, you have to embrace the issue and tell other developers about this evil .

Secondly, you can prevent this issue from happening by adding "require-await" rule in your eslint config.

How to load test your api ?

moayad khader — Tue, 12 Sep 2023 22:18:11 +0000

Hey there, tech enthusiast! So, you've built this awesome API that's going to revolutionize the way data flows in your application. But, before you unleash it into the wild, there's one crucial step you can't afford to skip - load testing.
Now, I know what you might be thinking. "Load testing? Sounds like something straight out of a sci-fi movie." Well, worry not! In this blog, we're going to break it down in simple, everyday terms. No jargon, no complex algorithms - just good ol' fashioned explanation.

Picture this: you've got a car engine, all shiny and new, ready to hit the road. But how do you know it'll perform when you've got a whole bunch of passengers on board, each wanting to get somewhere fast? That's where load testing comes in!

In essence, load testing is like giving your API a trial run with a simulated crowd. It's like seeing if your car can handle a full load of passengers without sputtering or stalling.

So, join me on this journey where we'll learn the ins and outs of load testing, step by step. By the end, you'll be armed with the knowledge to make sure your API can handle the digital equivalent of rush hour traffic.

Let's dive in!

So, In this article I want to use the awesome k6 library by Grafana Labs.

k6 is fully open source, to download it please follow this link:

Download K6

Choose the downloading method that suites you and your operating system.

Now after you have downloaded k6 successfully let's talk about load testing types, we have 3 main test which are:

Stress Test
Spike Test
Soak Test

Stress Test

Well, it's pretty much what it sounds like. We're going to crank up the pressure on your API to see how much it can handle before it starts sweating.

Stress tests assess how a system performs at its limits when load exceeds the expected average.

Code Breakdown

import http from 'k6/http';
import { sleep, check } from 'k6';

export let options = {
  InsecureSkipTLSVerify: true,
  noConnectionReuse: false,
  stages:[
    { duration: '2m', target:100 },
    { duration: '5m', target:100 },
    { duration: '2m', target:200 },
    { duration: '5m', target:200 },
    { duration: '2m', target:300 },
    { duration: '5m', target:300 },
    { duration: '2m', target:400 },
    { duration: '5m', target:400 },
    { duration: '10m', target:0 },
  ]
};

export default function () {
  const response = http.get('https://test.k6.io');
  check(response,{
    '200': (r) => r.status === 200
  })
  sleep(1)
}

To run this test:

k6 run stress.test.js

Spike Test

The spike test. Imagine it like a sudden surge of energy in a music concert. Things are cruising along, then suddenly, BOOM! It's party time!

Spike tests validate the behavior and survival of your system in cases of sudden, short, and massive increases in activity.

Code Breakdown

import http from 'k6/http';
import { sleep, check } from 'k6';

export let options = {
  InsecureSkipTLSVerify: true,
  noConnectionReuse: false,
  stages:[
    { duration: '10s', target:100 },
    { duration: '1m', target:100 },
    { duration: '10s', target:1400 },
    { duration: '3m', target:1400 },
    { duration: '10s', target:100 },
    { duration: '3m', target:100 },
    { duration: '10s', target:0 },
  ]
};

export default function () {
  const response = http.get('https://test.k6.io');
  check(response,{
    '200': (r) => r.status === 200
  })
  sleep(1)
}

To run this test:

k6 run spike.test.js

Soak Test

The most boring test - a bit like taking your API for a leisurely stroll in the park.

Soak tests assess the reliability and performance of your system over extended periods.

Code Breakdown

import http from 'k6/http';
import { sleep, check } from 'k6';

export let options = {
  InsecureSkipTLSVerify: true,
  noConnectionReuse: false,
  stages:[
    { duration: '2m', target:400 },
    { duration: '5h30m', target:400 },
    { duration: '2m', target:0 }
  ]
};

export default function () {
  const response = http.get('https://test.k6.io');
  check(response,{
    '200': (r) => r.status === 200
  })
  sleep(1)
}

To run this test:

k6 run soak.test.js

Stop Using Conditional Rendering: Leveraging the Factory Pattern for Dynamic Component Creation

moayad khader — Mon, 17 Jul 2023 20:43:28 +0000

Introduction:

In the realm of front-end development, conditional rendering has long been a common practice for dynamically rendering components based on certain conditions. While it can serve its purpose in simple scenarios, as applications grow in complexity, maintaining clean and scalable code becomes a challenge. In this article, we explore an alternative approach to conditional rendering by leveraging the factory pattern for dynamic component creation. We'll delve into the benefits of this pattern and demonstrate how it can improve code organization and extensibility.

The Problem with Conditional Rendering:

Conditional rendering involves writing logic within React components to determine which component should be rendered based on certain conditions. While this approach may work well for a few scenarios, it can quickly become convoluted and difficult to maintain as the number of conditions and components increases. Additionally, the logic for conditional rendering can clutter the component code, making it harder to read and understand.

Introducing the Factory Pattern:

The factory pattern is a creational design pattern that allows for the creation of objects without specifying their concrete types. Instead of including conditional rendering within the components, we can delegate the responsibility of component creation to a factory class. This promotes separation of concerns and provides a clean and extensible solution.

Implementing the Factory Pattern for View Components:

To illustrate the benefits of the factory pattern, let's consider a scenario where we need to dynamically create different view components based on a view type. Instead of using conditional rendering within our React components, we can employ the factory pattern to handle the component creation.

We define a View class as the base class, containing a view property of type IViewComponent. This property represents the view component that will be created by the factory. Subclasses of View, such as Home, Settings, Profile, and Organization, extend the base class and set the view property to the respective view components (HomeView, SettingsView, ProfileView, and OrganizationView).

Next, we create a ViewFactory class that includes a createView static method. This method takes a view type as a parameter and returns an instance of the appropriate view subclass based on the provided type. By encapsulating the component creation logic within the factory class, we eliminate the need for conditional rendering within the React components.

Example Implementation:

Let's see an example implementation of the factory pattern for view components:

import HomeView from "views/home";
import SettingsView from "views/settings";
import ProfileView from "views/settings/subViews/profile";
import OrganizationView from "views/settings/subViews/organization";
import { IViewComponent } from "lib/types/view.types";

class View {
    view: IViewComponent;

    constructor() {}

    getView(): IViewComponent {
        return this.view;
    }
}

class Home extends View {
    constructor() {
        super();
        this.view = HomeView;
    }
}

class Settings extends View {
    constructor() {
        super();
        this.view = SettingsView;
    }
}

class Profile extends View {
    constructor() {
        super();
        this.view = ProfileView;
    }
}

class Organization extends View {
    constructor() {
        super();
        this.view = OrganizationView;
    }
}

class ViewFactory {
    static createView(view: string): View {
        switch (view) {
            case "home":
                return new Home();
            case "settings":
                return new Settings();
            case "profile":
                return new Profile();
            case "organization":
                return new Organization();
        }
    }
}

export default ViewFactory;

In the example above, we define different view components (Home, Settings, Profile, and Organization) by extending the View base class. Each subclass sets the view property to the corresponding view component.

The ViewFactory class includes a static method createView that takes a view type as a parameter. Based on the provided type, it creates an instance of the appropriate view subclass using the factory pattern.

Usage in React Components:

To use the factory pattern for dynamic component creation in React, we can leverage the useMemo hook. Let's assume we have a view variable that determines the type of the view we want to render. We can use the ViewFactory to create the appropriate view component using the following code:

const ViewComponent = useMemo(() => ViewFactory.createView(view).getView(), [view]);

return <div>{ViewComponent}</div>;

In the code above, we use the useMemo hook to memoize the result of ViewFactory.createView(view).getView(). This ensures that the view component is only created when the view variable changes. We then render the ViewComponent within a parent component, such as a <div> element.

Benefits of the Factory Pattern:

Separation of concerns: The factory pattern separates the responsibility of component creation from the React components themselves, promoting cleaner and more maintainable code.
Scalability: Adding new view types becomes as simple as creating a new subclass of View and updating the createView method in the factory class. This modular approach avoids cluttering the React components with conditional logic for each new type.
Code reusability: The factory pattern allows for the reuse of common creation logic across different components, enhancing code efficiency and reducing duplication.

Conclusion:

Conditional rendering has long been a go-to technique for dynamically rendering components based on specific conditions. However, as applications grow in complexity, maintaining clean and scalable code becomes increasingly challenging. By adopting the factory pattern for dynamic component creation, we can separate concerns, improve code organization, and enhance extensibility. The factory pattern provides a structured and scalable solution that eliminates the need for conditional rendering within React components. Let's embrace this pattern and write cleaner, more maintainable code in our front-end projects.

Implementing a Pub-Sub Based State Management Tool in React

moayad khader — Thu, 18 May 2023 21:54:22 +0000

State management is a crucial aspect of building complex applications, especially in frameworks like React. While React provides its own state management solutions like useState and useReducer, there are cases where a more flexible approach is needed. In this article, we'll explore how to implement a simple state management tool using the pub-sub (publish-subscribe) design pattern in React. The pub-sub pattern allows components to subscribe to state changes and receive updates whenever the state is modified, providing a scalable and decoupled state management solution.

Understanding the Pub-Sub Design Pattern:

The pub-sub design pattern is a messaging pattern where senders of messages, called publishers, do not directly communicate with specific receivers, called subscribers. Instead, publishers "publish" messages to specific topics or channels, and subscribers "subscribe" to those topics or channels to receive messages. This decoupling allows for loose coupling between publishers and subscribers, enabling flexibility and scalability.

Step 1: Importing Dependencies

To get started, we need to import the necessary dependencies from the React library. We'll be using the useState and useEffect hooks, so include the following import statement:

import { useState, useEffect } from "react";

Step 2: Creating the Pub-Sub Function:

Next, let's create a createSubscribable function that sets up the pub-sub mechanism. This function will handle subscriptions, unsubscriptions, and publish messages to the subscribers:

function createSubscribable<T>() {
  const subscribers: Set<(message: T) => void> = new Set();

  return {
    subscribe(cb: (message: T) => void): void {
      subscribers.add(cb);
    },

    unsubscribe(cb: (message: T) => void): void {
      subscribers.delete(cb);
    },

    publish(message: T): void {
      subscribers.forEach((cb) => cb(message));
    },
  };
}

The createSubscribable function returns an object with three methods: subscribe, unsubscribe, and publish. It uses a Set to store subscriber callbacks, ensuring uniqueness.

The subscribe method adds a callback to the subscribers set, allowing components to subscribe to state changes.

The unsubscribe method removes a specific callback from the subscribers set, allowing components to unsubscribe from state changes when they are no longer interested.

The publish method iterates over all the subscribers and invokes their callback functions with the provided message.

Step 3: Creating the State Hook:

Now that we have the pub-sub mechanism in place, let's create the createStateHook function, which utilizes the pub-sub mechanism to manage and share state between components:

export function createStateHook<T>(
  initialValue: T
): () => [T, (value: T) => void] {
  const subscribers = createSubscribable<T>();

  return () => {
    const [value, setValue] = useState<T>(initialValue);

    useEffect(() => subscribers.subscribe(setValue), []);

    useEffect(() => {
      return () => {
        subscribers.unsubscribe(setValue);
      };
    }, []);

    return [
      value,
      (v: T) => {
        subscribers.publish(v);
      },
    ];
  };
}

The createStateHook function takes an initialValue parameter and returns a function that can be used as a custom React hook.

Inside the returned function, it initializes a state using the useState hook, with the provided initialValue. It also creates two side effects using the useEffect hook. The first side effect is triggered only once when the component mounts (empty dependency array []), and it subscribes the setValue function to the subscribers using subscribers.subscribe(setValue). The second side effect is responsible for cleaning up the subscription by calling subscribers.unsubscribe(setValue) when the component unmounts.

The returned function returns an array with two values: the current state value (value) and a function (v) to update the state. When the state is updated using the provided function, it publishes the new value to all the subscribers using subscribers.publish(v).

Step 4: Usage:

Now that we have our state management tool ready, we can use it in our React components. Here's an example of how to use the state hook createStateHook:

const useCustomState = createStateHook<string>("initial value");

function MyComponent() {
  const [state, setState] = useCustomState();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState(e.target.value);
  };

  return (
    <div>
      <input type="text" value={state} onChange={handleChange} />
      <p>Current value: {state}</p>
    </div>
  );
}

In this example, we create a custom hook useCustomState using createStateHook. It returns an array with the current state value (state) and a function to update the state (setState). We can use these values to manage and update the state within our component.

The handleChange function is an event handler that updates the state whenever the input value changes.

By utilizing the pub-sub design pattern, any component that uses the useCustomState hook will automatically receive updates whenever the state changes, ensuring a synchronized and reactive UI.

Implementing the Pipe Function in JavaScript

moayad khader — Fri, 10 Feb 2023 11:27:21 +0000

Functional programming is a popular programming paradigm that encourages the use of pure functions, immutability, and the composition of functions to build more complex functionality. In this paradigm, the idea is to write functions that take inputs, perform some calculation, and return outputs, without causing any side effects.

One useful tool in functional programming is the pipe function, which allows you to combine multiple functions into a single pipeline. The pipe function takes an initial input, passes it through the first function, takes the output and passes it as the input to the next function, and so on. The result of the last function in the pipeline is the final output.

The pipe function can be implemented in several ways, depending on the requirements of your project. Here's a step-by-step implementation of the pipe function:

Handling Sync Functions:

const pipe = (...fns) => x => {
  return fns.reduce((v, f) => f(v), x);
};

In this implementation, the pipe function takes in an array of functions and an initial value. It uses the reduce method to combine all the functions into a single function that can be executed on the input. The input is passed through each function in the pipeline one by one, with the output of each function being passed as the input to the next function.

Handling Both Sync and Async Functions:

const pipe = (...fns) => x => {
  const pipeFn = (v, f) => {
    return Promise.resolve(f(v));
  };
  return fns.reduce(pipeFn, Promise.resolve(x));
};

In this implementation, the pipe function has been updated to handle both sync and async functions. The pipeFn function now returns a promise that resolves to the output of each function. This means that if any of the functions in the pipeline are asynchronous, the pipeline will wait for the result before proceeding to the next function.

Handling Chain Broken Cases:

const pipe = (...fns) => x => {
  const pipeFn = (v, f) => {
    const result = f(await v);
    if (result === undefined) {
      throw new Error('The chain is broken');
    }
    return result;
  };
  return fns.reduce(pipeFn, Promise.resolve(x));
};

In this implementation, the pipe function has been updated to handle cases where the chain of functions is broken. If a function in the pipeline returns undefined, it means that the chain is broken, and an error is thrown. This can be useful in situations where you want to ensure that the pipeline only continues if certain conditions are met.

To use the pipe function in your code, simply pass in the functions you want to include in the pipeline as arguments to the pipe function. The pipe function will return a new function that can be executed on an input value.

Here's an example of using the pipe function to process a value:

const add = x => x + 1;
const multiply = x => x * 2;
const subtract = x => x - 3;

const processValue = pipe(add, multiply, subtract);
const result = processValue(5);

console.log(result); // Output: 9

In this example, the functions add, multiply, and subtract are passed as arguments to the pipe function. The processValue function that is returned can be executed on an input value of 5. The input value 5 is passed through the add function first, then the multiply function, and finally the subtract function. The final result of 9 is logged to the console.

In conclusion, the pipe function is a useful tool for organizing and managing your code. It allows you to create a pipeline of functions that can be executed on an input value. By handling a range of scenarios, including sync and async functions, chain broken cases, and errors and bugs, the pipe function provides a flexible and robust solution for processing data in your applications.

Server-Sent Events (SSE)

moayad khader — Sat, 17 Dec 2022 18:39:39 +0000

When working on real-time projects, it is often necessary to send messages or updates from the server to the client. There are three main ways to achieve this: client polling, WebSockets, and Server-Sent Events (SSE). Each of these methods has its own advantages and disadvantages, and the best choice will depend on the specific needs of the project. Client polling involves the client repeatedly requesting updates from the server at regular intervals, while WebSockets and SSE allow the server to send updates to the client as they become available.

So, what is Server-Sent Events design pattern?

Server-Sent Events (SSE) is a way for a server to send notifications, messages, or events to a client (or multiple clients) over an HTTP connection. It involves the use of the JavaScript EventSource API, which allows a client to request a stream of data from a specific URL. The server can then send updates or continuous streams of data to the client through this connection. SSE is often used to send real-time updates or data to a web browser.

Getting started with Server-Sent Events

In this section, we will explore how to use Server-Sent Events (SSE) by setting up a simple server using the Express framework and connecting to it from a browser using the EventSource API. We will experiment with SSEs and see how they work in practice.

Creating SSE Server

const express = require("express");
const app = express();
const port = 5003;

function send (res, counter) {
    res.write("data: " + `message ---- [${counter}]\n\n`);
    setTimeout(() => send(res, counter+1), 2000);
}

app.get("/stream", (req,res) => {
    res.setHeader("Content-Type", "text/event-stream");
    var counter = 0;
    send(res, counter);
})

app.listen(port,() => {
    console.log(`Listening on ${port}`)
})

This code sets up an HTTP server using the Express framework. The server listens for incoming HTTP requests on port 5003 and responds to requests for the "/stream" route by sending a series of messages to the client.

The server uses the "Content-Type" header to specify that it is sending an event stream to the client, and the "send" function is used to send a message to the client at regular intervals (every 2 seconds). The message contains a counter value that is incremented each time a message is sent.

Using SSE In The Browser

const sse = new EventSource("http://localhost:5003/stream");

sse.addEventListener('message', event => {
    console.log(event.data);
});

This code creates a new EventSource object and connects it to the "/stream" route on the server at "http://localhost:5003". The EventSource object establishes a connection with the server and listens for events sent by the server.

The code also registers an event listener for the "message" event, which is triggered when a message is received from the server. The event listener logs the message data to the console.

In this case, the server is expected to send a series of messages to the client at regular intervals, and the event listener will be triggered for each message received. The client will log the message data to the console, allowing you to see the messages being sent by the server.

Now Let's take a look at the console

Bingo!!
As expected we are receiving the stream from our sse server (no polling is required).

Server-Sent Events Advantages:

Server-Sent Events (SSE) can be used in browsers that do not natively support them by using a JavaScript polyfill, which can be useful for maintaining backwards compatibility. Additionally, SSE connections will automatically reconnect after being lost, saving developers the effort of implementing this behavior themselves. Lastly, SSEs are less likely to be blocked by corporate firewalls, making them a good choice for use in enterprise settings.

Server-Sent Events Disadvantages:

Server-Sent Events (SSE) have some limitations that may make them less suitable for certain types of applications. These limitations include:

Data format: SSE can only transport UTF-8 messages, and does not support binary data.
Concurrent connections: A browser can only have a limited number of concurrent SSE connections (usually six) at any one time due to the behavior of http1 protocol. This can be a problem when you want to open multiple tabs with SSE connections. However, you can overcome this problem by using SSE design pattern over http2 instead of http1.
Directionality: SSE is a one-way communication channel, meaning that you can only send messages from the server to the client. While this is useful for creating read-only real-time apps like stock tickers, it can be limiting for other types of real-time applications that require bidirectional communication.

What is the difference between http1 and http2 ?

moayad khader — Mon, 12 Dec 2022 19:57:39 +0000

What is the difference between HTTP and HTTP2?

To answer this question. First, we need to know the relationship between http and tcp protocol.

TCP manages the data stream, whereas HTTP describes what the data in the stream contains. So that means that we need to establish a new tcp connection between our browser and the destination web-server each time we want to perform a HTTP request.

So what is the problem with that?

The problem is that each browser has a limited number of connections to a server ( 6-10 connections based on the browser ) and doing a new request over one of those connections has to wait for the ones to complete before it can fire it off.

And here, HTTP/2 appears trying to find a solution for HOL blocking by introducing multiplexing (It does that by tagging each request) so that you can issue new requests over the same connection without having to wait for the previous ones to complete.

HTTP/2 does however still suffer from another kind of HOL, namely on the TCP level. One lost packet in the TCP stream makes all streams wait until that packet is re-transmitted and received. This HOL is being addressed with the QUIC protocol.

What is QUIC?

QUIC is a "TCP-like" protocol implemented over UDP where each stream is independent so that a lost packet only halts the particular stream to which the lost packet belongs, while the other streams can go on.

HTTP/3 is being done over QUIC instead of TCP and TLS.