DEV Community: Muzammil

How to access the request context anywhere in your application ?

Muzammil — Mon, 16 Jan 2023 18:49:37 +0000

Losing track of the request context

Languages like Java, C++ are multi-threaded which can have access to request contexts in any part of the thread execution flow or request lifecycle. Whereas, Javascript follows a single-threaded functional flow by default and our required arguments need to be passed through async functions until the request-response lifecycle has been completed. But there could be instances where we lose track of data from the request context that is hitting the application.

We pass headers, query params and body on a request which can be highly crucial. Say we introduce a header tracking-token which tracks the HTTP calls in a microservice architecture. This being sent with a request header hitting from a service, we have access to the header in the route file as well as multiple middleware. But there are service layer functions handling heavy logic to get the desired result. Under this scenario, we may have multiple service layer functions being called. Also, we would've introduced more number of routes and more number of functions to handle the routes. At this point of time, it would be cumbersome to pass the request as arguments to each callback function in the entire asynchronous cycle to make use of the header named tracking-token.



// routes.js
app.get('/get-users, () => {
 const userIds = req.users.map(user => user.id);
 await getUsers(userIds);
});

//users.js
const getUsers = async (userIds) => {
 await db.findAllByIds(userIds);
}

In the code above we have lost track of the req in the getUsers function. Now, the only way to pass req.get('tracking-token') is as a parameter to getUsers function. Imagine we have tens and hundreds of such functions without access to request context and we may need to access it everywhere. Got into a mess right?!

AsyncLocalStorage has got us covered!!

AsyncLocalStorage to the rescue

There are two ways to approach this. There are projects which use the latest stable version of Node.js and can embrace this and have a go ahead with AsyncLocalStorage. But there are applications where upgrading to a newer node version is not an easy step. We'll figure out the former first.

AsyncLocalStorage is a class which uses node:async-hooks which is stable after Node version 16. We can add a middleware with AsyncLocalStorage store which would hold the request context.




//storeRequestMiddleWare.js
const { AsyncLocalStorage } = require('async_hooks');

const asyncLocalStorage = new AsyncLocalStorage();

const storeRequestMiddleware = (req, res, next) => {
  asyncLocalStorage.run(new Map(), () => {
    asyncLocalStorage.getStore().set('context', 
        req.get('tracing-token'));
    next();
  });
};

module.exports = {
  storeRequestMiddleware,
  asyncLocalStorage,
};

//app.js

app.use(storeRequestMiddleware)

With the storeRequestMiddleware, the tracing-token from the request header is now held in the store initialised by AsyncLocalStorage.

Now, we can fetch the tracing-token from the store in any part of the application.



//random.js
const traceId = asyncLocalStorage.getStore().get('traceId');

Note: AsyncLocalStorage uses async-hooks which is still in experimental state. Make sure to use the dependency with caution for production-ready applications.

For older node versions

As for projects using older versions of node, we have the node-continuation-local-storage package which solves the same problem but has it's own way of implementation as written below.



import { createNamespace } from 'continuation-local-storage';

import { NextFunction, Request, Response} from "express";

export const requestStore = createNamespace('token-store');

export const tracingTokenMiddleware = (req: Request, res: Response, next: NextFunction) => {

    requestStore.run(() => {

        requestStore.set('tracing-token', req.get('tracing- 

              token'));

        next();

    });

};

Drawbacks of `continuation-local-storage`

The package makes use of async-listeners which backfires in case of concurrent HTTP calls. We may lose the request context when multiple HTTP calls are made to another service.

It depends on the version of node and the requirement we need to meet when implementing these dependencies. Hope we don't lose track of the required parameters from the request context anymore!

5 Reasons why you should prefer Next.js

Muzammil — Tue, 01 Feb 2022 10:20:28 +0000

When a solid framework holds its ground in the Javascript arena, some contributors start optimizing and building on top of the framework to make it better for the open-source community. Such was a framework that was built on top of ReactJS and has taken its place for web developers who wish to create web applications. Ranging from portfolio sites to e-commerce applications, Next.js has been preferred due to its less steep learning curve than its peers.

There are many more reasons for Next.js to stay despite its ease of development and everything is just getting better with it. Here are some of the reasons why the “React Framework for Production” as they term it will be used more and more by the developer community.

1. Pre-fetched routing 🌏

Routing has been bothering Javascript developers from the moment it was adapted for browser development. We usually go with installing one or more dependencies - be it react-router, Vue-router, or setting up Angular routing modules. Next.js has it all covered, all we need is to create files under the src/pages folder to add a route.

We can handle dynamic routes in the same way as well. Say, we have a blog or product which has a unique identifier id, if we require a URL dynamically for each blog - we may just have to create a file named [id].js . Well, now we may ask for nested routes - no worries, create nested folders and files to have nested routes. For example, a file inside folders such as pages/page/[id].js will have corresponding routes like pages/page/1, pages/page/2 etc..

2. Image and Font Optimization 🌈

The Next.JS component named next/image will serve the purpose of optimizing our images based on the viewport and enhancing visual stability as per the Core Web Vitals for browsers. Instead of the usual <img> tag, we may need to use the Image component when adding images to the DOM to achieve this. Adding a priority property as mentioned below to a certain image would make Next.JS ensure the image is LCP (Largest Contentful Paint) and boost performance.

<Image

src="/sample.png"

alt="A sample picture to boost LCP score"

priority

/>

Fonts are fetched in Next.JS during build-time and not during run time, this prevents the browser to go looking for the font source when the application is being loaded in the browser run time.

3. API Routes 🔩

We may have to keep in mind that Next.js is a full-stack framework. Yes, APIs can be written in NextJS. Again, you never have to set up all the middleware configurations like in an express backend, all we have to do is create a folder name /api inside the pages folder. Any file we create inside this folder with a handler function will be treated as an API with our traditional req and res parameters. Here’s an example of a similar handler function. Say we have a file called pages/api/dashboard.js with the following handler function

export default function handler(req, res){

    res.status(200).json({

            data: 'This is dashboard data'

    })

}

All we have to do is call localhost:3000/api/dashboard and fetch the data. At times, we may not need an isolated backend service or we may just feel lazy to create a backend application for POS project - NextJS got you covered with the backend service as well.

4. Pre-rendering ⌛

Next.js supports two types of pre-rendering a page:

Static Site Generation (SSG)
Server-Side Rendering (SSR)

Static site generation is when we need to pre-fetch the data required for the page. Therefore, the HTML is built during build time, the data required for the page is pre-rendered and populated in the components as props. This enables us to perform better in terms of SEO and better performance of the application. We use two handler functions getStaticProps and getStaticPaths to fetch the required data for the page and to fetch all the paths available in the application correspondingly.

Server-side rendering as we know provides the HTML Template from the server to be loaded in DOM, but in terms of NextJS - there is a slight enhancement. Next.js provides a function called getServerSideProps which would be called each time a server-side request is made. This makes sure the data is pre-rendered and is up to date before the template is loaded. This differentiates from Static site generation as in getStaticProps will be called only once during the build time and not on every server-side request. The creators of Next.js recommend using SSG for better performance unless it is required to go with SSR.

5. Middlewares ⏩

Working with Node server-side applications would have made us explore middleware more than ever. We never know how many handler functions we may have written if the concept of middlewares were not introduced to the open-source community. The functions defined as middleware will be applied before we hit all the routes in the pages folder in chronological order.

We just have to define functions inside pages/_middleware.ts file. The creators of Next.js have developed middlewares to support various functionalities for authentication, server-side analytics, A/B testing to name a few.

6. Bonus - Comparison with Gatsby 👾 👾

Gatsby has been the go-to solution with the advent static site generation frameworks and JAM stack, but Next.js has caught up as a full-stack solution. There are situations when we need to prefer one over the other, but to consider Next.js - here are a few inferences made.

Learning Curve - Next.js has a smoother learning curve than Gatsby. With lesser pre-requisites, Gatsby would need a thorough understanding of technologies such as GraphQL and markdown to get started. All we need to kickstart with Next.js is foundational React knowledge.

Minimalism - We do not need to include a lot of external dependencies when getting to know about Next.js, whereas Gatsby is popular with the number of plugins and communities built around it.

Data fetching - Just understanding getStaticProps and getServerSideProps is all there is to know about data fetching in Next.js, whereas Gatsby has its perks in its way of fetching data using GraphQL but not to get started with when we have limited bandwidth on doing things.

Looking for a write-up on a different framework on a different day !! Until then.... ✌️ 💜

Get rid of try-catch in server-side development, here's a better way!

Muzammil — Wed, 01 Dec 2021 17:32:55 +0000

PS: This write-up goes well with node.js or express.js development

We'll go knocking on the try-catch statement door whenever we encounter an asynchronous function in javascript - the traditional way. It is and will always be the backbone to handling async-await functions in server-side development.
It has been of great help when we had to avoid the callback function and got us out of callback hell several times.

But what if we can enhance this and make the try-catch statements shorter and cleaner. Here goes our typical way of handling things.

async function main(req, res, next) {
  try {
    var result = await doSomething();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

Being Javascript developers, we are familiar with the above code, result is printed to the console if everything goes smooth or else error gets printed - 🍰

A Cleaner Alternative

Say if we're using Express framework and handling requests using try-catch, here's something cleaner and simpler that can be replaced for the never-ending lengthy statements.

const catchAsync = (fn) => (req, res, next) =>{
    Promise.resolve(fn(req, res, next)).catch((err) => next(err));
});

catchAsync function can be considered as a middleware that just accepts the parameters (req, res, next). If there's any error, then it returns the error.

This is how we can call our enhanced error catching function to avoid try-catch statements.

const sampleFunction = catchAsync(async (req, res) => {
           const awaitedResponse = await getResponse();
           res.send(awaitedResponse);
});

catchAsync can be called anywhere we need to implement our traditional try-catch logic. Let's keep enhancing our good old lengthy statements and make javascript simpler for budding developers

Kubernetes for beginners: Where do I start?

Muzammil — Sun, 07 Nov 2021 08:24:16 +0000

Being developers, we get zoned out in those standup calls when the server admins take over and flaunt their container orchestration skills. Let's take over and it's our time to shine now.

What is Kubernetes though?

We have been hearing a lot about containers and how they've been streamlining the way a development lifecycle works. Not getting deep into containers in this post, you can have a look into this. When our applications become bigger or if we are getting into making it modular, multiple containers come into play. Here's where things get tricky. For example, if we are running an e-commerce application - our auth/login, payment services, product catalogues, inventory management will run as individual containers or services - this is the microservices approach. Say if we are running the application using a Docker engine, we never know when a container goes down or when to scale up a container. We wouldn't have any clue when our social media campaign clicks and there is a good amount of rapid traffic hitting our services. Imagine if we got a black Friday sale going on and my services running are taking longer than usual to respond - Docker engine turns a bling eye 😧. What if my payment service goes down? 😟 - It would be chaos.

Enter Kubernetes 😎 !!! - the open-source container orchestration platform. Now, we have it covered, Kubernetes does the auto-scaling for our pods in which our containers run. It does anything and everything to keep all the services up and running without the mess unravelling on the Black Friday sale with so much ease.

When do I need to use Kubernetes?

As long as we're going with a multi-container application, Kubernetes is a yes. If we're adopting microservices architecture for the same - we got to be going with Kubernetes.

Some of us would be asking this - "Hold up mate...But most of the applications I run are just React / Angular applications as a side hustle, do I need to containerize and go with Kubernetes ?" Short answer: A big no. Setting up a Kubernetes cluster is a lengthy task if we are not going with a cloud-managed Kubernetes service like AWS EKS.

Kubernetes glossary

Cluster
A Kubernetes cluster is a set of nodes that provisions us to run the containerized application. It enables us to run applications across multiple machines and environments but helps us manage them under a single window

Pod
Pods are the smallest unit in Kubernetes. They can just be called a wrapper to the containers we run - a shell that encloses our application. We can scale up and down the number of pods which is similar to altering the number of instances of a deployed application.

Nodes
Nodes are physical or virtual machines where the pods are run. Ideally, Kubernetes sets up one master node and multiple worker nodes where the pods are run. The master node as its name says has a control plane which is the decision-maker in a cluster - it decides which nodes should the pods run.

Deployments
Deployments are a familiar term for us - yes, they are the same. They provide the configuration for the pods and the containers which are to be managed. We got two approaches to make a deployment - using the CLI (Imperative approach) and using a YAML file (Declarative approach). I prefer the latter approach to have the configurations documented.

What next ?

Start with a practical guide that goes according to your pace. This one here on Udemy would be a good kickstart if you're starting right away from containers.
Start playing around with minikube, which is a single node cluster setup to learn the concepts of Kubernetes in our local environment.
This write up is minuscule than the tip of the iceberg. There's nothing more precise than the official Kubernetes documentation where they provide a practical lab to understand the concepts.
As the cloud has made up our lives easier, it's no more a deal starting up a cluster and managing the orchestration of pods. Cloud-managed Kubernetes services have taken the burden of setting up things. It's high time we have a look at popular Kubernetes managed services like AWS EKS, Azure Kubernetes Service, IBM Cloud Kubernetes service based on our preferences.
Last but not least, remain consistent in learning Kubernetes. It's a steep learning curve out there but with a slight focus on things makes things a lot easier. 😃

Containerization for beginners: Running a nodeJS application using Docker

Muzammil — Mon, 11 Oct 2021 15:10:26 +0000

There are a few questions that would come up when seeing the title.

"Hey, why would I run my nodeJS application in a container? I can use node server, nodemon or n number of live servers available"
"When would I have to run it as a container?"

The answer is pretty simple if you're planning to not go through the tedious docker documentation out there.

Collaboration

We mostly work as a team. Our peers install and work with dependencies, pulling from the repository and getting the code running in our development server is usually cumbersome. Dependencies may be missing, system requirements need to be met, storage issues, version control, quite a lot of other obstacles. Here comes the containers!!

Isolation

Applications running in containers are isolated from each other and have their own storage and environments. We all would've gone through issues in production which cannot be captured in our development environment. Containers solve this right away.

Steps to start a NodeJS container

Pre-requisites: Docker desktop or docker-engine needs to be installed in the local machine

A sample NodeJS app that listens in port 3000 is being taken here to run in a container using Docker engine.

// app.js

const express = require('express')
const mongoose = require('mongoose');

const app = express();

app.get('/', (req, res) => {
   res.send('Yayyy!! Containers are a piece of cake');
});

app.listen(3000, () => {
   console.log('Container running with db connection');
});

STEP 1: Create a Dockerfile

Create a file named Dockerfile without any file extensions with the following content.

FROM node:14

WORKDIR /app

COPY . .

RUN npm install

EXPOSE 3000

CMD [ "node", "app.js" ]

Try figuring out what the above steps mean. They represent layers of a docker image. It is nothing but telling the Docker engine what procedure to follow when building the image. Wait a minute, what do you mean by an image ? Got you covered 😉

Docker images can be explained as blueprints to run an application in a container, just like how blueprints of a building help us to navigate through a block.

STEP 2: Run the docker engine

Open docker desktop or just run the docker command in the terminal (on Linux systems) to start the docker engine.

STEP 3: Build the docker image

Navigate to the root directory of our application in the terminal. Run the following command to build the docker image of our application.

docker build .

The . in the end is just pointing to the root directory where our Dockerfile is placed. This command would download the base node image from the Docker Hub or otherwise called a container registry. The above command would build the application container image which is to be run in a container.

After successfully building the image, the terminal presents us with a docker image id - something similar to this:

=> => writing image sha256:d8e42706********9

d8e42706********9 is the image id here.

STEP 4: Run the docker container

The last step is to run the container using the image id we have obtained. Run the following command to start our application in a container.

docker run -p 3000:3000 d8e42706********9

This would route the exposed port 3000 in the container to port 3000 in the local machine. Navigate to localhost:3000 in your browser and check for the response from the server

Yayyy!! Containers are a piece of cake

🍰 🍰

Multiple arrow operators in a single function

Muzammil — Fri, 14 May 2021 15:13:39 +0000

We may have come across arrow functions in javascript and are almost saturated learning about the difference between normal functions and arrow functions, the difference between ES5 and ES6 and everything that is connected to it. But everytime we come across multiple arrows in a single function, we keep struggling - or it could just be a "me" problem. Here goes, what multiple arrows in a function mean.

A simple ES6 function that demonstrates it:-

const add = x => y => x + y

This can be written in ES5 functional format like this:

function add(x){
 return function(y){
  return x + y
 }
}

The above code explains what is going on with multiple arrow operators. It returns a function which in turn accepts a parameter, the nested returned function maintains the state of x. This methodology is called currying.

To call the above function, we follow a slightly different syntax. React developers who have worked on Redux would have come across such function calls when using the connect function. Here we go:-

add(2)(3)
// This would return 5

That's just another javascript basics that could help you crack your dream job interview. Thank me later! 😉

Is "..." in javascript a spread operator or are they rest parameters?

Muzammil — Thu, 22 Apr 2021 12:23:57 +0000

Short answer? They're both. Here's to another question that choked up an interview process recently. Every time we come across the three dots in our javascript code, either it makes our life look so easy or it's another day of googling "Spread operator". Just remember the two points below if you're looking for a TL;DR or continue reading if you want to dig deeper.

Keep in mind:-

The three dots (...) act as rest parameters if we aren't sure of the number of parameters in a function
The three dots (...) act as spread operator when we have to merge two or more objects.

Rest Parameters

const sumOfAllArgs(...args){
 let result = 0;
 args.forEach((arg) => {
     result += arg;
 })
 return result
}

sumOfAllArgs(1,2,3,4,5) // would return 15

The above function which uses the rest parameters doesn't have a limit on the number of arguments to be passed to it.

Spread Operator

When you need to unpack an array or join an array with another or in case of copying the values of an array to another we can use the same operator (...) for a different cause

Concatenating an array

const myArr = ["jack", "jill", "hill"]
const yourArr = ["water", ...myArr]

Here the value of "yourArr" would be ["water", "jack", "jill", "hill"].

Copying arrays

const a1 = [1, 2, 3]
const a2 = [...a1]

Any changes made to a1 wont affect array a2.

The spread operator can also be used to perform the same actions on objects as well. Hope you get it right the next time! :)