Maruf Bepary

Home
Projects
Credentials
Blog

Sync vs Async: Deep Dive into Programming Models

Understanding and Optimizing Synchronous and Asynchronous Programming

Overview

Synchronous (Sync)

In programming, synchronous operations are those where tasks are executed one after the other. The next task waits for the previous one to finish before it can start. This follows a step-by-step execution model, much like how we usually write code.

Let's illustrate this with a restaurant example. A waiter goes to one table, takes an order, brings it to the kitchen, and waits for the chef to prepare the meal. The waiter then delivers the food back to the table. In this scenario, tasks are performed sequentially: while the chef is cooking, the waiter isn't doing anything, and while the waiter is serving the food, the chef isn't doing anything. This approach can be inefficient because it doesn't utilize all resources at their full potential.

Asynchronous (Async)

Asynchronous operations, on the other hand, allow tasks to be executed concurrently, which is similar to multithreading. An asynchronous task can be started and set aside while another task is being processed. This non-blocking execution model allows the program to handle multiple tasks at the same time, thus increasing the overall efficiency of the program.

Let's take the restaurant example again, but this time with an asynchronous approach. The waiter takes an order from a table and brings it to the kitchen. While the chef is cooking, the waiter doesn't wait around but instead goes back to take more orders. By the time the chef finishes the meal, the waiter can deliver it and immediately bring the next order for the chef to start on. In this model, both the chef and the waiter can perform their tasks without having to wait for each other.

An interesting analogy can be drawn here: you can think of the diners as the front end (users interacting with your application), the kitchen as the back end (the server processing tasks), and the waiter as the API (the intermediary facilitating the communication between the front and back ends).

When to Use Synchronous or Asynchronous Operations

Synchronous Operations

Synchronous operations are simpler and easier to understand because they follow the natural progression of steps, much like reading a book from start to finish. This makes the code easier to read and debug, as the flow of control is straightforward.

Sync operations are best used when tasks are dependent on each other, that is, the result of one operation feeds into the next one. This is common in scenarios like:

  1. Data Processing: When you're performing a series of transformations on data where each transformation depends on the result of the previous one.
  2. Sequential Operations: Operations that need to occur in a specific order. For example, a user registration flow where you first need to verify the user's email, then create an account, and then send a confirmation message.
  3. Simple Scripts: In scripts where the tasks aren't computationally expensive and don't require waiting for resources (like I/O operations), synchronous execution can be straightforward and efficient.

Asynchronous Operations

Asynchronous operations are more complex, but they provide better performance in scenarios where tasks can run concurrently. This non-blocking model allows the program to be efficient and responsive, as it can simultaneously process other tasks while waiting for I/O operations or network requests to complete.

Async operations are suitable in scenarios such as:

  1. Web Servers: Web servers that handle multiple requests from clients are perfect candidates for async operations. While the server is waiting for a response from a database or another network resource, it can handle other clients' requests.
  2. I/O Operations: Reading from or writing to a file, network requests, accessing a database - all these tasks can take a significant amount of time during which the system can perform other tasks.
  3. User Interface: In a GUI application, you wouldn't want the user interface to freeze every time the program is executing a long-running operation. With async operations, the UI thread can stay responsive and provide a better user experience.

Promises in TypeScript and Node.js

What are Promises?

A promise is an object in JavaScript and thus also in TypeScript and Node.js that links the producing code and the consuming code together. In other words, a promise is a returned object from a function, which promises to do some work and then give back the result when it's done, or report back if there was an error. Promises are typically used to handle asynchronous operations, allowing us to write non-blocking code.

A promise has three states:

  1. Pending: The Promise's outcome hasn't yet been determined, because the asynchronous operation that will produce its result hasn't completed yet.
  2. Fulfilled: The asynchronous operation has completed, and the Promise has a resulting value.
  3. Rejected: The asynchronous operation failed, and the Promise will never be fulfilled. In the rejected state, a Promise has a reason that indicates why the operation failed.

How to Use Promises in TypeScript and Node.js

In TypeScript and Node.js, you can create a promise using the new Promise() constructor which takes a single argument, a callback function. The callback function takes two arguments: resolve and reject, which are both functions.

Here is an example of a Promise in TypeScript:

let myPromise = new Promise((resolve, reject) => {
    let isDone = true; // This can be the result of some asynchronous operation
    if (isDone) {
        resolve('Task is done');
    } else {
        reject('Task is not done');
    }
});

myPromise.then((message) => {
    console.log(message); // This will log "Task is done" if the Promise was resolved
}).catch((message) => {
    console.log(message); // This will log "Task is not done" if the Promise was rejected
});

The then method is used to schedule a callback to be executed when the Promise is resolved, and the catch method to handle any errors.

The Different States of a Promise

As mentioned, a Promise can be in one of three states:

  1. Pending: Initial state, neither fulfilled nor rejected.
  2. Fulfilled: The operation completed successfully.
  3. Rejected: The operation failed.

A pending Promise can either be fulfilled with a value or rejected with a reason (an error). When either of these happens, the associated handlers queued up by a Promise's then method are called.

Handling Errors with Promises

Promises have a method called catch which is used to handle errors. It's invoked when a promise is either rejected or an error has occurred in execution. Here's an example:

myPromise.then((message) => {
    console.log(message); // This will log "Task is done" if the Promise was resolved
}).catch((error) => {
    console.error('An error occurred: ', error); // This will log the error if the Promise was rejected or an error occurred
});

Note that the catch handler will not be invoked for exceptions thrown in other asynchronous callbacks that have been attached to the promise. Therefore, it's good practice to always have a catch at the end of your Promise chain to handle any uncaught errors.

Promises are a powerful tool for handling asynchronous operations in JavaScript, TypeScript, and Node.js, making code easier to read and reason about. By understanding how to use promises, the different states, and error handling, you can write more efficient and effective code.

Async/Await in TypeScript and Node.js

What is async/await?

Async/await is a syntactic feature in JavaScript, and thus TypeScript and Node.js, that makes it easier to work with Promises. They allow you to write asynchronous code in a synchronous manner, improving the readability and understandability of your code.

  • async is a keyword that you put in front of a function declaration to turn it into an async function. An async function is a function that knows how to expect the possibility of the await keyword being used to invoke asynchronous code.

  • await is a keyword that works only inside async functions and is used to wait for a Promise to resolve or reject. It pauses the execution of the function and waits for the Promise's resolution, and then resumes the function's execution and returns the resolved value.

How to use async/await in TypeScript and Node.js

Here is an example of how to use async/await in TypeScript:

async function myAsyncFunction() {
    try {
        let resolvedValue = await somePromise();
        console.log(resolvedValue);
    } catch (error) {
        console.error('An error occurred: ', error);
    }
}

function somePromise(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Promise Resolved");
        }, 2000);
    });
}

myAsyncFunction();

In the above example, myAsyncFunction is an async function. Inside this function, we await the somePromise function, which returns a Promise. The await keyword causes myAsyncFunction to pause and wait for somePromise to resolve, then resume myAsyncFunction and assign the resolved value to the variable resolvedValue. If the promise gets rejected, the catch block will be executed.

The benefits of using async/await

Async/await has several benefits:

  1. Readability: Async/await makes asynchronous code look and behave a little more like synchronous code. This makes the code cleaner and easier to read and understand.

  2. Error handling: Async/await allows for a more robust handling of errors compared to Promises. You can use familiar try/catch blocks to handle errors, rather than .catch() methods.

  3. Debugging: Debugging async/await code is easier than debugging Promises. Breakpoints will work as expected, stepping through the code is line by line, and stack traces are more readable.

Async/await is a powerful feature in JavaScript, TypeScript, and Node.js that makes working with Promises more manageable. It's a key part of modern JavaScript and can make your asynchronous code cleaner, more intuitive, and easier to manage.

Performance Considerations for Synchronous and Asynchronous Programming

How Does Synchronous Programming Affect Performance?

Synchronous programming is straightforward and easy to understand, but it comes with certain performance costs. Because each operation must complete before the next one begins, synchronous programming can cause blocking, especially when dealing with I/O operations like network requests or file system operations. While the system is waiting for one operation to complete, it can't do anything else, which can lead to inefficiency and poor utilization of resources.

In the worst-case scenarios, where you have multiple long-running synchronous operations, it can lead to the system being unresponsive or "freezing". This is especially problematic in user-facing applications where a blocking operation can cause the UI to freeze, leading to a poor user experience.

How Does Asynchronous Programming Affect Performance?

Asynchronous programming allows for concurrent operations, which can lead to more efficient utilization of resources. In an asynchronous model, the system doesn't wait for an operation to complete before moving on to the next one. Instead, it can start a new operation while waiting for an earlier operation to finish, resulting in more tasks being accomplished in the same amount of time.

This non-blocking nature of asynchronous programming makes it particularly suited for tasks like network requests, file system operations, or any I/O operations, which are often subject to delays. Asynchronous programming allows these tasks to be handled in the background, keeping the system responsive to other tasks or user inputs.

How to Optimize Asynchronous Code for Performance

Despite the performance advantages of asynchronous programming, poorly written async code can lead to issues such as "callback hell", race conditions, and difficulties in handling errors. Here are some ways to optimize asynchronous code for performance:

  1. Use Promises and async/await: Promises and async/await syntax can make asynchronous code more readable and easier to manage. They provide a way to handle asynchronous operations sequentially, avoiding callback hell and making error handling easier.

  2. Avoid unnecessary asynchronous operations: Asynchronous operations involve some overhead, so avoid making a function asynchronous if it doesn't perform I/O or other delay-prone operations.

  3. Handle errors properly: Unhandled promise rejections can lead to memory leaks and other issues. Always handle errors in your asynchronous code, either by using catch with Promises or try/catch blocks with async/await.

  4. Parallelize when possible: If you have multiple independent asynchronous operations, run them in parallel instead of awaiting each one sequentially. This can be done using Promise.all() or Promise.allSettled().

  5. Throttle and debounce: If your asynchronous code involves event handling (like handling user inputs), consider using throttling or debouncing to limit the number of events handled over time and improve performance.

By understanding how synchronous and asynchronous programming impact performance and applying the right optimization techniques, you can write more efficient, responsive, and scalable applications.

Conclusion

Understanding the difference between synchronous and asynchronous programming is vital for any developer aiming to create efficient and responsive applications. Synchronous code, while being straightforward and easy to understand, can cause blocking and lead to under-utilization of system resources. On the other hand, asynchronous programming allows for concurrent operations, increasing the overall efficiency and responsiveness of an application.

However, asynchronous programming comes with its own challenges like "callback hell", error handling, and race conditions. The introduction of Promises and async/await syntax in JavaScript has greatly simplified working with asynchronous operations, making the code cleaner, easier to manage, and more performant.

With careful consideration of the tasks your application needs to perform, and by correctly leveraging the power of asynchronous programming and its best practices, you can create applications that are highly performant, responsive, and provide an excellent user experience. Understanding when to use synchronous or asynchronous approach, and the correct way to implement them, is a key skill in modern software development.

Sources