Asynchronous Programming

What does Asynchronous mean?

Normally, when a given program is run, there are different functions/parts to it, but all of it does not get started at once, it takes place one by one usually.

For example, let's assume there are three buttons on the screen and the user clicks all three of them with high speed, do all the three buttons get to work at once? In most cases the answer would be only one, It works one by one. The first function is carried out then the next and then the following one. In such a system the user has to wait for the completion of certain functions until he reaches his desired one. Now, since we assumed three buttons here, the situation might not be that tiresome but what if there were 100 of them? In those cases, the entire program basically stops from the user’s perspective because the code is not displaying anything while it is carrying out the functions one by one. This becomes a frustrating experience and isn’t a good use of a computer’s processing power.

Threads: To put it in a simple language, it’s a single process that a program can use to complete the tasks. One thread can do only one task at a time and each task runs sequentially, and the previous task needs to be completed for the next task to be carried out(if you notice, this sequence works as a queue). For example, JavaScript is single-threaded, while it has multiple cores it still runs tasks on a single thread called the main thread. To make it more efficient, Web Workers are used which allows us to send some JS processes on separate threads so that multiple JS chunks can be carried out simultaneously.

Now Web Workers are pretty useful but they cannot access the DOM (Document Object Model) which is an API that represents and interacts with any HTML or XML document, so we cannot really make a worker thread directly do anything to update the UI.

The second problem is that, although the code isn’t blocking it basically becomes synchronous. This becomes problematic when a function relies on multiple previous processes to function. Like for example

Main thread: Work X →Work Y

In this case, let’s say X is fetching an image and Y adds a filter to it. If we start running X and immediately try to run Y, we will get an error because the image won’t be available yet.

If we can guarantee that these results will be available at the same time, then the program might run without any errors but this is not very practical.

To fix such problems, browsers allow us to run certain operations asynchronously. Certain features like Promises(The promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.) allow us to set an operation running (e.g. the fetching of an image from the server), and then wait until the result has returned before running another operation:

Main thread: Work X Work Y

Promise: |Async operation|

And as the operation takes place somewhere else, the main thread is not blocked while an asynchronous operation is being processed.

Conclusion:

Modern software design majorly revolves around and makes use of asynchronous programming to allow programs to do more than one thing at the same time. It used to hard to write asynchronous codes but it is a lot easier now, even though it requires time to get used to it.

In the next article, I’ll explain why asynchronous code matters and how to design such code.

Thank you!