Sequential vs Parallel Processing in JS

Sudarsan — Sun, 08 Nov 2020 05:35:48 +0000

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:

Populating data which has many references to other data
Visualizing data
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

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

Optional?.Chaining 🤩 - A great gift for Devs

Sudarsan — Mon, 02 Nov 2020 11:41:14 +0000

Traditional way of validating a condition which has nested objects

if(
   person && person.education && 
   person.education.highSchool &&
   person.education.highSchool.mark &&
   person.education.highSchool.mark.maths
) {
   console.log('😭');
}

Okay! why we need to right like this? Because, if we didn't validate each key for undefined then there's a huge chance of errors and your program crashes! To avoid we need to validate every key's value for undefined!

Otherwise, we may get one of the following errors

Error: cannot read property education of undefined
Error: cannot read property highSchool of undefined
Error: cannot read property mark of undefined
Error: cannot read property maths of undefined

Also, these errors may occur not only for undefined, but also for null value too.

This can be hard if you have nested object of depth more than 4 😭

How to get rid of this?
we can use Optional Chaining

Modern way!

if(person?.education?.highSchool?.mark?.maths){
    console.log('Life saver! 🤩');
}

Note: Modern browsers supports Optional Chaining, for nodejs projects you should have nodejs v14.x version installed.

Or (simple hack without Optional Chaining)😉

if(((((person || {}).education || {}).highSchool || {}).mark || {}).maths) {
   console.log('Looks weird! but easy!')
}

That's it instead of coding person person person..... Blah blah 🤥

You can code like this! 🌟

Try this on your project and comment your thoughts!

How I am Handling Promises - Traditional way vs Modern way

Sudarsan — Sun, 01 Nov 2020 04:20:48 +0000

Handling Promises are very hard now a days, but there’s an easy way to deal it!

Traditional Way: so many then and catch blocks 🥴

Modern Way: With the help of async and await we can get rid of then and catch blocks and improves code readability! 🥳

Comment your thoughts and share to your friends

DEV Community: Sudarsan

Sequential vs Parallel Processing in JS

Sequential data fetching

Parallel data fetching

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.

How I am Handling Promises - Traditional way vs Modern way

Sudarsan ・ Nov 1 '20

Optional?.Chaining 🤩 - A great gift for Devs

How I am Handling Promises - Traditional way vs Modern way