DEV Community

Sudarsan
Sudarsan

Posted on

8 2

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!

Screenshot of a Filter in Flipkart

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (3)

Collapse
 
yuvarajuv profile image
yuvaraj • Edited

Thanks Sudarsan. Its a great explanation about parallel processing.

Refer *Promise.allSettled * is released in es11 which observes status of each given promises have either fulfilled or rejected. This will be helpful in some cases.

Collapse
 
tjsudarsan profile image
Sudarsan

Definitely 👍 Thank you @yuvaraj

Collapse
 
tkahmedkamal profile image
Ahmed Kamal Mohammed

Thanks, Sudarsan ❤

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay