A Brief History of Asynchronous Javascript
In its early day, Javascript was designed as an Interpreted language to add interactivities, form validation to the browser interface at Netscape. However with increasing complex web application like Google Map, Javascript has to evolve.
In order to speed up Javascript and the Browser, engineers at Firefox(formally Netscape) and Chrome started to add Javscript compiler to the browsers to turn Javscript into a Compiled language. The JS Compiler in Chrome called the V8 Engine and in Firefox called the SpiderMonkey.
So why the Browsers is single-threaded not multiple threaded ? Through generations of computing performance improvement, computer designers relealize that better prioritization of tasks is a more resource-efficient way to improve computer performance than tasks parallelization because of the unpredictable nature of tasks being thrown at a computing system.
Better priortization of tasks improvements have to be exhausted before we try to parallize the tasks. And parallism in general is good for predictable tasks like rendering videos, compressing files or compiling codes with predictable computing power need to be thrown at a given pixels or bytes per miliseconds.
Browser tasks are unpredictable and it is better to be single threaded but asynchorous to minimize resource consumptions but still reach high performance. Also web users have the tendency to open multiple tabs at a time, up to 40s. So if each tab is multi-threaded, we will soon have memory issues when all the threads trying to consume registers and RAM at the same time.
It is similiar to the decision of not hiring 5 waiters to serve 5 tables but just 1 single waiter serving all 5 tables. While foods are being cooked in the kitchen, the single waiter can move on to next tables to take orders from next customers. Some customers will place a large order, some will place a small order and some will decide to walk out after looking at the menu and pricing.
The new Javascript Compilied Asynchronous Execution gave rise to the concept of Asynchoronous Programming as well as server-side Javascript like NodeJS and high performance front-end frameworks like ReactJS. There are different ways to handle Asynchorous codes: CallBacks, Promise or Async/Await.
Callback Functions
In Javascript, a function is also a JavaScript object and could be passed into another functions. The function object being passed in another function call the Callback Function.
Callback functions making it easier to debug instead of calling the function directly inside the wrapper function. Like in this example, there are similiar functions: myDisplay01 and myDisplay02. The function myDisplay01 was called directly while the myDisplay02 was called as a Callback function inside the myCalculatornew() function.
Callback functions are really useful when you want to execute something in a regular interval like looking up current time and updating the screen every one second.
Callback functions are also useful when you are loading a remote resources like an images, third-party libraries or API. In these following example, we are calling a remote API and wait for the result and then update our targeted div element using the updateContent callback function inside the loadRemoteAPI function.
Promise Functions
A Promise Function/Object has 3 states:
- Pending : when the function is executing and waiting for result.
- Resolved : when the function finished executing and return a success message.
- Rejected : when the function execution is failed and return an error.
Promises was designed so we can chain multiple async functions with unpredictable execution time like calling a remote APIs from third-party server and then display the result. In the following example, we still call the same API but instead of turning our displayData into a Callback inside the fetch data function, we use it outside in the Promise call later.
Async/Await Functions
Finally Async/Await makes writing Promises even easier to read by making Promises looking like a synchronous/procedure code. By adding keyword Async in front of a regular JS function, we turn it output into a Promise.
In order to read a Promise output, we will need to add the keyword Await in front of the function like in the following example.
References
