Computer Science
5. Asynchronous Javascript & The Event Loop
- Sumber: Closure, Async, and OOP: The Hard Parts of JavaScript | Frontend Masters
- Jumlah video: 11
- Jumlah kartu anki: 36
Chapter kelima di course Will Sentance, membahas Asynchoronous Javascript dan Event Loop. Proses distilasi akan langsung per video karena pendekatannya sedikit berubah — jadi per 3 video alih-alih satu chapter secara penuh, sehingga pendahuluan distilasi tidak bisa dilakukan dengan baik.
Berikut hasil distilasi dari tiap video pada Chapter ini:
Synchoronous Execution Review
Video pertama untuk chapter ini, belum benar-benar berbicara tentang Asynchronous tapi jelas bahwa video ini disiapkan supaya penjelasan terkait Asynchronous lebih dapat dipahami. Video ini mereview sedikit ke belakangan terkait cara kerja Javascript mengeksekusi modul dengan thread of execution, dan hanya akan ada satu thread dalam satu waktu. Itu berarti proses eksekusinya akan teratur secara sekuensial. Latar belakang ini membuka jalan untuk konsep Asynchronous.
Asynchronous Code Review
Video kedua ini memberikan gambaran sederhana terkait cara kerja fitur asynchronous pada Javascript, kaitannya dengan Browser APIs, sambil mencoba untuk membuat daftar dari fitur browser yang memperkuat Javascript. XML dan Fetch juga disebut disini.
Javascript & Browser APIs
Will Sentance menjelaskan bagaimana fitur Asynchronous dieksekusi menggunakan fitur setTimeOut() dan keterlibatan Web Browser APIs untuk hal tersebut.
Callback Queue
Video ini membahas mekanisme Asynchronous lebih jauh dan peran Callback Queue (Task Queue) di dalam workflownya. Dan ternyata semua callback function yang datang dari Browser API, khususnya dalam implementasi Asynchronous, perlu mengantri dahulu di Callback Queue untuk menunggu mereka dapat dieksekusi dengan syarat Call Stack sudah kosong dan semua kode di Global Execution Context telah dieksekusi. Ini menunjukkan kelebihan Javascript dalam prediktabilitas, namun menjadi trade-off juga karena Asynchronous jadi tidak presisi.
Event Loop
Callback Queue tidak akan bekerja dengan sempurna tanpa peran Event Loop. Event Loop hadir sebagai checker untuk syarat eksekusi fungsi yang ada di Callback Queue, jadi dia mengambil posisi di antara Call Stack dan Callback Queue. Event Loop akan mengecek Call Stack dan Callback Queue secara kontinu.
Promises Overview
Pengenalan ke fitur Promises dari ES6. Video dibuka dengan penjelasan beberapa masalah yang cukup mengganggu dan keuntungan yang kurang signifikan di ES5 untuk implementasi Synchronous; response data yang hanya tersedia di callback function dan sintaks yang sulit dibaca. Promises hadir di ES6+ sebagai solusi untuk itu. Dikenalkan bahwa Promises adalah facade function dengan 2 cabang; satu berinteraksi dengan API dari lingkungan luar dan satu lagi membuat placeholder di dalam Javascript untuk merespon hasil operasinya.
Promises and the Fetch API
Video kali ini cukup panjang, mendemonstrasikan cara kerja objek Promise dalam workflow Fetch API dari ES6 (sebelumnya adalah XML pada ES5). Penjelasan yang bagus dan detail, itulah kenapa videonya panjang. Diperlihatkan kalau objek Promise dibuat oleh fungsi Fetch yang berperan sebagai facade function untuk fitur network di web browser untuk menampung data yang didapatkan dari operasi latar belakang.
Deferred Promise Functionality
Will Sentance hanya melakukan penegasan ulang dari gagasan dan demonstrasi yang sudah dilakukan di video sebelumnya, kemudian mengadakan sedikit tanya jawab dengan audiens offline. Ditunjukkan juga beberapa slide yang menerangkan pengertian promise dan peran .then(). Kemudian video ditutup dengan snippet kode yang lebih kompleks untuk didemonstrasikan pada video berikutnya.
setTimeout & fetch Functionality
Video ini membuka demonstrasi dari snippet yang sudah ditunjukkan pada video sebelumnya. Demonstrasinya masih terkait dengan mekanisme Asynchronous tapi kali ini dibuat lebih rumit karena ada dua Web Browser API yang berbeda yaitu setTimeout() dan fetch() dalam satu execution context. fetch() tergolong two-pronged API dan mengembalikan promise, sedangkan setTimeout() tidak. Demonstrasi tampak tidak selesai, dan sepertinya akan dilanjut pada video berikutnya.
Microtask Queue
Video ini mengenalkan intrumen lain dalam mekanisme asynchronous pada Javascript yaitu Microtask Queue. Ternyata ada dua Queue yang akan memuat callback function; Callback Queue dan Microtask Queue. Tampaknya Microtask Queue adalah tempat untuk callback function yang datang dari two-pronged facade function seperti fetch, terutama yang berhubungan dengan objek promise. Will Sentance juga menyebutkan bahwa Event Loop akan memprioritaskan item pada Microtask Queue sebelum Callback Queue.
Microtask Queue QnA
Video terakhir dari chapter ini. Will Sentance mengenalkan objek AbortSignal yang punya method .timeout(), dan method .catch() yang dapat digunakan pada objek promise untuk menyiapkan fungsi untuk merespon error. Dikenalkan juga bahwa ternyata objek promise punya hidden properti lain yaitu [[RejectReactions]] yang berisi array fungsi untuk merespon error.