Tangani Asinkron di Javascript

Banyak orang yang berpindah dari PHP ke Node.js seperti saya karena memang background saya adalah Frontend Developer dan mungkin kebanyakan Frontend Developer lain juga melakukan hal yang sama. Saya pikir dengan adanya Javascript di server side akan memudahkan saya dalam switch project antara server side dan client client side. Namun karena efek menggunakan PHP sebelumnya yang bersifat sinkron sedangkan Node.js bersifat asinkron, ada beberapa kesulitan yang saya alami untuk menangani beberapa task yang mengharuskan asinkron. Cara default dalam menangani asinkron di Javascript adalah dengan callback, seperti apa callback?

Callback

Callback adalah fungsi yang di jadikan sebagai argumen, yang akan di panggil saat suatu task selesai. Contoh sederhana dari callback adalah:

Okay masalah asinkron terpecahkan, tapi ada masalah lain…

Uppsss… kode makin menjorok kedalam 😂

Jelek banget codingannya, oke kita cari cara lain. Ada cara lagi untuk membunuh callback hell, mereka menyebutnya dengan Promise.

Promise

Promise adalah object yang kita tahu dia tidak langsung selesai (asinkron) tapi kita juga tahu nantinya dia akan selesai, kenapa tidak beri handlernya sekarang saja? dengan .then() lalu jika ada error kasih tau juga handlernya dengan .catch() . Seperti kode berikut

Sempurna!

Tapi, lagi lagi tapi, bagaimana jika asinkron task itu datang dari suatu event? Sedangkan event hampir bisa dipastikan sangat sering terjadi, apakah baik baik saja jika menggunakan Promises sebagai handler nya? Bisa saja tetapi menurut saya kurang akurat karena Promises dirancang untuk fungsi yang memang hanya di tempat tertentu saja digunakan dan hanya sekalai pakai sedangkan event datangnya berkali kali dan butuh sesuatu yang reusable. Lalu apa ada jalan untuk events? Lewat Reactive Programming.

Reactive Programming

RP adalah cara programmer dalam menangani input berupa event asinkron yang datangnya berkelanjutan, cara kerjanya adalah dengan membuat Observable (bisa di observe) dengan Observer (pengobservasi), dengan bantuan Reactive Extension untuk Javascript yakni RxJS

Jadi desain eventnya akan seperti ini

----click--------click------click---------------click-------------->

Dimana click adalah event terjadinya click pada elemen button yang akan memicu console untuk log “Saya di klik”. Dimana --> menunjukkan arah gerak waktu. Maksudnya adalah seiring waktu berjalan, apa saja yang terjadi di timeline tersebut.

Tidak hanya itu, bisa juga seperti ini

------click-----------------------click---------------click------->
---------------doubleClick--------------doubleClick--------------->
// menggabung dua timeline menjadi satu
------click----doubleClick--------click-doubleClick---click------->

Tentu menggabung timeline seperti ini mungkin mustahil dilakukan dengan promise.

Di browser maupun di Node.js, behaviour Javascript sama.

Intinya RP adalah cara memberi behaviour pada suatu continuous async tasks. For me its awesome!

Lalu bagaimana menggabungkannya, atau mengconvert event menjadi object yang siap baca oleh observer ?

Rahasia 😜 → https://github.com/Reactive-Extensions/RxJS