Ngobrolin Konsep JS: Event Loop - Ngobrolin WEB Ep5

2:30- Promising, gitu ya. - Atau kadang bisa, kadang enggak pasti jalanin,

2:35kadang kalau kita menghitung dengan tanda kutip, bener, urutannya normal sesuai ekspektasi,

2:41giliran di pitching ke client atau di hand over, langsung berubah semua.

2:47- Nah, itu kan repot ya. - Nah, mungkin teman-teman yang nonton

2:53mungkin punya pengalaman juga, boleh di-share juga ya ke kita,

2:56pengalaman berkaitan dengan JavaScript.

3:00- Terus ada dulu itu istilahnya callback hell, gitu ya.

3:06- Callback hell. - Karena saking enggak ngerti nya JavaScript,

3:10semuanya di dalam callback, kayak sampai nested, callback kemana-mana.

3:15- Terus sampai dia bingung sendiri, aduh, callback-nya banyak banget.

3:21- Jadinya malah ini ya, sekonsial ya, jadi enggak guna itu si asingkronusnya ya.

3:27- Iya, betul sekali. - Mungkin dulu juga,

3:30karena belum terlalu stabil ya, API yang memudahkan, web API yang memudahkan kita

3:37jalanin asing, kayak promise all, sama promise all settled, mungkin belum ada asing-wait, belum ada semua ditaruh.

3:45Masih pakai XHR itu loh. - X-H-R ya, X-H-R.

3:52- X-H-R Amsterdam, pakai X-H-R. Jadi apa boleh buat karena emang dulu

3:58belum terlalu mendukung ya, jadi kayak semua ada callback.

4:01Nah, callback-nya nested sudah banyak, kita nge-handle yang di tengah ini bingung,

4:05jadi kan skip ya. - Iya. Nah, konsep si event loop asingkronus ini sendiri sebenarnya

4:14bahasa dasarnya kalau di platform atau di bahasa pemorgana itu adalah konkurrensi.

4:21Konkurensi itu adalah mengakukan sebuah task atau pekerjaan, baik itu secara paralel atau secara asingkronus.

4:29Dan kebetulan si Javascript pakai cara asingkronus. Kalau misalkan kayak bahasa seperti Golang,

4:36terus Erlang Alixir, terus apa lagi yang paralel ya, dan beberapa yang lain lah ya, itu ada yang paralel.

4:43Nah, sebelum kita masuk ke bahas tentang event loop, saya mungkin bahas sedikit aja tentang perbedaan antara asingkronus

4:52dan juga paralel, biar agak jelas sedikit ya. Dan ini adalah salah satu materi yang diajarkan di bootcamp,

5:00jadi saya memperlihatkan sedikit slide-nya. Nah, ini analogian cukup bisa ditangkap lah sama student-student

5:13karena ada gambar dan lain-lain. Jadi konsepnya si asingkronus ini, dia mengerjakan misalkan si worker-worker ini

5:24atau tujuh anak ini, diminta untuk menyelesaikan tujuh kado sampai selesai. Jadi mulai dari dimasukin hadiahnya,

5:33ditutup, dibungkus, kemudian diikat dan lain-lain. Jadi mereka melakukan satu pekerjaan masing-masing.

5:41Misalkan ini dia mengerjakan tujuh, tapi dia mengerjakan pekerjaannya adalah membuat kotaknya,

5:47kemudian anak kedua misalkan masukin mainannya, anak ketiga menutup kotaknya, anak keempat membungkus,

5:53kelima dan seterusnya sampai selesai. Setiap anak akan mengerjakan tujuh kotak atau tujuh hadiah, gitu.

6:01Ini konsep asingkronus. Jadi dia melakukan pekerjaan yang berbeda untuk setiap worker atau setiap anak disini dalam hal ini.

6:12Kalau paralel itu dia seperti delegasi, dia dikasih tugas, satu anak dikasih tugas untuk menyelesaikan satu mainan saja

6:22atau satu hadiah saja, gitu. Tapi dia mengerjakan banyak tas, tasnya banyak. Mulai dari bikin kotaknya,

6:29masukin kado-nya, terus ditutup, diikat dan lain-lain. Masing-masing ada plus minus.

6:35Kalau minus yang paling besar dari asingkronus adalah, besar kemungkinan terjadinya kegagalan di satu anak,

6:44maka semua proyeknya atau semua tasnya akan hancur. Misalkan di tengah-tengah ini lemot, atau dia nggak bisa.

6:51Anak keempat ngambek, anak kelima nggak bisa ngelanjutin berarti.

6:54Ya, itu jadi single point of failure istilahnya ya. Sementara kalau misalkan anak keempat yang disini dia ngambek,

7:01ya udah, kado-nya tetap ada walaupun tidak lengkap.

7:04- 6 lagi, kado-nya 6. - 6 lagi masih bisa diselamatkan.

7:08Nah, itu plus minusnya. Jadi JavaScript meskipun tidak bisa berjalan paralel, artinya dia hanya bisa berjalan di satu core ya.

7:18Paralel ini bisa dijalankan di banyak core-nya CPU. Jadi masing-masing CPU bisa menjalankan, kalau misalkan disini ada 7,

7:25dia bisa menggunakan 7 atau 8 core untuk masing-masing mengerjakan pekerjaan yang secara, apa ya, terisolasi.

7:33Masing-masing nggak peduli, nggak bergantung kepada pekerjaan temennya yang lain.

7:38Sementara kalau asingkronus, dia bisa berjalan di satu core saja.

7:43- Multi-trading. - Multi-trading dan single-trap.

7:48Itulah perbedaan yang apa ya, yang signifikan antara asingkronus dan paralel.

7:54Dan hal ini yang harus kita pahami dulu sebelum kita berkutat dengan JavaScript atau bahasa pemrograman yang paralel.

8:01Kalau JavaScript kita optimasinya nggak bisa seperti yang paralel gitu.

8:06Kita harus menggunakan kluster dan lain-lain untuk memanfaatkan si core yang banyak ini kan.

8:11Karena sekarang jumlah core-nya semakin banyak. Speed-nya tidak tambah banyak.

8:16Kalau ininya seperti mungkin banyak teman-teman dari background PHP, Python, itu di mana nih, antara asingkronus atau paralel?

8:27PHP dan Python itu masih di asingkronus ya, masih disingkronus.

8:33Kalau Python sekarang sudah ada asingkronus juga kan. Jadi mereka pakai ininya asingkronus juga sama.

8:41- Betul-betul. Ya, biar tahu teman-teman di mana posisinya. - Betul sekali.

8:47Nah, berikutnya adalah kita akan bahas tentang ini, apa namanya, cara si, ini bekerja ya, si apa namanya?

8:58- Si javascript... - Event loop. Oh, javascript di browser.

9:03- Javascript event loop bagaimana... - Event loop-nya bekerja.

9:06- Nah, di sini... - Arti kata lain, artinya javascript engine ya.

9:10- Javascript engine. - Javascript engine itu yang paling terkenal itu yang paling mainstream.

9:15- Itu dari V8. - V8.

9:17Ya, V8 dari Google. Meskipun ada javascript engine yang lain.

9:21Ya, jadi karena terkenalnya si javascript engine-nya Chrome, makanya Node menggunakan V8 juga.

9:33Jadi secara konsep di back-end ataupun di front-end, event loop ini dua-duanya mirip ya, bukan sama, mirip.

9:44Yang membedakan adalah API-nya. Kalau di browser kita tidak bisa, kita bisa menggunakan web API.

9:51Misalkan kayak baca file atau notifikasi dan lain-lain gitu, ya window dot something gitu ya.

9:58Yes, dom manipulation, semuanya bisa kita lakukan.

10:02Tapi kalau di Node.js tidak ada objek yang namanya window gitu.

10:05Tidak ada web API, dia bisa baca file, dia bisa stream data dan lain-lain.

10:11Makanya jebakan Batman yang sering terkenal itu adalah kalau sudah bikin react ssr,

10:18tapi baca window objek pasti tidak ada di server silent tree. Itu jebakannya.

10:25Ya, ini juga benar nih, Deka. Saya time out ya.

10:30Mungkin saya demoin dikit ya, demoin dikit yang disebutkan Deka tadi.

10:36Jadi kalau misalkan kita punya, sederhana saja, konsolok ya, ini kan.

10:44Ini adalah, akan di eksekusi pertama kan, kemudian misalkan konsolok kedua.

10:51Terus konsolok ketiga. Ini kita udah bisa tebakan karena ini adalah sinkronus kan.

11:05Jadi pasti akan baris per baris, satu, dua, tiga.

11:09Nah, lain halnya, kalau ini kita bungkus ke set time out. Set time out ini adalah sebuah fungsi asingkronus.

11:18Ini bisa disamakan dengan fetch dengan fungsi-fungsi lain yang sifatnya asingkronus

11:27yang dia butuh waktu untuk menyelesaikan suatu pekerjaan.

11:31Ini adalah simulasi, misalkan simulasi fetch atau apapun ya, tapi kita pakai set time out saja biar sederhana.

11:36Ada banyak kan. Yang penting isilahnya itu menggunakan callback kalau sudah selesai apa yang akan di eksekusi.

11:43Set time out ini ada juga set interval dan lain-lain ya.

11:47Jadi set time out ini adalah sebuah fungsi yang menerima dua parameter.

11:50Parameter pertama adalah fungsi callback-nya. Apa yang akan dilakukan setelah beberapa waktu?

11:58Dan ini adalah berapa lama waktunya? Kita ingin misalkan delay-nya misalkan satu detik.

12:04- Ini adalah mili second ya? - Iya, mili second. Jadi 1000 mili detik.

12:10Dan ini tentu teman-teman sudah bisa nebak ya, ini hasilnya adalah one, three, dan two.

12:16One, three, dan satu detik kemudian baru keluar two.

12:20Begitu juga dengan kalau kita kasih misalkan 10 mili detik, ya tetap saja sama.

12:25Gitu ya. One, three, and two.

12:28Nah pertanyaannya seperti yang ada di cat.

12:33Kalau time out-nya 0, ada yang bisa nebak gak hasilnya seperti apa?

12:40Hasilnya juga tetap sama ternyata. Walaupun dia 0 detik, tidak ada delay.

12:46Tapi karena dia ini sudah di set kembali asingkronus, dia akan dikirimkan ke event loop.

12:53Jadi dari sini kalau lihat gambar ini, setiap ada sesuatu yang sifatnya asingkronus

13:02seperti set time out atau patch atau yang lain, dia tidak langsung dieksekusi.

13:07Mereka akan masuk ke call stack dulu, kemudian dieksekusi di belakang layar.

13:12Ketika sudah selesai, dia akan masuk ke queue atau amtrian.

13:15Dan ketika main thread-nya atau bagian utama dari java sudah selesai, call stack-nya kosong, betul.

13:23Baru dia... - Baru dia eksekusi.

13:25Ini yang tugasnya manggil dari queue ke dalam call stack.

13:29Betul. Meskipun dia berhasil menyelesaikan pekerjaannya dalam 0 detik, dia tetap masuk ke dalam amtrian dulu.

13:39Karena set time out itu adalah mengirimkan atau mendelegasikan tugas ke bagian yang lain dari JavaScript.

13:49Jadi tidak langsung dieksekusi meskipun hasilnya bisa langsung dinikmati, bisa langsung ada hasilnya.

13:55Kira-kira penjelasan sederhananya seperti itu.

14:00Mau menambahkan kalau di sisi backend.

14:04Ini perbandingan engine-nya JavaScript dengan apa yang bisa kita capai di sisi backend

14:10dengan menggunakan PHP atau Python dan sejenisnya.

14:13Yang asynchronous juga, yang single thread, maksudnya.

14:18Itu dengan menggunakan bantuan yang namanya message queue.

14:23Kalau ada teman-teman tahu, message queue atau kalau paling sering itu kita menggunakan Chrome.

14:30Chrome dari Unix Chrome. Pilihan Linux, Chrome job.

14:35Jadi kalau di message queue, misalnya contoh, paling sering itu kalau menggunakan message queue.

14:43Ada yang check out di sebuah toko online, check out.

14:48Tentu kita harus kayak insert to database segala-gala itu proses kan panjang.

14:53Sedangkan user harus redirect, harus kirim notifikasi, harus kirim notifikasi gimana.

14:59Kalau misalnya kita itu kita lakukan satu per satu, tentu proses check out kita akan lama banget.

15:05User akan marah-marah.

15:07Kalau kita mau bikin itu menjadi sebuah sesuatu yang pasti dengan prosesnya

15:15yang bisa kita bagi ke berbagai macam komputasi server.

15:19Kayak server kita udah besar dan kita mau memanfaatkan server.

15:23Kita menggunakan yang namanya message queue.

15:26Jadi kayak kirim email, kirim SMS, kirim insert ke notifikasi kemana gitu ya.

15:34Itu masukin ke queue, nanti queue-nya yang akan jalankan satu per satu.

15:39JavaScript sudah punya queue itu, stack itu by default, sudah di dalam core engine-nya gitu.

15:46Banyak juga hal-hal yang kayak kita lakukan secara paralel di program yang lain

15:53yang kita memanfaatkan, Chrome dari si... Chrome jawab si Linux gitu ya.

16:00Yang mana setiap waktu tertentu jalankan tugas-tugas yang sudah ada di queue.

16:07Sama JavaScript engine-nya by design core-nya seperti itu.

16:13Oke. Nah, terus kita lanjut ke pembahasan berikutnya tentang, masih tentang event loop.

16:25Ini ada video yang menarik tentang event loop.

16:29Kalau teman-teman tertarik mau belajar lebih lanjut bagaimana cara kerjanya.

16:33Di sini video di tahun 2018 ya, sudah cukup lama.

16:39Tapi penjelasan, yes, penjelasan yang sangat luar biasa bagus.

16:45Dan satu lagi sebenarnya ada ini nih, ini juga keren juga nih.

16:49Sering apa, beberapa kali saya jadikan referensi juga.

16:52Nanti akan dibahas, eh kak, setelah ini.

16:56Dan ada yang mau dijelaskan dari video ini, Ivan?

17:02Ya, bisa-bisa. Jadi di video ini ya, kalau kita lihat dari sisi tengah itu, itu yang looping-nya.

17:10Dan di sebelah kiri itu adalah worker-nya, worker queue yang sedang menjalankan.

17:17Queue-nya paling kiri kan yang urutan T itu.

17:20Itu queue-nya. Sedangkan yang kuning yang di tengah itu, itu adalah proses worker-nya untuk mengeksekusi queue itu.

17:27Sedangkan yang sisi sebelah kanan itu adalah proses rendering.

17:31Ya, jadi proses rendering dari si browser itu.

17:35Jadi apa istilahnya? Paint, proses paint untuk si DOM.

17:43DOM yang sudah dieksekusi, hasilnya dipaint ke browser.

17:47UI bahasa simpelnya.

17:49Ya, sama sih ngomongnya.

17:52Nah, yang terjadi adalah begini.

17:55Pertama video ini membuka mata saya, bagaimana proses JavaScript itu bekerja.

18:03Karena background saya itu banyak berkutat dengan PHP, semuanya semuanya synkronus.

18:10Dan saya udah tahu nih kalau saya bikin kode di line 1, line 2, line 3, line 4.

18:17Saya tahu tuh 1, 2, 3, 4 pasti akan dieksekusi secara berurut gitu ya.

18:22Sedangkan di JavaScript itu berbeda.

18:25Ternyata pakai yang istilahnya banyak hal yang disebut callback lah.

18:29Atau kalau misalnya saya fetching sesuatu dari API,

18:32kalau di PHP, saya fetch API, dia nunggu respon dulu baru selesai.

18:38Responnya mau error atau mau success, saya bisa langsung baca tuh hasilnya.

18:42Sedangkan kalau di JavaScript, responnya itu belakangan.

18:47Responnya pending doang kalau dipanggil di line selanjutnya.

18:52Iya, nah.

18:54Jadi, yang terjadi adalah si worker kalau nggak ada kerjaan, dia akan muter.

19:01Akan looping bahasanya, bahkan looping aja.

19:05Begitu ada task, dia akan jalankan satu per satu.

19:09Di JavaScript Engine, di core-nya itu, itu pasti single-track.

19:17Saat ini masih single-track, artinya hanya menggunakan satu proses trading di CPU aja.

19:24- Jadi tidak bisa... - Hanya bisa mengedikan satu kerjaan dalam satu waktu ya.

19:28Betul sekali, jadi nggak bisa multi-trading.

19:31JavaScript setau saya sampai saat ini belum bisa multi-trading.

19:36Jadi, kalau misalnya dia muter dan melakukan sesuatu,

19:42dia akan menunggu ada hasil dan begitu ada tugas, dia akan kerjakan.

19:49Dan kalau misalnya tugas itu butuh ada pain, nanti dia akan update di DOM

19:54dan akan pindah ke proses untuk pain.

19:58- Ke loop yang sebelah kanan ya? - Iya, betul.

20:01Nah, ini...

20:03Ini tadi karena kode-nya tadi kan yang dicoba itu adalah wild loop.

20:08- Ini pakai se-timeout. - Nah, itu dia.

20:11- Jadi nggak nge-blocking. - Definit.

20:13Nah, jadi dia...

20:15Jadi makanya si JavaScript ini itu unblocking process.

20:20Oh, mungkin bisa dimunurin sedikit videonya ke kiri sedikit.

20:24Jadi pertama kali dia nyontohin yang pakai wild loop yang always true.

20:30Jadi itu kalau dampaknya di UI kan, kadang mungkin kita pernah kena error yang freeze.

20:37Nggak bisa diapapain atau nggak bisa di-select.

20:39Po-nya beneran freeze, pas dilihat di console log-nya ada maximum call stack exceeded.

20:44Nah, contoh pertama tuh tentang itu.

20:46Karena si task-nya itu beneran nggak pernah selesai, nggak pernah pergi dari queue.

20:52Nah, itu di contoh pertama yang pas wild true.

20:55- Itu kayaknya kiri lagi deh. - Kiri lagi.

20:58- Terus... - Mana?

21:01Contoh gambar kucing juga, cuma po-nya contoh pertama yang tadi ada gambar animasi gif kucing.

21:09- Oh, gif kucing tadi di mana ya? - Tapi yang pertama.

21:14Yang pertama? Wah, lupa. Ini bukan.

21:18Nah, itu kayaknya coba deh.

21:20Tapi intinya sebenarnya JavaScript itu dia ini ya, bahasa yang selalu sangat mudah untuk move on.

21:30Jadi ketika ada task dan task-nya belum selesai, dia langsung berjalan aja.

21:36- Ya udah tinggal aja dulu. - Karena memang dia naturalnya seperti itu.

21:39Kalau di web, misalkan kita butuh apa ya, butuh webcam, permission untuk webcam.

21:45Kalau usernya belum klik allow atau block, ya webnya tetap bisa loading kan, tetap bisa...

21:51webnya tetap terbuka walaupun ya webcamnya adama-adama nggak ada gitu kan.

21:56- Ya, karena unblocking. - Ya, dia tinggal, dia anggap berarti nggak mau.

21:59Berarti kalau dia punya internal algoritm, internal logic, kalau misalnya usernya tetap nge-scroll

22:07dan mengabaikan permintaan enable webcam, ya udah berarti dia nggak mau.

22:11- Oke, move on. - Move on.

22:14Satu-satunya yang nge-block adalah alert. Makanya alert jalan dipakai kan, untuk UX kurang bagus.

22:21Karena ketika kita jalankan alert, itu di belakang itu udah berhenti.

22:25- Emang dengan sengaja di-freeze semua. - Iya.

22:28- Nah ini juga berhenti sih. - Iya, kita buka Facebook atau buka Tokopedia gitu ya.

22:35Meskipun datanya belum nyampe, tapi sudah ada skeleten-skeletennya kan kelihatan.

22:40Itu adalah salah satunya dimungkinkan karena asingkronus ini.

22:44- Ya. - Lanjut, lanjut.

22:46Yang ini tadi, when while loop itu makanya dia bisa nge-hang.

22:50Jadi kalau mau kerjain, kalau mau kerjain, kok malah nggak jarin yang ngejelek sih.

22:55Nah kalau ini kan contoh yang contrive, ya maksudnya apa, di JavaScript jarang banget sih bisa blocking

23:01kecuali beneran bikin function yang kayak gini nih, while true.

23:04While true ya akan selalu true maksudnya. Jadi kan si tugasnya itu, si task yang warna kuningnya itu

23:13nggak pernah selesai, jadi si event loop-nya yang kotak putih itu ya nggak pernah bisa keluar, nggak bisa lanjut.

23:19- Nggak bisa ke arah sebelah kanan ya. - Nggak bisa muter, emang ditahan terus.

23:24Dan biasa itu bakal ada error, apa, maximum call stack exhibit kan.

23:29Artinya apa juga di sini, kalau dari sisi ini, kalau misalnya kita punya JavaScript-nya kegedean

23:39atau berat bahasa istilahnya, berat, itu bisa membuat scrolling kita kerasa jengky kayaknya.

23:46- Oh iya. - Kayak dia nggak smooth gitu.

23:50Itu karena JavaScript kita banyak banget eksekusi atau, jadi proses loop-nya itu terus ngerjain tugas

23:58dan untuk proses rendering-nya dia jadi telat.

24:02- Dia nggak ngerender dengan benar ya, nggak bisa ngerender dengan benar karena dia tinggal-tinggal kerjaan yang lain.

24:10- Iya, karena proses waktu dia ngerjain task-nya itu kelamaan.

24:14Yang menjadi target kan untuk kita kasih pengalaman experience terbaik untuk ke user itu kan,

24:23rata-rata mobile phone yang sekarang itu kan screen-nya sudah 120Hz ya,

24:30atau 90Hz atau 60Hz lah minimal gitu ya, refresh rate-nya gitu ya.

24:35Maka pane yang bagus itu ya minimal di 30 gitu ya, supaya terasa scroll-nya itu terasa apa istilahnya, smooth gitu.

24:47- 30 fps ya berarti ya. - 30 fps.

24:50Nah ini contoh selanjutnya nih, apa sorry, yang tadi kan while sebenarnya coding-nya sama,

24:57tapi dipindahin ke set timeout dengan delay-nya 0ms ya, sama kayak yang tadi dicontohin.

25:04- Coding-nya mana? Ini ya? Mana tadi? Ini ya? Eh susah ya.

25:10- Nah while true kan yang blocking ya? - Ini yang pertama.

25:15Yang kedua dipindahin ke set timeout aja, cuma di set timeout dulu.

25:23Nah jadi dia bisa muter karena tadi kan yang set timeout itu dipindahin dulu,

25:33itu kan sebenarnya recursive loop juga kan, di argument apa callback function-nya itu loop kan,

25:41itu kan recursive function tapi dia nge-blocking, karena ya itu tadi yang dijelasin di paling awal.

25:48Kan dia pindah dulu ke web API, pindah ke queue, antrian, dimasukin satu persatu.

25:55Jadi walaupun recursive tetap bisa melakukan semua task itu tadi.

26:03- Dia ngambil task-nya tetap. - Jelasnya kayak gini nih.

26:06Nah muncul lagi kan, si event loop-nya, mekanisme event loop itu memanggil task-nya satu persatu dari antrian, dari queue.

26:15Jadi walaupun recursive, emang recursive, gak ada abisnya kan tuh muncul lagi, muncul lagi.

26:20Tapi dia bisa muter, bisa jalan, jadi tetap bisa styling, layout, paint, give-nya bisa muter.

26:28Give-nya bisa muter, dia bisa select text dan lain-lain. Itu tadi ilustrasi.

26:33Yang bikin aku paham event loop itu apa.

26:37Nah gimana tadi soal request animation frame, nyambung juga sama ini sih ya, apa?

26:45Video ini kayaknya ada tentang animation frame juga ya.

26:48- Dia di belakang, soal request animation frame, request adjunct callback. - Ini bukan.

26:54Wah iklan dulu.

27:01Sambil iklan. Nah berarti kalau frame rate-nya 60 Hz, berarti bagusnya tadi animation-nya justru 30 ya separohnya.

27:11Iklan lagi, aduh banyak sekali iklannya. Lanjut, lanjut, lanjut.

27:16Itu gak ada, itu bukan sebuah teori atau hard and fast rule. Jadi sebenarnya jangan sampai di bawah itu.

27:27- Jangan sampai di bawah 30? - Iya, kalau di bawah 30 frames per second artinya

27:32sudah mulai terasa jengky, mata kita sudah bisa lihat kalau itu terasa patah-patah.

27:38Gimana cara ngecek sebuah web itu 30 fps atau belum?

27:42Ada kayaknya ini ya, ada API-nya, gue lupa, ada tulisan, gue lupa.

27:49- Ntar gue cari deh, gue lupa, ada API-nya kok. - Oke lanjut.

27:57Ini apa? Oh ini yang soal animation callback.

28:01Ini artinya maksudnya gini, kalau kita punya JavaScript code, jangan sampai kelamaan ya memanggil

28:12atau melakukan sebuah tugas, kalau bisa dilakukan kecil-kecil maksudnya.

28:17Jadi biasanya kalau kita menggunakan untuk yang banyak melakukan pain atau melakukan manipulation.

28:28Contoh paling gampang slider ya, slider itu supaya bisa smooth gitu kan harus ada

28:36kalkulasi perubahan X dan Y position ya, itu kan bisa terjadi sliding.

28:45Yang itu sebisa mungkin saat kita melakukan itu jangan sampai proses sliding-nya itu

28:52memberatkan, membutuhkan lebih dari, kita bisa bikin kalkulasi supaya dia

28:59dipecah-pecah 30 fps, bisa dihitung lah istilahnya.

29:04Oke, kita lanjut ke pembahasan dari Eka tentang web API.

29:14Tadi kan sempat ada ya, sempat ini ya, ini kan ada call stack, kemudian ada queue,

29:20kemudian ada heap, dari JavaScript engine-nya, dari fungsi kode yang kita tulis masuk ke

29:27call stack, kalau dia butuh di delegasikan misalkan membaca file, nampilin notifikasi

29:35dan lain-lain itu dia kan memanggil atau menyerahkan kepada API, web API dalam hal ini.

29:41Web API itu sendiri adalah sebuah API. - API yang ada di browser.

29:50Jadi cerita aja sih ini, kebetulan kali ini aku nggak punya materi yang teknikal banget,

29:58jadi lebih kecerita soalnya apa, kan Papiknya ngebahas event loop nih, jadi inget dulu

30:04pertama kali banget belajar JavaScript, mungkin agak beda dengan teman-teman yang

30:10lainnya, aku belajar JavaScript itu nggak dari backend sama sekali, dan bahkan

30:16bukan dari dunia pemrograman, jadi kayak cuma iseng-iseng aja, terus jadi belajarnya dengan

30:22cara yang salah, pokoknya kalau ada alur belajar yang salah, itu kayaknya semua

30:26kesalahan dalam belajar coding, itu kayaknya gue udah ngelakuin semua.

30:31Jadi pertama kali mulainya cuma di HTML, CSS, cuma ya udah, udah rada basah

30:38dikit nyemplung sekalian kan JavaScript, cuma ya mungkin karena approach-nya kurang

30:43tepat, cuma apa sih, Googling aja cari, terus kopas-kopas, terus dulu jamannya

30:49jQuery, jadi mungkin, apa, jQuery-nya sih nggak apa-apa, cuma mungkin

30:54pemahamanya kurang kuat juga, jadi apa, suka banyak kesandung dikit lah.

31:01Nah, dulu tuh aku belum paham tentang web API, karena kan ini bukan di level

31:09yang praktikal ya, semua kalau misalnya orang yang murni awam dan baru belajar

31:14dan nggak ngikutin kurikulum yang baik dan benar ya, mungkin ngerti-nya semua itu

31:20JavaScript, udah gitu doang. Nah, padahal sebetulnya kan browser punya

31:26JavaScript Engine yang tadi udah dibahas kayak Chrome punya V8, yang jalan di

31:31Node dan Dino juga, Firefox punya Spider Monkey, nah JavaScript Engine itu

31:36bisa menjalankan atau memproses JavaScript berdasarkan standarnya

31:42ECMAScript, ya udah itu, cuma kan itu stand alone, nah browser sendiri kan

31:47sebetulnya punya yang namanya itu web API, yaitu implementasi JavaScript

31:54dengan menggunakan standar ECMAScript juga, yang dibuat khusus untuk browser

32:01dan otomatis hanya berjalan di browser, nah makanya dia kenapa ada API itu,

32:06dia kan buat ngejawab kebutuhan-kebutuhan yang unik atau yang khas,

32:11cuma buat ada di browser, makanya tadi kita punya apa itu, ada animation,

32:17ada rendering, ada apa, layout, styling, painting, ya kalau di server-side kan

32:23dibutuh ngelakuin hal-hal itu ya, walaupun prinsip, apa, prinsip queue-nya

32:28bahwa ada task yang harus queue, yang harus di queue, ada pekerjaan yang

32:33harus diantri, ya emang sama, cuma kan kebutuhan-kebutuhannya unik di web,

32:38jadi ini hal yang menarik sih, jadi mungkin kalau temen-temen ada yang

32:43masih di level baru nyoba-nyoba ngulik kodingan di web, khususnya front-end,

32:50nah mungkin ini bisa dibaca sendiri, di cek, paling enggak dimengerti bahwa

32:56browser itu bukan murni hanya berisi JavaScript engine aja,

33:02tapi ada implementasi khusus untuk media web untuk browser yang namanya web API,

33:09itu akan nyambung banget sama apapun yang kita pelajarin, kayak tadi ada asynchronous,

33:15ada call stack, ada event loop, ada queue, ini semua berkaitan kayak si set time out aja,

33:22jadi set time out itu kan bagian dari browser API, walaupun dia juga ada di node,

33:29nah di environment node-nya itu, implementasi set time out-nya itu sedikit berbeda,

33:36minimal dulu sih kayaknya, di awal agak berbeda dengan punya browser,

33:42karena masing-masing dia punya cara integrate sendiri,

33:46jadi minimal kita tahu tentang adanya perbedaan, apa sih,

33:52dimana suatu JavaScript runtime di eksekusi, itu web API, itu apa segala tentang web API.

34:02- Mungkin ini ya, kita sudah sangat terbiasa untuk apa-apa pakai terpatri library,

34:09kalau dulu kita mau request, kita harus pakai XHR, something-something gitu kan,

34:16terus dimudahkan dengan adanya jquery.ajax aja atau .get atau .post gitu kan,

34:22gampang gitu kan, padahal sebenarnya di JavaScript, di browser sudah ada,

34:29walaupun agak tricky ya, pakainya agak susah gitu kan, akhirnya muncul face API,

34:35bukan face API ini, di browser kita nggak perlu install kan, nggak perlu npm install,

34:40nggak perlu pakai CDN dan lain-lain, kita udah bisa pakai by default,

34:44ketika kita buka konsol gini aja, face aja udah ada gitu kan, kita bisa jelankan,

34:48di sini sudah disediakan face, itu jadi kayak built-in-nya ya.

34:53- Iya, bahwa unbuilt-in di browser.

34:55- Iya, sudah built-in. Nah, bahkan node.js sendiri pun belum ada,

35:00sampai baru beberapa bulan... - Barusan banget ini kan.

35:03- Baru bisa. - Node 16 baru ada tuh ya.

35:06- Iya, yang benar-benar fetch ya, kalau dulu ada fetch-fetch dibuat.

35:11- Oh dulu node fetch, dulu kan polyfill ya, semacam polyfill.

35:14- Ada isomorphic fetch lah apa namanya gitu ya, berbeda-beda gitu, jadi tidak built-in,

35:19itu third party. Dan dari sana mungkin karena juga dulu JavaScript sejarahnya ya,

35:25mereka tidak modular kan, tidak terlalu modular, jadi apa-apa ya bergantung kepada

35:30script yang lain gitu. Sampai akhirnya si browser ini semakin apa ya,

35:38semakin merasa, wah ini kayaknya butuh nih, akhirnya ditambahkan lah banyak-banyak apa,

35:43berbagai API, ya tadi seperti fetch, kemudian bisa baca file, bisa banyak sekali nih.

35:49Kalau teman-teman buka what-web can-do.today, bisa kita lihat nih,

35:54kita bisa ada offline mode, ada background sync, kalau misalkan datanya apa,

35:59kalau kita bikin aplikasi terus datanya mungkin agak banyak, kita bisa syncing data

36:05di background untuk safe dan untuk baca, bahkan bisa payment ya, menggunakan Google itu ya.

36:12- Bisa detect sensor juga sensor. - Detect sensor, NFC, Bluetooth,

36:18USB, macem-macem, ada banyak. - NFC belum bisa Mas.

36:22- Oh belum, belum, belum. - Bakal bisa, bakal bisa.

36:30- Nah jadi si web API itu memenuhi kebutuhan khusus ya user yang menggunakan browser kan ya,

36:36ya itu kalau kita pakai browser mungkin kita akan butuh apalah kamera lah, sensor segala macem

36:42yang tadi ada. Nah salah satu hal yang ternyata setelah dikulik lebih jauh

36:48bergantung sama browser kan network request tuh, jadi kayak caranya sebuah server,

36:53node server misalnya menghendal network request, ternyata beda dengan cara browser

37:00menghendal network request, makanya itu alasannya ya itu perkara fetch aja,

37:05ternyata belum seragam apa, nggak seragam sampai baru-baru ini kan.

37:10Jadi itu berguna banget buat tahu tentang mana yang bagian dari web API,

37:16mana yang bukan. - Iya, bahkan kalau teman-teman butuh

37:22apa ya, library untuk bikin sebuah, bikin kode untuk aplikasi web itu yang modular

37:33atau yang dipecah per komponen, si browser juga udah ada API-nya kan custom komponen,

37:38web komponen lah, itu sudah ada, nggak perlu kita install react, nggak perlu install view,

37:43nggak perlu install macem-macem udah ada, walaupun bisa diakui cara penggunaan

37:47ini memang agak... - Rada susah ya bikinnya rada susah.

37:50- Rada susah, tapi bisa memungkinkan. - Biasanya kan pakai library

37:54yang penengah lah, yang mudahkan kan ya. - Iya, untuk memudahkan aja.

37:58Ada yang baru apa ya, shoelace ya. - Shoelace.

38:04Gimana Ivan? - Iya, salah satu yang paling simpel.

38:10Localization, bukan lokalizasi. - Internalization.

38:14- Internalization, kalau misalnya kita bahas buat bahasa ya,

38:23misalnya dari currency, dari yang USD, Indonesia rupee,

38:31ada koma, ada titik gitu ya gimana. - Rupee, ada koma, ada titik.

38:34Itu bayangkan kalau misalnya punya toko online lagi, kita harus,

38:39kalau dia situsnya di berbagai negara, gimana kita satu codebase,

38:45maksudnya kita mau parsing satu-satu untuk atau pakai JavaScript model mana

38:50yang harus bisa untuk memisahkan, membedakan titik koma misalnya.

38:55Di web sudah ada international... - INTL.

39:01- INTL API, kayaknya ada di sini. Jadi tinggal pakai API itu, internationalization

39:09sudah bisa terjadi, mau currency, mau tanggal, sudah ada, sudah bisa dipakai.

39:15- Kalau dulu, kalau untuk tanggal, jam, waktu gitu,

39:19biasanya pakai momen JS yang gedenya segede gaban ya.

39:22- Betul. - Sekarang sudah bisa digantikan.

39:28Contoh yang lain yang dulu sempat kita bahas, intersection observer.

39:32Dulu kita harus mendetek di mana posisi tertentu sudah digantikan

39:37sama observer yang ada di API. - Nah, observer juga maksudnya

39:42mungkin ternyata sama si event loop, observer itu kan, makanya dia jalannya

39:48di web API karena itu kebutuhan yang cuma ada di browser ya, itu unik.

39:52Mustahil server kan nggak butuh observer yang untuk UI ya. Nah, ini kan observer-nya

39:58macem-macem kan ya, kalau ada resize, ada visible,

40:02kalau misalnya ketrigger, baru diantri in, task di callback-nya diantri in

40:10buat dipungut, buat dicomot, dan dikerjain sama event loop yang tadi itu kan.

40:16Nah, ini juga misalnya ini, apa, history. Kalau teman-teman ikutin kayak router,

40:24react router atau yang lain, ya dalamannya ini, history API,

40:28untuk go to routes tertentu, backward, forward. - Sampai kayak apa, yang buat

40:36parameter juga kan itu sebenarnya ada interface ya kan, URL sama URL search params.

40:41- Iya, ada push dan lain-lain. - Jadi library yang kita pakai under the hood mereka juga pakai itu.

40:46- Sebenarnya, iya. Jadi kalau apa informasi-informasi web API kayak gini,

40:53biar up-to-date gitu, ngeceknya dimana ya? Oh, ini ada API baru.

40:58- Channel ini lah, biar up-to-date, subscribe channel ini.

41:02- Subscribe channel ini dong. - Iya. Jadi kadang-kadang kita, ya itu, karena tadinya

41:11si JavaScript ini kan secara natural dulu, menggunakan terparti itu udah kayak

41:18no-brainer gitu kan, apa-apa, NPM apa-apa, CDN yang dicari yang pertama kan.

41:22Tapi semakin kesini ya. - Mungkin kita perlu customize, pusing,

41:26atau mungkin giliran ada bug atau isu atau apa yang nggak sesuai kebutuhan kita, baru deh pusing.

41:33- Iya, itu dia. Makanya semakin kesini kita semakin butuh atau semakin apa ya, biar aware gitu

41:40bahwa sebelum kita kesana, kita bisa gunakan dulu API yang sudah disediakan oleh browser.

41:46Browser kan ukurannya tidak kecil gitu kan, dan sudah ada di install di masing-masing komputer.

41:51Jadi itu yang kita manfaatkan dulu gitu. - Manfaatkan native-nya dulu.

41:56Contohnya Parkour Detection API itu keren tuh. Kalau kita mau bikin sendiri kan sulit ya,

42:02masa mau kirip data ke server, server-side deteknya, atau pakai apa tuh misalnya,

42:08kalau kita mau pakai machine learning, blablabla, kan nggak bisa sulit.

42:13- OSI-R, OSI-R. - Sudah ada. Sudah ada, tinggal dipakai.

42:17Cuman belum semua browser ya, masih. - Chromium.

42:21- Chromium. - Chromia Base.

42:23- Iya. - Oke, lanjut ke pembahasan berikutnya.

42:30- Lanjut, nah ini selanjutnya malah lebih ke pertanyaan sih.

42:36- Apa tuh? - Gak, nyambung sama yang tadi tuh,

42:39kan topiknya soal event loop nih. Terus kalau di sini sebetulnya

42:45pertanyaan awalnya adalah kenapa kita perlu mempelajari hal-hal yang kelihatan pun nggak,

42:53maksudnya kelihatan secara langsung pun nggak, seperti event loop, call stack, queue.

42:58Tapi kan sebetulnya secara nggak langsung udah kejawab ya tadi.

43:01Itu penting banget karena itu mempengaruhi behavior dan codingan kita yang kita jalankan.

43:08Misalnya tadi tuh sama-sama sebuah function yang recursive, yang muter.

43:14Tapi yang satu, blocking. Beneran ngefreeze, nggak bisa terjadi apa-apa.

43:19Yang satu, nggak. Karena pakai set timeout kan kita perlu buat memahami hal-hal kayak gitu.

43:26Nah, terus ya selain itu juga tadi sempat dibahas juga soal animasi.

43:32Kita jadi paham apa, gimana caranya, kenapa kita harus apa,

43:40nge-set animation frame dengan value tertentu,

43:44karena itu berkaitan dengan cara kerja sih event loop itu.

43:49Jadi kalau soal kenapa sih mungkin udah kejawab karena itu mempengaruhi codingan kita,

43:56gimana kita merancang resitektur kode kita ya.

44:00Nah, terus pertanyaan selanjutnya adalah apakah ini sebenarnya diajarin nggak sih ya di kurikulum?

44:08Kalau orang yang, misalnya mungkin kuliah, kalau kuliah malah mungkin nggak ya.

44:12Kalau bootcamp, ini diajarin nggak sih? Sebenarnya secara proper?

44:16Eh, nggak tahu ya. Saya menyebutnya bootcamp saya, tapi bootcamp yang lain nggak tahu ya.

44:22Ya, pengetahuan bootcamp ternama di Indonesia salah satu.

44:26Mudah-mudahan diajarin ya.

44:28Menurut saya, ini harus diajarin atau at least ada pembahasan ini.

44:33Karena event loop ini dasarnya banget ya untuk event-driven di Java Sea itu dasar banget.

44:43Salah satunya baru hari ini saya menyelesaikan sebuah tiket dikerjaan saya.

44:49Itu requirementnya begini, situsnya ingin memberikan ads free.

44:58Jadi ads itu tidak boleh muncul untuk member yang sudah plus member, sudah upgrade.

45:08Premium member itu nggak bisa.

45:10Karena dibayar buat ngeremov ads.

45:12Ya.

45:13Dia bakal marah kalau ads-nya muncul.

45:15Betul. Tetapi situsnya itu nggak bisa menggunakan server set rendering karena dalam satu waktu,

45:24karena konferensinya besar jadi cache, jadi ada cache ya. Jadi kalau login user itu kita tetap cache seperti biasa.

45:31Dan semuanya harus sebuah JavaScript.

45:34Kita nggak detect dia premium member atau tidak sebelum dia ngelon ads, contoh.

45:41Apa yang harus saya lakukan supaya ads bisa tidak muncul?

45:46Tetapi untuk proses premium membernya, beda thread, beda running-nya beda.

45:55Ads-nya rendering sendiri, event-nya sendiri, ngecek premium membernya sendiri.

46:03Akhirnya harus saya buat delay bagaimana supaya ini jalannya belakangan.

46:08Ya. Saya nggak menggunakan callback. Tetapi saya menggunakan event-driven pakai dispatch.

46:17Jadi kalau misalnya dia proses untuk nge-detect dia panggil API dulu, apakah dia premium member atau tidak.

46:28Kalau dia premium, dispatch event.

46:31Jadi bahasa yang sering dipakai Windows onload event, ada DOM content loaded event atau event-event lain.

46:41Jadi saya dispatch custom event yang ads-nya ini menunggu.

46:45Dia tetap bisa initialize dulu, dia menunggu kalau ada event ini nggak.

46:50Kalau ada event ini terjadi baru dia ngerender ads atau tidak ngerender ads.

46:55Jadi tanpa pemahaman event look, solusi itu tidak bisa saya buat.

47:02Itu pentingnya bagaimana kita mau memahami event look, call stack dan web API.

47:12Ya.

47:15Tapi sebenarnya secara umum, ya kalau misalkan teman-teman belajar sebuah platform atau sebuah bahasa gitu ya.

47:23JavaScript, Node.js atau bahasa-bahasa yang lain, PHP dan lain-lain.

47:29Bukan hanya karena ada artikel yang bilang bagus, ada video yang bilang bagus.

47:35Tapi basic curiosity-nya aja lah.

47:40Ada yang bilang, "Wah Node.js lebih cepat dari PHP."

47:43Kenapa? Karena sincronus.

47:46Tapi kita sendiri nggak tahu sincronus itu maksudnya apa. Apa bedanya sama eksekusi yang ada di PHP.

47:51Kenapa? Kok Node.js bisa cepat?

47:53Padahal dia sama-sama, misalnya sama-sama high-level language kan.

47:57Sama-sama scripting language, berangkat dari scripting language kan awalnya.

48:01- Interpreter. - Interpreter.

48:04Kemudian sama-sama kalau tidak dioptimasi, cuman bisa menggunakan satu core dari CPU.

48:13- CPU. - Ya.

48:15Terus kenapa yang satu kalah cepat dibandingkan yang lain?

48:20Jadi dari curiosity itu kita harusnya bisa menggali lebih jauh, "Oh, si JavaScript ini unblocking."

48:26Maksudnya unblocking itu apa? Kalau ada request, dia terima-terima aja walaupun dikerjainnya belakangan.

48:31Sementara kalau PSP kan begitu ada satu request, dia tunggu dulu, "Eh, sabar. Saya masih ngerjain yang ini, tunggu ya."

48:37Sampai selesai. Sedangkan di JavaScript proses menunggu itu ada di belakang layar.

48:44Jadi kita kayak nggak dikasih tahu bahwa kita sedang menunggu, padahal tas kita juga belum dikerjain.

48:52- Siap kos, yang penting sedang. Siap kos. - Iya, gitu lah.

48:58Jadi dari situ juga kita bisa jangan sampai, "Wah, ini apa ya?"

49:05Kalau kita belajar sebuah bahasa atau belajar apapun ya, belajar suatu yang baru, ada istilahnya itu apa ya? Unlearn.

49:12Jadi hilangkan mindset. Misalkan tadinya PHP, kita taunya PHP.

49:19Terus abis itu kita cobain JavaScript atau Node.js. Di PHP kayak gini, di Node.js kayak gimana ya?

49:26Mungkin di awal begitu belajarnya, tapi makin ke sini kita juga harus tahu sejarahnya, filosofinya kenapa si Node.js ini dibuat.

49:34Alasannya kenapa? Dulu banget si Node.js ini kan awalnya, kita itu kan jaman dulu susah ya, kalau kita mau upload file,

49:42kita mau kasih progress bar, gimana caranya? Susah, setengah mati itu sebelum ada Node.js.

49:49Karena blocking kan, pada saat upload, nunggu uploadnya selesai, baru bisa kita kasih tahu ke klien bahwa ini uploadnya selesai.

49:58Jadi sebenarnya dulu progress bar itu hanya kira-kira aja. Ya, form upload dia kan waktu dia ngirim data itu kayak cuman muter,

50:08browser muter aja gitu ya, nggak apa-apa. Kalau sekarang kan klik di background dia ngirimnya.

50:15Betul. Pertama kali si Node.js muncul, yang bikin Node.js itu demo-innya adalah nunjukin progress bar pada saat upload.

50:23Karena pada saat upload data, upload file di Node.js, itu sistemnya bisa dibuat asingkronus.

50:29Jadi ketika file-nya udah dikirim, berapa persen, dia bisa ngirimin balik ke klien, memberi tahu bahwa ini 5 persen, 10 persen dan lain-lain.

50:39Jadi dari situ aja kita bisa tahu kayak filosofinya, oh ini kenapa sebuah bahasa atau sebuah platform itu dibuat untuk menyelesaikan satu masalah.

50:49Masalah utamanya dari situ nanti akhirnya berkembang, dipakai di mana-mana.

50:53Itu perkembangannya pasti semua pasti ingin bahasanya dipakai di mana-mana gitu kan.

50:59Tapi awalnya dulu filosofinya itu juga tidak kalah penting.

51:03Dari situ baru kita bisa memahami lah, lebih memahami si bahasa ini.

51:09Jangan sampai, karena JavaScript salah satu bahasa yang cukup salah dimengerti.

51:15Tidak sulit di prediksi hasilnya, kok ini yang keluar duluan yang ini, padahal kita harapannya yang ini gitu kan.

51:25Karena kita belum mengerti konsepnya.

51:27- Betul-betul.

51:29- Nah itu manfaat lainnya sih menguasain tentang event loop, karena sering banget,

51:35ya aku pribadi dulu pas baru belajar cara yang salah tadi yang kopas sana sini, tapi gak mengahamin sebenarnya dibalik itu ada apa.

51:45Ya itu kan kesul kan, kadang dicoba bener, urutannya udah sesuai ekspektasi.

51:50A, B, C. A dari A kita dapat data untuk B, dari B kita dapat data buat C.

51:58Terus ditinggal makan bentar, pas balik, tiba-tiba urutannya C, A, B. Pusing kan.

52:05Nah itu kalau misalnya kita gak menguasain tentang asingkronos sama urutan gimana task di eksekusi, itu kan sulit dibaginya.

52:14Jadi hal-hal tadi yang mungkin terkesan, maksudnya low level ya, browser engine banget,

52:23mungkin kita gak lihat secara langsung sehari-hari itu sebenarnya berguna banget karena kita bisa pakai itu untuk itu tadi dibaging in the real world,

52:36sama mungkin bisa ngebantu kita bikin keputusan-keputusan kali ya, misalnya keputusan untuk optimize performance ya kan tadi itu

52:44yang soal animasi atau misalnya kita pakai react nih atau library sejenisnya yang punya algoritma virtual DOM,

52:54ada yang berubah satu, bing, dirender ulang semua.

52:57Nah kalau misalnya kita ada yang salah dikit tuh, use effectnya salah, itu bisa muter-muter kan, itu bisa kena itu juga tadi,

53:05maksimum call stack gitu karena infinite free render ya, ngefreeze. Nah kalau misalnya kita gak menguasain tentang bagaimana browser, web API,

53:19javascript engine, bekerja sama buat bikin siklus rendering, kita bingung kan kenapa tiba-tiba ngefreeze aja gak bisa di scroll.

53:29Nah padahal itu berasal dari suatu logic atau alur di kode kita yang ngetrigger free render,

53:37jadi itu kayak ngebantu kita buat ngefix apa yang salah atau optimize performance kode kita sih.

53:45Yes. Dan kalau dilihat di sini, di selido, di bit.ly/ngobrolinweb, itu ada pertanyaan menarik yang berkaitan nih,

53:59penggunaan promise itu biasanya buat apa? - Janji, celek.

54:04- Janji. - Janji palsu gak? Ini bukan janji palsu. - Penggunaan promise itu buat apa? Buat asingkronus. Bener gak?

54:15- Buat menjalankan operasi asingkronus dan kita bisa mengkustomise responnya ya. Promise itu kan bisa pending, resolve, reject.

54:25- Recheck, ya. Kalau yang asingkronus-asingkronus, apa aja tuh tadi? Baca file, itu bisa asingkronus.

54:34Karena hasilnya tidak instant ya. - Fetch, API, network request.

54:43- Rata-rata yang baca itu read-write itu semua asingkronus, index.tv, local storage, system storage.

54:51Baca file system. - Tapi kalau di Node.js itu beberapa API-nya ada 2 biasanya.

55:01Dulu ya, jadi ada kaya read file sync. Read file-nya aja asingkronus, tapi read file sync itu yang asingkronus.

55:10Mungkin sekarang akan dihilangkan semenjak ada sync wait, mungkin lebih sederhana kan jadinya.

55:15- Ya, mungkin suatu hari dipercake. - Iya, mungkin. - Mau ngasih tau,

55:21teman-teman kalau yang mau pakai promise, asingkronus, segala macam. Atau promise dan segala macam,

55:27always catch error. Try catch, harus di dalam try catch. - Jangan terlalu otimis jadi orang berarti ya.

55:35- Iya. Karena promise itu bisa throw error loh. Jadi kalau nggak di catch, semuanya bisa berantakan.

55:44Jadi kalau eksekusinya file, tadi yang anak itu ngurusin kado, kalau satunya fail,

55:51itu semuanya bisa nggak jalan. - Semuanya akan fail, iya.

55:54- Nah, kayaknya besok-besok perlu ada mini topic promise juga ini soalnya lumayan banyak.

56:00Jadi itu kan tadi jangan terlalu otimis bahwa error, jangan lupa untuk nge-catch error.

56:07Tapi ada kasus yang semacam bisa dibilang ekspektasi awam kita tuh sebaliknya.

56:14Jadi gini, kalau kita nge-fetch, kita nge-fetch melakukan request kan, response code bisa macem-macem kan ya,

56:21kalau kepala 2 berarti sukses, kalau kepala 3 redirect, kepala 4 error.

56:27Nah, kalau fetch-nya sukses, jadi kita berhasil memanggil melakukan suatu request,

56:33di-return dengan response kepala 4, misalnya 401, unauthorized.

56:38Nah, dibalikinya itu adalah itu nggak masuk di error, kecuali kita handle custom ya manual,

56:46kita cek response code-nya apa. Nah, itu sempat...

56:51- Salah API. Salah bikin API itu.

56:56- Nggak, cuma ternyata wajibnya adalah fetch-nya sukses, lah kan berhasil.

57:03Jadi network-nya ada, maksudnya gampangnya kita online, berhasil melakukan itu,

57:10resource-nya pun yang dipanggil ada, cuma hasilnya, isinya user Anda, misalnya kita lagi nggak login,

57:18atau mungkin user kita nggak punya privilege untuk ngelakuin sesuatu, ya otomatis response-nya 401.

57:24Cuma fetch-nya sendiri kan sukses. Nah, itu kadang nyebelin di situ sih.

57:28Ya, itu bisa diakalin dengan kita ngecek status code-nya, ya kita throw error sendiri.

57:34Nah, itu seru sih. Belom ada itu tadi kalau promise all, yang tadi 7 anak ngurus kado,

57:42begitu satu ngambek, langsung dibalikin semua, nggak nunggu sisanya kan.

57:47Nah, kecuali kita pakai promise all settled, promise all settled nunggu sampai ketujuan anak itu selesai.

57:54Di situ kita bisa ngelup mana yang sukses, mana yang jalan dengan baik, mana yang error, masalah.

58:01- Untuk bisa ngerti promosi ini, harus nonton video yang tadi, event loop,

58:08harus ngerti sampai sepaham-pahamnya dulu cara kerja event loop.

58:14- Baru bisa dapet, oh, promise tuh begini tau.

58:19- Ya, jangan lupa juga kalau mau belajar promise atau bahkan asing await,

58:24belajar dulu dari callback, abis itu belajar promise, baru asing await.

58:27Jadi jangan loncat langsung ke asing await, bingung entar.

58:29- Iya, bingung. - Karena asing await itu adalah,

58:32yang dipakai adalah objeknya promise. Kalau kita nggak ngerti promise, asing await pasti pusing.

58:36- Atau mungkin kalau kita cuma kopas-kopas, asing await tanpa paham soal promise atau cara kerja asingkronos JavaScript sendiri,

58:46mungkin bisa cuma jadi kayak apa ya, misalnya kita punya dua request,

58:53kalau kita nggak memahami secara benar, secara mendalam, jadi kita bikin dua baris await,

59:01padahal itu kan jadi kurang performa, karena kan sama aja jadi kayak PHP juga.

59:07Maksudnya dia nunggu baris pertama selesai, abis itu nunggu baris kedua selesai,

59:13padahal itu bisa pakai promise all atau promise all settled kan sebetulnya.

59:17- Iya, kalau dua baris kode itu tidak saling berhubungan, misalkan dia tidak perlu menunggu sebelumnya misalkan

59:25get ID, misalkan get ID gitu ya, dan ID ini dipakai di blognya.

59:31- Nggak perlu responsnya. - Iya, nunggu respons dulu,

59:34abis itu dia mau mungkin get address gitu, nah kalau itu perlu menunggu kan, jadi di await.

59:39- Coba kalau misalnya satu get user, satu lagi get latest post gitu yang nggak ada hubungan ya sama data user itu.

59:46Masa yang waktunya kan kalau dipaksa disuruh. - Jangan saling menunggu, karena buat apa gitu.

59:52Kalau misalnya ditampilkan, ya berbarengan aja dua-duanya.

59:55Jadi disitulah sebenarnya kelebihannya si Node.js dan JavaScript.

1:00:00Dan disitu juga kekurangannya karena kita kurang mengerti cara penggunaannya.

1:00:06Jadi itu bisa pisau bermata dua.

1:00:09- Justru kalau ada kaya multiple await itu sudah salah ya, karena meskipun kita menunggu,

1:00:19at least kita harus ada render sesuatu gitu di browser.

1:00:24Kita nggak perlu menunggu itu hasilnya apa untuk bisa melanjutkan, sebisa mungkin ya.

1:00:29- Sebisa mungkin. - Ya atau berarti itu hal yang beda dipisah lah,

1:00:33harus kita bikin modular apa, fungsin yang lebih modular kan, kita ngakalin kode kita.

1:00:37- Iya betul, jadi tetap ada yang dirender di UI, misalnya contoh,

1:00:43oke kita butuh respons dari API baru bisa melakukan sesuatu,

1:00:46tetapi kan proses rendering nggak perlu nunggu itu kan.

1:00:49- Bisa kasih loading screen, spinner, atau apapun gitu ya?

1:00:53- Iya, jadi biarin aja setelah call fix selesai baru kita lakukan proses selanjutnya.

1:00:59Jadi nggak perlu nunggu, oh user name-nya apa, kita harus nunggu.

1:01:04Jadi proses rendering ke stop karena kita menunggu hasil API,

1:01:07baru bisa kita ambil user name-nya atau paling gampang avatar-nya,

1:01:14baru avatar-nya bisa dirender gitu.

1:01:17Nggak perlu gitu, kita bisa merender avatar loading screen, skeleton dulu,

1:01:25kalau itu udah selesai di belakang, nanti sudah selesai baru call back, nge-replace.

1:01:30- Nah itu kan si event loop tuh yang tadi yang apa, ngehendal dia ngerjain tasnya,

1:01:36abis itu dia muter lagi ke bagian layout, styling, painting,

1:01:39jadi sudah ada mekanismenya di browser yang mengoptimize itu kan ya?

1:01:43- Iya, itu juga yang membuat si JavaScript ini berbeda dengan platform yang lain.

1:01:49Karena platform yang lain belum tentu bisa melakukan itu kan.

1:01:52Yang tadinya placeholder, terus tiba-tiba berubah jadi avatar gitu kan.

1:01:56Nah itu mungkin di platform lain ya prosesnya akan berbeda.

1:02:00Kalau di JavaScript ya nggak apa-apa, aman kita melakukan seperti itu,

1:02:04karena dia akan update secara otomatis dalam tanda kutip gitu kan.

1:02:07Itu yang juga penting untuk dipelajari ya.

1:02:11Oke, kita sudah satu jam, ada lagi yang mau disampaikan?

1:02:17- Enggak dulu. - Enggak, sudah cukup.

1:02:21- Hal basic aja bisa, kita sejam ya. Menarik ya.

1:02:25- Menarik. Dan buat teman-teman gimana?

1:02:32- Meskipun basic tetapi butuh penting-penting-penting banget.

1:02:37Kalau ingin jadi web engineer, penting banget untuk menguasai.

1:02:41- Nah ini kan pendapat kita kan, pendapat kita fundamental, konsep dasar itu penting.

1:02:46Menurut teman-teman gimana? Apakah episode ngobrol di web perlu membahas tentang fundamental

1:02:53atau bisa kita selingi dengan hal-hal yang lain?

1:02:58Boleh kasih komentar lah, kasih komentar mau di chat atau mau di selido,

1:03:04di bit.ly/ngobrolinweb kita butuh masukannya supaya ada feedback loop ya.

1:03:10Kita butuh feedback loop. Kalau JavaScript ada event loop, kita butuh feedback loop.

1:03:15Supaya acara kita semakin keren, semakin diminati oleh teman-teman semua

1:03:21dan semakin berwanfaat lah buat teman-teman gitu.

1:03:24Jadi ditunggu pendapatnya, ditunggu masukannya.

1:03:27Untuk hari ini kita mungkin udahan dulu. Terima kasih banyak buat teman-teman yang sudah hadir.

1:03:32Kita ketemu lagi selasa depan insya Allah dengan tema yang berbeda juga.

1:03:38Kita belum tahu apa, silahkan diberikan ide-ide menarik, nanti kita akan bahas.

1:03:45Keren materinya sayang, saya telat.

1:03:48Wah makanya itu ada lonceng, subscribe.

1:03:51Nah itu adalah sistem notifikasi.

1:03:54Jadi kalau misalkan ketika kita live nanti akan dikasih tahu gitu.

1:03:59Itu callback juga namanya.

1:04:02Jadi ketika kita live nanti akan di callback.

1:04:05Kalau notifikasinya nyalah.

1:04:07Teman-teman nggak usah ngeliatin HP terus ya kan, nggak apa kita live, ntar muncul sendiri notifikasinya.

1:04:13Kalau nggak pakai yang standar aja pakai alarm setiap selasa jam 8 waktu Indonesia Barat.

1:04:19Lihat web dev Indonesia, oke?

1:04:22Terima kasih semuanya, kita ketemu lagi minggu depan.

1:04:26Selamat malam, selamat istirahat, bye-bye.