Sequential vs Parallel Processing in JS

Everyone knows that Sequential Processing takes a lot of time when comparing to Parallel Processing!

Users expect apps to respond faster these days and don't want to wait too long to get something out of it. Whether it's a Web or Mobile App it doesn't matter for them, they will close it and leave.

Even though your apps load faster under 3secs, some modules may take lots of time like 30secs or even 1min.

Some of the examples are:

1. Populating data which has many references to other data
2. Visualizing data
3. Too many API requests which independent to one another

And there are a lot many like this!

Let's take filter module in a web or mobile app which requires different data for different constraints!

As you can see the above filter has too many constraints to be fetched!

Let's use this example to compare Sequential and Parallel processing!

Sequential data fetching

// The function given below fetches data from the server one-by-one
const fetchFilterData = async () => {
  try {
    const brands = await fetchBrands()
    const sizes = await fetchSizes()
    const occasions = await fetchOccasions()
    const idealFor = await fetchIdealFor()
    const neckTypes = await fetchNeckTypes()
    const sleeveTypes = await fetchSleeveTypes()
    const patterns = await fetchPatterns()
    const color = await fetchColors()

    // Now, display list of fetched data in filters
  } catch (error) {
    console.log('Something went wrong!')
    // Push the error to your crash analytics to track the bug
  }
}

The above code has 8 requests to display filter items as in the above image. It's async await code where each request will wait for the previous request to complete successfully.

Let's do some Math with the above code to calculate the time taken to complete the process!

Let's assume that the user has slower internet speed!
Time taken for one API request = ~800ms
Number of API requests = 8
Total time to complete all requests one-by-one = 8 x 800ms = 6400ms = 6.4secs

So the user has to wait for 6.4secs to engage with filters, That's a lot of time, right? Also, this is only for 8 constrains in a filter. Imagine how much time it will take when there are so many constraints like 20nos. No one will wait for that much longer!

To solve this, we need to use Parallel processing in JavaScript!

Parallel data fetching

// lets consider the below function that fetches data from server
const fetchFilterData = async () => Promise.all([
  fetchBrands(),
  fetchSizes(),
  fetchOccasions(),
  fetchIdealFor(),
  fetchNeckTypes(),
  fetchSleeveTypes(),
  fetchPatterns(),
  fetchColors(),
])

const renderFilter = async () => {
  try {
    const [
      brands,
      sizes,
      occasions,
      idealFor,
      neckTypes,
      sleeveTypes,
      patterns,
      color
    ] = await fetchFilterData()

    // Now, display list of fetched data in filters
  } catch (error) {
    console.log('Something went wrong!')
    // Push the error to your crash analytics to track the bug
  }
}

The above code has 8 requests to display filter items as in the above image.

It's Promise.all code where each request will be fired at the same time resulting in Array of Promises as shown below,

Promise.all([<Promise>, <Promise>, <Promise>, ..., <Promise>])

Now, Promise.all() will be resolved once every promise in the array gets resolved!

Let's do some Math with the above code to calculate the time taken to complete the process!

Let's assume that the user has slower internet speed!
Time taken to complete one API request = ~800ms
Total time to complete all requests in parallel = ~800ms = 0.8secs or 1sec

So the user doesn't want to wait too long as it takes only ~1.3secs to engage! This is because all the 8 requests are made in parallel!

This method can be applied in serverside in handling API request using Nodejs. It can reduce the API response time significantly while querying multiple tables simultaneously from a database using Promise.all()

Also, this method can be used when promises are involved anywhere, provided that there is no dependency with each other. If they are depended go for sequential processing.

Note: This is just an example and not the real code of filter in Flipkart. I designed in a way that most of the requests can be made parallel using this method.

Read the following article to improve code readability while handling promises!

How I am Handling Promises - Traditional way vs Modern way

Sudarsan ・ Nov 1 '20

#javascript #react #webdev #node