Forem: Nikhil Kadam

WTF is Asynchronous JavaScript: async/await vs .then()

Nikhil Kadam — Sun, 17 Sep 2023 19:37:41 +0000

Introduction

Hey there! Welcome back to the new blog post in the "WTF is JavaScript" series.

In today's article, we will understand the asynchronous capabilities of JavaScript. Also, we will learn about how to use .then() and async/await in your code.

WTF is JavaScript Series 👈🏻

In this series, we are exploring key modern JavaScript concepts, one topic at a time. Check out the series to find more such insightful content and improve your JavaScript skills.

Is JavaScript Synchronous or Asynchronous?

JavaScript is both synchronous and asynchronous, depending on how it's used. This duality arises from JavaScript's single-threaded execution model and its need to handle tasks that may take some time to complete, such as fetching data from a server or reading a file.

Synchronous JavaScript :

JavaScript is inherently synchronous by nature, which means it executes code line by line, one after the other.
Synchronous operations block the execution of subsequent code until the current operation is completed. For example, if you have a long-running calculation, it will prevent other tasks from running until it's finished.

Asynchronous JavaScript :

JavaScript also supports asynchronous operations to prevent blocking. This is essential for tasks like making HTTP requests, reading files, or waiting for user input.
Asynchronous operations allow JavaScript to start a task, and then move on to other tasks without waiting for the first task to complete. When the asynchronous task finishes, it triggers a callback function or resolves a promise.

It means that JavaScript is synchronous by default to ensure predictable execution but provides mechanisms like callbacks, promises, and async/await to handle asynchronous operations efficiently and maintain responsiveness in web applications.

Understand async programming with .then() and async/await

This is where .then() and async/await come into play. They provide structured ways to work with asynchronous operations, allowing developers to write code that's easier to understand, manage, and maintain while ensuring responsiveness.

The .then() Approach: Old But Gold

Let's start with the .then() approach, which is based on Promises JavaScript feature introduced to handle asynchronous operations.

Suppose you want to fetch and display a list of user names from an API. Here's how you might use .then():

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => {
    const usernames = data.map(user => user.username);
    console.log(usernames);
  })
  .catch(error => console.error(error));

Output:

["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]

Here's how it works:

We fetch data from the API.
We use .then() to handle the response.
We convert the response to JSON.
We log the data or handle errors with .catch().

Problems with .then() - Callback Hell

While .then() is useful, but it can become problematic when you have multiple asynchronous tasks or deeply nested operations. This situation is often referred to as "callback hell" because the code becomes difficult to read and maintain.

example:

Imagine you need to fetch user data and their posts, and then log both. Here's how it might look in callback hell:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(userResponse => userResponse.json())
  .then(userData => {
    fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userData.id}`)
      .then(postsResponse => postsResponse.json())
      .then(postsData => {
        console.log('User Data:', userData);
        console.log('User Posts:', postsData);
      })
      .catch(error => console.error(error));
  })
  .catch(error => console.error(error));

As you can see, the code becomes deeply nested and challenging to follow.

Introduction to async/await: simpler way

To address the issues of callback hell and simplify asynchronous code, JavaScript introduced async/await. It allows developers to write asynchronous code in a more linear and structured way.

How async/await Helps

Here are a few key benefits of async/await:

Readability : Asynchronous code can be written more like synchronous code, making it easier for developers to follow the flow of the program.
Error Handling : Errors are easier to handle with try...catch blocks, leading to more robust and maintainable code.
Structured : Code becomes more structured and organized, reducing the need for deeply nested callbacks.

Now, let's see how async/await works with an example.

Code Example with Output

async function fetchUsernames() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    const usernames = data.map(user => user.username);
    console.log(usernames);
  } catch (error) {
    console.error(error);
  }
}

fetchUsernames();

Here's how async/await works:

We declare an async function fetchUsernames.
Inside the function, we use await to pause execution until the promise is resolved.
We handle success and errors using a simple try...catch block.

Output:

["Bret", "Antonette", "Samantha", "Karianne", "Kamren", "Leopoldo_Corkery", "Elwyn.Skiles", "Maxime_Nienow", "Delphine", "Moriah.Stanton"]

Why async/await shines?

As you can see, the code is more structured and easier to understand compared to the .then() approach. It reads like a series of steps, from fetching the data to logging the usernames.

It's clear, organized, and easier to handle errors. No callback hell, just smooth, readable code.

Async/await vs .then(): what to choose

When to Choose `.then()`:

Familiarity : If you or your team are already comfortable with using .then(), and the codebase predominantly uses it, sticking with it may be the simplest choice.
Simple Sequences : For straightforward, single asynchronous operations, such as fetching data from an API or making a single HTTP request, .then() can provide a clear and concise way to handle the task.
Chaining : .then() allows for easy chaining of multiple asynchronous operations in a linear manner, which can be effective for simpler scenarios.

When to Choose `async/await`:

Readability : async/await code reads more like synchronous code, making it easier to understand and maintain, especially for complex asynchronous logic.
Error Handling : async/await simplifies error handling with try...catch blocks, leading to cleaner and more robust code.
Structured Code : If you need to work with multiple asynchronous operations, async/await provides a structured way to handle them, reducing the risk of callback hell.
Variable Scope : Variables declared with await are limited to the scope of the async function, preventing accidental variable leakage.
Debugging: Debugging is typically easier with async/await because the code execution follows a more predictable, linear flow.

Practical Tips for Easier Coding

For .then(): Give your functions clear names, so it's like reading a recipe book.
For async/await: Use arrow functions to make your code shorter and sweeter.

Conclusion

In this introductory article, we explored JavaScript's synchronous and asynchronous nature.

We saw how .then() and async/await are essential tools for managing asynchronous operations. .then() is useful but can lead to callback hell in complex scenarios.

In contrast, async/await simplifies asynchronous code, making it more readable and structured.

Thank you for reading!

That's it for this blog post, and stay tuned for upcoming blogs in the WTF is Javascript series. Thank you for reading this article!

If you enjoyed this article, be sure to subscribe to my newsletter to stay up-to-date with my content.

And if you need any help or have any questions, don't hesitate to comment below! I'll be happy to help you out.

Mastering Middleware in Express.js: A Beginner's Guide

Nikhil Kadam — Fri, 03 Feb 2023 18:53:58 +0000

Introduction

Hey there! Welcome to a new blog post about middleware in Express.js!

If you're new to Express.js, you might not be familiar with the concept of middleware, but it is an important aspect of the framework that is worth understanding.

In this blog post, we'll be covering everything you need to know about middleware in Express.js, including what it is, how it works, and how to use it in your routes. So, let's get started!

What is middleware? 🤔

Middleware in Express.js is a function that is executed between the incoming request and the outgoing response.

It can be used to modify the request and response objects, perform tasks such as authentication and validation, and even terminate the request-response cycle.

How does it work? ⚙️

Middleware is defined using the app.use()

__ function, which takes a function as an argument. The function can have three arguments: the request object, the response object, and the next function in the middleware chain.

Example

app.use((req, res, next) => {
  console.log('A request was made!');
  next();
});

This middleware function will be executed for every incoming request, and it will log a message to the console.

The next() function is used to move to the next middleware function in the chain, or to the final route handler if there are no more middleware functions.

Types of middlewares

There are several different types of middleware available in Express.js, each with its own specific use case.

Here are a few examples:

Application-level middleware

This type of middleware is executed for every incoming request, regardless of the route. It can be used to perform tasks such as logging, parsing request bodies, and setting response headers.

Router-level middleware

This type of middleware is specific to a particular router and is executed only for requests that match the router's path. It can be used to perform tasks such as authorization, validation, and error handling.

Error-handling middleware

This type of middleware is used to handle errors that occur in the application. It takes four arguments: the error object, the request object, the response object, and the next function.

Third-party middleware

There are many third-party middleware libraries available for Express.js, such as body-parser, cors, and helmet. These libraries provide additional functionality that can be easily integrated into your application.

Using middleware in code 💻

Routing example

Middleware can be used in Express.js routes to perform tasks such as authentication, validation, and error handling.

For example, consider the following route that requires authentication:

app.get('/secret', authenticate, (req, res) => {
  res.send('You have access to the secret page!');
});

function authenticate(req, res, next) {
  if (req.headers.authorization !== 'secret') {
    return res.status(401).send('Unauthorized');
  }
  next();
}

In this code, authenticate function is a middleware function that checks the authorization header of the request.

If the header is not set to secret, the middleware function returns a 401 status code and a message saying "Unauthorized".
If the header is set to secret, the middleware function calls the next() function, which moves on to the final route handler.

Chained middleware example

Middleware functions can also be chained together, allowing you to perform multiple tasks in a single route.

For example:

app.get('/secret', validate, authenticate, (req, res) => {
  res.send('You have access to the secret page!');
});

function validate(req, res, next) {
  if (!req.headers.authorization) {
    return res.status(400).send('Missing authorization header');
  }
  next();
}

function authenticate(req, res, next) {
  if (req.headers.authorization !== 'secret') {
    return res.status(401).send('Unauthorized');
  }
  next();
}

In this example, the validate function is executed before the authenticate function.

If the authorization header is missing, the validate function returns a 400 status code and a message saying "Missing authorization header".
If the header is present, the validate function calls the next() function, which moves on to the authenticate function.

Just another example

app.use((req, res, next) => {
  console.log('I see you making that request...');
  setTimeout(next, 1000);
});

app.get('/', (req, res) => {
  res.send('I see you made it here...');
});

This middleware function logs a message to the console and waits for one second before calling the next() function.

The resulting delay might be frustrating for users, but it can be a useful technique for simulating slow network conditions during testing. Just don't use it in production! 😉

Custom middleware example

It's easy to write your own custom middleware in Express.js. All you need to do is define a function and pass it to the app.use() function.

For example:

function logger(req, res, next) {
  console.log(`${req.method} request made to ${req.originalUrl}`);
  next();
}

app.use(logger);

This middleware function will log a message to the console every time a request is made to the server. You can also specify a path for the middleware function to only be executed for requests matching that path. For example:

app.use('/api', logger);

This middleware function will only be executed for requests made to the /api path.

Best practices for using middleware ✅

Here are a few best practices for using middleware in Express.js:

Keep middleware functions small and focused on a single task. This will make them easier to understand and reuse.
Use the next() function to move to the next middleware function or route handler. If you forget to call next(), the request-response cycle will be terminated and the client will not receive a response.
Don't modify the request and response objects in place. Instead, create new objects and assign them to the request and response objects.

This will prevent unintended side effects and make your code easier to understand.

Use router-level middleware for tasks that are specific to a particular route, and use application-level middleware for tasks that are global to the application.
Consider using third-party middleware libraries to save time and avoid reinventing the wheel.

Conclusion ✍🏻

In this blog post, we've covered the basics of middleware in Express.js, including what it is, how it works, and how to use it in your routes.

We've also looked at different types of middleware and best practices for using middleware in your application.

Resources 📑

If you want to learn more about middleware in Express.js, there are many great resources available online.

Some good places to start include:

The Express.js documentation on middleware
Middleware in Node and Express Tutorial by freeCodeCamp

Thank you for reading! 🎉

That's it for our blog post on middleware in Express.js. Thank you for reading this article!

If you enjoyed this article, be sure to subscribe to my newsletter to stay up-to-date with my content.

And if you need any help or have any questions, don't hesitate to reach out – I'm happy to help out. See you on Twitter! 👋🏻

Getting Started with Docker - Introduction for Beginners

Nikhil Kadam — Tue, 17 Jan 2023 13:23:00 +0000

What is Docker?

Docker is an open-source containerization platform that allows developers to package and deploy applications in a standardized and isolated environment. It uses containers, which are lightweight, standalone, and executable packages that contain everything an application needs to run, including the application code, libraries, dependencies, and runtime.

Introduction to Docker

Docker revolutionized the way applications are deployed and run by providing a standard and consistent environment that can be easily shared across development, testing, and production environments. It allows developers to focus on writing code and testing their applications without worrying about the underlying infrastructure and dependencies.

History of Docker

Docker was first released in 2013 by Solomon Hykes, the founder of dotCloud, a Platform as a Service (PaaS) provider. The initial release of Docker was based on the concept of Linux containers (LXC), which had been around for a while but had not gained much popularity. Docker made containers more accessible and easy to use by providing a user-friendly interface and tools for building, sharing, and running containers.

Why do we need Docker?

There are several reasons why Docker has become so popular in the software development industry:

It allows developers to easily package and deploy their applications in a standardized environment, reducing the risk of compatibility issues and errors when moving between different environments.

It allows developers to easily share their applications and dependencies with other team members, ensuring that everyone is working with the same version of the code and dependencies.

It allows developers to easily scale and deploy their applications to different environments, such as test, staging, and production, without worrying about the underlying infrastructure.

It allows developers to easily test their applications in different environments and configurations, ensuring that they are working as expected.

Key Features of Docker

Some of the key features of Docker are:

Containerization: Docker allows developers to package their applications and dependencies into lightweight, standalone, and executable containers that can be easily shared and deployed.
Portability: Docker containers can be easily moved between different environments and platforms, such as local development environments, testing environments, staging environments, and production environments.
Isolation: Docker containers are isolated from each other and the host system, ensuring that they do not interfere with each other or the host system.
Standardization: Docker provides a standard and consistent environment for developing, testing, and deploying applications, ensuring that applications work as expected in different environments.

Docker Architecture

Docker uses a client-server architecture, with the Docker Engine being the server and the Docker client being the command-line interface (CLI) used to interact with the Docker Engine.

The Docker Engine is responsible for building, running, and managing Docker containers. It consists of three main components:

The Docker daemon, which is the background process that manages Docker containers.
The Docker REST API, which is the interface used by the Docker client to communicate with the Docker daemon.
The Docker CLI, which is the command-line interface used to interact with the Docker daemon through the Docker REST API.

The Docker client is a command-line interface that allows users to interact with the Docker daemon through the Docker REST API. It is used to build, run, and manage Docker containers.

How Docker Works

Docker works by using containers to package and isolate applications and their dependencies. When a developer writes an application, they can use the Docker CLI to build a Docker image, which is a lightweight, standalone package containing the application code, libraries, dependencies, and runtime.

When a developer is ready to deploy their application, they can use the Docker CLI to create a Docker container from the Docker image. A Docker container is a lightweight, standalone, and executable package that contains everything the application needs to run, including the application code, libraries, dependencies, and runtime.

To run a Docker container, the developer can use the Docker CLI to send a request to the Docker daemon, which will start the container and run the application inside it. The Docker daemon will also manage the container, ensuring that it has the resources it needs to run and that it is isolated from other containers and the host system.

Here is a diagram illustrating the process of building, running, and managing Docker containers:

docker build

docker build is a command that is used to build an image from a Dockerfile. A Dockerfile is a text file that contains instructions for how to build an image. The docker build command reads the instructions in the Dockerfile and creates an image based on those instructions.

docker pull

docker pull is a command that is used to pull an image from a Docker registry. A Docker registry is a host that stores Docker images. The docker pull command retrieves an image from the registry and saves it to the host machine.

docker run

docker run is a command that is used to run a container based on a particular image. When you run a container, you are creating a new instance of the image that the container is based on.

In addition to building and running Docker containers, developers can also use the Docker CLI to manage their Docker images and containers, including creating and modifying images, pushing images to Docker Hub (a registry for Docker images), and pulling images from Docker Hub.

Conclusion (TL;DR)

Docker has revolutionized the way applications are developed, tested, and deployed by providing a standard and consistent environment that can be easily shared and scaled across different environments.

Its containerization technology allows developers to package and deploy their applications in lightweight, standalone, and executable containers, ensuring that they are portable, isolated, and consistent.

Its client-server architecture and command-line interface make it easy for developers to build, run, and manage Docker containers, allowing them to focus on writing code and testing their applications.

Thank you for reading! 🎉

That's it for this blog post. Thank you for reading this article!

If you enjoyed this article, be sure to subscribe to my newsletter to stay up-to-date with my content.

And if you need any help or have any questions, don't hesitate to reach out – I'm happy to help out. See you on Twitter! 👋🏻

Getting Started with NodeJS - Introduction for Beginners

Nikhil Kadam — Fri, 16 Dec 2022 18:12:06 +0000

What is NodeJS?

Node.js is a popular JavaScript runtime that allows developers to build fast and scalable server-side applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for building real-time web applications.

History of NodeJS

Node.js was created in 2009 by Ryan Dahl and has become one of the most popular and widely-used JavaScript runtime environments, especially for building web servers and networking applications. It is built on Chrome's V8 JavaScript engine, which allows it to execute JavaScript code at high speeds.

Why should we use NodeJS?

Fast and efficient: Node.js is built on Chrome's V8 JavaScript engine, which makes it fast and efficient for running JavaScript code.
Asynchronous and non-blocking: Node.js uses an event-driven, non-blocking I/O model, which makes it well-suited for real-time applications.
Large ecosystem of open-source libraries: Node.js has a large ecosystem of open-source libraries, known as "modules", which can be easily installed and used in your applications. These modules provide a wide range of functionality, from parsing HTTP requests to interacting with databases.
Easy to learn: If you are already familiar with JavaScript, then learning Node.js will be relatively easy. This makes it a great choice for developers who want to build web applications using a language they already know.
Great for microservices: Node.js is well-suited for building microservices, which are small, independent services that work together to build larger applications. This architecture allows for better scalability and maintainability.

How to Install NodeJS?

To get started with Node.js, you will need to have a basic understanding of JavaScript and web development concepts. You will also need to have Node.js installed on your machine. You can download the latest version of Node.js from the official website (https://nodejs.org/).

Introduction to REPL

Once you have Node.js installed, you can start building your first Node.js application. One of the easiest ways to get started is to use the Node.js REPL (Read-Eval-Print-Loop). The REPL allows you to run JavaScript commands in the terminal and see the results immediately.

To start the REPL, simply open up your terminal and type node. You should see a prompt where you can enter JavaScript commands. For example, you can try entering 1 + 1 and pressing enter. You should see the result 2 printed in the terminal.

Creating your First NodeJS App

To create a more advanced Node.js application, you will need to use a text editor and create a .js file. The most basic Node.js application looks like this:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

This code creates an HTTP server that listens on port 3000 and returns "Hello World" when someone visits the site. You can run this code by saving it to a file, such as app.js. Now, you can try running node app.js in the terminal. If you visit http://localhost:3000 in your web browser, you should see the message "Hello World" displayed.

Congrats! You build your first NodeJS app!🎉

Introduction to In-built Modules

Node.js also has a large ecosystem of open-source libraries, known as "modules", which can be easily installed and used in your Node.js applications. These modules provide a wide range of functionality, from parsing HTTP requests to interacting with databases.

Node.js also has a built-in module called fs (File System) that allows you to read and write files on the server. This is useful for storing data or serving static files, such as images or CSS files.

Here is an example of how to read a file using the fs module:

const fs = require('fs');

fs.readFile('/path/to/file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

And here is an example of how to write to a file:

const fs = require('fs');

const data = 'Hello World';

fs.writeFile('/path/to/file.txt', data, 'utf8', (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
});

This code will write the string "Hello World" to a file called file.txt. If the file does not exist, it will be created. If the file already exists, it will be overwritten with the new data.

In addition to its built-in modules, Node.js has a vast ecosystem of open-source libraries that can be easily installed and used in your applications. These libraries provide a wide range of functionality, from parsing HTTP requests to interacting with databases.

Best Resources to learn about NodeJS

Documentation
Node.js Crash Course - By Traversy Media
Node.js Crash Course Tutorial - By The Net Ninja
The Odin Project

By taking advantage of these resources, you can become proficient in Node.js and build sophisticated web applications that can handle a large number of concurrent connections and real-time data.

Conclusion

In conclusion, Node.js is a powerful and widely-used JavaScript runtime environment for building scalable network applications. Its event-driven, non-blocking I/O model and a large ecosystem of open-source libraries make it an excellent choice for building a wide range of web applications.

Thanks for reading! 🎉

That's it for this blog post. Thank you for reading this article!

If you enjoyed this article, be sure to subscribe to my newsletter to stay up-to-date with my content.

And if you need any help or have any questions, don't hesitate to reach out – I'm happy to help you. See you on Twitter! 👋🏻

Forem: Nikhil Kadam

WTF is Asynchronous JavaScript: async/await vs .then()

Introduction

Is JavaScript Synchronous or Asynchronous?

Understand async programming with .then() and async/await

The .then() Approach: Old But Gold

Problems with .then() - Callback Hell

Introduction to async/await: simpler way

How async/await Helps

Why async/await shines?

Async/await vs .then(): what to choose

When to Choose .then():

When to Choose async/await:

Practical Tips for Easier Coding

Conclusion

Thank you for reading!

Mastering Middleware in Express.js: A Beginner's Guide

Introduction

What is middleware? 🤔

How does it work? ⚙️

Example

Types of middlewares

Application-level middleware

Router-level middleware

Error-handling middleware

Third-party middleware

Using middleware in code 💻

Routing example

Chained middleware example

Just another example

Custom middleware example

Best practices for using middleware ✅

Conclusion ✍🏻

Resources 📑

Thank you for reading! 🎉

Getting Started with Docker - Introduction for Beginners

What is Docker?

Introduction to Docker

History of Docker

Why do we need Docker?

Key Features of Docker

Docker Architecture

How Docker Works

docker build

docker pull

docker run

Conclusion (TL;DR)

Thank you for reading! 🎉

Getting Started with NodeJS - Introduction for Beginners

What is NodeJS?

History of NodeJS

Why should we use NodeJS?

How to Install NodeJS?

Introduction to REPL

Creating your First NodeJS App

Introduction to In-built Modules

Best Resources to learn about NodeJS

Conclusion

Thanks for reading! 🎉

When to Choose `.then()`:

When to Choose `async/await`: