Sequential vs Parallel Processing in JS
Tags: javascript, node, webdev
Published: 2020-11-08 05:35:48

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!

![Screenshot of a Filter in Flipkart](https://dev-to-uploads.s3.amazonaws.com/i/ccx107xg7pwgss6vlhuk.png)
<figcaption>Screenshot of a Filter in Flipkart</figcaption>

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

```js
// 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!

![Sequential requests](https://dev-to-uploads.s3.amazonaws.com/i/1sojqw7zexedd991nxu4.jpg)
  
>**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

```js
// 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!

![Parallel Requests](https://dev-to-uploads.s3.amazonaws.com/i/78k1qe7ig11drcykbnzp.jpg)
 

>**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!

{% link https://dev.to/tjsudarsan/handling-promises-traditional-way-vs-modern-way-3229 %}