Asynchronous Programming | Explained
By: Sarthak Rohatgi
Tags: Programming, JavaScript, Dart, Asynchronous, Flutter

What do you mean by Asynchronous Programming?

To understand the answer of this question first you need to ask what other type of programming is there? Answer is, Asynchronous Programming and Synchronous Programming.

To understand both of these, you need to think in terms of Manager of some code. It’s your responsibility you manage your code’s execution in such a way that the users have an amazing experience.

Imagine this simple block of code —

In the above code, as soon as you hit the run it will first print Hello then it will call the function loadFunction() which will take 5 seconds to complete and then it will print World and finally exit the main function.

It looks all well and good until you think from the users perspective. For a typical user, the program will be stuck for 5 seconds which is not a good experience for a user. You can show a progress indicator but that’s not a solution to problem. This type of programming is known as synchronous programming and this is what is being taught in your classes.

Let’s take the same code and write it in a asynchronous manner —

In this code block above, as soon as you hit run it will first print hello then it will call loadFuntion() Now this function will take time to complete so it will say “hey, i will take some time to get this done. This is my promise/future that I will complete the task and give you the result back.” and it will keep executing the program in this case, print world and as soon as the task gets complete it will provide that result.

Here the user don’t have to feel that the program is stuck and he can do the rest of the things while the work is getting completed asynchronously.

This is the difference between synchronous and asynchronous programming. It is a tricky but important concept to grasp as for a Dart or JavaScript developer, this concept should be a second nature to you.

Think Asynchronously

Now that we understand what asynchronous programming is and how it differs from synchronous, you need to make you mind work and think in terms of “async” so here is an analogy which helped me and I hope these help you too.

(Note these require a little knowledge about threads which I have covered here.)

Analogy:

Single Thread (Synchronously) —

1 thread -> |<---A---->||<----B---------->||<------C----->|

Multi Thread (Synchronously) —

thread A -> |<---A---->|

\

thread B ------------> ->|<----B---------->|

\

thread C ----------------------------------> ->|<------C----->|

Synchronous or Synchronized means “connected”, or “dependent” in some way. Here in both the blocks, the functions should be aware of one another. B is directly dependent on A and C is directly dependent on B

B will be depending on A to complete and then only it will get executed. Similarly, C will be dependent upon the B to complete only and only then it will gets executed in synchronously programming.

In multi thread (synchronously), first A will start executing on thread A and till A completes executing, the other two threads will sit idle doing nothing or in technical terms, they will be blocked. Similarly, until A and B is done executing the C will sit idle or will be blocked.

Single Thread (Asynchronously) —

A-Start ------------------------------------------ A-End

| B-Start -----------------------------------------|--- B-End

| | C-Start ------------------- C-End | |

| | | | | |

V V V V V V

1 thread->|<-A-|<--B---|<-C-|-A-|-C-|--A--|-B-|--C-->|---A---->|--B-->|

Multi Thread (Asynchronously) —

thread A -> |<---A---->|

thread B -----> |<----B---------->|

thread C ---------> |<------C--------->|

Asynchronous means they are totally independent and neither one must consider the other in any way, either in the initiation or in execution.

In the above blocks, A will start executing then B will be called and will start executing immediately while the A is executing and similarly C will start executing while the other two are still executing.

In Multi Thread(Asynchronously) —

First the A will start executing on thread A now as soon as B gets called, it will start executing too on thread B while A is executing on thread A and similarly, C will start executing on thread C while the other two are getting executed on different threads.

Technically, the concept of synchronous/asynchronous really does not have anything to do with threads.

Same thing can be visualized in these diagrams too. Above we have a Synchronous programming execution. And below we have the Asynchronous programming execution.

Here I have a gif from stackoverflow which shows how both programming paradigms work in harmony with each other in a program.

Please point out if I am missing something here or if something can be improved.

This is the first episode of “Explained” series that I have started and I hope to put down more and more episodes of these. Your love and support will be highly valued.

Thank You.