Ngobrolin ECMAScript - Ngobrolin WEB Ep8
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Tautan: - Apa itu EcmaScript? https://www.slideshare.net/rizafahmi/essentials-and-impactful-features-of-es6 - https://medium.com/geekculture/regular-vs-arrow-function-1f8140fbcece - https://tc39.es/process-document/ - https://github.com/tc39/proposals - https://gist.github.com/rajaramtt/7df370 Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:10Halo-halo selamat malam, selamat hari selasa, dan hari selasa adalah waktunya ngobrolin web.
0:22Dan seperti biasa ketemu lagi dengan kita bertiga, ada Riza, ada Eka, dan ada Ivan.
0:28- Halo semuanya. - Halo semua selamat malam.
0:32Gimana progress materi untuk DevFace-nya?
0:38Boleh kasih bocoran dong? Kalian bahas rencananya.
0:42Bahas tentang Powerful Web API yang berinteraksi sama unsur-unsur hardware device kita.
0:51Jadi kalau yang standar banget kan kamera lah ya, semua udah umum.
0:56Tapi selain kamera itu ternyata ada macem-macem juga, kayak di HP kan ada accelerometer,
1:02ada gyroscope untuk ngecek orientasi atau itu device.
1:08Jadi itu bisa bikin shake to clear form dan sejenisnya sama.
1:14Next-nya kan kita bisa pakai web API nih tanpa harus install library tambahan.
1:20Misalnya buat face detection, buat baca QR, terus buat connect ke external device
1:27kayak dari bluetooth NFC sampai gamepad, itu bakal ngebahas API yang aneh-aneh dan tanda kutip.
1:35Cuma sebetulnya itu udah cukup banyak.
1:39Itu akan dibahas di DevFace Jogja dan Bali?
1:44Jogja dan Bali. Yang Jogja tanggal 20 ini, Bali minggu depannya 27.
1:50Jadi kalau teman-teman yang di Jogja atau di Bali...
1:54- Wajib hadir. - Wajib hadir.
1:58Harus ini ya, harus ngobrol-ngobrol langsung ya.
2:02Kalau Ivan gimana?
2:04Kalau saya lebih kara set performance, masih tetap karena itu fokusnya GDI saya.
2:13Web performance.
2:16Namun untuk yang bahas-bahas web vitalnya, apa itu web core web vital,
2:23saya sudah kedeluan sama speaker lain, jadi saya nggak ambil bagian itu.
2:28Jadi lebih bahasnya lebih ke arah sudi kasus.
2:33Jadi kita lihat, saya akan nanti provide mungkin ya situsnya mengenai situsnya seperti apa.
2:40Terus di audit, strategi apa yang bisa untuk mengimprove FCP, LCP.
2:47First control full pain, largest control full pain.
2:50Strategi menghilangkan, bener-bener menghilangkan combo layout shift.
2:58Terus kemudian preload, segala macam.
Lihat transkrip lengkap
3:02Terakhir total blocking time, gimana handle third party.
3:07Dan sudi kasusnya ini nanti saya bungkus dengan apa yang pernah saya lakukan,
3:11dan efeknya mengenai traffic gimana gitu ya.
3:14AC-nya ke traffic gimana gitu.
3:17Nah, dari itu benar-benar dari sudi kasus yang pernah saya lakukan dan data-datanya real,
3:23namun untuk nama company-nya atau nama situsnya akan disensor.
3:31Disensor, disensor, disensor, disensor.
3:37Juga akan singgung sedikit itu mengenai beberapa web API yang pernah kita bahas sebelumnya.
3:46Web API yang mungkin yang teman-teman nggak pernah pakai, sudah bisa pakai.
3:51Observe.
3:52Ya, lebih banyak ke arah observe.
3:55Low level banget ya.
3:58Strategi bagaimana load sesuatu yang nggak perlu di-load di awal, tetapi bisa di-load belakangan.
4:08Nanti akan singgung sedikit, apa yang dilakukan oleh island architecture juga mirip kayak gitu.
4:15Tapi bukan bahas JS-nya ya, bahas on-set berfikirnya.
4:20On-setnya. Wah, praktikal sekali ya.
4:23Iya, nggak tahu lagi kalau teori apa yang mau dibagikan.
4:28Bagus dong, jadi ada apa, jadi saling melengkapi.
4:33Yang satu mungkin bahas tentang core web vitalnya itu apa, konsepnya apa.
4:37Yang satu bahas tentang ke praktiknya gimana, langsung di kasus gitu kan.
4:43Akan hadir di kota mana, Ivan?
4:45Hadir di Depok dan Bogor, kalau nggak salah, yang tanggal 3 Desembernya di Depok, tanggal 10nya di Depok.
4:59Atau kebalik, nggak tahu, lupa balik.
5:03Kalau gue, jadi tanggal 27 Besok di Surabaya, Surabaya rencana akan menjalankan code-lapse.
5:17Jadi sudah ada materinya tentang Fugu, jadi beberapa API yang ada di Fugu kayak clipboard API.
5:29Safe-to-file ya, safe-to-file, context.
5:33Ya, betul, safe-to-file, yang Fugu yang sudah cukup encer, yang sudah publish di browser-browser modern.
5:40Chromium.
5:41Aduh, hati-hati, bisa paralyze loh kalau makan ikan Fugu.
5:45Makan ikan Fugu.
5:46Nggak dimakan, nggak dimakan, di praktiknya aja.
5:49Jadi konsepnya sebenarnya bukan workshop ya, karena ternyata dari Surabaya bilang mereka membuka untuk 200 orang.
5:58Saya bilang kalau workshop nggak mungkin kayaknya 200 kan.
6:01Mungkin code long aja, jadi mereka lihat demo lah, demo, demo-code aja.
6:06Demo follow along.
6:07Ya, ya mau ikutan boleh, yang nggak, ya nggak bisa.
6:11Soalnya kan kalau 200 orang colokannya gimana, pada boleh atau nggak gitu kan.
6:16Jadi ya mereka mungkin hanya melihat aja, beberapa mungkin ada yang ikutin ya silakan.
6:20Itu di Surabaya.
6:22Kemudian dua lagi DevFace Semarang dan tanggal 3 DevFace Semarang, tanggal 10-nya ke Makassar.
6:31Itu rencananya mau bahas tentang, sedikit membahas tentang spesifikasi, spesialisasinya event, performance.
6:41Tapi yang berkaitan dengan image.
6:43Karena image itu ternyata adalah aset yang paling gede ukurannya.
6:50Apalagi kalau kita nggak care kalau misalkan, target user-nya handphone.
6:57Yang hanya butuh kayak 500 pixel, tapi deserve dengan...
7:00Kalau mantahannya 3 mega.
7:038 mega, 3 mega buat apa gitu kan.
7:06Begitu juga sebaliknya mungkin targetnya desktop tapi image-nya kecil.
7:11Jadi ya agak pixelate gitu kan.
7:14Nah itu yang akan dibahas sedikit tentang bagaimana cara meng-automasi itu.
7:19Terus bahas tentang format-format image kekinian kayak WebT atau...
7:25WebT, Aviv.
7:27Aviv dan teman-temannya.
7:30Wah ini ada yang perhatian sekali nih.
7:33Maka maknya keren.
7:35Mook apa itu?
7:37Expert.
7:39Dapat ya, kok kita nggak dapet?
7:41Iya.
7:43Oh ini yang salah kirim ya?
7:45Misalnya kirim, oke. Halo-halo semuanya.
7:50Oh iya teman-teman di kolom chat ya.
7:53Boleh kalau misalkan ada yang mau didiskusikan.
7:58Maaf ya kita di episode yang kemarin agak...
8:01Waktunya agak mepet gitu ya.
8:03Jadi kita nggak sempat bahas pertanyaan-pertanyaannya dan belum di-recap juga.
8:07Nanti inca Allah minggu ini dan minggu depan kita bisa bahas beberapa pertanyaan yang ada.
8:12Dan ternyata cukup banyak gitu.
8:14Apa namanya? Bisa jawabin.
8:16Bisa buat bahan konten.
8:18Betul. Bahkan bisa jadi topik.
8:20Kita nggak usah mikir. Kita nggak usah mikir topik sendiri ya.
8:23Topiknya dari yang ngirim di Slido ya.
8:25Oh iya.
8:27Kemarin minggu lalu kan dari Worldcam itu ada satu topik yang sangat berkena gitu.
8:31Apa tuh?
8:33Optimized performance melalui edge computing.
8:38Edge computing.
8:40Nah, menarik kan tuh.
8:44Ternyata...
8:45Itu membahas sama edge function yang kita bahas di beberapa episode yang lalu, beda?
8:50Yes and no.
8:52Tergantung kalau edge function kan ibaratnya custom function yang kita bikin sendiri yang jalan di serverless di CDN.
9:01Worker di CDN lah ceritanya gitu ya.
9:05Berarti punya JS engine yang bisa jalanin kode kita di CDN.
9:13Kalau edge computing side performance ini sebenarnya konsepnya sudah ada.
9:17Kalau temen-temen sudah pakai produk tertentu yang CDN, baik gratis maupun berbayar.
9:24Contohnya gini.
9:26Kalau misalnya kita sudah di belakang CDN, sebut merek aja lah ya seperti Cloudflare atau Fastly atau Akamai atau whatever it is ya.
9:36Banyak lah, banyak banget CDN.
9:38Dia sudah bisa otomatis kayak pertama, nge-compress HTML.
9:43Ya kan?
9:44Stratika setup ya?
9:46Ya, nge-compress HTML, JS, CSS itu sudah bisa di-compress.
9:50Bisa, sudah bisa automatic WebP, contohnya.
9:56Bisa automatic HTTP2 atau HTTP, bahkan sudah bisa, salah satu produk sudah bisa HTTP3.
10:04Itu untuk streaming nggak biasanya?
10:07Stream apa? Stream componentnya?
10:10Macam-macam, HTTP3, ya.
10:12HTTP3 itu dia koneksinya via UDP.
10:16Nah, ini bisa jadi topiknya gini, HTTP3.
10:21HTTP3 itu quick ya Pak. Quick dulu punya si Google, quick.
10:26Itu topik sendiri nanti kita bahas.
10:29Terus kemudian sudah ada firewall, ya kan?
10:32Terus beberapa CDN sudah bisa automatic image resize.
10:37Apa lokasinya sesuai yang paling dekat ya berarti?
10:41Kita sebagai developer nggak peduli image-image, upload aja.
10:46Nanti yang resize si CDN.
10:48Sudah sesuai dengan kode kita, source set-nya kita.
10:51Kita tentuin parameternya mau ukuran berapa untuk yang device sekian-sekian.
10:58Source set itu bisa di-define gitu ya.
11:01Nanti image yang di-compress atau di-resize itu di CDN.
11:06Sudah di edge computing.
11:08Terus apa lagi tadi ya? Sudah firewall sudah pasti.
11:12Jadi first-level firewall sudah ada di situ.
11:15Image resize sudah ada.
11:17Image compression, WebP segala macem sudah ada.
11:20HTTP2 atau HTTP3 sudah automatis.
11:23SSL sudah automatis.
11:25Terus kemudian apa lagi?
11:28Apa ya?
11:31Compressing untuk static file, HTML segala macem sudah automatic di minify.
11:37G-zip atau broadly sudah ada.
11:43Jadi semuanya yang heavy-heavy stuff yang perlu kita pikirkan sebelumnya di web server.
11:50Contohnya nginx atau apa sih sudah diambil alih.
11:54Di server orang.
11:56Sebenarnya kan kerjaannya tetap ada ya. Bukan kerjaannya hilang.
12:00Tapi dia lega kan.
12:02Dari sisi kita lebih murah.
12:05Jadi ibaratnya cuma seperti anggap saja seperti share hosting yang free.
12:12Janganlah yang free lah ya.
12:14Share hosting yang cukup mapan saja untuk koneksi kita ke database segala macem untuk provide content.
12:22Sisanya sudah di-handle CDN.
12:26Gak perlu kan dulu kalau compression sendiri mahal.
12:31Kalau dulu bikin resize-resize image mahal.
12:34Harus pakai kayak cloudinary gitu-gitu ya.
12:37Kalau image kan.
12:39Cloudinary itu sudah edge computing termasuk ya.
12:44Sudah service.
12:46Sekalian sama provide CDN-nya juga kan.
12:48Ibaratnya kalau sekarang CDN yang baru-baru itu sudah involve semua.
12:52Sudah include semua.
12:54Seperti Cloudflare itu semuanya sudah ada.
12:57Bahkan sampai worker-nya edge computing-nya sudah ada.
13:01Itu yang menarik yang saya dapat dari wordcam yang baru.
13:07Untung ingat tadi ya.
13:09Wordcam-nya gimana? Seru ya.
13:12Seru-seru.
13:13Ada satu yang dari tim AWS dia bahas serverless untuk wordpress.
13:20Mas Rio.
13:21Mas Rio ya.
13:22Serverless untuk wordpress.
13:24Keren.
13:25Mantap.
13:26Oke.
13:27Jadi kalau ada wordcam jangan temukan, jangan nunggu, ikut.
13:32Enggak ada videonya ya sayangnya ya.
13:35Bekal ada ya?
13:36Bekal ada ya.
13:37Nanti bakal dipublish sama organizer-nya ya.
13:40Oke.
13:42Ini ada pertanyaan sedikit saya mau jawab.
13:44Ini Ricky.
13:45Saya ke Surabaya tanggal 27.
13:48Tempatnya belum tahu.
13:49Jadi dari panitiannya belum tahu.
13:51Kalau ada teman-teman yang mau tahu informasi tentang DevFace.
13:56Kita bisa buka web-nya dimana ya?
13:58GDG apa?
14:01Apa yang ga inget?
14:03Ga inget.
14:04Oh ada di ini.
14:06Ada, ada sebentar.
14:08DevFace.
14:10Buka proposal dulu.
14:13Saya buka email dulu.
14:15Biasanya ada di email.
14:16Iya di email kan.
14:18Oh enggak.
14:19Saya dikirimnya lewat WhatsApp.
14:22Ternyata.
14:23Sebentar.
14:25Ada dikasih link-nya kan.
14:27Bit.ly/devface22-surabayasbj.
14:33Silahkan langsung disana aja.
14:36Diklik.
14:38Nanti dia akan kasih tau alamatnya.
14:41Oh ini ya.
14:42Surabaya udah ada.
14:43Gedung teknik informatika ITS.
14:46Gedung teknik informatika ITS.
14:49Institut Teknologi Surabaya.
14:5110 November.
14:53Oh 10 November. Salah.
14:55Maaf, maaf.
14:57Silahkan yang mau ikutkan.
14:59Nanti kita ketemu.
15:00Sudah bahas Web3? Belum.
15:02Kita masih Web2 ya.
15:05Belum nyampe.
15:07Kita mau Web2 aja bahannya masih banyak banget.
15:11Sampai sekarang gua belum ngerti Web3 itu gimana loh.
15:14Mungkin kita bisa undang narasumber kali ya yang cocoknya.
15:18Soalnya kita masih meraba-raba juga ini Web2 itu apa.
15:23Oke. Sekarang kita udah lewat 15 menit.
15:27Kita belum masuk ke materi utama.
15:28Jadi malam ini kita akan ngobrol tentang ECMAScript.
15:32Iya ngobrol.
15:33Seru juga ya obrolannya ya.
15:35Ya, tapi kita tetap ini ya.
15:37Tetap bahas materi utama kita malam ini yaitu ECMAScript.
15:40Nah, di sini sebenarnya antara apa ya.
15:44Sudah banyak yang tahu, ada juga yang belum tahu ECMAScript itu apa.
15:48Dan Javascript apa hubungannya sama Javascript.
15:51Kenapa disebut sebagai ada IIS 6, IIS 7, IIS 8.
15:54Sekarang IIS berapa nih IIS?
15:56IIS 13 sekarang ya.
15:59Pedanya IIS sama IIS apa ya sih?
16:02IIS apaan?
16:04Oh, nggak tau ya. IIS ya?
16:06Server ya? IIS itu servernya Windows ya.
16:16Server web servernya Windows.
16:18Oh iya iya iya.
16:20Web servernya Internet Information Services.
16:30Service nya untuk web servernya Windows.
16:33Ya, udah di install lagi tinggal dicentang kan.
16:36Feature nya langsung saya nyala ya.
16:38Oke, anyway malam ini kita akan bahas tentang ECMAScript.
16:43Jadi untuk perkenalan saya buka dulu.
16:46Saya pernah bawa materi tentang IIS 6 di tahun 2018.
16:52Berarti sudah berapa tahun ya?
16:544 tahun yang lalu ya.
16:564 tahun yang lalu.
16:57Ini saya bawa materinya di Jogja.js.
17:01Waktu itu belum kenal EK ya. Kita belum kenal ya.
17:04Kayaknya saya belum talked sama sekali.
17:08Kayaknya ini barusan jadi developer tahun 2018.
17:13Kayaknya 2018 saya belum tau S6 itu apa.
17:17Jadi sebenarnya ECMAScript itu apa?
17:20ECMAScript itu adalah sebuah standar atau spesifikasi.
17:25Jadi kalau teman-teman tau GraphQL.
17:27GraphQL itu sebenarnya spesifikasi.
17:32Dan banyak yang melakukan implementasi berbeda-beda.
17:39Salah satunya GraphQL nya sendiri melakukan implementasi untuk library nya.
17:43Terus ada Apollo juga GraphQL kan.
17:47Terus ada URQL, ada macem-macem lah.
17:50Nah itu kenapa bisa banyak itu? Ya karena mereka menggunakan spesifikasi yang dari GraphQL.
17:57Mereka implementasi dengan caranya masing-masing.
17:59Dengan kelebihan dan kekurangannya masing-masing.
18:01Sama aja kayak ECMAScript.
18:03Sebenarnya kayak resep masakan gak sih?
18:06Betul, betul, betul.
18:08Resep ya.
18:09Jadi pokoknya kalau ECMAScript ini harus bisa console.log.
18:14Keluarnya ini.
18:15Terserah tuh gimana implementasinya.
18:17Mau pakai bubble sort, mau pakai apa gitu kan, dibahas gitu.
18:21Spesifikasi berarti ya.
18:24Masing-masing browser juga punya implementasinya beda-beda.
18:29Jadi antara Chrome atau Chromium Base itu menggunakan Bling kalau gak salah ya.
18:35V8, kemudian FireFox.
18:39Safari pakai WebKit ya.
18:42WebKit JSNG nya kan JavaScript Core.
18:45Kalau FireFox, Spider Monkey.
18:48Eh kalau FireFox, ininya apa rendering engine nya?
18:52Gecko.
18:53Gecko, oke.
18:55Dan WebKit nya sendiri sebenarnya asal-mung asalnya adalah dari,
19:01saya lupa tuh, nama browser yang ada di KDE nya Linux.
19:06Ya itulah pokoknya.
19:08Jadi awalnya dari Linux dibikin open source oleh WebKit dan WebKit diambil,
19:16maksudnya digunakan oleh si Safari.
19:18Jadi dia standar, masing-masing browser, masing-masing orang,
19:24atau masing-masing pihak itu bebas melakukan implementasi terhadap ECMAScript standar.
19:28Salah satunya JavaScript.
19:30Dan kenapa banyak bahasa yang bisa berjalan di browser,
19:35misalkan kaya TypeScript, PureScript, apa lagi ya?
19:39PHP.
19:41RaceScript, PHP.
19:43Ada PHP, ada.
19:44Ada yang bikin bubble PHP.
19:46Oh ada.
19:48Jadi istilahnya transplasi, dia melakukan transplasi menyesuaikan dengan standar.
19:54Makanya bisa banyak ya.
19:56Banyak bahasa yang ditulis di atas JavaScript.
19:59Dan pada aku tip ya, padahal sebenarnya ECMAScript.
20:02Jadi masing-masing browser juga melakukan optimasi sendiri-sendiri.
20:07Makanya kemarin ada misalkan melakukan basemak di Chrome,
20:11ternyata yang ini lebih cepat.
20:12Ternyata di Firefox berbeda.
20:14Karena mereka implementasinya beda.
20:16Mungkin yang satu pakai for loop, yang satu pakai while misalkan.
20:19Ternyata berbeda.
20:20Jadi ada perbedaan di sana.
20:22Itu adalah short introduction tentang ES6.
20:29Dan sekarang kita sudah sampai ke ES13.
20:32Jadi sebenarnya ada, apa ya, ini timeline-nya.
20:37Ada cukup stagnan dari 99.
20:39Jadi 97 itu pertama kali JavaScript muncul.
20:42Standarnya adalah ES1.
20:44Kemudian ES2 setahun kemudian, setahun kemudian ES3.
20:48Dan berselang 10 tahun kemudian baru ke ES5.
20:52Jadi cukup lama nih.
20:54Tidak ada perkembangan sama sekali selama 10 tahun.
20:56Iya, lompat 10 tahun.
20:58Tidak ada perkembangan sama sekali.
21:00ES4 tidak ada gitu ceritanya?
21:02Tidak ada.
21:03Ya itu sampai lama banget gara-gara pada ribut,
21:06pada nggak selesai-selesai, nggak beres-beres.
21:09Pas proses membuat ES4 itu ya macem-macem lah.
21:13Kayak drama gitu ternyata.
21:15Iya, drama.
21:16Masih juga browser wars kan waktu itu ya.
21:19Ternyata apa standards working group pun juga manusia.
21:28Terus juga Microsoft juga bikin dan.
21:32Ada yang bikin perjuangan lah versi perjuangannya gitu loh.
21:38Kalau nggak salah dulu Microsoft bikin Microsoft J++ kalau nggak salah.
21:47Itu buat bikin buat implementasi JavaScript-nya.
21:51Makanya ada browser wars juga kan.
21:54Sampai 10 tahun akhirnya mereka mencapai kata sepakat di 2009.
21:58Dan semenjak ES5 sampai sekarang perkembangannya luar biasa.
22:02Amang stabil lah stabil.
22:04Dari ES5 ke ES6 pun.
22:06Bersatu bisa lancar ya gitu ya.
22:09Dari ES5 ke ES6 pun cukup jauh.
22:14Ada perbedaan 6 tahun.
22:15Hampir setengahnya ya, setengahnya dari sebelumnya.
22:18Dan disinilah kebingungan terjadi ketika 2015 muncul ES6.
22:24Ini sebutnya ES2015 apa ES6.
22:26Ada yang nyebut ES2015 sesuai tahun.
22:29Ada yang menyebut ES6.
22:31Jadi 2015 muncul ES6.
22:342016 muncul ES7.
22:36Dan seterusnya sampai sekarang ES13.
22:39Hampir setiap tahun ada.
22:41Dan salah satu yang membuat, yang paling hype adalah ES6.
22:46Sampai sekarang saya masih membekas ya ES6-nya.
22:49Beberapa fiturnya yang muncul.
22:51Ya, class.
22:52Kemudian variable led, cons.
22:55Selain var gitu ya.
22:56Kemudian ada arrow function.
22:59Destructuring, rest, spread operator.
23:02Temperature, asking weight dan lain-lain.
23:04Nah, buat Eka atau Ivan, yang jadi favorit fitur ES6 apa nih?
23:11Yang paling senang?
23:14Asking weight lah.
23:16Itu yang paling berbeda ya.
23:18Iya, asking weight.
23:20Rata-rata yang kepake semua ya harus pakai ya.
23:26Kalau kepake sih semua ya.
23:28Cuma kalau yang helpful banget.
23:30Apa quality of life-nya, apa mengimprove quality of life.
23:34Ya, asking weight gitu.
23:36Kalau gue sih sukanya spread operator sama destructuring.
23:40Betul-betul.
23:42Itu simple, code-nya jadi simple.
23:46Betul-betul.
23:48Dan apa ya, next-nya kita akan bahas tentang,
23:54salah satunya yang akan Ivan bahas tentang arrow function kan.
23:58Tapi sebelum itu, mungkin Eka bisa jelasin tentang
24:02ES ECMAScript lebih mendalam lagi.
24:08Gimana sih proses-nya dan lain-lain gitu.
24:11Oh iya, sip-sip.
24:13Nah, bentar.
24:15Mana ya?
24:17Buka dulu.
24:19Itu, coba tolong buka proses adopsi fiturnya.
24:24Ini?
24:26Ya, jadi si ECMAScript itu tadi kan yang dibilang ES.
24:31ECMA itu ternyata sebetulnya, apa,
24:35dia enggak cuma bikin JavaScript doang.
24:38Jadi itu working group untuk bermacam-macam
24:42spesifikasi yang berhubungan dengan komputer dan elektronik.
24:48Itu ECMA-nya sendiri.
24:50Nah, terus siapa sih TC39 itu? Nah, kalau TC39 itu
24:56adalah komite atau badan kerja, kelompok panitia kerja
25:00yang tugasnya secara khusus membuat spesifikasi bahasa,
25:05spesifikasi ECMAScript yang dipakai untuk JavaScript itu.
25:09Nah, terus selama ini mungkin kita kan enggak terlalu tahu ya
25:14kenapa bisa tiba-tiba ya ada tadi itu semua.
25:17Tadinya enggak ada tiba-tiba, tering, ada arrow function,
25:20tering, ada asing-await, tering, tiba-tiba ada promise,
25:24tering, apa, tiba-tiba promise metodnya nambah jadi banyak.
25:27Nah, itu kan enggak terjadi tiba-tiba begitu aja
25:33atau dari apa, sisi komitinya, panitianya juga
25:38orang sebanyak itu dengan berbagai kepentingan dari berbagai industri
25:42enggak mungkin begitu aja munculin fitur baru.
25:48Nah, ada prosesnya. Prosesnya itu ternyata cukup menarik.
25:52Ada stage-nya dari 0 sampai 4.
25:55Nah, yang 0 itu ternyata semua orang tuh boleh, secara teori,
26:01semua orang termasuk kita boleh propose.
26:03Jadi caranya sesimpel bikin isu aja di GitHub repo-nya mereka.
26:10Kita bikin isu, misalnya saya pengen JavaScript bisa, blablabla.
26:14Nah, dari situ, nah, ini, jadi secara teori semua orang bisa beridea apapun.
26:22Tapi baru bakal masuk, maksudnya baru secara positif, apa,
26:28ada progress secara signifikan kalau udah masuk stage 1.
26:32Untuk masuk stage 1 itu harus ada yang namanya champion, apa,
26:36championing dari Panitia TC39 itu.
26:41Jadi mungkin orang-orang dari entah Google, Microsoft, Apple, atau dan lain-lain
26:48harus cukup banyak yang menganggap itu hal yang penting, berguna.
26:53Nah, baru dari situ diolah lagi proposal-nya.
26:56Jadi udah ada standar proposal-nya kayak kegunaannya apa aja.
27:00Terus apa, diskusi cara kerjanya, polyfill-nya, backwards compatibility, dan lain-lain.
27:08Ya udah, itu, apa, bisa lanjut ke, kalau sudah dianggap,
27:13kalau ada kesepakatan untuk lanjut ke stage selanjutnya.
27:17Ya udah, lanjut ke stage 2, 3.
27:21Nah, kalau udah sampai ke stage 4 ya, stage 4 itu berarti udah finish.
27:30Nah, coba tolong scroll down sedikit.
27:33Nah, itu pokoknya 1 itu baru formal secara resmi dimulai.
27:382 dan 3 makin apa, makin diolah, makin dipertajam.
27:43Dan terakhir 4 itu selesai, dianggap selesai.
27:47Tapi kan belum bisa langsung di-shipping, baru bisa diikuti ke release di tahun selanjutnya ya.
27:53Ini spesifikasinya yang udah shipping kan?
27:56Iya.
27:57Tapi spesifikasinya belum tentu kan?
27:59Oh, belum tentu. Cuma maksudnya ini kalau udah sampai 4, misalnya sekarang kan masih 2022 ya.
28:06Nah, kalau sekarang udah fix pun, kan nggak bisa masuk IS yang sekarang ya, nggak bisa masuk IS 2022.
28:14Harus masuk yang tahun depan kan, masuk release selanjutnya.
28:17Nah, mungkin temen-temen pernah lihat setting entah di Babel atau TypeScript, IS Link dan lain-lain, ISnext.
28:26Nah, yang dimaksud dengan ISnext itu, kalau yang sudah fix, sudah selesai, masuk level 4 ini.
28:33Jadi, misalnya sekarang 2022 nih, ISnext itu yang saat ini udah berada di level 4.
28:41Dan akan di-release, pasti akan di-release tahun depan dengan spesifikasi persis seperti itu.
28:47Jadi, udah nggak berubah-ubah lagi.
28:49Jadi, kalau masih di tahap 1, 2, 3 kan masih bisa berubah. Eh, gimana, Van?
28:55Kayak nightly build gitu ya?
28:57Iya, sama macam nightly build.
29:01Itu prosesnya kira-kira begitu. Terus contoh proposalnya mungkin bisa tolong dibuka.
29:08- Ini? - Iya.
29:11Nah, itu. Scroll ke bawah sedikit.
29:14- Ini untuk method add. - Method add.
29:20Ya, jadi untuk, kayaknya itu untuk array ya.
29:24Untuk cari index array tapi dari terakhir, dari belakang.
29:29Nah, itu di situ kita udah bisa lihat deskripsi singkatnya ya.
29:33Jadi, contoh proposalnya itu enak sih, maksudnya ini menarik untuk baca ini.
29:37Jadi, di sini belum. Ini kan proposal, jadi masih dalam bahasa manusia.
29:42Jadi, di proposal itu, mereka harus argue kira-kira secara singkat,
29:47cara kerjanya gimana, kegunaannya apa, terus polyfillnya untuk backwards compatibility, dan lain-lain.
29:55Nah, ngomongin backwards compatibility, salah satu keunggulan dari javascript web, platform web secara umum adalah backwards compatibility-nya.
30:11Jadi, kalau teman-teman punya script IS3, masih bisa jalan sekarang, di 2020 masih bisa jalan.
30:19Di platform lain, belum tentu kan. Bisa aja udah berhenti nih, udah nggak disupport.
30:25Sementara kalau web dan javascript itu, mereka sangat memikirkan backwards compatibility.
30:31Platform lain maksudnya apa nih, Mas? Mobile.
30:35- Apa-apa-apa? - Mobile maksudnya.
30:39Iya, maksudnya bahasa pomograman, atau mobile, atau yang lain. Banyak kan ada life cycle-nya, ada siklus hidupnya.
30:51- Kita nggak support ini lagi. - Terutama JS ini, scripting language ini, write once, bisa run anywhere.
31:00Secara teori ya?
31:03Dan emang kita kan bisa integrate sama tooling ya, kayak tadi tuh yang soal IS, kode IS berapa lah, IS5 gitu.
31:13Ya, karena spesifikasi ini harus sangat detail, dan emang harus nunjukin gimana cara polyfill-nya.
31:21Jadi kita, ya mungkin kita nggak bisa, ya repot kalau memproses secara manual, tapi kita tinggal pakai bubble, atau typescript, dan lain-lain.
31:30Kita kan tetap bisa nulis pakai kode yang modern itu, yang paling baru, ya nanti tinggal specify aja.
31:36Kita pengen diolah untuk jadi backwards compatibility-nya. Compatibility-nya sejauh apa ke belakang.
31:44Jadi ini selain buat developer-nya sendiri, literally nulis kodenya, kan ini untuk tooling juga ya, untuk integrasi dengan berbagai tool transpiler dan lain-lain.
31:56Dengan kata lain, kalau kita sudah pakai bubble transpiler itu contohnya untuk, apa namanya, sudah pakai bubble misalnya.
32:08Berarti kan kita hanya tinggal tulis sesuai dengan, misalnya kita pakai IS 2013, sebenarnya kita nggak peduli ya, bagaimana.
32:18Cuma syntax-nya aja IS 13 sudah adopsi semua arrow function, string literal, object apa. Nanti ujungnya bagaimana supaya jadi JS yang bisa dirading itu ya.
32:29Si tooling ini ya. - Kabel.
32:32- Robah semua, ya. - Iya, jadi kayak di transpilasi kayak code mode ya.
32:38Kalau teman-teman tahu istilah code mode, jadi dimodifikasi code-nya supaya bisa jalan di browser-browser yang kita target sampai minimum misalkan IS
32:47EA6 misalkan gitu kan, dan lain-lain gitu.
32:53Itulah sebabnya si JavaScript proses proposal ini cukup rumit ya, harus ada community-nya lah, harus ada proposal-nya, proposal-nya juga cukup detail gitu kan,
33:05sampai implementasi, possibility implementasinya seperti apa, kompatibilitasnya juga dipikirin semuanya.
33:14Karena ya itu, backward compatibility-nya harus tetap dijaga.
33:18Sama tadi lupa saya mention antara ECMAScript sama JavaScript.
33:24Nah, ini juga salah satu alasan kenapa JavaScript itu nggak ada official dokumentasinya.
33:32Orang lari kemana sih? MDN kan. MDN kan punya Mozilla.
33:36Jadi nggak ada JavaScript.org atau JavaScript.com yang isinya adalah dokumentasi resmi.
33:40Karena masing-masing browser, masing-masing orang atau kalangan itu bisa punya implementasi masing-masing.
33:49- Kalau bisa saya perjelas elaborate konteksnya gini. - Boleh, boleh.
33:54JavaScript itu kan sebenarnya scripting language ya, script aja gitu yang ngeraning komen tertentu di JavaScript Engine.
34:06Implementasi di JavaScript Engine itu beda-beda, mulai dari V8 punya Chrome,
34:13SpiderMonkey punya Mozilla, dan JavaScript Core.
34:18Bahkan ada lain, yang lain juga ada saya kurang tahu.
34:22Ada, ada. Microsoft dulu punya Chakra sebelum dia bikin Edge yang versi Chromium.
34:29Dia punya namanya Chakra, dan itu sempat dijalankan juga di Node.
34:36Jadi ada Node.js versi Chakra, bukan versi V8. Itu juga ada.
34:41Jadi ibaratnya dari scripting language, dari JavaScript yang ditulis ini, meskipun codenya sama,
34:49mungkin eksekusi, cara eksekusinya di JavaScript Engine itu beda-beda.
34:55Makanya perlu standar. - Nah, terus itu berkaitan sama, makanya kenapa spesifikasi ini,
35:02sebetulnya kan bahasanya, bahasa manusia banget ya, dalam tanda kutip.
35:08Karena spesifikasi ini kan menerangkan, menerangkan tujuannya.
35:13Pengen apa sih, biar bisa apa. Nah, implementasinya di V8 dan lain-lain itu kan justru,
35:20codingnya nggak pakai JavaScript kan, mereka pakai apa sih ya? - Iya.
35:25- Jadi di sini bukan tentang implementasi teknis, bukan tentang detail implementasi teknisnya sendiri,
35:34tapi behavior yang pengen didapat. Nah, terus ini kan sebetulnya nggak,
35:39agama script ini nggak secara langsung berhubungan, berhubungan sih, tapi bukan langsung tentang web kan,
35:51karena ini bisa diterapkan di server site environment juga, misalnya V8 kan jalan di Node.
35:57Jadi sebetulnya ini belum secara langsung berkaitan dengan web, tapi karena ya sebagian besar penggunaannya
36:03kan untuk di browser, jadi tetap berkaitan dengan web, dan kayak di situ ada contohnya tuh,
36:09kalau digunakan untuk manipulasi DOM, gimana kayak pertimbangannya misalnya yang contoh si ADD ini kan,
36:17ternyata kalau sudah masuk di DOM, di apa, dokumen objek model di browser, nggak semua iterables itu array.
36:26Kalau misalnya kita dokumen query selektor all, itu yang dibalikin adalah node list, gimana tuh?
36:32Tapi apa spesifikasinya itu berusaha menjawab gimana tuh kalau begini.
36:37Jadi kalau implementasi teknisnya ya udah, itu tadi yang dibilang fun, ya udah terserah masing-masing.
36:44Tapi di sini mereka sebisa mungkin mencari kata sepakat dulu, jadi biar pas mereka mengimplementasikan,
36:53nggak interpretasi, nggak ngarang-ngarang, nggak improve sendiri-sendiri.
36:58Karena pada akhirnya itu kan bakal ngerepotin developer, dan pada akhirnya user.
37:03Jadi tujuannya spesifikasi sih itu kayak nyamain pandangan aja.
37:08Iya, itulah yang membuat jadi semakin kompleks kan, yang tadinya hanya berurusan dengan browser, dengan front-end,
37:14sekarang back-end juga harus dipikirin gitu kan, makanya TC39 ini ya mungkin anggotanya semakin bervariasi
37:24dari berbagai bidang gitu, bukan hanya front-end aja, bukan hanya web aja.
37:28Mungkin nanti ada yang dari Intel, ada yang dari apa, yang memproduksi hardware, gitu-gitu ya.
37:35Terus random-random Pak, ternyata siapa pun bisa daftar jadi anggota ECMA.
37:41- Itu berita bagus ya. - Belum tentu diterima tapi kan.
37:44Berita jeleknya, jadi ternyata ada teorinya macam-macam.
37:49Kalau buat yang industri, yang pure industry, bayar ratusan ribu dolar asli.
37:54- Hah, serius? - Iya, jadi coba deh buka link yang...
37:59buka link anggota ECMA, ECMA International.
38:04- Ini bayar? - Iya, jadi ternyata itu ada ordinary members, itu bayar.
38:12Dan emang dari industri dan emang V-nya itu emang sengaja dibuat ekstrim, pokoknya nggak mungkin.
38:19Tiba-tiba misalnya gue bikin PT EKA gitu, terus daftar iseng-iseng pengen ngacak-acak
38:26standar JavaScript, itu emang nggak mungkin kayak gitu.
38:30Cuma buat perusahaan yang ya sekelas IBM, Google, Microsoft, Meta, eh tuh 70 ribu deh.
38:38- 70 ribu CHF, CHF ini apa? - Canadian.
38:43- Bukan, bukan Frank Switzerland kayaknya. - Kenapa nggak pake Euro ya?
38:49- Eh salah, salah. - Anyway, anyway, kembali lagi, ya pokoknya mahal banget lah gitu ya.
38:55Tapi di luar industri, ada juga sebenarnya ada tier-tier lain tuh ke bawah,
38:59jadi ada perwakilan industri yang level menengah, ada yang perwakilan itu non-sovereign.
39:07Jadi, oh ya ada SME juga untuk industri mikro.
39:12- SPC apa SPC? Small Private Company. - Small Private Companies.
39:17- Itu ada DNA. - Nah, terus kalau ini,
39:21ini seleksinya berdasarkan, yaitu kayak kontribusi ke ekosistem,
39:26kayak kalau emang Deno atau apapun yang berperan penting di industri,
39:32walaupun mungkin kalau dari tingkat komersialnya kan itu emang bukan for profit ya,
39:38cuma punya penat penting. Sama kayak mereka tuh banyak anggota dari institusi pendidikan,
39:45jadi itu ada kategori sendiri juga, jadi emang bukan perusahaan.
39:50- Ini non-profit ya, termasuk Mozilla Foundation juga.
39:54- Nah itu kayak universitas kan tuh banyak kan, universitas, Library of Congress apa sih,
39:59kayak yang badan-badan arsip dan lain-lain,
40:03nah itu juga ada jenis keanggotaan khususnya.
40:07- Universitas Indonesia yang di Indonesia nggak ada ya masuk ya?
40:11- Nggak tahu ada nggak, Korea ada tuh. - Korea ada.
40:15- Institute of Computing Technology. - Nanti Institute of Masriza.
40:21- Aktivate lah, apply lah. - Aktivate aja, aktivate.
40:26- Jadi kalau mungkin kalau ada yang pernah dengar pertanyaan siapa yang bikin JavaScript,
40:32jawaban pertamanya tadi sebetulnya bukan JavaScript, tapi ECMAScript,
40:38dan kedua yang bikin adalah gabungan dari masyarakat umum tadi untuk tahap proposal
40:44dan seluruh badan-badan itu tadi, perusahaan dan organisasi ini.
40:51Kalau saya bilang siapa yang bikin JavaScript itu Brandon A.
40:58- Oh iya, maksudnya siapa yang bikin syntax JavaScript yang sekarang?
41:03- Iya. - Iya.
41:05- Kayaknya kalau Brandon A kalau udah aseksion ya?
41:09- Bayangkan dia cuma bisa bikin 10 hari gitu ya, waktu itu kan dia kerjanya di Mozilla.
41:16Terus dia ditugaskan untuk membuat bahasa scripting yang waktu itu
41:24kalau nggak salah requirement-nya dia punya ini kan, punya idealisme sendiri kan,
41:28dia pengen kayak scheme ya, atau lisp gitu kan, lispi kan.
41:34Tapi si Netscape-nya minta bahasanya, syntax-nya itu mirip-miripin sama Java.
41:44Terus abis itu si, tadinya dinamakan MochaScript.
41:50- MochaScript, betul. - Cuman karena Netscape melihat
41:54Java lagi hype nih, Java lagi hype. Ya udah, ikutan hype lah Javascript namanya.
42:00- Kayaknya kan kalau dari Netscape tuh pertimbangannya mereka tuh pengen menggaet Java kan,
42:08jasaan Java, jadi untuk yang server side-nya yang kayak untuk heavy processing-nya pengen pakai Java.
42:15Nah kalau yang untuk lightweight-nya yang ringan-ringan di client side-nya pakai si Javascript itu.
42:22Jadi sebenarnya Brandon A juga dia ngasih nama kan abis Mocha sempet abis itu hampir launching
42:28pakai nama LiveScript kan, terus karena keperluan marketing biar untuk menekankan poin
42:34bahwa ini Java-related loh, jadi untuk biar yang server side Java, yang client side Javascript.
42:42- Akhirnya jadi banyak yang misunderstanding kan Java sama Javascript kan.
42:47- Kalau ada yang tanya apa beda Java dan Javascript, gue jawabannya beda.
42:51Itu ada bedanya car dan carport. - Car dan carpet juga bisa.
42:56- Ada tuh pernah ada buku di salah satu toko buku di Indonesia gitu kan,
43:06belajar Javascript tapi logonya logokopi gitu. - Mocha.
43:12- Bukan, bukan, bukan Mocha. - Kopinya Java.
43:16- Kopinya Java. Ada, ada, ada yang foto in waktu itu di sosial media.
43:22Gitu lah pokoknya banyak yang misunderstanding.
43:26Sebelum kita ke materinya Ivan, ini lumayan banyak rameh nih di chat kita coba lihat ada yang bisa kita jawab gak ya.
43:36Di Defez agenda di Sumatera ada, ada di Medan, betul, di Medan.
43:43Di Medan bakal ada, kemudian Bahiu ini salah, Denu, Denu.
43:49"Denu, udah 2 tahun ada lagi BUNJS, tapi kayaknya corporate atau tech company kurang menelir JS sebagai mainstack untuk API."
43:57Ada bener itu. - API server.
44:02- API server. Kalau untuk back-end ya memang Node.js tidak sebanyak bahasa-bahasa atau platform yang lain ya.
44:12Tapi kalau untuk front-end udah gak ada. - Kalau menurut saya bisa aja cuman kalah
44:18dengan soal trading, multi-tradingnya dengan parallel. - Performa lah ya, performa.
44:23Scalingnya agak, agak tricky ya. - Compare ke GoLang atau Rust gitu ya.
44:30- Makanya sekarang trendnya adalah orang-orang berlomba-lomba untuk menggunakan Rust, Go, dan bahasa-bahasa
44:36yang performanya bagus untuk membantu menjalankan tools-tools JavaScript.
44:45Kayak Turbopad kemarin, ada lagi Denu juga salah satunya yang menggunakan Rust kan.
44:51Kalau BUNJS pake Zig. - Kalau JS itu di Node itu berarti minimal harus punya,
44:57saya belum pernah sih bikin API server pake JS. Minimal harus punya Express kali ya,
45:03some kind of Express gitu. - Ada framework-nya juga. - Ada Nest, JS, bukan Next, N-A-S-T.
45:16- Enaknya nama mirip-mirip semua. Ada Nest, ada Next. - Ada Nest, ada Nest.
45:22- Ada Next. - Udah dimanjain sama stack-stack yang modern, jadi gak perlu pikirin kayak gitu.
45:30- Iya, memang kalau untuk corporate, enterprise maksudnya, memang tidak terlalu banyak yang menggunakan JavaScript.
45:40Maksudnya Node.js, Denu, dan BUNJS. Lagian Denu baru 2 tahun. Kalau perusahaan corporate gak mau dia pakai
45:48aplikasi atau pakai platform yang baru umurnya seumur jagung kayak gini, gak mungkin.
45:54Resikonya lebih besar. Jadi pasti dia ngambil stack-stack yang sudah lebih mature.
46:00Ya, stabil, mature. Dan biasanya mereka butuh support juga kalau corporate itu.
46:06Jadi mereka akan mencari platform yang ada dukungannya, ada konsultan atau ada orang
46:14yang bisa ditelpon atau dipanggil kalau dia mengalami kesulitan.
46:19- Kalau Denu, siapa yang udah belum ada kayaknya? - Belum banyak.
46:24- Dia memang masih eksperimental kan ya? - Masih eksperimental.
46:29Tapi itu ide topik ke depannya bagus tuh. Jadi runtime alternatif ada Denu, ada BUNJS.
46:36Itu kayak gimana? Udah pada coba belum sih?
46:40By the way, si Netlify kalau gak salah, S-functionnya itu menggunakan Denu kalau gak salah.
46:50Ada lagi yang perlu kita jawab, modern function itu isinya kodingan JS versi terdahulu.
46:56Ini saya gak ngerti, Robi. Boleh dielaborasi lebih lanjut?
47:00Maksudnya apa? TypeScript dengan JavaScript, apa bedanya?
47:06TypeScript itu adalah subsetnya ya. TypeScript itu sebenarnya mengacu pada
47:13bahasanya sama compiler-nya juga kan ya?
47:17Iya, ada 3 item dia, 3 item. LSP-nya, Lanjut Server yang buat apa?
47:23- Autocompletenya. - Intellisense.
47:26Intellisense-nya, kemudian TSK-nya, TS compiler-nya sama bahasanya sendiri
47:32yang menambahkan type system ke JavaScript.
47:36Strict type safety. Nah, itu bahasa type safety.
47:44Jadi kalau JavaScript kan bahasanya dinamis nih. Yang dari integer kita bisa jumblahin dengan string.
47:50Yang dari variable-nya tadi kita udah definisikan string, kita ganti ke integer juga dia oke-oke aja.
47:56Bukan integer, number. Oke-oke aja. Sementara kalau yang type
48:00safety atau type system itu nggak bisa sembarangan.
48:05Kalau kita udah definisikan sebuah variable, counter adalah number,
48:09nggak bisa diganti string gitu. Lebih aman, sejarah.
48:14Mungkin sejarah kita coding itu agak lebih, apa ya, lebih tricky di awal.
48:20Tapi ketika sudah deliver, sudah selesai itu perasaan kita lebih aman.
48:26Karena kita tidak khawatir ada bugs dari yang lain.
48:30Saya kan background-nya kan memang dulu dari programmer C++.
48:35Sebelum lanjut ke C#. Baru ke PHP dan JavaScript.
48:40Jadi sebenarnya waktu switching saya dari C ke PHP itu kayak, oh kok enak banget sih.
48:47Satu variable, gue masukin apa aja jadi gitu.
48:51Karena di sistemnya C itu kan semuanya type safe.
48:56Sekarang saya lihat akhir-akhir ini peralihan-nya mulai kembali ke type safe.
49:02Termasuk PHP. PHP itu juga bisa declare strict type.
49:07Jadi strict. Bisa declare strict type.
49:11Untuk semua bahasa ada. Ruby ada, Titan ada. Ada library-nya ya.
49:15Kayak Flow jaman dulu, Flow.js. Jadi bisa ditambahin alokasi.
49:20Kembali ke type safe. Karena terlalu banyak bug gara-gara itu.
49:25Ya, jadi memang teknologi itu ya berputar ya.
49:30Jadi awalnya sulit, kemudian dipermudah. Terlalu banyak error.
49:36Balik lagi dipermudah lagi. Dibikin strict banyak aturan asomanya.
49:40Ternyata itu memang ada konstrain yang tadinya terasa mengegang, tapi ternyata memang butuh ya.
49:46Oke, oke, oke. Nah, ini kita cukupkan dulu pertanyaan-nya. Ini masih ada banyak pertanyaan.
49:52Mudah-mudahan nanti bisa kita jawab di akhir.
49:56Sebelum itu kita masuk dulu ke materinya Ivan.
50:00Ivan akan bahas tentang error function dengan regular function.
50:04Tapi sebelum masuk kesitu saya mau nanya, apa bedanya antara function yang ada namanya dengan anonymous function?
50:12Mungkin bisa bahas dari situ dulu kali ya.
50:17Ada layarnya kan?
50:19Ada. Itu sebenarnya kalau function yang ada namanya, sebenarnya sama aja sih ujung-ujungnya ya.
50:30Bedanya di konteks kali ya. Benar nggak sih?
50:33Jadi kalau regular function atau name function, tentu seperti biasanya function, abcd atau jumlah a tambah b gitu ya.
50:44Kalau anonymous function, dia langsung di execute.
50:51Jadi langsung di create saat itu langsung di execute saat itu juga.
50:54Tapi ujung-ujungnya sama dan itu function.
50:57Dan biasanya anonymous function itu hanya bisa di execute satu kali saja.
51:03Atau ada yang menambahkan.
51:06Contohnya di callback ya. Maksudnya kita paling sering, kita kan paling sering lihat contoh kasus anonymous function.
51:12Inline lah ya. Ditulis langsung disitu tanpa harus kita definisikan function dulu kan.
51:17Atau ada di EFE itu loh. Yang langsung jalan.
51:21Gua lupa istri. Kayaknya EFE ya. Jadi misalnya kita mau jalanin satu kali function.
51:29Unknown function itu hanya jalan satu kali saja.
51:33Oh, immediate function expression.
51:36Nah, let's say immediate EFE.
51:39Lupa panjangannya apa? Cuma tahu singkatannya.
51:42Paling sering gue nemuin itu dikodon orang. Jadi semuanya ditambahkan di EFE.
51:52Yang ditambahkan di anonymous function, boom!
51:56Leber lg query juga banyak yang kayak gitu kan.
51:59Semuanya begitu page load, running semua seabrok-abrok tuh.
52:05Tapi ada faktor, ada pengaruh ke performa nggak antara name function sama anonymous function?
52:11Kita bisa aja kan tulis semuanya name, nggak pake anonymous.
52:14Pada saat misalkan callback kita tulis aja nama fungsinya gitu.
52:18Ada pengaruh ke performa nggak sih antara anonymous sama ini?
52:21Kalau menurut saya belum pernah coba ya, belum pernah testing.
52:25Tapi menurut saya sama aja.
52:27Kalau musik pun kita buat name function, regular function, function abcd.
52:31Terus kemudian setelah dibentuk, terus dipanggil langsung itu juga di satu file yang sama.
52:37Dan dijalankan di page load ya sama aja dengan EFE.
52:42Ya kan? Sama aja memang.
52:44Jadi nggak terlalu berbeda.
52:47Nah, bedanya kalau name function, ya regular function, kita bisa panggil berulang-ulang.
52:55Reusable.
52:57Reusable, betul.
52:59Tapi anonymous function kalau kita taro di variable, bisa dipanggil berulang-ulang juga kan?
53:04Eh, betul. Itu kan jadi ini namanya, itu kembali lagi bahasanya ke arrow function.
53:13Arrow function itu anonymous function atau bisa function regular?
53:18Bingung gue jadinya.
53:25Arrow function itu dibelakang untuk yang name function atau nggak kan?
53:31Sebenarnya cuma ujung-ujungnya sama sih arrow function.
53:35Nanti ada beda aja ya.
53:37Sorry, nanti ada bedanya regular function dan name function.
53:40Kalau misalnya anonymous function kita masukin ke variable, ya sama aja.
53:44Jadi seperti name function sebenarnya.
53:47Seperti name function.
53:49Ya.
53:51Nggak tahu sih.
53:53Tapi rasanya pasti ada perbedaan.
53:55Rasanya ada perbedaan.
53:57Kalau dibilang perholam mungkin ada.
53:59Karena, kenapa?
54:01Karena fungsi, kalau kita mendeklarasikan fungsi kan kita nggak butuh variable kan?
54:07Sementara kalau arrow function atau anonymous function,
54:11kalau kita mau taro di variable, mau dipakai berikut-berikutnya,
54:15kita harus taro di variable kan?
54:17Dan variable itu butuh memori kan?
54:19Mungkin kalau 1-2 sih nggak berasa.
54:22Tapi kalau udah ratusan gitu mungkin, ya nggak tahu, belum coba juga sih.
54:26Cuma logikanya aja.
54:29Good questions. Ini baru saya cari.
54:32Saya coba baca.
54:34Nah, ini ada tambahan nih dari Adib nih.
54:36Adib.
54:38Lebih ke-debug error-nya nanti.
54:40Name function lebih membantu buat ke-debug.
54:42Kalau anonymous lebih blind code.
54:44Buta, bingung ya.
54:46Ini fungsi yang mana yang di-execusi gitu ya?
54:49Bisa jadi, iya. Betul-betul.
54:51Oh iya, soalnya kalau di error log-nya kan bakal di-print apa, nama function-nya.
54:56Sama ya syntax-nya juga beda kan kalau arrow function kan,
55:00const, nama variable, sama dengan parameter, ada arrow-nya.
55:05Ada arrow-nya yang menandakan bahwa itu arrow function.
55:09Nah, terus kita bisa itu kan, ada pilihan kalau pakai bracket,
55:13kalau habis arrow ada bracket-nya, ya kayak biasa.
55:17Sama kayak function-nya kalau ada bracket, ada return, atau bisa langsung,
55:21nggak usah langsung return aja.
55:23Di materi yang saya bahas, kita coba lihat sama-sama, yuk.
55:27Oke, kita lihat ya.
55:29Kayak lebih cepat itu, udah bahas.
55:31Gede-nya cuma, apa, this, konteks-nya.
55:33Konteks this.
55:35Bisa bahas sama-sama.
55:37Oh iya.
55:39Ini bukan masalah arrow function atau function biasa kan,
55:43ini anonimus sama function biasa gitu kan.
55:47Enggak juga, atau emang ini arrow function yang...
55:49Enggak, itu bahasa, beda-beda.
55:53Kita bahas sebentar.
55:55Oke, oke, kita bahas, siap-siap.
55:57Semangat sekali ini.
55:59Ini ya, karena udah muja 9.
56:01Gak apa-apa, lanjut aja.
56:03Sampai jam 10, jam 11 boleh lah.
56:05Masukin, masukin, masukin ke ini dong, ke stream.
56:09Oh iya, sorry, lupa.
56:11Nah.
56:13Oke.
56:15Ya, kita bahas.
56:17Jadi, sebenarnya apa yang kita sebut tadi,
56:21function declaration sama function expression.
56:25Itu istilahnya.
56:27Istilahnya.
56:29Itu ya tadi bahasanya mas Rizze itu kayak anonimus function itu kan.
56:33Ini anonimus kan sebenarnya kan.
56:35Iya, kalau sebenarnya untuk...
56:37...ke variable gitu kan.
56:39Betul, kalau untuk...
56:41...se-se-secara...
56:43...memory, pemakaian memory,
56:45saya nggak tahu ya.
56:47Belum pernah coba.
56:49Mungkin kita bisa coba pake performance dan sebagai yang lalu.
56:51Kita cari tahu seberapa...
56:53...pemakaiannya gimana.
56:55Tetapi, kalau misalnya...
56:57Apa yang kita di-scope kali ini?
56:59Apa yang kita masuk dengan regular function dan arrow function?
57:03Itu, dan apa bedanya?
57:05Itu yang scope yang kita bahas kali ini.
57:07Jadi, anonimus function itu termasuk regular function.
57:11Hanya secara sintaksnya berbeda.
57:13Satu anonimus, satu lagi name function.
57:15Secara deklaratif ya.
57:17Kalau arrow function...
57:19Pak, kita bisa scroll sedikit.
57:21Panggilannya seperti biasa.
57:23Arrow function, terus kemudian...
57:25...variablenya apa dan langsung panggil kurung-kurawal.
57:29Dan itu hasilnya.
57:31Itu sintaks secara sintaksnya.
57:33Ada arrow-nya.
57:35Mungkin functionnya ini...
57:37...diganti dengan arrow...
57:39...dipindahin ke sini, gitu kan?
57:41Yup, betul sekali.
57:43Oke, next.
57:45Kalau nggak, functionnya hilang ya.
57:47Habis tanda kurung, baru setelahnya dikasih arrow.
57:49Kita bahas apa sih bedanya.
57:53Dan nanti kita bahas lagi...
57:55...kapan harus pake name function...
57:57...regular function, kapan harus pake arrow function.
57:59Secara sintaks...
58:01...tentunya satu pake kata kunci function...
58:04...satu lagi hanya arrow saja.
58:06Lebih singkat ya?
58:08Lebih singkat kalau dari...
58:10Tapi hanya arrow function hanya bisa di ES6 ke atas ya.
58:13ES5 nggak bisa.
58:15Jadi perlu diperhatikan itu.
58:17Nah, di arrow function itu...
58:19...ada kata implicit return.
58:22Kalau di regular function...
58:26...kita harus kasih kata return apa?
58:29Return something.
58:31Ada curly bracket, ada return ya.
58:34Ini nggak bisa implicit return ya.
58:38Kalau yang ES5 ya.
58:40Yes, yang regular function.
58:43Sedangkan kalau si ES6...
58:46...kita X tambah Y itu sudah pasti...
58:49...ia implicit return.
58:51Sudah pasti return-nya X tambah Y.
58:53Jadi kalau kita cuma function itu...
58:55...hanya satu baris saja, nggak perlu...
58:57...kurung kerawalnya nggak perlu, gitu ya.
59:00Bahkan nggak perlu kata return.
59:03Itu sudah pasti X, Y itu...
59:06...return-nya X tambah Y.
59:08Pasti itu.
59:10Tapi itu kata kuncinya kan?
59:12Kata kuncinya adalah satu baris.
59:14Kalau lebih dari satu baris juga nggak bisa kan?
59:16Iya, harus pakai kurung kerawal tetap ya.
59:18Oke, lanjut.
59:20Terus secara sintaksnya berbeda.
59:22Lalu turun lagi.
59:24Implicit return udah?
59:26Oh, ini.
59:28Jadi kan kurung-kurawal tidak perlu...
59:30...kalau memang hanya satu baris.
59:32Nah, bahkan argumennya juga nggak perlu ada...
59:34...kalau memang nggak perlu.
59:36Kita bisa tadi kosongan aja...
59:38...kasihkan ada underscore.
59:40Oh, ini bisa diganti underscore?
59:42Bisa.
59:44Oh, iya, iya, iya.
59:46Oke, oke, oke.
59:48Kalau misalkan argumennya cuma satu...
59:50...nggak perlu kurung.
59:52Nggak perlukan kurung, betul.
59:54Itu jadi lebih simple.
59:56Nah, secara argumen...
59:58...ya, di JavaScript itu...
1:00:00...kalau function itu kita bisa pakai...
1:00:02...kata arguments.
1:00:04Meskipun argumennya itu nggak ada itu...
1:00:06...di mana-mana. Itu kayak global object...
1:00:08...yang bisa dipakai.
1:00:10Nah, di arrow function nggak ada.
1:00:12Tetapi di arrow function...
1:00:14...bisa kita kasih spread operator.
1:00:16Contohnya di bawah ya.
1:00:18Iya, titik, titik, titik.
1:00:20Iya, titik, titik, titik, tiga.
1:00:22Nah, contohnya kalau kita mau kasih...
1:00:24...argumen, kita kasih spread operator.
1:00:26Artinya apa sih ini?
1:00:28Kita, artinya function itu bisa...
1:00:30...gak terbatas lah.
1:00:32Mungkin terbatas sebengata berapa ya.
1:00:34Bisa...
1:00:36Sepanjang memorinya.
1:00:38Ya, bisa 10...
1:00:40...argumennya. Dan kita mau mungkin...
1:00:42...anggapannya...
1:00:44...kita mau proses CSV.
1:00:46Dan kolomnya kan, tentu ada CSV...
1:00:48...yang kolomnya 4, ada CSV...
1:00:50...yang kolomnya 100. Bisa aja...
1:00:52...tinggal pake spread operator...
1:00:54...atau argument.
1:00:56Tetapi kalau pake...
1:00:58...regular function...
1:01:00...pake keywordnya argument.
1:01:02Kalau pake spread operator...
1:01:04Arrow function pake spread operator.
1:01:06Itu.
1:01:08Oke.
1:01:10Nah, yang nomor 3 ini adalah...
1:01:12...this object yang paling sering...
1:01:14...membingungkan buat teman-teman.
1:01:16What is this?
1:01:18Kenapa this sama dengan that?
1:01:20This sama dengan that.
1:01:22That sama dengan this.
1:01:24Kalau kompas-kompas ya Rista...
1:01:26...kalo ngomong-ngomong pasti banyak yang gitu.
1:01:28This nya dipindahin dulu ke tempat lain.
1:01:30Biar bisa...
1:01:32...konteksnya.
1:01:34Konteks ya. Jadi kalau misalnya...
1:01:36...di regular function...
1:01:38...this itu adalah...
1:01:40...global object.
1:01:42Apa namanya?
1:01:44Si object itu...
1:01:46...dynamic sesuai dengan...
1:01:48...konteksnya. Dari si function itu...
1:01:50...dipanggil. Ada 4...
1:01:52...invocation yang bisa terjadi.
1:01:54Simple, method, indirect, invocation...
1:01:56...dan kita bahas satu-satu secara simple.
1:01:58Simple invocation misalnya...
1:02:00...kalo di function...
1:02:02...di dalam function itu kita panggil...
1:02:04...this itu...
1:02:06...misalnya kita langsung paste ini...
1:02:08...di console log. This itu...
1:02:10...siapa yang panggil? Itu dari window object.
1:02:12Global object nya diatasnya siapa?
1:02:14Window. Sedangkan...
1:02:16...kalo misalnya...
1:02:18...dia di dalam sebuah class...
1:02:20...atau di dalam sebuah function...
1:02:22...yang lain, this itu adalah...
1:02:24...atasnya siapa?
1:02:26Gitu. Kalo contohnya...
1:02:28...yang nomor 2 itu...
1:02:30...this itu adalah method invocation.
1:02:32Punyanya method invocation.
1:02:34Ya, betul.
1:02:36Next, kalo misalnya kita pake...
1:02:38...invocation nya, tau gak ya?
1:02:40...yang call atau apply...
1:02:42...dari si javascript punya...
1:02:44...itu konteksnya dari si...
1:02:46...kalo kita pake console log...
1:02:50...this itu...
1:02:52...ininya dari siapa yang panggil?
1:02:54Si...
1:02:56...si ini...
1:02:58...si function yang panggil itu siapa?
1:03:00Itu konteksnya siapa yang manggil?
1:03:02Itu berubah lagi, ya kan?
1:03:04Nah, kalo di constructor ya...
1:03:06...tentu si constructor nya yang panggil.
1:03:08This itu adalah si constructor itu sendiri.
1:03:10Jadi...
1:03:12...keyword this itu...
1:03:14...kalo di regular function...
1:03:16...tergantung siapa yang panggil.
1:03:18Dan itu value nya berubah-ubah.
1:03:20Dynamic value.
1:03:22Jadi kalo misalnya...
1:03:24...ada javascript yang lain...
1:03:26...merubah global object itu...
1:03:28...kita panggil this di tempat kita...
1:03:30...bisa jadi berubah hasilnya.
1:03:32Yang paling sering bikin apas itu...
1:03:34...set time out tuh.
1:03:36Ya, nanti kita bahas di bawah sini.
1:03:38Oh, ada ya?
1:03:40Itu ngebah konteksnya kan soalnya?
1:03:44Betul sekali.
1:03:46Nah, turun sedikit. Kalo di arrow function...
1:03:48...this itu gak punya, dia gak ada.
1:03:50Gak ada di dalam arrow function.
1:03:52Jadi kalo kita this gitu...
1:03:54...this itu adalah...
1:03:56...outer nya.
1:03:58Di luar object nya.
1:04:00Yang panggil.
1:04:02Konteks terakhir yang dia tau kan?
1:04:04Itu bedanya.
1:04:08Jadi kalo temen-temen masih bingung...
1:04:10...coba nanti...
1:04:12...link ini dikasih...
1:04:14...test aja di javascript...
1:04:16...di code sandbox atau dimana...
1:04:18...pakai aja...
1:04:20...coba mengerti apa sih bedanya konteks itu.
1:04:22Nah, lanjut.
1:04:24Regular function itu bisa dikonstruk.
1:04:28Jadi bisa new...
1:04:30...karena semuanya object ya.
1:04:32Bisa dikonstruk.
1:04:34Javascript is everything is an object.
1:04:36Bisa dikonstruk.
1:04:38Itu java loh.
1:04:40Sebelum kelas...
1:04:42...sebelum kelas shipping, dulu kan...
1:04:44...dipikin kayak gini.
1:04:46Gak, kalo javascript itu everything is a function...
1:04:48...sebenarnya.
1:04:50Klas pun, itu syntaktik sugar dari function.
1:04:52Oh iya, gua salah.
1:04:54Kebalik, kebalik.
1:04:56Bisa di...
1:05:00...bisa di...
1:05:02...dibuat jadi...
1:05:04...ya kayak kelas gitu ya.
1:05:06Function bisa jadi kelas gitu.
1:05:08Seolah-olah kelas. Sedangkan...
1:05:10...kalo si arrow function...
1:05:12...gak bisa, ada konstruktor.
1:05:14Karena tidak ada disknya ya, tidak ada...
1:05:16...konteks disknya, jadi gak bisa dikonstruknya.
1:05:18Betul.
1:05:20Lalu kalo si...
1:05:22...duplication...
1:05:24...duplicate name parameter.
1:05:26Nama parameternya sama a, a gitu.
1:05:32Di normal function...
1:05:34...itu bisa, kecuali kalo...
1:05:36...kalau kita pake strict mode, gak bisa.
1:05:38Arrow function gak bisa ya.
1:05:40Cuma, aku pernah ada orang nulis kayak gitu sih...
1:05:42...buat apa, tujuannya apa?
1:05:44Serius? Buat apa?
1:05:48Gak, makanya maksudnya kenapa...
1:05:50...sampai ada kasus gitu.
1:05:52Iya.
1:05:54Apa pernah ada yang pake?
1:05:56Mungkin...
1:05:58...I don't know, I don't know why. Tetapi itulah...
1:06:00...ininya.
1:06:02Terus kemudian...
1:06:04...hoisting.
1:06:06Bukan hosting ya, hoisting.
1:06:08Hoisting itu apa?
1:06:10Jadi begini, di...
1:06:12...tau gak temen-temen kalo misalnya...
1:06:14...kita panggil function tetapi...
1:06:16...manggil duluan, kita invoke duluan...
1:06:18...baru functionnya kita tulis.
1:06:20Itu kalo di normal function bisa.
1:06:22Kalo di arrow function...
1:06:24...gak bisa.
1:06:26Harus kita declare dulu...
1:06:28...bisa kita panggil.
1:06:30Jadi di engine-nya itu...
1:06:32...sama si engine-nya itu gak dibawa...
1:06:34...ke atas dulu ya? Hoisting kan sebenernya...
1:06:36...gitu kan, apa? Si engine-nya itu...
1:06:38...dia nyari...
1:06:40...variable atau apapun yang...
1:06:42...ditaro ke atas duluan kan?
1:06:44Nah, kalo ini arrow function gak ke bawah.
1:06:46Ini sering kenanya kalo...
1:06:48...mungkin kalo contoh yang di atas ini...
1:06:50...gak terlalu kenapa sih kita...
1:06:52...panggil dulu baru kita declare...
1:06:54...gak kerasa ya. Tapi kalo misalnya kita punya...
1:06:56...10 function...
1:06:58...dan di salah satu function...
1:07:00...kita pengen panggil...
1:07:02...function yang lain...
1:07:04...yang ada di bawahnya.
1:07:06Misalnya kita punya...
1:07:08...function A, function B, function C...
1:07:10...function D...
1:07:12...abcda gitu ya.
1:07:14Ternyata di function A...
1:07:16...kita pengen panggil...
1:07:18...function C gitu.
1:07:20Tetapi function C-nya kan dibawa gitu ya.
1:07:22Secara rapi-rapi kita tulis...
1:07:24...di abjet kali ya.
1:07:26Kalo kita tulisnya...
1:07:28...sebagai...
1:07:30...regular function, itu bisa.
1:07:32Tapi kalo kita tulis semuanya arrow function...
1:07:34...itu tidak bisa.
1:07:36Bisa kena deh gitu ya.
1:07:38Lo, kok error?
1:07:40Ternyata kita harus pindahin tuh...
1:07:42...arrow function di atas baru bisa kita panggil...
1:07:44...ditempat lain.
1:07:46Berarti dari segi BKPR ini mirip variable ya?
1:07:48Kalo variable kan kayak gitu kan?
1:07:50Gak bisa. Betul.
1:07:52Harus di deklarasikan terlebih dahulu.
1:07:54Betul.
1:07:56Ya ini kan variable sebenernya kan?
1:07:58Ya, maksudnya kayak variable yang primitif...
1:08:00...yang kayak string...
1:08:02...number data type.
1:08:04Nah, kalo...
1:08:06...secara...
1:08:08...penurusan method...
1:08:10...di dalam kelas, itu bisa...
1:08:14...kita panggil langsung.
1:08:16Contohnya kalo di...
1:08:18...ini yang bergaitan dengan...
1:08:20...bind. Ya, bind segala macem.
1:08:22Kalo di name function...
1:08:24...kita harus bind.
1:08:26Kayak coba di function result itu...
1:08:28...kita kan pake this.name.
1:08:30Ya kan?
1:08:34Sedangkan kalo kita panggil dia...
1:08:36...di dalam pake callback...
1:08:38...itu gak bisa.
1:08:40Karena...
1:08:42...di callback itu, konteks this itu...
1:08:44...sudah beda.
1:08:46Global atau atasnya?
1:08:48Kalo balik ingat...
1:08:50...kita punya event loop...
1:08:52...siapa yang panggil.
1:08:54Sedangkan di set time mile itu...
1:08:56...di loop yang berbeda. Bukan lagi...
1:08:58...di this itu...
1:09:00...contohnya...
1:09:02...di contoh atas.
1:09:04Kalo kita liat... atas dikit...
1:09:06...kita liat secara eksekusi...
1:09:08...di class full name...
1:09:10...dan kita deklarasi let name sama dengan new full name...
1:09:12...dan langsung kita panggil name.
1:09:14Itu kan masih satu...
1:09:16...ini ya...
1:09:18...satu loop...
1:09:20...masih satu eksekusi...
1:09:22...ibaratnya. Sedangkan kalo kita pake set time out...
1:09:24...time out itu...
1:09:26...saya pindah ke call stack dulu...
1:09:28...baru stacknya keluar...
1:09:30...panggil.
1:09:32Nah, name.resultnya...
1:09:34...akan menghasilkan...
1:09:36...this yang ada di...
1:09:38...metode result itu...
1:09:40...adalah konteksnya dari...
1:09:42...stacknya si set time out.
1:09:44Jadinya...
1:09:46...blank...
1:09:48...kosong. Supaya bisa terjadi...
1:09:50...bisa tau...
1:09:52...mana konteksnya...
1:09:54...kita harus bind...
1:09:56...dengan this.
1:09:58Nah, jadi...
1:10:00...kasih bindingnya.
1:10:02Jadi waktu di call stack itu...
1:10:04...tau konteks yang mana...
1:10:06...mau dipakai.
1:10:08Bingung kan?
1:10:10Jadi intinya kan kita kayak nge-store kan...
1:10:12...kita nyimpen lah...
1:10:14...kita kayak sementara dia...
1:10:16...dipindah ke apa...
1:10:18...call stack. Nah, distore dulu kan...
1:10:20...biar gak ilang si konteks yang tadi...
1:10:22...pas dipanggil masih ada...
1:10:24...bisa dibaca lagi. Berarti intinya gitu ya.
1:10:26Nah, kalo di arrow function...
1:10:28...gak perlu. Karena kita tidak punya...
1:10:30...konteksnya. Taunya...
1:10:32...atasnya. Contoh kita liat arrow function...
1:10:34...gimana sama set time out...
1:10:36...name.result...
1:10:38...name.resultnya itu. Itu udah tau...
1:10:40...sudah ke atas...
1:10:42...si name itu...
1:10:44...kan set time out, name.result.
1:10:46Name itu sudah ambil konteks yang name...
1:10:48...yang di atas, yang di atasnya dia...
1:10:50...yang terdekat. Langsung value...
1:10:52...langsung value si obyeknya itu ya?
1:10:54Iya. Betul sekali.
1:10:56Obyek yang di constructor, maksudnya...
1:10:58...yang diset di constructor itu kan.
1:11:00Satu-satunya disk yang dia tau adalah...
1:11:02...disk dari constructornya ini.
1:11:04Karena disini dia tidak mengubah...
1:11:06...disk ini menjadi konteksnya dia.
1:11:08Betul. Nah...
1:11:10...pertanyaannya...
1:11:12...kapan kita harus pakai arrow function?
1:11:14Kapan kita nggak harus pakai...
1:11:16...regular function?
1:11:18Kalau saya pribadi...
1:11:20...secara default...
1:11:22...pakainya regular function.
1:11:24Regular. No, regular...
1:11:26...regular function supaya bisa panggil...
1:11:28...secara hosting tadi.
1:11:30Oh, biar nggak usah mikir urutan ya.
1:11:32Betul. Bisa kemana-mana.
1:11:34Namun, kalau misalnya...
1:11:36...ada konteks yang berubah.
1:11:38Contohnya, ini konteks di bawah ini.
1:11:40Scroll down.
1:11:42Kita perlu counter...
1:11:44...atau perlu sesuatu...
1:11:46...ada global object...
1:11:48...yang perlu kita robah.
1:11:50Jangan pakai arrow function.
1:11:52Itu juga.
1:11:54Nah, biasanya saya pakai...
1:11:56...arrow function itu, kalau misalnya...
1:11:58...di dalam sebuah...
1:12:00...sebuah function besar...
1:12:04...dan hanya ada function-function kecil.
1:12:06Yang...
1:12:08...sudah jelas konteksnya...
1:12:10...yang mana. Karena saya butuh misalnya...
1:12:12...variable di area atasnya.
1:12:14Ya kan? Sudah saya susun-susun tuh...
1:12:16...saat eksekusi.
1:12:18Variable di atasnya sudah jelas tuh...
1:12:20...konteks yang di mana. Dan saya...
1:12:22...olah pakai arrow function. Jadi...
1:12:24...regular function duluan...
1:12:26...dan di dalam regular function ada...
1:12:28...arrow function. Itu...
1:12:30...cara saya.
1:12:34Sama sih.
1:12:36Tapi dulu...
1:12:38...awal-awal arrow function muncul...
1:12:40...saya selalu pakai arrow function...
1:12:42...karena lebih cantik.
1:12:44Kok sampai sekarang sih? Enak...
1:12:46...senang gitu lihat...
1:12:48...semua fonts-fonts.
1:12:50Cuman karena...
1:12:52...mikirin ya...
1:12:54...tadi kadang-kadang kita butuh...
1:12:56...disc itu, butuh konteksnya.
1:12:58Misalkan kayak apa ya?
1:13:00Kayak masih menggunakan...
1:13:02...back misalkan untuk...
1:13:04...event. On click misalkan.
1:13:06Kalau pakai arrow function kan...
1:13:08...disc-nya kita nggak dapat kan.
1:13:10Kita harus deklarasikan dulu misalkan...
1:13:12...dom-nya, button apa gitu.
1:13:14Tapi kalau kita pakai...
1:13:16...function biasa...
1:13:18...disc-nya dapat kan?
1:13:20Jadi kita bisa pakai...
1:13:22...disc dot something gitu.
1:13:24Berarti ini ngaruh banget...
1:13:26...tergantung sama style...
1:13:28...pemprograman yang kita pakai ya?
1:13:30Misalnya kalau makin contoh ke...
1:13:32...object-oriented, ya makin banyak...
1:13:34...butuh disc kan. Maksudnya makin banyak...
1:13:36...butuh berinteraksi dengan disc...
1:13:38...berarti ya yang lebih...
1:13:40...predictable kan regular function-nya.
1:13:42Ya, betul.
1:13:44Ini istilahnya apa ya?
1:13:46Method apa ya?
1:13:48Itu ya...
1:13:50...ada istilahnya. Bukan, bukan.
1:13:52Ada yang di dalam plus...
1:13:54Apa ya? Plus method?
1:13:56Ya, bukan. Kan kalau method...
1:13:58...kan langsung kurung-kurawal kan?
1:14:00Result, kurung-kurawal, console log gitu kan?
1:14:02Kalau ini namanya apa ya?
1:14:04Method property. Method property.
1:14:06Oh. Method property.
1:14:08Jadi ini seolah-olah seperti variable kan?
1:14:10Jadi ini adalah property tapi method.
1:14:12Nah, gitu dia.
1:14:14Nah, itu berarti balik ke yang di atas tadi...
1:14:16...kan juga bisa. Emang apa?
1:14:18Function ya? Anonymous function...
1:14:20...yang di-assign...
1:14:22...maksudnya yang dideklarasikan...
1:14:24...sebagai variable.
1:14:26Nah, cuma kalau misalnya...
1:14:28...orang yang style...
1:14:30...atau tim yang style-nya functional programming banget...
1:14:32...kan semua dimasukkan sebagai...
1:14:34...parameter ya.
1:14:36Semua dipisah-pisah jadi function.
1:14:38Mungkin pakenya juga factory.
1:14:40Ya udah, kayaknya.
1:14:42Kalau kayak gitu malah sebetulnya lebih...
1:14:44...bebas dalam arti mau pake regular, mau pake arrow.
1:14:46Behaviurnya sama.
1:14:48Karena kalau functional programming kan...
1:14:50...cenderung semua dimasukkan sebagai parameter.
1:14:54Nah, itu sebenarnya...
1:14:56...kalau kita terlalu banyak pake bind juga...
1:14:58...berarti kita salah juga cara modik ya.
1:15:00Kalau menurut saya ya.
1:15:02Kalau terlalu banyak ya pake bind...
1:15:04...berarti kita...
1:15:06...memaksakan juga sih sebenarnya.
1:15:08Berarti ada yang salah dari...
1:15:10...execusi...
1:15:12...architect kita punya...
1:15:14...JavaScript code.
1:15:16Saya jarang banget pake bind.
1:15:18Meskipun pakenya...
1:15:20...function biasa.
1:15:22Nah, berarti memang exekusinya.
1:15:24Selain set timeout, bind...
1:15:26...maksudnya konteksnya...
1:15:28...konteks itu bisa...
1:15:30...geser sampai kayak gitu, itu kalau apa?
1:15:32Apa sih kasusnya kayak gimana?
1:15:34Belum pernah nemu.
1:15:36Berarti cara modingnya benar.
1:15:38Ya, kalau misalnya...
1:15:42...ada block kayak if-else gitu.
1:15:44If-else juga kan ngubah...
1:15:46...ngubah apa?
1:15:48Ngubah konteksnya, ya ngubah scope.
1:15:50Kalau set timeout...
1:15:52...masalahnya kan dia mindah ke atasnya.
1:15:54Nggak usah jadi ilang.
1:15:56Itu ya paling...
1:16:00...mungkin edge case kali ya...
1:16:02...nggak terlalu sering sebetulnya.
1:16:04Ya. Dan ternyata...
1:16:08...di presentasi saya ini...
1:16:10...juga saya bahasa error function.
1:16:12Oh, beda.
1:16:14Sekalian aja.
1:16:16Itu pas lagi baru-barunya ya?
1:16:18Ya.
1:16:20Ya, jadi error function adalah...
1:16:22...cara lain untuk menulis anonymous function.
1:16:24Jadi error function itu adalah...
1:16:26...funksi yang anonymous.
1:16:28Dia nggak bisa pakai name function.
1:16:30Ini contohnya tadi udah kita bahas ya.
1:16:34Bedanya itu.
1:16:36Kemudian kalau error function...
1:16:38...dia bind-nya ke...
1:16:40...scope yang di atasnya.
1:16:44Scope yang sebelumnya.
1:16:46Jadi dia nggak ada mengubah...
1:16:48...context disk-nya...
1:16:50...tidak diubah sama dia.
1:16:52Contohnya ini yang tadi saya sebutkan.
1:16:54Misalkan kita punya sebuah...
1:16:56...button atau div atau apa.
1:16:58Kalau on click...
1:17:00...maka disk-nya ini adalah window.
1:17:02Global paling atas.
1:17:04Global. Karena...
1:17:06...gak ada disk di sini. Disk-nya dia nggak tahu...
1:17:08...yang dia tahu adalah window.
1:17:10Sementara yang menggunakan function...
1:17:12...dia tahu ini adalah...
1:17:14...object atau komponen dari HTML.
1:17:16Jadi kalau misalkan disk dot...
1:17:20...kita mau ganti text...
1:17:22...konten, misalkan nggak bisa...
1:17:24...kalau pakai error function.
1:17:26Harus pakai const...
1:17:28...data sama dengan disk.
1:17:30Jadi kalau kita mau mengubah sesuatu...
1:17:36...berdasarkan disk di sini...
1:17:38...kita harus pakai function yang...
1:17:40...biasa. Bukan pakai error function.
1:17:42Kecuali kalau...
1:17:44...misalkan box di sini...
1:17:46...kita tidak pakai disk di sini.
1:17:48Misalkan box dot text content.
1:17:50Itu bisa. Langsung.
1:17:52Itu bisa.
1:17:54Ini juga berhubungan sama set timeout.
1:18:00Karena set timeout sebenarnya...
1:18:02...adalah window dot set timeout.
1:18:04Jadi kalau misalkan di dalam...
1:18:06...sebuah event...
1:18:08...yang tidak ada...
1:18:10...disknya itu...
1:18:12...ternyata dia disknya...
1:18:14...di sini adalah window.
1:18:16Jadi set timeoutnya adalah window.
1:18:18Kalau kita...
1:18:20...sebenarnya kan by default...
1:18:22...adalah window dot set timeout kan.
1:18:24Dan biasanya kita lakukan adalah...
1:18:26...dead.
1:18:28Yang tadi. Supaya kita bisa...
1:18:30...dapatkan boxnya.
1:18:32Yes.
1:18:34Disknya disimpan di variable dead.
1:18:36Betul. Karena ketika kita masuk...
1:18:38...set timeout, disknya sudah menjadi...
1:18:40...window kembali.
1:18:42Bukan lagi si boxnya ini.
1:18:44Makanya butuh dead sama dengan...
1:18:46...disk.
1:18:48Salah satunya itu.
1:18:50Jadi...
1:18:52...gara-gara saya membawain materi ini...
1:18:54...akhirnya saya jadi sering...
1:18:56...bukan sering. By default...
1:18:58...menggunakan function name dulu.
1:19:00Ketika butuh, baru pakai arrow.
1:19:02Banyak kemungkinan terjadi...
1:19:06...box di sini soalnya.
1:19:08Di sini agak sulit di prediksi.
1:19:10Tergantung konteks dia.
1:19:12Sudah.
1:19:14Ada yang...
1:19:18...pernah punya pengalaman ini...
1:19:20...bermasalah...
1:19:22...mengalami box dengan...
1:19:24...disk. Pasti banyak ya.
1:19:26Banyak.
1:19:28Kok aneh, kok beda ya hasilnya gitu ya.
1:19:30Cari-cari-cari. Oh...
1:19:32...tinggal tambah bind atau disk dead.
1:19:34Kalau sudah begitu cara programnya...
1:19:36...saya sudah langsung bingung.
1:19:38Kenapa orang bikinnya begini.
1:19:40Ini tadi ada...
1:19:42...pertanyaan yang sudah berhasil kita jawab.
1:19:44Ya, naruh coesting.
1:19:46Kalau sekarang itu agak...
1:19:48...mendingan karena contoh...
1:19:50...contoh-contoh...
1:19:52...tutorial dan sebagainya...
1:19:54...sudah mengarah ke arah yang...
1:19:56...benar ya.
1:19:58Arrow function konsisten.
1:20:00Sebetulnya sih kalau benar salah kan...
1:20:02...jadi itu asal punya pertimbangan...
1:20:04...aja asal bisa...
1:20:06...asal ngerti kapan harus menggunakan...
1:20:08...yang mana. Cuma dulu itu...
1:20:10...pengalaman pribadi aja pas baru belajar...
1:20:12...itu nyebelin sih, bingungin banget...
1:20:14...karena sebagian...
1:20:16...terutama ya sekitar 5 tahun...
1:20:18...5 tahun lalu ya...
1:20:20...sebagian contoh...
1:20:22...separu contoh pakai function...
1:20:24...separu contohnya pakai regular function...
1:20:26...separu lagi contohnya pakai...
1:20:28...arrow function. Nah kalau...
1:20:30...yang baru banget belajar dan...
1:20:32...belum tahu keywordnya, maksudnya...
1:20:34...belum tahu konsepnya kayak gini...
1:20:36...itu kan nyebelin ya bingungin ini sama...
1:20:38...atau beda. Nah itu sih yang...
1:20:40...cuma sekarang kita...
1:20:42...yang paling saya nemuin itu kalau...
1:20:44...udah kayak nge-code review...
1:20:46...laku nge-code review...
1:20:48...code orang...
1:20:50...karena dia kemungkinan besar...
1:20:52...baru belajar JavaScript...
1:20:54...atau baru masih...
1:20:56...baru gitu ya. Terus dia pakai...
1:20:58...maksa gitu kayak...
1:21:00...gue sampai kayak...
1:21:02...mempikir, maksudnya apa sih kok...
1:21:04...sampai begininya gitu...
1:21:06...kok...
1:21:08...perlu begini gitu...
1:21:10...kok banyak banget perlu bind...
1:21:12...terus kayak nyampur-nyampur...
1:21:14...kadang dia pakai regular function...
1:21:16...kadang dia pakai...
1:21:18...kadang dia pakai arrow function...
1:21:20...dan pakainya kayak...
1:21:22...abstrak gitu, kayak nggak jelas...
1:21:24...tujuan apa kok bisa beda-beda...
1:21:26...kenapa dia menggunakan arrow function...
1:21:28...dan dia menggunakan arrow function gitu.
1:21:30Kayak saya juga dapet gitu, akhirnya saya...
1:21:32...pertanyakan terus dia bingung sendiri juga...
1:21:34...baru akhirnya...
1:21:36Nah, ini ada pertanyaan juga nih jadinya...
1:21:40...untuk streamline coding style...
1:21:42...itu gimana?
1:21:44Ini kan ISLIN ada rules-nya nggak sih?
1:21:46Untuk enforce either...
1:21:50...regular function...
1:21:52...atau arrow function.
1:21:54Nggak tahu kalau ada...
1:21:56...cuman yang jelas ISLIN itu kan...
1:21:58...kalau rules yang kita pakai itu...
1:22:00...harus punya...
1:22:02...doc type-nya itu jelas...
1:22:04...committing documentation...
1:22:06...jadi setiap arrow function...
1:22:08...mau arrow function...
1:22:10...atau maupun...
1:22:12...arrow function maupun...
1:22:16...regular function...
1:22:18...harus punya...
1:22:20...apa itu namanya?
1:22:22JSDoc-nya.
1:22:24Paling sering saya pakai...
1:22:28...arrow function itu kalau untuk...
1:22:30...event handler...
1:22:32...paling sering.
1:22:34Supaya lebih mudah ya...
1:22:36...untuk soal konteksnya.
1:22:38Paling sering ya.
1:22:40Kita perlu yang penting juga...
1:22:42...berarti kan ngedokumentasiin ya...
1:22:44...kayak misalnya...
1:22:46...di project ini...
1:22:48...kita harus pakai, kita usahakan...
1:22:50...selalu pakai regular function...
1:22:52...except kalau emang...
1:22:54...butuh pakai arrow function...
1:22:56...atau sebaliknya berarti...
1:22:58...itu kan perlu didokumentasiin ya...
1:23:00...itu temen-temen selama ini...
1:23:02...pakai code comment atau...
1:23:04...yaudah nggak dipakai...
1:23:06...kayak lisan aja pengertian...
1:23:08...sama teman kerja atau teman setim?
1:23:10Lebih seringnya pakai...
1:23:14...code commenting cuma nggak dijelasin...
1:23:16...kenapa saya pakai arrow function...
1:23:18...pake arrow function...
1:23:20...gak usah dijelasin sih.
1:23:22Oh ada tuh ya Eislin?
1:23:26Ya Eislin, function style...
1:23:28...speakernya mau expression...
1:23:30...atau declaration.
1:23:32Oke nih, kalau kita punya Eislin kan...
1:23:34...tetap bisa diignore...
1:23:36...maksudnya dimana perlu ya...
1:23:38...kalau emang kita ada...
1:23:40...kita punya alasan...
1:23:42...jadi yang kayak contohnya Ivan tadi...
1:23:44...pas ditanya ternyata nggak tahu ini kenapa...
1:23:46...kalau kita kan mau mencegah...
1:23:48...kayak gitu kan ya...
1:23:50...bukan mencegah orang pakai regular function...
1:23:52...atau mencegah orang pakai arrow function...
1:23:54...tapi mencegah orang campur-campur...
1:23:56...code tanpa alasan yang...
1:23:58Apalagi campur-campur antara...
1:24:00...expression ataupun declaration...
1:24:02...ah itu paling pusing saya.
1:24:04Kalau mau pakai satu, ya satu aja semua...
1:24:06...mau expression, expression semua...
1:24:08...jangan satu dimana expression...
1:24:10...satu lagi declaration.
1:24:14Oh isinya sama.
1:24:16Tapi kan ada penempatan-penempatannya kan...
1:24:18...kalau misalkan kayak tadi...
1:24:20...event binding ya...
1:24:22...mendingan pakai function regular...
1:24:24...kalau yang lain pakai...
1:24:26...arrow function nggak apa-apa gitu...
1:24:28...gitu kan?
1:24:30Maksudnya gini, arrow function ataupun...
1:24:32...regular function, ya yes...
1:24:34...bisa tergantung situasi...
1:24:36...tetapkan expression sama declaration...
1:24:38...kan sama.
1:24:42Itu sama-sama...
1:24:44...expression itu yang...
1:24:46...satu anonymous function...
1:24:48...yang jadi invariable...
1:24:50...satu lagi declarative...
1:24:52...declaration function...
1:24:54...itu kan masih sama...
1:24:56...isinya...
1:24:58...tujuannya...
1:25:00...kegunaannya sama...
1:25:02...jangan dicampur-campur...
1:25:04...kalo memang...
1:25:06...satu project...
1:25:08...pakainya declaration, ya declaration...
1:25:10...defaultnya ke declaration...
1:25:12...kalo...
1:25:14...mau pakai expression, ya...
1:25:16...seluruhnya expression...
1:25:18...jangan beda-beda gitu...
1:25:20...pusing bacanya.
1:25:22Nih, bisa disallow arrow function...
1:25:26...jadi kalo nggak suka arrow function...
1:25:28...bisa default...
1:25:30...jadi nggak boleh dilarang.
1:25:32Dilarang.
1:25:34Jadi ignore lah, itu fungsinya...
1:25:36...ignore.
1:25:38Ignore.
1:25:40Ada lagi pertanyaan-pertanyaan?
1:25:44Nah, ini juga sebenernya...
1:25:46...bisa jadi...
1:25:48...pembahasan berikutnya nih.
1:25:50Wah, Ivan ketutupan kodok.
1:25:52Kita iniin dulu ininya.
1:25:56Nah, biar nggak ketutupan.
1:25:58Kalo JavaScript prototype, iya.
1:26:00Apa namanya?
1:26:02JavaScript itu sebenernya...
1:26:04...dia OOP, tapi OOP-nya berbeda.
1:26:06OOP-nya adalah prototyp...
1:26:08...prototypical...
1:26:10...prototypal. Object oriented prototype.
1:26:12Ya, jadi...
1:26:14...bukan class base.
1:26:16Ya, intinya bukan class base.
1:26:18Jadi, kalo temen-temen...
1:26:20Gak ada class break, class itu function kan...
1:26:22...syntactic sugar ya?
1:26:24Syntactic sugar-nya.
1:26:26Jadi kalo bikin class something-something...
1:26:28...di S6, dia akan dikonversi menjadi...
1:26:30...prototype tadi.
1:26:32Berdasarkan dari fungsi itu.
1:26:34Jadi, ya itu...
1:26:36...banyak yang salah mengartikan juga ini.
1:26:38JavaScript ini...
1:26:40...functional programming bukan.
1:26:42OOP juga, kok kayaknya bukan?
1:26:44Tapi semakin kesini, semakin...
1:26:46...gatau ya, ini...
1:26:48...keyblad masing-masing ya.
1:26:50Kalo React itu kan dia mengarahkan kita ke fungsi kan?
1:26:52Ada reducer...
1:26:54...gak mau pake class lagi...
1:26:56...class-nya udah mulai dibuang...
1:26:58...udah pake function semua, pake...
1:27:00...hooks dan lain-lain kan.
1:27:02Sementara...
1:27:04...kalo vanilla-nya JavaScript...
1:27:06...ya dia introduce class.
1:27:08Webcomponents juga pakenya class.
1:27:10Yang istilahnya yang...
1:27:12...native-native-nya dalam Tanah Kutip itu...
1:27:14Yang makin deket ke JavaScript...
1:27:16...makin deket ke ECMAScript-nya sendiri ya.
1:27:18Karena itu berguna buat library sih, terutama kan...
1:27:20...enak itu sama dengan new, bla-bla-bla.
1:27:22Iya, betul.
1:27:24Jadi, sama juga...
1:27:26...kayak...
1:27:28...yang Rafki bilang ya...
1:27:30...katanya OOP. Tapi OOP-nya adalah...
1:27:32...struct-based. Jadi...
1:27:34...ya nabrak-nabrak lah gitu konsepnya.
1:27:36Jadi semakin bingung ini...
1:27:38...yang belajar.
1:27:40Kalo kiblatnya OOP-nya...
1:27:42...Martin Fowler mungkin...
1:27:44...membaca JavaScript susah kali ya.
1:27:46Iya. Apalagi kiblatnya OOP-nya...
1:27:48...ini, apalagi Smalltalk.
1:27:50Beda lagi tuh.
1:27:52Saya ngikutin...
1:27:54...tutoria React, hape semua metodnya pake...
1:27:56...aero-function. Emang direct di tukah?
1:27:58Enggak.
1:28:00Bisa pake regular function...
1:28:02...tapi kan tadi...
1:28:04...Kiblatnya ke...
1:28:06...functional programming.
1:28:08Kiblatnya ke functional programming...
1:28:10...dan functional programming rata kaitannya sama.
1:28:12Jadi, salah satu...
1:28:14...kata kunci...
1:28:16...di functional programming adalah...
1:28:18...first-class function.
1:28:20Function dianggap sebagai tipe data juga.
1:28:22Yang di-oper-oper, yang di-passing...
1:28:24...sebagai parameter...
1:28:26...bisa ditaro...
1:28:28...di variable juga.
1:28:30Jadi, memang...
1:28:32...si React ini arahnya kesana...
1:28:34...ke functional programming...
1:28:36...atau ke yang aero-function.
1:28:38Makanya kan, kalo dulu...
1:28:40Dulu tuh, React 5 tau-tau...
1:28:42...masih banyak disk-nya, ya kan?
1:28:44Pake class, terus pake disk...
1:28:46...super ya, super.
1:28:48Pake disk...
1:28:50...terus pake bind, ya kan?
1:28:52Kalo kita mau event apa gitu kan?
1:28:54Kalo kita mau klik, harus bind.
1:28:56Bind this, bind this, bind this, ya kan?
1:28:58Cuma emang approach-nya makin...
1:29:00...perspektifnya makin...
1:29:02...makin menjauh dari situ ya?
1:29:04Makin menjauh, ya.
1:29:06Konsep-konsepnya juga diperkenalkan...
1:29:08...misalkan kayak Redux memperkenalkan...
1:29:10...Reduxer dan lain-lain, itu adalah konsep dari functional programming.
1:29:12Immutability juga...
1:29:14...di-introduce di sana, kan?
1:29:16Jadi, banyak functional programming...
1:29:18...yang diintroduce oleh React...
1:29:20...salah satunya.
1:29:22Sementara...
1:29:24...premoke yang lain belum tentu.
1:29:26Tergantung paradigma-nya juga.
1:29:28Kalo kita mengacu ke...
1:29:30...kayak web komponen yang lebih native gitu ya...
1:29:32...yang sudah ada di browser, ya mereka...
1:29:34...pakai kelas.
1:29:36Malah...
1:29:38...menyerupai...
1:29:40...React...
1:29:42...beberapa tahun yang lalu gitu.
1:29:44Ya, kelas something-something gitu.
1:29:46Seru ini.
1:29:48Jadi ya...
1:29:50...kita lihat saja nanti...
1:29:52...perkembangannya gimana.
1:29:54Makanya harus sering-sering...
1:29:56...lihat ngobrolin web.
1:29:58Karena kita bahas ini...
1:30:00...banyak gitu ya.
1:30:02Buat belajar.
1:30:04Buat belajar.
1:30:06Kita aja belum tau semua gitu.
1:30:08Justru itu, kita harus banyak ngobrol.
1:30:10Ada pertanyaan lagi...
1:30:12...ini ya...
1:30:14...salah satu kekurangannya dari...
1:30:16...error function atau anonymous...
1:30:18...susah...
1:30:20...susah didibug tadi seperti yang kata Adib ya...
1:30:22...susah didibug...
1:30:24...diprofiler gak muncul namanya...
1:30:26...karena dia gak ada nama memang.
1:30:28Yang gak muncul itu cuma kalau regular function...
1:30:30...tapi anonim...
1:30:32...kalau sekarang itu di DevTools kayak...
1:30:34...keliatannya ya, walaupun error function...
1:30:36...dia bisa baca.
1:30:38Ada function sudah bisa muncul.
1:30:40Yang baru, yang baru.
1:30:42Nama variable-nya muncul, bisa.
1:30:44Nanti nonton yang si Jesseline...
1:30:46...yang terakhir...
1:30:48...DevTools-nya ada.
1:30:50Oh, itu di YouTube ya?
1:30:52Chrome Developer ya?
1:30:54Ya, tapi yang penting kita declare...
1:30:56...kita harus assign ke...
1:30:58...harus ada variable-name-nya...
1:31:00...kayak misalnya const sum sama dengan...
1:31:02...blah-blah-blah, itu bisa.
1:31:04Cuma kalau sebagai callback, misalnya...
1:31:06...yang gak ada namanya...
1:31:08...atau si regular function...
1:31:10...tapi yang cuma function...
1:31:12...langsung tanda kurung...
1:31:14...parameternya.
1:31:16Nah, itu kan gak ada namanya...
1:31:18...anonim yang kayak gitu, gak bisa keluar.
1:31:20Gak bisa keluar namanya.
1:31:22Ya, ujung-ujungnya pakai ini deh...
1:31:24...pakai console-lock.
1:31:26Console-lock lagi.
1:31:28Setiap 13 kali console-lock.
1:31:30Sampai di sini.
1:31:32Sampai di sini.
1:31:34A, B, C, D.
1:31:36Oke.
1:31:42Dibugging di JavaScript.
1:31:44Oh iya.
1:31:46Dibugging bisa jadi...
1:31:48...ini juga.
1:31:50Kopik sendiri juga.
1:31:52Ini ada pertanyaan-pertanyaan, tapi...
1:31:54...lumayan OOT.
1:31:56Kita bahas aja atau gimana?
1:31:58Kapan net?
1:32:00Kita bahas ini.
1:32:02Untuk back-end...
1:32:04...lebih baik belajar bahasa apa?
1:32:06Khususnya yang compile. Ayo, Ivan.
1:32:08Gak ngerti back-end.
1:32:10Gak ngerti back-end.
1:32:12Kalau mau ikutin trend...
1:32:14...belajar Rust.
1:32:16Oh, Rust.
1:32:18Trendsetting, lagi naik daun.
1:32:20Kalau mau stabil, ya goleng.
1:32:22Kalau mau lebih...
1:32:24...lebih stabil-stabil yang begitu...
1:32:26...stabilnya Python atau...
1:32:28Sorry, Python bukan compile.
1:32:30Python gak compile.
1:32:32Dia kayak PHP.
1:32:34Java.
1:32:36Masih stabil.
1:32:38Java itu di Enterprise...
1:32:40...masih kencang.
1:32:42Bahasa Java.
1:32:445 tahun ke depan.
1:32:46Masih banget.
1:32:48Apalagi sekarang banyak tools...
1:32:50...modern yang ditulis di atas JVM.
1:32:52Java Virtual Machine.
1:32:54Contohnya Scala,
1:32:56Closure, ada Kotlin juga.
1:32:58Terus juga ada...
1:33:00...Gral-VM yang katanya...
1:33:02...performonya...
1:33:04...lebih cepat.
1:33:06Kalau belajar Java itu...
1:33:08...mainnya di Enterprise seperti...
1:33:10...ERP,
1:33:12Oracle,
1:33:14segala macam itu...
1:33:16...masih hidup itu.
1:33:18Justrunya mainnya beda.
1:33:20Beda banget permainan. Jadi sudah kayak...
1:33:22...sudah mikirin data transaction...
1:33:24...yang besar, yang lebih ke arah...
1:33:26Apa namanya? Transaction-based...
1:33:30...code dan...
1:33:34...multi warehouse,
1:33:36multi currency, multi language...
1:33:38...segala macam itu.
1:33:40Selama masih ada Android, saya rasa...
1:33:42...Java ya nggak akan mati.
1:33:44Kecuali...
1:33:46...si Google ganti...
1:33:48...nggak mau pakai Java lagi...
1:33:50...atau JVM lagi.
1:33:52Nggak mungkin bisa.
1:33:54Sudah terlanjur banyak...
1:33:56...yang dipakai.
1:33:58Nggak semudah itu untuk ganti-ganti...
1:34:00...bahasa. Kecuali kalau baru ya...
1:34:02...baru versi 1, misalkan ganti ya...
1:34:04...nggapapa. Tapi ini udah...
1:34:06...Android udah kemana-mana gitu...
1:34:08...tiba-tiba ganti nggak lucu ya.
1:34:10Oke.
1:34:14Ada lagi pertanyaan yang...
1:34:16...ini... .NET.
1:34:18Kenapa .NET banyak di bank?
1:34:20Memang iya ya? .NET ya?
1:34:22Gak tahu.
1:34:24Gak pernah aja itu.
1:34:26Interface secara umum lah ya.
1:34:30Kembali lagi, kalau...
1:34:32...saya dulu pake .NET...
1:34:34...ya banyak...
1:34:36...kalau dari sisi...
1:34:40...company, seperti yang Mas Riza bilang...
1:34:42...itu butuh support.
1:34:44Butuh support dari...
1:34:46...jadi enterprise company itu...
1:34:48...butuh support dari vendor.
1:34:50Jadi kenapa banyak pake .NET...
1:34:52...atau pun pake...
1:34:54...IRP yang terkenal itu apa?
1:34:56SAP?
1:34:58SAP contohnya ya.
1:35:00Itu ujung-ujungnya juga...
1:35:02...antara Java atau .NET ya...
1:35:04...yang mereka pakainya...
1:35:06...untuk extensionnya ya.
1:35:08Dan kenapa pake itu?
1:35:10Ya karena sudah...
1:35:12...service-nya atau software dipakai...
1:35:14...menggunakan itu dan butuh support...
1:35:16...dari vendor.
1:35:18Dan mereka jarang...
1:35:20...menggunakan yang bersifat...
1:35:22...open source.
1:35:26Ya karena corporate dan micro...
1:35:28...harus ada yang tersalesnya ya?
1:35:30Yes.
1:35:32Ada support-nya?
1:35:34Ya.
1:35:36Dan support-nya ofisial.
1:35:38Makanya mereka lebih pilih itu.
1:35:40Jadi seperti .NET dan support-nya dari Microsoft Indonesia.
1:35:42Java mungkin dulu dari...
1:35:44...Java, dari Samsung.
1:35:46Maksudnya serem juga kalau sistem bang down...
1:35:48...mereka harus cari freelancer dulu.
1:35:50Iya.
1:35:52Nggak bisa dipegang.
1:35:54Yang open source kan berarti vendor-nya...
1:35:56...tidak ofisial kan.
1:35:58Kecuali kayak Red Hat mungkin ya.
1:36:00Tapi oleh yang lain-lain kan harus...
1:36:02...melalui vendor-nya juga.
1:36:04Memang Red Hat software-nya...
1:36:06...si Red Hat OS ini ya?
1:36:08Open source kan belum tentu?
1:36:10Ada yang open source.
1:36:12Ada yang versi open source.
1:36:14Ya base-nya ada versi open source.
1:36:16Kayak Chromium ya berarti?
1:36:18Ya. Kayak Chromium.
1:36:20Chromium-nya open source.
1:36:22Dan segala macem.
1:36:24Ya.
1:36:26Sentos ya.
1:36:28Ya yang open source.
1:36:30Tapi sudah mati Sentos.
1:36:32Tutorial debug JavaScript...
1:36:36...lewat browser selain log.
1:36:38Breakpoint.
1:36:40Ini bisa jadi topik ya.
1:36:42Java versus Kotlin.
1:36:44Nanti kita undang orangnya.
1:36:48Orang-orang Kotlin.
1:36:50Oh iya.
1:36:52GDE Android bisa diundang ya.
1:36:54Java versus Kotlin.
1:36:56Di Next.
1:36:58Next.js.
1:37:00Mending pakai SWR atau React Query?
1:37:02SWR apa?
1:37:04Sama-sama itu.
1:37:06Library buat fetching.
1:37:08Fetching sama bisa ada...
1:37:10...cache, ada segala macem.
1:37:12Jadi kalau dari ukuran...
1:37:14...play inside yang diship.
1:37:16SWR itu jauh lebih kecil dari...
1:37:18...React Query.
1:37:20Nah terus kalau untuk...
1:37:22...feature-nya sebenarnya...
1:37:24...banyak yang mirip. Cuma memang React Query...
1:37:26...lebih lengkap sih. Makanya lebih besar.
1:37:28Nah berarti yang gampang cek aja...
1:37:30...kebutuhan kita apa aja.
1:37:32Kalau kebutuhannya bisa dipenuhi...
1:37:34...sama SWR ya SWR aja yang lebih kecil.
1:37:36Compatible nggak?
1:37:38Kalau saya sekarang pakai SWR.
1:37:40Tapi ternyata butuh lebih besar...
1:37:42...pindah ke React Query bisa nggak?
1:37:44Atau semigrafikon?
1:37:46Beda library.
1:37:48Cuma kita kan...
1:37:50...fungsi fetch-nya nih misalnya...
1:37:52...fetch ke GraphQL atau fetch ke REST API...
1:37:54...kan pasti kita pakai...
1:37:56...reusable function sendiri ya.
1:37:58Jadi sebenarnya kalau pun ngeganti...
1:38:00...ya tinggal minda-mindahin function-nya.
1:38:02Ya tapi...
1:38:04...tapi tetap harus kerja manual sih.
1:38:06Kalau saya dulu GraphQL itu...
1:38:08...udah pakai Apollo Client.
1:38:10Beda lagi ya?
1:38:12Ya kalau itu kan built-in ya.
1:38:14Maksudnya itu emang kalau kita...
1:38:16...mau pakai Apollo Client ya udah.
1:38:18Cuma kalau kayak SWR atau React Query ini...
1:38:20...dia itu kayak agnostik...
1:38:22...untuk data fetching apapun.
1:38:24Kita mau pakai GraphQL, mau pakai REST...
1:38:26Tapi kalau Apollo sudah pakai...
1:38:28...Apollo itu sudah pakai...
1:38:30...ada ini nya sendiri, ada...
1:38:32...semacam Redux yang sendiri.
1:38:34Apa istilahnya itu?
1:38:36State management.
1:38:38State management-nya sudah punya sendiri kalau Apollo.
1:38:40Udah bawaan.
1:38:42Udah ada caching.
1:38:44Ada macam middleware-nya juga gitu kan.
1:38:46Bahkan kalau misalnya kita punya...
1:38:48...storage yang...
1:38:50...kayak Redis atau apa...
1:38:52...jadi caching layer...
1:38:54...tapi disimpan di storage sendiri...
1:38:56...itu kalau dari Apollo sih sudah ada.
1:38:58Cuma ini agak beda use case sih...
1:39:00...sama SWR dan React Query ini.
1:39:04Oke, jadi intinya adalah...
1:39:06...pakai SWR dulu kalau...
1:39:08...kebutuhannya...
1:39:10...perpenuhi, kalau tidak...
1:39:12...pindah ke React Query gitu ya.
1:39:14Dengan fitur yang lebih lengkap.
1:39:16Cuma sebenarnya kalau yang use case...
1:39:18...yang lengkap banget sih...
1:39:20...gue belum pernah pakai...
1:39:22...keduanya buat yang lengkap banget.
1:39:24Cuma buat fetching sama caching data...
1:39:26...yang di-fetch aja.
1:39:28Cuma kadang kalau React Query itu kan...
1:39:30...orang sampai kayak state management...
1:39:32...juga dimasukin semua ke React Query itu.
1:39:34Jadi kayak semacam...
1:39:36...sudah dianggap kayak Redux mini lah.
1:39:38Itu approach tersendiri...
1:39:40...yang nggak tahu sih...
1:39:42...kalau dari gue pribadi...
1:39:44...belum pernah pakai...
1:39:46...approach kayak gitu karena...
1:39:48...secara pribadi kurang cocok aja sih...
1:39:50...kalau mau state management ya...
1:39:52...pake state management aja.
1:39:54Dan bahkan kalau sekarang kan...
1:39:56...React Hooks-nya udah...
1:39:58...lumayan complete ya.
1:40:00Jadi kadang kayak Redux pun...
1:40:02...ya agak obsolete lah.
1:40:04Kecuali yang emang...
1:40:06...emang existing code-nya...
1:40:08...udah bumit banget ya kalau itu beda kasus.
1:40:10Cuma kalau balik ke SWR atau React Query...
1:40:12...ya pilih yang...
1:40:14...satu memenuhi kebutuhan kita sama...
1:40:16...gue ukurannya lebih kecil aja.
1:40:18Hmm, oke.
1:40:20Menarik. Nah, pertanyaan terakhir.
1:40:22Ini kita debat sampai...
1:40:24...5 menit ya.
1:40:26Kenapa banyak sekali framework di luar sana...
1:40:28...padahal menyelesaikan masalah yang sama?
1:40:30Gak tahu, tanya yang bikin.
1:40:32Gak tahu. Cuma...
1:40:34...mungkin...
1:40:36...pendekatannya beda kali ya.
1:40:38Pendekatannya, betul. Pendekatannya berbeda.
1:40:40Mungkin masalahnya yang dihadapi sama.
1:40:42Tapi pendekatannya...
1:40:44...cara menyelesaikan masalahnya berbeda-beda.
1:40:46Masing-masing berbeda-beda.
1:40:48Contohnya apa ya?
1:40:50Contohnya misalkan...
1:40:52...VT lah, VT.
1:40:54Sebelumnya apa ya? Sebelumnya...
1:40:56...pakai Webpack ya.
1:40:58Webpack, VT, abis itu muncul...
1:41:00...Turbopack kan.
1:41:02Itu cara mereka menyelesaikan...
1:41:04...masalahnya berbeda.
1:41:06Kalau VT, dia kalau gak salah...
1:41:08...pakai...
1:41:10...IS Modul ya.
1:41:12Sorry. Dia...
1:41:14...kompilasinya, transpilasinya...
1:41:16...akhirnya ke IS Modul kan.
1:41:18Sementara kalau...
1:41:20...Turbopack dan Webpack itu...
1:41:22...mereka kan pakai ini kan.
1:41:24Dikompilasi ke...
1:41:26...yang pakai Bubble dan lain-lain.
1:41:28Ya, ke script biasa.
1:41:30Apa ya silanya?
1:41:32Ya pokoknya...
1:41:34...semuanya jadi satu dan gak ada import-import gitu kan.
1:41:36Jadi...
1:41:38...masing-masing beda gitu.
1:41:40Dan kalau kita ngomongin Turbopack, mereka menggunakan...
1:41:42...RUS untuk...
1:41:44...saya gak tahu nih.
1:41:46Impactnya apakah nanti...
1:41:48...kita...
1:41:50...kalau misalkan mau bikin plugin untuk Turbopack...
1:41:52...kita harus pakai RUS atau...
1:41:54...bisa pakai JavaScript juga.
1:41:56Itu juga akan berpengaruh kan?
1:41:58Mungkin itu ya...
1:42:00...ngaruh juga sama eranya.
1:42:02Kalau React kan dulu...
1:42:04...dia pakai Virtual DOM.
1:42:06Karena emang...
1:42:08...mungkin belum bisa semua di...
1:42:10...belum...
1:42:12...mungkin kan semua jadi JavaScript biasa.
1:42:14Running the main thread dulu.
1:42:16Dulu emang belum...
1:42:18...masanya kan.
1:42:20Jadi React harus ada runtime-nya...
1:42:22...karena dia ngolah dulu ke...
1:42:24...Virtual DOM kan.
1:42:26Kalau jamannya ya Svelte atau Solid...
1:42:28...yang sekarang kayaknya udah gak butuh Virtual DOM...
1:42:30...ya udah langsung dilempar ke...
1:42:32...browser sebagai JavaScript...
1:42:34...biasa aja kan.
1:42:36Jadi kalau saya...
1:42:38...bisa kembali ke history.
1:42:40Ingat gak jamannya masih waktu...
1:42:42...kalau teman-teman itu masih...
1:42:44...membangun sesuatu aplikasi yang...
1:42:46...reaktif ya. Maksudnya...
1:42:50...ada value yang berubah tetapi di banyak tempat...
1:42:52...ada...
1:42:54...ada UI yang berbeda, yang berubah.
1:42:56Contohnya kita...
1:42:58...add to card, begitu add to card...
1:43:00...ada...
1:43:02...ketambahan notifikasi...
1:43:04...sudah ditambahkan, terus kemudian...
1:43:06...shopping card-nya, card-nya jadi...
1:43:08...tambah satu, segala macem.
1:43:10Itu kan kalau dipakai vanilla JavaScript...
1:43:12...atau jQuery ya bahasanya itu.
1:43:14Itu...
1:43:16...ada banyak hal yang perlu kita...
1:43:18...robah di setiap DOM.
1:43:20Nah.
1:43:22Lanjut, yang bisa bikin...
1:43:24...reaktif seperti itu adalah Backbone.
1:43:26Backbone dengan...
1:43:28...underscore-nya itu ya kita bisa...
1:43:30...tambahin...
1:43:32...ada model, collection, view ya.
1:43:34Backbone itu kan model view collection ya...
1:43:36...konsepnya.
1:43:38Kalau modelnya berubah...
1:43:40...kalau model di Backbone itu sekarang...
1:43:42...anggap aja itu seperti state.
1:43:44Modelnya berubah, UI-nya berubah...
1:43:46...yang dikendalikan oleh si controller.
1:43:48Jamannya Backbone...
1:43:50...setelah habis...
1:43:52...lanjut...
1:43:54...muncul lah itu namanya react...
1:43:56...view, yang...
1:43:58...sorry, yang...
1:44:00...reaktif itu membuat vDOM.
1:44:02Jadi, dia punya DOM3 sendiri...
1:44:04...dan punya state.
1:44:06Kalau state-nya berubah...
1:44:08...dia ngerender ulang.
1:44:10State atau props-nya berubah dia ngerender ulang...
1:44:12...sesuai dengan DOM3.
1:44:14Maksudnya dia mikir dulu si runtime react-nya...
1:44:16...bikin kalkulasi dulu...
1:44:18...harus gimana...
1:44:20...misalnya tadinya produknya di kart ada 2...
1:44:22...tambah 1 kan sekarang jadi 3...
1:44:24...berarti si react-nya kan yang...
1:44:26...apa?
1:44:28Terus pemisahan, memikirkan setiap...
1:44:30...komponen itu punya state-nya masing-masing...
1:44:32...dan akhirnya kita hanya...
1:44:34...merubah sana-sini. Karena punya masing-masing...
1:44:36...muncul lah yang namanya state management...
1:44:38...supaya semua komponen...
1:44:40...mengikuti satu...
1:44:42...sourcing source of truth...
1:44:44...bahasanya source of truth.
1:44:46Jadi...
1:44:48...kenapa majak sekali? Karena perbedaan...
1:44:50...kemajuan pola pikir...
1:44:52...paradigma berubah terus...
1:44:54...makin efisien...
1:44:56...makin efisien...
1:44:58...jadi mungkin...
1:45:00...untuk membuat suatu efisiensi itu...
1:45:02...butuh suatu framework baru.
1:45:04Dan masing-masing juga...
1:45:06...sori...
1:45:08...masing-masing framework...
1:45:10...juga di drive...
1:45:12...drive itu masing-masing apa ya?
1:45:14Dari...
1:45:16...mengarah ke...
1:45:18...masing-masing kebutuhan...
1:45:20...react dari...
1:45:22...Facebook, sosial media...
1:45:24...bikin aplikasinya ya...
1:45:26...sedidami sosial media, cocok.
1:45:28Kalau Sveld...
1:45:30...Sveld itu munculnya dari...
1:45:32...seorang yang bekerja di situs berita...
1:45:34...dan banyak...
1:45:36...informasi yang berupa grafis...
1:45:38...tapi harus cepet...
1:45:40...maksudnya harus...
1:45:42...bagus kan begitu-begitu.
1:45:44Makanya muncul ada...
1:45:46...animation, ada...
1:45:48...plotting library dan lain-lain...
1:45:50...yang juga muncul di ekosistemnya Sveld.
1:45:52Kalau Vue munculnya dimana...
1:45:54...saya nggak tahu.
1:45:56Nggak begitu ngikutin.
1:45:58Sebenarnya awalnya...
1:46:00...Vue.js ini, si Evan Vue ini kan dia...
1:46:02...menjadi salah satu tim yang...
1:46:04...melahirkan Angular 1.
1:46:06Kemudian dia...
1:46:08...dia intern kalau nggak salah di Google waktu itu.
1:46:10Kemudian dia pindah ke Meteor.js...
1:46:12...habis itu dia akhirnya bikin sendiri.
1:46:14Terus...
1:46:16...ya pokoknya masing-masing itu...
1:46:18...lahir dari...
1:46:20...ini yang masing-masing gitu.
1:46:22Dan penggunaannya juga ya disesuaikan.
1:46:24Kenapa RBMB menggunakan React gitu?
1:46:26Kenapa?
1:46:28Ya dari pola pikir tim yang membuatnya itu...
1:46:30...beda.
1:46:32Iya, Angular aja, dari Angular 1 ke Angular 2 itu...
1:46:34...perbedaannya signifikan.
1:46:36Udah ganti engine gitu.
1:46:38Iya, udah ganti engine kan.
1:46:40Habis itu si Misko Hevery-nya...
1:46:42...keluar, habis itu dia bikin Quick tadi.
1:46:44Yang beda banget sama...
1:46:46...beda banget sama semua yang udah ada.
1:46:48Tapi kan itu jarak waktunya...
1:46:50...perlu dilihat juga kan dari Angular 1 ke 2...
1:46:52...sampai...
1:46:54...lahir anti-tesis-nya lah, ibaratnya si Quick.
1:46:56Nanti kan itu tahun lahirnya juga...
1:46:58...ngaruh tuh, kayak standar Rekman Script-nya.
1:47:00Feature-feature apa yang...
1:47:02...udah tersedia by default, itu kan...
1:47:04...udah banyak banget ya yang berubah.
1:47:06Ada island architecture lah...
1:47:08...ada hydration lah, segala macam...
1:47:10...itu kan muncul baru beberapa tahun belakangan.
1:47:12Terus browser makin canggih...
1:47:14...terus mungkin...
1:47:16...teknologi server, kayak misalnya...
1:47:18...Quick malah...
1:47:20...semua di... oh bukan Quick...
1:47:22...satunya lagi...
1:47:24...yang baru juga, yang sering disebut...
1:47:26...sama Quick. Ada satu lagi...
1:47:28...lupa yang nggak pakai hydration itu loh...
1:47:30...yang disebut sama...
1:47:32...yang dibahas sama Ivan waktu itu pas...
1:47:34...di si...
1:47:36...satunya...
1:47:38...yang pokoknya yang HTML semua...
1:47:40...gak ada, bahkan nggak ada hydration-nya...
1:47:42...tapi manfaatin...
1:47:44...apa sih, streaming ya...
1:47:46...jadi di HTML semua.
1:47:48Oh...
1:47:50...apa ya namanya?
1:47:52Quick...
1:47:54...Astro...
1:47:56Enhance.dev, MarcoJS...
1:48:00...Quick Link...
1:48:02...Quick Link...
1:48:04Lead, lead, lead...
1:48:06...bukan tuh web component...
1:48:08...remix tuh, remix...
1:48:10...Quick Link...
1:48:12...remix...
1:48:14...remix kali ya...
1:48:16...oh dia masih hydrate...
1:48:18...tapi nggak ada hydrate kan...
1:48:20...Ivan pengen coba...
1:48:22...remix kan waktu itu...
1:48:24...ya sama Quick Link...
1:48:26...Quick, betul Quick...
1:48:28...yang nggak pakai...
1:48:30...hydration JavaScript...
1:48:32...dan dia hydration-nya...
1:48:34...langsung kayak on script gitu...
1:48:36...kayak di bagian tertentunya...
1:48:38...langsung di inline kan...
1:48:40...kalo Quick itu dia inline...
1:48:42...hasil hydration itu...
1:48:44...dimasukin ke inline...
1:48:46...di HTML-nya...
1:48:48...dan begitu disampai ke viewport...
1:48:50...langsung di jalan kan, jadi...
1:48:52...udah langsung...
1:48:54...event handler-nya combine...
1:48:56...saat itu juga.
1:49:00Lakan nih coba...
1:49:02Oke...
1:49:06...kalo gitu kita sudah hampir...
1:49:08...menyentuh 2 jam...
1:49:10...rekor kali ini...
1:49:12...rekor ya...
1:49:14...banyak pertanyaan juga...
1:49:16...tetep ada komentarnya query itu...
1:49:18...di show dulu...
1:49:20...kenapa...
1:49:22...project query bisa menjelaskan masalah...
1:49:24...betul...
1:49:26...kan yang episode minggu lalu...
1:49:28...tetep mau kita bahas...
1:49:30...QuickAstro...
1:49:32...Marco Remix...
1:49:34...jQuery tetep...
1:49:36...setengah ya...
1:49:38...40an persen...
1:49:40...karna itu...
1:49:42...ngekor WordPress...
1:49:44...di dunia nyata...
1:49:46...begitu WordPress ganti jQuery...
1:49:48...nah baru...
1:49:50...itu juga gak mungkin...
1:49:52...maksudnya kan dia butuh...
1:49:54...backwards compatibility...
1:49:56...misalnya nubah...
1:49:58...terus ada yang kan kalau WordPress ada tuh...
1:50:00...yang auto update version...
1:50:02...gila kalau dia breaking version...
1:50:04...terus gak sengaja pada ke update semua...
1:50:06...kacau...
1:50:08...mungkin bisa kita tarik lebih generalisir ya...
1:50:10...jangan sebutin jQuery lah...
1:50:12...mungkin ada library yang...
1:50:14...menyerupai...
1:50:16...si jQuery...
1:50:18...yang mungkin bisa digunakan...
1:50:20...kan gak semuanya harus pakai...
1:50:22...gak semua orang juga butuh...
1:50:24...framework untuk membangun aplikasi yang...
1:50:26...cukup kompleks kan... misalkan apa ya...
1:50:28...Alpine, Alpine JS kan itu...
1:50:30...kayak...
1:50:32...simple...
1:50:34...kalau kita butuh apa...
1:50:36...template diiterasi gitu ya...
1:50:38...buat nampilin data gitu ya udah...
1:50:40...pakai Alpine aja daripada kita pakai...
1:50:42...Royale atau pakai yang lain gitu...
1:50:44...sementara kita gak butuh...
1:50:46...custom element biasa gak sih...
1:50:48...kan sekarang makin lama makin bagus...
1:50:50...supportnya... maksudnya kalau use case nya...
1:50:52...itu kita cuma butuh nampilin...
1:50:54...sesuatu yang simple ya udah...
1:50:56...lama-lama kayaknya itu juga bakal...
1:50:58...kegilas... ada link dari...
1:51:00...Mathias Bynes...
1:51:02...jQuery size berapa...
1:51:04...jadi bisa dipakai...
1:51:06...salah satu kenapa...
1:51:08...kenapa harus pakai jQuery kalau jQuery bisa menyesakkan masalah...
1:51:10...kenapa... kenapa gak pakai jQuery...
1:51:12...karena mungkin file size nya besar...
1:51:14...kalau bisa pakai vanilla aja...
1:51:20...ya...
1:51:22...Vanilla itu framework apa ya lo?
1:51:24...Vanilla JS...
1:51:26...Iya...
1:51:28...tapi kalau untuk...
1:51:30...gak tau ya...
1:51:32...setahun yang lalu...
1:51:34...coba-coba web komponen...
1:51:36...kalau tidak menggunakan framework...
1:51:38...seperti misalkan pakai stencil...
1:51:40...lead...
1:51:42...ya lead ya terutama ya... lead stencil...
1:51:44...atau pun...
1:51:46...framework-framework lain yang bisa di-compile ke...
1:51:48...web komponen...
1:51:50...itu boilerplate code nya masih terlalu banyak...
1:51:52...jadi...
1:51:54...mudah-mudahan semakin mature ya...
1:51:56...semakin mature dan sudah mulai banyak juga...
1:51:58...kayak enhance.dev itu juga...
1:52:00...based on...
1:52:02...web komponen yang sudah cukup modern...
1:52:04...jadi bisa jadi alternatif juga...
1:52:06...begitu...
1:52:08...oke deh kalau gitu...
1:52:10...gimana kalau kita tutup saja...
1:52:12...sudah...
1:52:14...lewat hampir sejam...
1:52:16...jadi kita...
1:52:18...udahan dulu, kita ketemu lagi minggu depan...
1:52:20...insyaallah...
1:52:22...kalau yang ada yang mau follow-follow...
1:52:24...atau mau DM langsung nanya-nanya...
1:52:26...silahkan ke sosial media masing-masing...
1:52:28...saya di Twitter...
1:52:30...Rizafami22...
1:52:32...saya di Twitter...
1:52:34...EkaFYI.com
1:52:36...EkaFYI.com
1:52:38...yes EkaFY...
1:52:40...oke... Pak Mit dulu...
1:52:42...kita bertiga Pak Mit dulu, kita ketemu lagi minggu depan...
1:52:44Semalam semuanya selamat istirahat, bye bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
6 Jul 2025
Ngobrolin EcmaScript 2025 - Ngobrolin WEB
Selasa malam waktunya #ngobrolinweb! Malam ini kita akan ngobrolin tentang fitur baru EcmaScript yang baru dirilis tahun...
12 Mei 2026
Bedah Web - Ngobrolin WEB
Berhubung banyak yang submit, malam ini kita akan kembali membedah beberapa situs. Penasaran gimana pendapat para pakar ...
5 Mei 2026
Zona Waktu - Ngobrolin WEB
Salah satu topik yang sebagian besar dari kita banyak tergocek nih. Pernah tergocek dengan urusan timezone, dan daylight...