Surely you do the web no stranger to the phrase “asynchronous”, right. However, you have fully understood the mechanism and its application yet? Today, let’s find out about this issue with me!

1. The actual problem:

When I was in school, I used to work on a website project to do English tests. When users solve a multiple choice question, if they are correct they will get 3 points, if they are wrong they will be deducted 1 point, a website is quite simple, right. When the user submits, they just need to check that the answer is correct or not, if correct, update their score by 3, wrong then subtract 1. Too simple!

I tested it locally also found it very smooth. Gleefully push the code to the hosting. And results…

Unlike local, when pushed to hosting, the speed of updating points on the website is 1 second slower than reality. That means when the user completes the answer, assuming the correct answer, then 1 second after the score will be updated. This is also understandable because the speed on the website depends on the user’s network speed and the server’s processing speed. But not being able to update the score immediately will cause a frustrating user experience, so I will find the best way possible.

I struggled to find a solution, I increased the bandwidth for hosting, optimized the query, and minimized processing the code as possible. And heaven does not disappoint people, the results improved significantly, reduced by 0.25 seconds, which means still slow compared to reality … 0.75 seconds.

While it seems to be the most deadlock, I have come up with a “pretty cool” way to reduce the delay time to 0s, which means I update the score immediately when the user has submitted the answer. At that time I did not know what its name was, but now when I have a bit of experience, I know, its name is “asynchronous”.

This way is very simple, first when I load the question, I will load the answers attached. When they choose the right or wrong answer, I will check right or wrong with javascript and immediately update the score for them. This means that the handling of the update is entirely on the user’s computer and by javascript so there is no delay. However, if the user reloads the page or goes to his information to see the score, won’t he see the updated score? Simply, I just need to send 1 request to the server to update the user’s score into the database at the same time with the update using javascript. Sending this request is to update the actual point, and handling with javascript locally is to update the virtual point, these 2 actions happen simultaneously but do not affect each other, called 2 separate threads, that is asynchronous.

Concept : Asynchronous is multithreading, in which threads run separately, without interfering with each other.

2. Asynchronous Front End

The actual problem above is an example of asynchronous front end. Also, I find the front end asynchronous application a lot, another simple example is the messaging feature of facebook.

When you send messages to another person, the message will not be able to reach the recipient immediately because of a delay due to the network and the processing time of the server. However, facebook handles very intelligently when displaying this message immediately on the chat board of 2 people after you have pressed the send button (this display is handled by javascript right on the user’s machine), at the same time , facebook will perform another asynchronous thread to send the message to the recipient. This request will take about 0.5 seconds to process, when the recipient actually receives the message, a green check mark appears next to the previous message, and if the message is not sent successfully, the message will be displayed. red notification, and old messages are faded. Using asynchronous Facebook has “fooled” users that the message was sent almost immediately, giving them a better experience.

But sometimes the experience is not so good!

To test this, you can test in the following way. Open texting dialog for any one person, disconnect from the internet, compose messages and send, the messages will be displayed immediately on the conversation panel while your computer is offline. You reopen the internet and reload the page, the other message is gone.

My experiments

3. Asynchronous in Back end

Asynchronous in the back end is equally diverse. For example, when you retrieve your password by email, you enter your email address and click submit, almost immediately your action will be announced successful. In fact, it takes a long time for your email to receive the message, but it is done by an asynchronous thread running in the background, in parallel with you submit, when the implicit request is completed, the message the message will be automatically sent to the user’s email. Imagine, if no asynchronous use is used in this case, when you press the submit button, you have to sit and watch the screen for 5 minutes to make this request. Too inconvenient!

Some other examples:

• Statistics of how many orders are closing today: At 12pm every day, the database will automatically make a request to check how many orders the shipper has closed today and update data into the database, this action will running in the background asynchronously, does not affect the operation of the app.
• Upload photos / videos
• Export files etc …