Optimasi JavaScript
Ringkasan Episode
Bantu KoreksiEpisode ini membedah teknik optimasi JavaScript, dimulai dari prinsip paling mendasar: avoid work. Cara paling efektif mempercepat JavaScript adalah tidak menjalankannya sama sekali, dan tiap tahun daftar hal yang bisa dipindahkan ke platform bertambah — animasi, view transition, date picker, combo box yang bisa dicari, dan sebentar lagi carousel, semuanya kini punya padanan HTML atau CSS tanpa library. Dari sisi mesin, dibahas kenapa membandingkan integer lebih murah daripada string, dan kenapa bentuk objek sebaiknya konsisten. JavaScript engine berspekulasi bahwa objek berikutnya akan punya shape yang sama dengan yang sudah ia lihat, lalu menghasilkan machine code yang dioptimasi untuk asumsi itu — kode monomorfik cepat, polimorfik lebih lambat, megamorfik paling lambat. Urutan properti pun ikut menentukan shape, sehingga dua objek dengan field yang sama tetapi urutan berbeda dianggap berbeda. Diskusi terpanjangnya justru soal gaya: rantai map-filter-reduce membuat salinan array di setiap langkah, sementara satu loop imperatif tidak. Kesimpulannya pragmatis — kalau ukuran data terkontrol karena API-nya sudah dibatasi, tulis yang paling mudah dibaca; kalau datanya bisa puluhan ribu baris seperti pada CLI migrasi atau sinkronisasi, tulis imperatif. Bagian penutup soal benchmarking sama pentingnya: optimalkan bagian yang paling banyak memakan waktu lebih dulu, hindari micro benchmark, jalankan di production mode, pakai profil browser yang bersih tanpa extension, dan berusahalah membuktikan hasil sendiri salah alih-alih membenarkannya.
Poin-poin Utama
- •Optimasi terbaik adalah avoid work — cek ulang tiap tahun kode JavaScript mana yang kini bisa digantikan CSS atau HTML native seperti animasi, view transition, dan date picker
- •JavaScript engine berspekulasi bahwa objek berikutnya punya shape yang sama dan menghasilkan machine code untuk asumsi itu; kode monomorfik paling cepat, megamorfik paling lambat — dan urutan properti ikut menentukan shape
- •Bandingkan integer atau enum, bukan string: integer umumnya dilewatkan by value sehingga perbandingannya jauh lebih murah
- •Rantai map-filter-reduce membuat salinan array di setiap langkah; satu loop imperatif tidak — dan forEach lebih lambat dari for biasa
- •Pilihan gaya itu kontekstual: kalau ukuran data sudah terkontrol oleh API pakai yang paling mudah dibaca, tetapi untuk CLI migrasi atau sinkronisasi yang memproses puluhan ribu baris tulis imperatif
- •Mulai optimasi dari bagian yang paling banyak memakan waktu — mengoptimasi kode yang cuma dipanggil sekali adalah membuang waktu
- •Benchmark harus di production mode dengan data yang representatif dan profil browser bersih tanpa extension; dan alih-alih membenarkan hasil sendiri, berusahalah membuktikan hasil itu keliru
[musik] Dapatkan hanya di domainesia.
Halo, selamat malam. Apa kabarnya teman-teman dari YouTube dan Linkin?
Akhirnya berjumpa lagi dengan Ivan yang sudah liburan ya dan saya juga sudah liburan.
Weh, liburan ke mana, Mas Rizah?
Liburan. liburan itu buka kamar di rumah sakit.
Weh, [tertawa] mantap banget itu. Stayation ya.
Stayation [tertawa] stakation. Selamat malam dius [tertawa] sambil diimpus.
Dia dikasih di di TKTP enggak apa tuh?
Tinggi kalori, tinggi protein. Tinggi kalori, tinggi protein. Itu diet KTP namanya.
Oh. gak tahu. Jadi kalau orang yang lagi mau proses penyembuhan, proses penyembuhan makanannya itu dikasih tinggi kalori,
tinggi KT. Coba makanan dikasih proteinnya ada banyak enggak? Misalnya protein kayak mungkin ada telur dan daging.
Dedam. Iya, telur. Pokoknya dua deh. Dua deh ininya tahu proteinnya.
Lauknya dua ya. Lauknya dua ya.
Iya. Nah, itu namanya TKTP. Artinya lagi proses penyembuhan.
Kirain [tertawa] itu kan kayak orang lagi itu kan apa bulking yang buat apa angkat besi atau dan sebagainya kan.
Itu itu lebih besar lebih banyak. Iya benar sih sama TKTP juga itu banyak protein semua.
Bukan kar yang makannya telur tiap hari itu ya.
Iya sampai bisa 10. Dud ayam di jus 10.
Wah dada ayam di jus. Oh enggak pernah dengar ya?
Kalau orang yang apa orang [tertawa] yang mas-mas gym banget kan gitu soalnya mereka tuh harus makan banyak banget kan
capek kan punya. Iya kayak kayak ini nanti kayak mungkin kita tanya aja nanti kayak siapa ya kayak mungkin Mbappe atau siapa nanti
kolom yang sedang bertanding [tertawa] gimana caranya? Pasti pasti pasti mereka malam sebelumnya itu udah diet TKTP supaya full power hari ini kita call
sekarang apa [tertawa] luka Modik aja kemarin enggak ketemu kan gimana suker juga enggak ketemu namanya Boben apalagi Mbapp
[tertawa] banyak protein iya iya iya Enggak ada enggak ada yang tahu daftuk kali ya.
Enggak ada. Tahunya luka Modrik doang. Ada itunya sama bobanak.
Wis boban. Kalau enggak minum protein. Oh iya ada ya minuman protein ya.
Heeh. Minuman protein. Terus snack yang protein juga kan? Snack bar. Eh apa protein bar gitu kan.
Kenapa kita protein? Btwih enggak dikasih cuman kan ada enggak kan ada dikasih cuman ada. Iya jaga kesehatan
teman-teman pasti habis itu jadi vogging kan biasanya kalau di satu RT ada satu atau dua orang kena DBD kan jadi F
full tumbalnya yang kena duluan. Iya. Biasanya biasanya tuh ee kalau sebelum-sebelumnya anak-anak yang duluan, sekarang malah saya duluan. Ini
Lihat transkrip lengkap (561 segmen lagi)
pengalaman pertama loh saya dirawat setelah setelah 40 tahunan. [tertawa] Mungkin lebih tepatnya dirawat di rumah sakit.
Tapi kan kalau dirawat sama istri kan bukan pertama kali. Iya. Oh, kalau itu bisa sering sering [tertawa]
enggak? Gimana pengalaman pertama? Gimana pengalaman pertama run up?
Sayion. Eh, agak unik karena tidak merasa sakit.
Jadi datang sendirian naik motor sendirian sampai di rumah sakit enggak boleh pulang. [tertawa] Kenapa? Karena Iya. Karena
hasil tes [tertawa] hasil tes darahnya enggak benar.
Trombositnya turun. Hm. Iya, kayak harus nyampai sekian.
Datang ke rumah sakit itu dengan keluhan bintik-bintik kayak ee alergi makanan merah-merah gitu kan. Tapi merah-merahnya bukan kayak ee apa e DBD
gitu, enggak kayak yang gimana yang kayak gatal-gatal gitu.
datang ke rumah sakit di hah koperasi [tertawa] kayak koperasi merah [tertawa] aduh i
iya jadi datang datang ke dokter dibilang yuk ee periksa darah ya takutnya ee antara campak ya campak atau ee DBD akhirnya
dicek ya tombositnya turun penyakitnya klasik semua Iya.
Udah ee langsung dirawat itu ngurus ee apa pembayaran sendiri terus ee apa ee penginapan di kamar apa pilih kamarnya
juga sendiri pada bingung ini enggak ada yang nemenin. Enggak ada saya sendirian gitu. [tertawa] Asik.
Orang orang niatnya cuman mau nanya doang kan awalnya kan. Eh, ternyata itu ya sudahlah.
Pakai pakai insurance kagak? Ee tidak.
Hah? Waduh. Tidak. Bayar sendiri. Orang kaya [tertawa] kan sudah bukan bukan kan sudah diceritakan di belakang layar waktu di
bandara kan penyebabnya kenapa [berdehem] tidakkan asuransi. Jadi ya sudahlah memang sudah diagenda maksudnya ee sudah ada budget untuk sana walaupun
enggak pakai asuransi ya begitulah. Jadi daripada boleh begadang [tertawa] malam ini kok kenapa harus begadang? Oh nonton ini
nonton nonton [tertawa] dunia. Iya nonton highlight saja.
Iya, jam . Tidur aja dulu.
Iya, makanya habis ini saya mau tidur supaya nanti bisa ya udah biar cepat kita langsung ke topik ya. Eh, tapi
sebelum topik kita ngiklan dulu. Iklan.
Iya. Ee buat teman-teman yang mau beli layanan hosting seperti biasa langsung ke dominesia.com ya. Bisa pakai promo
code ngobrolin webdn itu hosting ya.
Jadi ee mungkin aplikasi-aplikasi yang sederhana yang enggak butuh apa ya bedanya kalau hosting sama VPS apa aja
sih? Eh kalau kalau hosting biasanya shared ya shared hosting mesti itu kalau zaman dulu mah udah si panel
gitu loh. Udah ada. Iya zaman sekarang juga zaman sekarang juga dikasih panelih panas panelih panel.
Heeh. F kalau VPS kan literally Linux machine ya. Kita SSH aja ke mesinnya dapat apa?
Dapat IP sama dapat password. Ya udah beneran kayak dapat kayak dapat komputer aja.
Iya si panel hosting dulu sebutannya.
Betul. Terus kalau kita mau deploy itu kita upload ya. Enggak bisa pakai git gitu ya. Enggak bisa ee continuous
deployment gitu ya. Kalau dihosting ya.
Jadi setiap kali ada perubahan kita harus Oh, bisa.
Terus sekarang sudah bisa tahu caranya.
Oh, pakai SCP model-model gitu ya. Jadi eh automation tools-nya dibuat di lokal gitu.
Meskipun meskipun share hosting kan dapat SFTP kan atau dapat STP kan?
Iya dapat tetap aja bisa aja tetap bisa copy file kalau mau memang setup pakai FTP.
Iya bisa FTP. Iya, tadi lagi bahas si IC yang misalnya ngpush ke git terus pakai git gitu. Kalau
betul kalau ada perubahan kita push apa kita add ke git terus komit terus habis itu push kan kalau misalkan pakai servis
ee seperti apa ya atau eh apa VM itu kan kita bisa set up otomatis nanti dia akan
full gitu. atau di eh GitHub workflow-nya bisa di-share.
Yang paling yang paling membedakan VPS dan hosting itu kalau VPS kita dapat road akses.
That's it. H. Jadi dapat super power.
Kalau si panel kita cuma dapat ee ya tergantung tergantung hostingnya ya. Kalau dapat si panel dan hostingnya
baik hati bisa dapat bisa dapat SSH akses itu ada yang bisa ngasih ada yang bisa ngasih juga yang namanya
jail SSH gitu yang SSH-nya cuma bisa sekedarnya itu ada ya iya iya kalau dipikir-pikir sebenarnya bedanya VVS super power udah dikasih
semua sama sees virtualnya kayak kita dapat kayak kita dapat CPU aja He.
Mau nginstal apa juga bisa. Mau nginstal c pananel juga bisa jadinya ya. Dan juga c pananel sebenarnya enggak ada alasan
hosting enggak ada alasan untuk tidak menerapkan continuous integration dan continuous deployment. Sebenarnya kalau pakai Git workflow kan kita bisa SCP kan
eh copy SSH gitu kan copy file. Jadi sebenarnya kalau sudah jalan berhasil bisa di copy file aja sebenarnya bisa juga
ya. Kalau CCD buat mobile ada? Ada.
Ada tapi agak ribet ya. Agak e sedikit berbeda.
Apalagi kalau yang iOS. Nah, itu lebih lebih ini lagi ee karena keterbatasan apa OS dan license ya. Anyway, itu dia
kalau mau hosting ya yang simpel gitu.
Tapi kalau misalkan mau dapat pro Access, nah bisa pakai yang VPS eh Turbo Dominesia itu promo code-nya ee ngobrolin VPS DN.
Ada VPS-nya di tengah ngobrolin VPSDN itu ee diskonnya lebih gede 50%.
Berlaku untuk semua paket, semua siklus.
ee kodenya bisa dipakai lebih dari satu kali, account-nya sama, enggak perlu ganti account gitu. Jadi enggak perlu
pakai email yang berbeda, ya. Jadi, langsung aja cek. Ee kalau teman-teman sudah pakai boleh komen-komen, nanti kita sampaikan ke
teman-teman dari Dominesia dan mudah-mudahan Dominesia berkenan untuk kolaborasi lagi selanjutnya ya. Terima kasih Dominia kok audionya berubah.
Audionya berubah. Iya. Enggak tahu glitch mungkin ini bunyinya aneh aja. Nah, itu baru bunyinya aneh tadi.
Koneksi ya. Jadi malam hari ini topik kita adalah optimis JavaScript.
Membuat JavaScript lebih cepat. Enggak bisa sih adanya membuat JavaScript diet. JavaScriptnya.
Iya JavaScript ya. Kalau membuat Java JavaScript lebih kecil [tertawa] sebenarnya. Ee kalau dibilang topik ini kok enggak?
Iya sebenarnya topik ini sudah cukup lama ya hadirnya.
Eh gimana Pak Rei? Lanjut. Eh apa optimize itu kan dimensinya macam-macam ya. Kalau Ivan mungkin karena spesialisasinya performance
ya. atau termasuk gue juga karena apa lebih banyak praktik sehari-hari front end mikirnya mungkin bikin JavaScript lebih langsing atau mungkin apa diver
atau di ya biar kerjanya enggak banyaklah enggak eh cloging main trade.
Tapi sebetulnya JavaScript-nya sendiri eh script-nya sendiri kan ada kan optimize yang cepat enggak cepat. Eh ingat ingatnya waktu dulu tuh pertama
kali belajar array kan ada macam-macam tuh ada yang sampai bikin studi apa sih memproses seri sejuta ee array yang
isinya sejuta item memproses e array itu mana yang lebih cepat enggak boleh pakai map atau harus pakai for ya ada kan yang
speed apa beneran ee soal bikin JavaScript lebih cepat iya ada tapi sebenarnya Sebenarnya semakin ke sini kan ee si web
platform itu sendiri juga menambahkan fitur fitur. Misalkan contohnya ee beberapa atau banyak fitur-fitur yang tadinya harus menggunakan JavaScript
terus sekarang sudah bisa di-handle sama CSS aja. I kan?
Betul. Nah, itu kalau yang itu kan yang praktikal kan CS. Yes.
Jadi mungkin ee si apa kode kita atau aplikasi kita ya harus dicek ulang apakah ada kode-kode JavaScript yang
bisa digantikan oleh ee CSS walaupun ya pasti effort ya istilahnya migrasi dari JavaScript ke CSS gitu. Tapi itu bisa
contohnya apa? Contohnya animasi-animasi ee library jQuery untuk date day time. Kalau dulu, kalau sekarang kan udah ya walaupun
kurang bagus gitu kan, tapi setidaknya pakai daytime yang apa input type-nya daytime aja sudah lumayan kan. Misalkan
lagi kalau contohnya post sama getu ya bisa diganti vets.
Iya [tertawa] betul. Terus misalkan lagi itu yang ee apa ee option ya apa ee combo box yang bisa
diying. Kalau dulu kan butuh mungkin butuh plugin kan butuh satu library sendiri harus install material UI dulu.
Heeh. He untuk tambahin emoji atau untuk nambahin gambar gitu di samping thumbnail gitu kayaknya sulit banget gitu harus pakai library tambahan yang
ada JavaScript-nya mungkin kalau sekarang kayaknya murni HTML CSS saja sudah bisa banyak kan. Jadi ee sebenarnya ee apa optimasi JavaScript
itu ya ee bisa kayaknya tiap tahun harus dievaluasi lagi, evaluasi lagi kan.
Em apa nih? Bentar lagi karusel juga masuk ya?
Karusel. Ih, betul. Karusel tuh yang salah satu yang ini juga gede ya.
Belum masuk baseline. Belum masuk baseline. Tapi udah bisa udah bisa mulai diimplementasikan ya.
Punya harus pakai progressive enhancement. Hm. Oh, harus ada fback-nya ya.
Ini contoh berikutnya dari Eka ini apa?
Ee enggak sih ee random jadi ingat dulu tuh apa i for itu lambat optimisasi kan [tertawa] bisa
macam-macam. Nah kalau yang pure JavaScript atau eM script-nya sendiri ini enggak sih? ini jadi ingat aja dulu dulu
pas pertama kali banget belajar kayak obses aja mikir harusnya apa masih mikirnya saket kan yang betul yang mana
sih harusnya terus baca ini terus lucu aja trad-nya panjang banget tiap tahun ada yang nambahin scroll aja terus ya
intinya oh array itu pakai apa kan gitu heeh nih terus after performing this test nah ini kan yang paling banyak centangnya oh
berarti yang yang betul harusnya kayak gini nah ini yang paling baru sih, tapi kalau scroll ke bawah lucu gitu. Setiap
tahun ada yang update. Itu JS Bench itu loh sama J.
Nah, terus Absolute Fastest way. Nah, itu versi 2021.
Ada postnya ya? Maksudnya itu detailnya sih enggak penting suruh lagi.
2016 fasted slop aja dibahas ya.
Iya. Karena itu paling sering kan.
Iya sih benar benar optimiz paling dulu tuh kan enggak hafal-hafal tuh ee apa sintaksnya sampai ee pokoknya ngetik
ngetik tanpa nyontek sampai hafal. Sekarang semua udah diketikin gua dulu paling suka, gua paling suka pakai for each, tapi ternyata
pakai kalau forage itu ternyata lambat itu paling iya lambat ya salah satu yang lambat ya.
If you really need to scratch a few milliseconds ni ada yang bilang tuh kan.
Nah tuh yang eh item ketiga.
Iya iya iya iya. lucu-lucu tapi ee ada it's just di tahun 2018 update update-nya adalah bla bla bla.
Ini sampai tahun berapa dia update nih?
ini dipostingnya 15 tahun yang lalu.
Jadi kalau scroll ke bawah yang apa upvote-nya sedikit ya paling ada dari belasan tahun depan 2014 [tertawa]
ini balik lagi ke while gitu ya umur rap ini udah 15 tahun jadi kayak museum aja sih
jadi apa kalau kita ngomong optimization JavaScript jadi kayak ingat ini buat training AI i [tertawa] tuh ada ada editnya TLDR nowadays dalam
2011 based as in pure performance or performance and read ability ya kan kiblatnya juga ada banyak kan ada
yang bilang oh yang penting performance-nya bagus ada yang bilang juga ya kode itu ditulis bukan hanya buat mesin tapi juga buat manusia
sekarang kayaknya sudah enggak berlaku ya [tertawa] begitu Iya kan berlaku buat LM-nya juga.
Tapi kalau misalnya kodenya kurang readable nanti rawan si LLM-nya. Halo.
Enggak. LM itu justru dia ini banget apa kayak satu line kode aja kadang-kadang dipakaiin komentar sama dia.
Iya komentarnya lebih 5 rajin dia. Rajin.
Iya [tertawa] rajin dia. Woh ada yang basem.
minus banyak sekali. Ya ampun banyak ya tipenya ya. Maksudnya looping aja sampai 25 ya banyak.
Luar biasa. Ada yang 2017. Ini adalah tahun 2017.
Oke. Pop masa sih? Pop is fastest. Wah, bukannya itu ada merubah nanti nghift dong. Merubah isi array.
Mute. [tertawa] Iya. Itu gimana tuh? My result. I have test.
Mau lihat ini masih ada enggak?
Masihahlah ya. Harusnya kayak gimana dia? Ya, array from pakai T lengthnya ya. Dia bikin array berisi random.
Oh, random number. Time run, time run, time run.
Aduh, malas. Ya udah deh, percayalah walaupun aneh aja ini. Copy bisa we bisa aja copy copy.
He. Terus jalanin aja konsol terus copy semua gimana?
He ya. Copy jalan aja konsol terus paste error require is not defined. Kagak kagak
kenal require dia perf itu oh ini node js iya ada requirnya ada perpx-nya. Oke, anyway kita topiknya kan [tertawa] optimasi
JavaScript. Iya kan ada ini soalnya Perfs.com bisa nanti pakai.
Iya harusnya diganti sama yang build-nya si Chrome ya.
Chrome apa sih namanya yang buat per eh ngitung itu?
Performance. Window. performance. Iya. Atau benchmark. Heeh. Iya.
Iya. Ini topiknya udah cukup lama juga ya. 2024 ee referensinya dari ini referensi utamanya.
Nah, ini sebenarnya kalau untuk relevansi sekarang ini bisa kita copy paste ke skill optimize JavaScript. Jadi, masa [tertawa]
ya enggak tahu. Tapi kan harus kita baca kan, harus kita pahami kan.
Heeh. Iya. Kita harus tahu apa yang terjadi.
Iya. Misalkan udah oke nomor satu udah oke nih masukin ke skill nomor dua masukin skill nanti tinggal jalanin aja
atau bikin sub agent optimiz javascript optimizer kan coba coba lah apanya coba bikin bikin agent oh bikin agent dari sini tinggal copy
paste URL-nya aja minta bikinin sama AI i kan do AI bikin [tertawa] agen terus agennya buat ngebikin
Jadi semuanya serba agen sekarang ya.
Iya. Udah gitu kan. Ee mungkin sekarang teman-teman di yang ada di komentar siapa yang masih menulis JavaScript
ini masih relevan enggak sih buat ee Typecript?
Harusnya masih ya sama kan Type script kan sampai subsetnya JavaScript type script akan compile ke Iya. Anything
anything. Oh, masih masih dong. Masih nulis JavaScript nulis sih jarang sih.
Ee masih mengerjakan JavaScript atau udah full Typecript? Oh, Type script ya.
Pemerintah kok pemerintah. Pemerintah enggak pemerintah AI buat nulis JavaScript atau Typ Script.
Iya. I kita kan harus ngasihya harus ngerti nih.
Oh, nulis manual enggak? Enggak, enggak antara degenerate AI atau pokoknya hand eh apa ya? Manage project JavaScript
yang bukan typescript gitu ya. Maksudnya yang nulis ee maksud saya ngomong nulis JavaScript itu apa ya?
Ini kan soalnya masih non Type script ya. Apakah ee performance-performance di sini itu ee juga bisa diaplikasikan ke Typecript?
Harusnya iya ya. Iyalah lah. Itu contoh pertama aja Enum.
Iya ya benar. Oh ituisi ya.
Kita mulai dari nol. Avoid word word jangan kerja.
Nah gimana itu? Betul. Enggak maksudnya ya itu nyambung sama yang tadi front and oriented itu.
Kalau misalnya ada bisa dilakukan oleh CS SS ya enggak usah. [berdehem] If trying to optimiz you should first
look into avoiding word ya maksudnya worknya JavaScript kan ya ini konsepnya.
Jadi kalau misalnya eh kan kita enggak ternyata kita enggak butuh JavaScript untuk view transition sekarang untuk transisi antar halaman. Ya udah, enggak
usah pakai JavaScript ya kan lebih jadi JavaScript yang berjalan juga lebih optimiz kan.
Betul. Terus nah ini contoh-contohnya memoization, laziness, incremental computation. Kalau yang contoh di JavaScript yang pun memo ini setengah
mati dulu mempelajarinya si React. Iya.
Salah satunya kalau di browser sih ada tuh eh request idle callback itu.
Oh iya itu eh sebenarnya bukan memois sih kalau ini eh ini buat e jadi JavaScript-nya dicangking dulu, dipecah-pecah terus
kalau yang enggak penting dijalanin belakangan. Itu kan termasuk mengurangi pekerjaan di satu tempat di sekali jalan.
intinya ada hal-hal yang kalau sudah ditangani oleh ee contohnya tadi CSS seperti misalkan tadi apa e animasi
terus eh view transition apalagi yang apa eh carusel dan lain-lain pakai aja yang CSS jadi JavaScript-nya berkurang
gitu jadi enggak perlu dikerjain javasnya Nat dari kode JavaScript yang harus JavaScript pun ya itu kan bisa dimemoise
bisa disimpan jadi kayak itu mengacu pada satu reference ya maksudnya apa kayak di setelah dimemoise kode itu tuh
bisa dijalanin ulang lagi atau gimana ya definisi memo iya kayak gitu lah semacam casing semacam cashing heeh berarti
itu bisa salah satu terus bisa juga di ee chunking atau splitting ee ee apa dari kode itu dipecah-pecah mana sih
yang beneran harus jalan sekarang, mana yang bisa jalan belakangan. Kan itu juga salah satu cara menghindari pekerjaan
avoid pekerjaan java menggunakan sebenarnya less javascript is better itu aja.
No javascript is better. No javascript enggak mungkin ya. Enggak mungkin zaman sekarang.
Zaman sekarang kayaknya sudah hampir enggak mungkin website-nya apa? Wikipedia mah bisa-bisa aja. Tapi seberapa sering sih kita bikin
Wikipedia? Iya. Soalnya Typescript lanjutan dari JavaScript enggak sih? Iya dan tidak.
Tapi tapi sebenarnya kan gini ee TypeScript itu kan belum bisa dijalankan di browser kan harus ditranspilasi dulu
ke JavaScript kan. Jadi eh kalau kita optimize TypeScript secara otomatis enggak sih si JavaScript-nya teroptimize juga atau mungkin ada banyak ee plugin-plugin
di luar sana yang membuat ee hasil transpasi Typecript jadi lebih optimis.
Jadi berat berat. [tertawa] Oh, kirain jadi berat enggak? Justru jadi optimiz gitu Babel.
Oh iya, kan ada tuh beberapa yang transpasi ke JavaScript juga. Misalkan eh Ray Script yang dari Amel katanya
hasilnya itu optimize JavaScript lebih kencang daripada kalau kita nulis JavaScript langsung katanya gitu. Karena dia menerapkan beberapa hal yang ada di
sini. Mungkin mungkin ya berarti tergantung setting trend file-nya ya. Kadang kan kalau yang dulu tuh sempat apa babel yang zaman dulu
jadi berat karena backwards compatibility kan dulu zaman browser oke kan jadi semua jadi kayak far require require enggak tahulah pokoknya
jadi berat karena oh terus di polfil jadi kayak yang belum support antar browsernya belum bagus diplyfil semua ya
jadi berat jadi beratnya bukan karena kodenya itu sendiri tapi karena apa settingan back compatibilitynyaationnya itu. Heeh.
Ya. Dan dengan adanya sebenarnya dengan adanya type yang apa ya yang ee digunakan di Type script juga
itu membantu bukan hanya untuk performance ya, malah lebih kritikal lagi ya untuk ee membantu developer sebenarnya.
Apalagi kalau kita bisa nambahin rule-rule yang misalkan oh ee harus menggunakan sebaiknya menggunakan apa?
triple sama dengan sama dengan 3 kali gitu ya. Ini ada contohnya juga ya.
Ada tuh. Langsung aja sekalian ya.
Heeh. String comparison itu kan mahal.
Iya string comparison. Betul. Jadi kalau misalkan teman-teman ada yang masih menyimpan ee angka satu di sebagai string gitu ya, jangan ya 01 true false
pakainya 01 gitu ya. Jangan juga ya kan udah ada true false ya. True false kapan zaman kapan ya? Udah enggak ya sekarang
ya [tertawa] emang masih ya itu zaman Daver Super masih main bola.
Daver main bola. Atau kalau di eranya sebelum tepat sebelum Typescript muncul ya mungkin udah awal-awal muncul itu
sempat ada kan apa kalau yang pakai redux action kan simpannya script kan e string kan ininya action-nya kan belum ada inumsams kan
soalnya Yaya mau yang D dulu sudah ada Enum tapi jarang yang pakai.
Iya sih gua juga jarang. Selalu langsung variabel-variabel aja.
Ini maksudnya kalau mau pakai inam jangan simpan sebagai string.
Kalau enggak perlu-perlu amat lebih baik disimpan sebagai inem aja gitu langsung. Iya. Enggak usah pakai value ya.
Iya. Jadi yang di ini yang di compare langsung objeknya.
Hmm. Oke. Ini. Oh, ini ada contohnya ya.
String kalau antara string integer 50% ini berarti lebih jelek ya?
Iya. Yang string ya lebih lambat ya. Loh, yang betul yang kanan.
Yang betul yang kanan. Iya, yang lebih cepat.
The can be significant. The different isn't necessarily due to the str compare as engineer can use string pull and
compare by reference. also due to the fact that integers are usually passed by value.
Yang gini-gini tuh kalau dulu kan zamannya kuliah kita belajar ya pass by ref, pass by value gitu ya.
Iya. Apa bedanya tahu? Ayo. Apa ya?
Hah? Pass by and pass by reference.
Kalau reference itu kan coba. Heeh. Gimana coba? Coba siapa yang mau jawab?
Iya. Kan Mas Riza guru guru gururu ayo diuji gurunya diuji lagi interview ini nih masuk masuk oh reference tuh yang kayak objek itu ya
sebenarnya pointing ke satu tempat pointing ke memori ya reference itu reference itu pointernya pointer kalau kalau value ya nilainya aja yang dia
dikasih gitu kalau value tuh yang kayak cuma string string sama integer yang gitu ya.
Iya, kayak konstanta. Jadi, misalkan ee ada perubahan di value-nya ya, dia enggak berubah karena yang diambil itu
adalah nilai akhirnya. Kalau e yang test by reference kalau ada perubahan di tengah-tengah ee komputasi dia ikut
berubah gitu aja. Itu ikut berubah. Oh, iya. Ngerti ngerti ngerti.
Iya. Ya, oke. Pasti ngertilah kalau praktiknya. Mungkin istilahnya aja enggak ngerti.
[tertawa] Karena pasti ngalamin bak-bak kayak gitu sering banget muncul apalagi asinkronus.
Wah. Oke, avoid shapes. Iya, ini juga ini juga sebenarnya sudah di sudah di eh solving kalau teman-teman
menggunakan zot zot atau valyot ya. Udah ada kan yang kayak gini kan maksudnya bikin struktur eh termasuk juga type script ya bisa
bikin type-nya ya jangan sampai berbeda gitu.
Mari budayikan pakai far daripada LED.
Jangan [tertawa] sarkas ya sarkas ya. Ini ini kenapa penyebabnya kenapa tidak ee disarankan untuk objek shap-nya berbeda?
yaitu karena katanya JavaScript engine mengoptim berusaha mengoptimasi optimisasi optimasi kode dengan asumsinya objek kalau udah mungkin kalau
udah ketemu objek pertama bentuknya kayak gitu ada name itu string age itu integer mungkin e dia mengasumsikan
objek-objek selanjutnya kayak gitu ya bakal sama enggak tahu assuming itu [tertawa] kayak engine mesin Kok bisa berasumsi kayak
manusia? Maksudnya behavi kayak gimana? Gua enggak tahu.
Iya. Iya. Kayaknya dianggap sama gitu ya.
Ada contohnya enggak? Iya. Maksudnya supaya supaya ada mapping-nya aja sih kayak di compiler waktu di rantime maksudnya ya. Waktu dia
kompal di run waktu dia jalankan di runtime dia sudah cash shap-nya itu.
Nah, itu contohnya kalau misalnya function menerima ee dua objek objeknya x number y number eh browser JavaScript engine akan
berspekulasi bahwa eh objek-objek selanjutnya bentuknya akan seperti itu.
generate machine code optimized for that tetap enggak ngerti sih exactly gimana tapi ngerti mau saya apa yang harus
dilakukan ngerti tapi reasoning apa engine behavior-nya entah iya karena ternyata kan si JavaScript-nya juga melakukan optimasi di pada saat mau
dijalankan jadi ya gitulah gua enggak pakai optimasi optimasi Justru kayak balik ke ini kita ini balik ke basic banget ya yang hal-hal yang
kita sering lakukan kita lakukan tetapi tidak ngeh kalau itu adalah ada reason di belakang layar kita cuma
Iya cuma apa istilahnya cuma depend sama transpilertranspiler kayak Webpack lah atau apalah untuk melakukan Iya Ya, kita apa udah diabstraksi
terlalu tinggi ya. Jadi kita enggak tahu apa yang dilakukan terlalu manja.
Terlalu manja. Balik lagi ke balik lagi ke vanila JavaScript ini.
Heeh. Ini apalagi zaman sekarang ya tinggal please optimize this code gitu ya. Don't make mistake. No mistake.
Kalau kalau dianya si AI-nya sesuka hatinya bikin, kita juga enggak tahu dia benar apa enggak.
Iya. Bahaya juga. Bahaya. Makanya kan tadi saya bilang kalau kita udah selesai baca ini kan enggak ada suaranya tuh ngomong dari
tadi. Mati ya? Mati ye. Iya. Habis.
Halo, Bet. Halo Bet. Kalau kita sudah selesai baca ini, sudah mengerti, kita bisa ambil apa artikel ini kita jadikan skill itu bisa atau
jadikan subagen. Tapi ya kita harus mengerti kan apa yang dilakukan. Jangan tiba-tiba ternyata udah enggak valid gitu. Misalkan kayak gini ini dia
pakainya di ee V8 terus oke aman.
Terus kita mau optimasi JavaScript yang jalan di Bun.
Bun itu kan pakai JavaScript core beda.
Bisa jadi beda kan belum tentu ini jalan maksudnya belum tentu ini optimiz gitu di eh Bun JS. Kalau di NJS mungkin iya
karena pakainya V8 mungkin. Eh buka buka artikel yang di link deh.
Lucu artikelnya ada gambar lucunya. Mau saya ada gambar ada [berdehem] ilustrasinya tuh. Read the excellent post from Mr.
yang di layar yang di screen. Excellent.
Oh, Miralab. Oke. Tetap tetap enggak ngerti sih, cuma kayaknya menarik [tertawa] enaknya.
Udah lama enggak ngoding. Emang masih ya? Masih sih.
Masih. Oh, masih. Masih. Tapi enggak manual line by line kan pecut-pecut AI kan. Udah pencet-pencet AI kan enggak ngoding lagi
kan masih kalau cuma satu dua baris sih kayaknya lebih cepat ngetik sendiri yaure AI di screen terpisah
sisinya selainnya masih ngading lagi jadi bisa double double speed mau [tertawa] mau git komit aja udah udahlah pakai llm aja komit pleas udah
malas mikirin cuma ubah satu dua hal atau yang ee kadang kan slopy ya ai slop suka maksudnya kayak enggak rapi. Ee
kita punya idealisme kayak harus begini.
Ee pokoknya bikin dulu satu contoh tetap gua sih sering gitu bikin satu contoh biar gampang. Nah, baru dikasih ke AI.
Sisanya bikin dengan pattern seperti ini kalau enggak ke mana-mana. Soalnya kalau udah menyentuh idealisme ya susah sih. [tertawa]
Maksudnya kalau EA yang bikin mungkin jalannya sama ya. Unit test passing sih passing cuma kayak kodenya banyak banget
terus line-nya jadi banyak banget. Slopy A slop.
Jadi sekarang Eka kalau ee ngoding nulis ee testingnya sendiri baru implementasinya minta AI gitu.
Oh enggak. testingnya ya nyuruh juga sih, cuma ya ngerapi kayak lebih ngerapi-rapi ee kadang kalau malas kalau from scratch
ya tetap suruh bikin suruh AI-nya yang bikin. Tapi kalau udah kayak ada bagian yang pengin diubah terus enggak suka
cara I bikin, ya gue bikin sesuai gua mau. Terus ee habis itu ya sekalian mungkin di safety skill kalau
berulangnya sering atau kalau cuma buat sekali jalan, ya udah cuma kasih contoh aja di mention apa line ee bagian
bagian-bagian yang pengin dia contoh yang mau diubah. Hm.
Ee ee ini salah satu apa ya ee user yang baik ya. Biasanya kan kita tinggal marah-marahin aja kan kalau Eka dikasih
contoh gitu. Baik sekali. Kalau makin dimarahin makin ngacau soalnya ya marah-marah juga sih.
Biasanya gua marah-marah kalau komennya panjang banget. Terus kadang komennya obvious gitu loh. Misalnya apa ya? Eh is
out. Eh udah di user misalnya user modul is out. Tetap aja komen check if user is authenticated. Ya ampun.
Nah, itu marah-marah itu. Oke. Ini apa? Monomorpism kayaknya.
Monomorism yang tadi bentuknya sama. Monomorism.
Oh, i ya. Ngerti e di code blok bawahnya monomorp.
One type good to type bad type B.
Hulk style. Hook style. Hulk style. [tertawa] Terus bawahnya ada ilustrasinya.
Lucu-lucu. Tadi sih gua lihat gambarnya doang.
Ya, perhati xat. Oke. Terus gimana sih? For simplicity will mostly concentrate on simplest property access in JavaScript like eh O.
X in code below. At the same time it's important to understand that everything we are going to talk about appli to any
dynamically bound operation with property lookup or an arithmetic opator even goes beyond JavaScript ya. Kalau kita punya fungsi o return-nya
ox, maka x1 eh function x1 berarti 1 x 2 ya 2 ya.
Heeh. Terus apa nih? Ini kan o ox kan.
Iya. Ox. O. Iya. Terus and imagine for a moment that you are interviewing for a great position.
interviewer des and property look for JavaScript VM.
Waduh, what would be the simplest and most straightforward answer to this?
Obviously, you can go any simpler than taking JS semantics as it's described in script language specification.cribing get algorithm word by word from English
into C++ Javaras or apa ini depending on your language. In fact, if you open a random JS interpreter, you most likely
discover something like this. JS value get I get in maksudnya di itu sudah ada get algoritm itu sudah ada.
Sudah ada I ya. Intinya gini, yang ditanyakan itu eh ask you to design implement property lookup. Jadi mau ada jadi mungkin di
sebuah array mau ada property look up, gimana caranya desain desain ee implementasinya?
Ya, obvious answer-nya adalah ya lihat aja spesifikasinya dima script terus bikin algoritmanya exactly seperti yang diminta sama [berdehem]
ee standar spesifikasi script itu line by line ya. Oke.
Itu. Nah, terus dikasih tahu caranya begini yang di I.
Oke, ini valid untuk look up.
Tapi ada masalah utama yaitu weit our property look up implementation against those in modern JSPM. We will discover
that is far too slow. Terlalu lambat ya.
Our interpreter is amnesiaak. [berdehem] suka lupa sama kayak el jalan ya udah enggak punya ingatan.
Iya, makanya kan ada memo kan bisa pakai memo kan sebenarnya kan.
Oke, it does not learn anything from the previous attemp. Oke, terus that's why performance oriented VM implement
property lookup in different way. What if property access in our program was capable to learning from object that it
before and apply this knowledge to similar object potentially that would allow us to save a lot of time.
Nah, itu tuh di kiri ilustrasinya cukup helpful.
Jadi kalau x1 berarti O. X adalah 1 ya kan.
Need some help in here. Begitu dikirim lagi yang sama, dia udah bisa langsung nebak karena sebelumnya sudah sama ya. Bu
I ditanya Ox kan kalau Ox1 terus Ox-nya berapa gitu kan. Oke ox1 terus ditanya yang ditanya sama lagi. Oke ini ada pattern
yang sama nih gitu kan. Terus di di dikasihlah jawabannya satu.
Nah, terus turun lagi. Lihat gambarnya.
Nah, kalau ditanya Ox2, OX2 kayaknya gua pernah lihat sebelumnya. Terus belajar dia belajar pattern-nya gitu. Nah, dari
pattern itu dia ingat dan dia kirimkan. Kalau kalau yang sebelumnya kan kalau misalnya di itu anggapannya perlupa ya. Jadi kalau
ditanya X1 carinya cari dulu propertinya satu X2 cari lagi dua. Tapi kalau yang modern katanya dia bisa cari pattern dan
ngasih jawabannya sesuai pattern. Jadi matching kali ya matching ya.
Enggak perlu look up lagi. Iya bisa belajar.
Iya iya iya iya. Sebenarnya casing kan lebih ke casing bukan belajar kan sebenarnya kan.
Iya. inline casing istilahnya langsung scroll ke paling bawah aja karena pusing kalau di PHP ya itu
just in time bawah bawah lag bawah lag paling bawah ya itu the best performance is well katanya malah lah enggak perlu
terlalu khawatir soal polymorphism your code on real data set.
Tapi maksudnya iya penulisnya pun bilang enggak usah terlalu diseriusin ya maksudnya benchmark your code on realistic data
set. Betul. Ini gambarnya lucu tapi runtime inline artikel artikel artikel-artikel kayak gini kok jarang ya sekarang yang gua
nemu ya sekarang AI slop semua sekarang AI slop pakai NH iya ya benar juga oke lanjut ya
kayak gitu nah itu dites aja setesing deh ngeklik Iya monorph [tertawa] 100% paling monomorfik, polimorfik, dan megamorfik. Megamorfik
apa itu? Kalau beda-beda ininya. Heeh. Tuh lihat aja di monomorfik kan jelas sama semua.
Nah, kalau polimorfik itu kayak ada ee polimorfik ada satu yang beda.
Oh, kalau yangorfik beda semua. Sebenarnya ini shape-nya kalau di sorting kan sama kan kalau A-nya di depan kan. Tapi karena kita define-nya
A-nya nomor du urutan kedua jadi beda gitu ya maksudnya gitu.
Iya beda shap. Iya beda. Beda secara objek beda. Iya.
Hmm. Kalau itu [tertawa] kan itu kan key enggak bisa disorting berdasarkan ke emang Q itu kan bisa dianggap value kan
enggak bisa emang. Enggak. Kalau di bahasa lain kayaknya kalau kita define seperti ini dia akan sorting otomatis ke depan si
A-nya. Oh, si ada ya enggak tahulah ee lupa bahasa apa tapi ada yang seperti itu kayak tupelnya
Python kalau enggak salah ya. Enggak tahulah ya.
Set ya kalau di JavaScript ya.
Oh, berarti iya berarti kalau kita definisikan seperti ini jadinya ee dia tetap ya posisinya enggak enggak diubah ya.
Iya. Tapi itu harus kayak berapa tuh 1 juta ya? 1 juta loop ya baru kelihatan bedanya ya.
Iya. Oh enggak bisa ya? Oh karena underscore ya.
Bukan karena objek. Objek kan bukan primitif.
Harus di variabel. Eh, oh iya ya.
Bisa ya kalau di konsol bisa cuman benar ya. Oh berarti I. Anyway, let's go. Next.
Iya. Pokoknya pesan yang apa ee hal yang bisa diingat harus monomorphik sebaiknya disarankan sebisa mungkin ya monomorphic
avoid array object method what oh maksudnya array dot apa gitu ya yang beneran pakai kas pakai class array atau object ya
maksudnya enggak sih? Hmm iya. Eh iya.
Oh bukan. Ini contoh contohnya beneran result. Result itu array.
Oh change operation di array. Padahal jadi to make full copy of array developer friendly to be freed by collector.
Berarti mengoccupy eh apa? menu-menuhin memori ya itu.
Heeh. Map kamu habis map di filter reduce.
Sering sih ini jadi area apa reducer kan banyak begini methodnya. Map filter reduce.
Iya iya karena paling developer friend apa user friendly gitu loh. Apa enak aja bacanya kan. imperatif istilahnya kayak
iya kayak apa langsung apa ya dulu kan pernah kita belajar itu kan imperatif apa artinya di functional programming
eh imperatif dan deklaratif yang satu how yang satu what kan he [berdehem] yang mana yang mana yang mana itu lupa
deh ini kan imperatif ini menyuruhis sebelumnya mafilter redus kayaknya deklaratifak Ya.
Hah. Imperatif deklaratif ini deklar ini kan.
Iya. Coba tanya [tertawa] yang di bawah itu loh nomor dua itu baru imperatif.
Nah, ini ada tulisannya imperatif. Oh, enggak lihat imperatif itu memang how. How ya? What ya? How.
How? Iya. Kalau declaratif itu what?
Jadi kode itu sebenarnya satu dan du sama, cuma yang dua itu lebih susah dibaca aja.
Heeh. Iya. Ini yang lebih cepat yang mana nih?
Iya. Tapi tapi lebih cepat kedua kan dong.
Iyalah lebih cepat kedua lah. Iya itu kan di trade yang stack overflow yang 15 tahun tadi ada kan ini ya
maksudnya kasus kayak gini. Iya. Kalau ini kayaknya keren banget gitu ya. Chain map filter reduce gitu.
Iya, bagus gitu. Dan bisa bangga gitu. W biasanya kan kalau apa namanya ya?
Ee gua misalnya dulu pernah di salah satu fase gitu awalnya kan Nubi nulisnya kodenya imperatif semua tuh.
Iya. Imperatif mulai kayak ya semuanya diserba di looping-loping tapi satu-satu. Terus habis itu mulai belajar belajar kayak abstraction kayak
bikin kayak mapping area map area reduce area filter segala macam. Terus kok keren ya bikinnya kayak gitu jadi
simpel. Jadi kelihatannya kodenya keren rapi, kelihatan senior gitu.
Sekarang gua balik lagi senior sekarang balik lagi ke imperatif.
Yang performance [tertawa] kan emang yang imperatif. Kalau ini sih apa pelajaran yang diingat gara-gara baca stack overflow lawas itu.
Terus ee terus kelihatan keren tergantung ke siapa sih. Justru kalau ke orang awam yang bukan koder ya nomor dua
lah. Lebih keren lebih kayak hacker.
[tertawa] Kalau sama dieview sama orang lain kan keren tuh. Gampang kali dibaca. Wih, enak. Enak ya baca kodenya si X ya. Wih,
simpel gitu kodenya. Kalau gua ya. Lah ini mah lambat [tertawa] sukanya pakai nomor dua lah. Jadi kayak
gitu kan fasenya kan awalnya terus kemudian merasa merasa hebat dan merasa pintar terus akhirnya terus balik lagi. [tertawa]
Cuma kalau gue enggak sih kalau gue preferensi pribadi tetap satu karena nulisnya gampang. Udah mau saya di luar
keren atau enggak keren kayaknya zaman sekarang semua kode ditulis AI juga enggak ada yang full request. Kalau gua
kalau gua mikir mikirnya simpel. Aray yang mau gua mapping atau filter atau reduce bisa gua pastiin enggak
kalau itu enggak bakal pembeludang? Kalau memang tahu hanya spesifik oke cuma 10 12 I don't care. Oke yang simpel
aja yang gant. E karena gua front end jadi dan apa ngerti bentuk ee maksudnya emang udah ada apa pipeline misalnya
dari API enggak akan balikin sejuta array isi sejuta children enggak mungkin meledak kan database-nya maksudnya itu dari awal harus ada pipeline-nya
kalaupun enggak misalnya enggak pakai parameter limit ya tetap maksimal 20 maksudnya itu kan hal yang terkontrol terus kalau list panjang banget misalnya
dari perspektif front end kan di luar di luar JavaScript scriptnya sendiri ya divirtualize lah biar enggak meledak.
Jadi ya ma saya karena tahu konteksnya kayak gitu ya udah yang gampang ditulis aja sih.
Kalau anak PHP yang sudah pengikut garis kerasnya Laravel kan sudah pakainya collection ceritanya semua apa-apa dibikin collections.
Collection sudah punya sudah punya segudang segudang helpers lah ceritanya gitu kan sudah bisa di chaining chaining segala
macam. sebenarnya ya sama jadinya deklaratif begitu.
Iya sama sih ngalamin juga. Nomor dua nomor dua penting kalau kita enggak tahu envir kalau kita enggak tahu
environment-nya kan maksudnya kalau yang contoh sebaliknya yang gua bilang tadi kan gua tahu apa udah terkontrol API
yang dipanggil enggak mungkin tiba-tiba ngeluarin 1 juta ee array yang isinya sejuta item. Nah, kalau misalnya bikin
apa ya yang kita enggak bisa memprediksi data yang diterima ya emang harus dua sih suka pakai pakai imperatif itu kalau
lagi bikin cı cai comand kan gua sukanya nulis cuk apa-apa semuanya misalnya mau nulis eh copy files atau mau bikin synchronization
mau migration mau conversion itu bisa pakai apa selalu gua tulis CLI untuk bisa dijalankan berulang-ulang.
Nah, kalau di Sela itu gua usahakan kodenya enggak indah, kodenya imperatif, semuanya serba balik balik ke eh basic
pokoknya looping ya, looping for bahkan for each gua gua ini for each itu enggak enggak pakai karena for each itu lebih
lambat daripada for iya for loop jadi semuanya pakai for sudah dipastikan jadi ee karena bisa jadi yang gua
convert atau yang gua synchronize itu bisa 10.000 data, bisa ratusan ribu yang dibching.
H oh iya kalau itu sih emang harus seperformment mungkin ya kalau datanya kayak gitu. Iya.
Kalau enggak kita sendiri yang lambat jadinya kalau jalanin beran lambat bisa stuck lah kalau datanya puluhan ribu. Sama satu lagi pragmatis aja sih.
Ee kalau teman kerja kalian atau mungkin tim lead atau siapalah yang ngreview ng-review kode kita emangnya kelihatan
performance rak ya udah ikutin aja. Yang penting kita tahu sintaksnya kan ya.
Kalau gue sih pragmatis kalau gue nulis sendiri dalam kondisi yang tadi yang udah udah ketahuan enggak enggak akan
ada 10.000 data atau maksudnya data yang ekstrem ya jujur bakal ee nulis nomor satu karena gampang ditulis. Cuma kalau
misalnya ya itu ada kondisi ada data yang jumlahnya besar banget, kondisi enggak diketahui atau mungkin ee orang
reviewer kodenya emang performance ya yang penting bisa dan tahu caranya nulis nomor dua kan.
Atau lagi interview ya kan lagi teknikal interview spesifik disuruh tulislah kode yang performance. Nah, atau kalaupun enggak kalaupun enggak
disuruh gitu, kita pamer dong. Saya bisa dong nulis kode yang performa. [tertawa] Padahal pas sudah diterima nulis kode
beneran di kerjaan nulisnya yang nomor satu imperatif. [tertawa] Iya.
Loh, lagi-lagi kan asal ya itu tadi ada ee kondisi yang aman.
Tapi kalau mau pakai imperatif tapi clean code itu bisa enggak ya?
Definisikan clean code itu apa? Apakah kalau kode imperatif itu enggak boleh e enggak diterima di clean code atau
gimana? harus kayaknya bisa-bisa aja yang kayak apa ya maksudnya yang best practices early return lah apalah maksudnya cara ngedefinisiin variabel ya
diikutin itu walaupun pakai yang apa tadi deklaratif ya enggak apa-apa kan eh imperatif iya ini sebenarnya lebih ke
style ini style functionsional kan kalau ini style-nya nonfunsional gitu kan kayak ini enggak ada return ee terus
habis itu ini mute mutate ya kan mutate kalau ini kan enggak gitu kan. Jadi ee kalau clean code membahas tentang eh
muted eh variabel terus eh misalkan imperatif deklaratif. Nah itu mungkin iya enggak bisa. Tapi kalau misalkan maksudnya clean code itu kodenya rapi ya
bisa-bisa aja sih sebenarnya. ini ee salah satu yang bikin apa ya yang kan kalau awalnya tuh belajar R kan
funsional banget kan. Oh eh apa kalau mau nglooping komponen tuh kan harus ada return-nya kan harus jadi harus pakai ee
apa yang kurung kurawal gitu satu dan habis itu dia ee harus pakai map gitu kan kalau mau banyak child-nya kan.
Kenapa map? karena ada return-nya. Udah gitu bisa pakai eh errow function jadi bisa satu baris misalkan gitu kan. Tapi
begitu ee belajar spelt jadi kenanya ke sini kan dia imperatif kan dia enggak ada functional sama sekali. Tapi tapi
memang ee dia fokusnya kan ke performance gitu kan.
Jadi kalau misalkan ditanya apakah ee clean code bisa menggunakan eh apa imperatif kalau misalkan kita pakai SP enggak bisa clean code
dong. Kalau e apa si clean code ini eh tertutup hanya untuk e yang functional eh style gitu? kayaknya enggak deh. Tapi
enggak tahu juga saya enggak belum baca ee buku clean code sih, jadi enggak tahu.
Oh, berarti harus tuh masukin daftar.
Ada kan [tertawa] kita pernah kita pernah bahas kan Klingot atau punya Kingcot yang punyanya si itu ya si
apa lagi yang bikin bukunya lupa si bapak yang suka suka dikit Robert Martinah iya Robert IT Martin
apa uncle ini ya sebutannya ya Robert Martin dia suka yang Uncle Bob.
Uncle Bob. Iya, Uncle Bob yang dia sekarang eh yeping-yeping ya.
Semenjak ada AI dia yeping-yeping bikin video shot gitu marah-marah.
Masa? Iya. Belum lihat sih. K.
Oh belum ya. Yelling at cl ya berarti ya gitulah dan ya sebenarnya bukunya kan itu udah lama dan
ee bahasa pengetaranya juga kita enggak tahu apakah menggunakan Java atau JavaScript atau C++ atau apa gitu kan.
Jadi mungkin mungkin JavaScript deh kayaknya berbeda juga gitu. Enggak mungkin JavaScript kan jadi berbeda juga caranya [tertawa] bisa mentah-mentah.
diimplementasikan juga ind direction nomor 4. Apa itu?
Ini ada kita ambil satu sap lagi, habis itu kayaknya kita mesti udahan ya. Ada yang menarik enggak
kira-kira dari mau tidur ya? Mau tidur biar bisa nonton Prancis.
Iya. I dongar scroll aja ke bawah kalau pusing skip. Pusing skip.
mending benchmarking kita bahas kita benchmarking sama profiling dan terus jadi bisa tahu cara bahasnya nanti cara membasem tools kita
oke i for estibility dengan fun dia itu fun ya ya terserah
benchmark and or use the profiling tools incorrectly. So whatever you do, please put the most effort into benchmarking
correctly. Menarik ya, dua artikel yang kita lihat ngebahas tentang benchmark tentang pentingnya apa? Eh, desainlah benchmark yang betul,
Benchmark, evaluasi. Iya, itu penting. Kalau kayak kayak AI juga kan benchmark-nya itu kan trust me, trust me, bro. Benchmark ceritanya.
Resmi bro benchmarkist. [tertawa] Iya semua apa? Setiap kali launching model baru pasti ada benchmarknya. Wah paling bagus paling bagus yang ngeluarin
benchmark ya punya model sendiri ya udah pasti bagus kan. [tertawa] Enggak mungkin dia keluarin basemark jelek gitu lebih jelek daripada ee ini
model sebelumnya gitu kan enggak mungkin.
Atau kadang diraining diraining sesuai dengan benchmark yang akan dipakai.
Benchmark benchmark janjalan kisi-kisi kisi-kisi benchmark.
Iya. Jadi dia mentraining eh soal-soal benchmark ya. [tertawa] Oke, start with the top.
Yang pertama, start with the top. Your priority should always be optimized function section of code what makes up
biggest part of your own time. If you spend time optimizing anything else than the top, you are wasting time.
Kode yang dipanggil cuma sekali tapi dioptimize setengah mati ya. Yang mayoritas maksudnya yang apa kursi besar dari kode kita tuh ngapain? Heeh.
Jadi yang dampaknya otomatis ee lebih kerasa kan kalau Heeh. bagiannya paling besar ya. Kalau kalau bahasa ekonominya
Pareto Prinipal H 20% untuk e ini versus 80 yang mengakibatkan 80% resources use peningkatannya. Heeh.
Avoid micro benchmark. Run your code in production mode and base your optimization on those observation. engines are very complex
and will of behaveently in micro benchmark than in real world scenario.
Contohnya ini type equal dia ngecek type-nya apakah sama atau enggak di for loop 10.000 kali.
specialize the function for shape type string count number object shap-nya seperti itu. Tapi apakah yang kita tes eh use case kita yang di
dunia nyata apakah seperti itu? A dan B bakal kira-kira jadi kayak apa ya kalau kita nge-benchmark datanya
harus representatif dengan data benerannya. Data nyata. Iya, data yang sebenarnya betul.
Karena ini jadi tidak berguna kalau ee shape-nya berbedanya beda bentuknya.
Iya. Meragukan hasil hasil yang kita dapat.
Wah. Ragukanlah. Ragukan. Ragukanlah. [tertawa] Pesimis. Pesimis. Pesimis dengan hasilnya kita.
Jangan gampang percaya. Jangan gampang percaya. selalu curiga si selalu curiga.
Iya kan si misalnya waktu Wepek dan Turbopec keluar katanya jangan 800 kali lebih cepat. Iya. [tertawa] Ah masa sih C ya? Langsung
masa sih ya pesimis aja dulu gitu.
Tapi eh langkah nyatanya berarti kan nih try to disove.
Jadi kita sudah dapat hasil. Nah, kita jangan berusaha memvalidasi bahwa hasil kita sudah benar. Justru sebaliknya kita
berusaha buktikan hasil kita enggak akurat. Try pjangan yang paling seru ini.
Pjangan jangan menarik. ragukanlah in production mode. Wah, harus selalu dijalankan di eh production, bukan di npm runf, habis itu di benchmark enggak
ya? Minimal dibuild dulu ya walaupun jalannya local host ya. Okelah.
Iya. Kalau RF kan banyak sampahnya, banyaknya banyak uncompile. Iya.
Iya. Malah lebih jelek sih hasilnya.
[tertawa] Malah lebih jelek hasilnya pasti gitu kan.
Pick your target. Different engine will optimize certain pattern. Ya, ini kan saya sudah sebutin tadi ya. Kalau
dioptimize di V8 belum tentu jalan dioptimize di e JavaScript core atau di engine yang lain tuh.
Ada contohnya profiling and tools browser.
If profiling in the browser, make sure you use a clean and empty browser profile. Oh, ini ngaruh ya?
Ngaruhlah. Kalau pakai browser sehari-hari banyak extension.
Kalau lagi ada extension-nya. Heeh. Iya, extensionnya lagi itu lagi ya, lagi mining ya?
Lagi mining. Iya. [tertawa] suka suka performance benchmark gitu kan yang misalnya untuk corw vital aja terus baca baca ininya baca
timelinya tiba-tiba ada yang iya terus tiba-tiba ada extension ya elah ini kan extension yang paling yang yang ngbikin isu artinya harus disable
dulu bikin profile yang baru nih kayak kosong ref tools tuh iya sangat mempengaruhi result rendering code my appear slower power karena dia
ee ngedebug di belakangnya kan dia ngrender juga kan ikut ng-render eh react componen juga kan jadi pasti mempengaruhi
sample versus structural profiling browsering tools are sample based profilers which take a sample of your stack at regular interval this had a big
disadvantage very small but very frequent function and very much under reported. Jadi, ada beberapa eh mungkin beberapa contoh yang
tidak termasuk ke dalam sampel jadi enggak terepresentasi dengan baik ya.
Iya. Nah, ini juga penting ya. Kenapa disaranin Firefox dev tool? karena bisa custom sample interval ya itu atau from ya bebas bisa
iya kalau ini kan kita sering lihat Ivan pasti selalu menyalakan throtling kan iya jadi kita sudah tahulah ya
kadang lupa nyalain terus bingung kenapa lambat iya kok lambat sih the tools of the trade beyond the
regular brol aware of a few experimental that can help you. Contohnya apa?
Banyak sih ya. kayaknya udah lama kan jadi mungkin sudah bukan eksperimental lagi.
Iya udah bukan lagi. Extension to load V8 chromium lock files to understand when is trigger the optimation.
Gua baru tahu ada konsep peneran literal konsep di engine-nya di optimization yaitu tadi kan yang dibahas di artikel
satunya itu when you pass different shapes to a function cuma ada optimization i you can always compile the debug shell
for each gs engine to understand more in details how it work this allow you to run per and other low level tools and
Bode and machine code generated by engine.
Ini niatnya tingkat tinggi ya. Missing enggak ada contohnya. Ini apa gimana sih diell?
[berdehem] Maybe you don't need Rus Java.
Tadi tadi ke mana dia? Getting the code. Benar tadi.
Oh, ini I bisa jadi coba deh.
Ini buat profiling. Profiling. Iya. Jadi intinya ngambil dari kode si browser engine-nya cuma dikasih konsol kan dikasih suruh ngprint lock buat apa?
time timing then throw it into the Linux per profiler record eh gak ngerti harus baca harus baca dengan
set sama iya harus ee itu ya dengan konsentrasi penuh ya dan ini sebetulnya kan kayak target ee
kayak target market target audiens-nya bukan yang pure web developer kan. Tapi yang harus yang web developer atau enggak terserah
tapi harus ngerti cara kerja web engine-nya sendiri.
Iya. Ini kalau yang mau bikin ee apa?
Node js optimized node yang low level low level ya maksudnya ini kan jadi ngecek e kurang optimal di mananya sih kurang optimalnya
gitu kan sebenarnya kalau apa bego-begoannya cuma yang exactly-nya spesifiknya kan berarti harus ngulik cara kerja si engine-nya sendiri g
apa ini the castle if you make this far I invite you to view udah gua udah buka
tadi enggak [tertawa] enggak penting ada hubung nya sama kode sih lukisan terus lukisannya udah gak ada gitu katanya
basically gone from the public internet I share it here lah terus itu maksudnya apa CTA-nya apa ini enggak ada
apa-apa ya maksud enggak ada maksud apa-apa jualan ini dia suka enggak dia suka sama lukisan itukisan itu udah enggak ada di internet
kata dia ya selain di sini terus dia pengin ya biar orang pada melihat lukisan itu udah gitu doang. Why orang
kebanyakan optimizing agak jebol kan dia berusaha [berdehem] berusaha sharing happiness versinya dia.
Iya idealismenya tinggi sekali ya. kalau dia jualan course nanti dihina juga ujung-ujungnya jualan course.
[tertawa] Enggak apa-apalah kalau jualan course mah sah-sah aja.
Iya. Jualan course on optimizing JavaScript gitu ya.
Berarti bisa minta LLM nih ya untuk bikin itu ya. Coba ah nanti apa bikin lukisan bisa bisa buat bikin lukisan bikin
suben. Bikin agent agennya bikin untuk belajar.
Iya. Jadi khusus agennya khusus untuk optimiz JavaScript.
Iya, bisa bikin. Kalau kayak gini mah lebih simpel dibikin skill sih.
Dibikin skill terus kalau kalau perlu baru mau kita panggil dari agen atau kita deploy dari sub ya bebas
kan. Tapi maksudnya ee apa ininya ditempelin ke ee kontennya buat skill aja.
Iya, salah satulah sebenarnya isinya juga mirip-mirip kalau antara bikin subent sama skill kan sama-sama markdown cuman execution-nya cara eksekusinya aja
yang beda ya. Kalau skill masih bisa dijalankan diagent [tertawa] cara pemanggilannya. Nah, itu ee paling menarik itu skill bisa dijalanin dari
subagen atau dari agen utama ya suka-suka kita tapi enggak bisa sebaliknya. Jadi ya mending kalau konten yang gini jadiin
skill. Iya. Subagen enggak bisa dijalankan pada saat kita mau jalanin di agen yang utama enggak bisa ya kalau bukan skill ya.
He. Oke mungkin untuk topiknya segitu aja. Ee sebelum kita udahan, seperti biasa teman-teman bisa menuju ke ee pemilihan topik silakan ke ngobrolin
slash ngobrol.in/diskusi. Kita sekalian pilih topik.
Oh iya, pilih topik dulu. Ngobrol.in/diskusi.
Kalau mau pick topik apa mau lihat lagi? Mau pilih dulu.
Lihat aja. Lihat dulu. Lihat aja.
Eh, web artisi tuh udah belum sih? Kayaknya ini udah di atas dari dulu, Bang.
Webcay, tapi kita enggak ada yang tahu.
Dulu sempat kita mau part du dulu sama Mas Yohan ya.
Heeh. Tapi kayaknya udah enggak relevan ya.
Iya. Nah, cuma kalau dib ya jangan juga sih.
Enggak, gua enggak ahli soalnya webc enggak ada yang ahli kan.
Iya, enggak ada. Kita close aja ya. pernah enggak pernah bikin kerjaan pakai web artis sih.
Nanti kalau mau ngundang ya ngundang aja enggak apa-apa nanti kita open lagi.
Iik sama ma enggak ngerti juga ya gua sama siapa yang pakai. Gua pernah pakai sekilas banget cuma maksudnya
enggak sampai tahu kayak hal-hal menariknya.
Lensing udah belum? Belum sih mau atau yang lain dulu?
Coba yang lain dulu. Itu pusing.
Testing. Nah, testing juga testing play belum ya?
Play boleh testing aja deh. Heeh.
Testing ya. Oke. Iya testing aja.
Baik. Jangan lupa teman-teman kalau ada topik atau ada pertanyaan bisa langsung ke sini nanti kita bisa bahas juga ee baik
offline ataupun online ya. untuk kalau yang punya pro bisa dipromote juga ya kan ya i betul kayak kemarin ya Anvia ya itu
keren banget sih jadi tertarik untuk ngulik lag episode 184 tentang teknik optimasi sudah selesai kita ketemu lagi minggu depan ee selamat
malam selamat istirahat selamat nonton bola buat yang menonton bola bye bye. Bye.
Bye bye. Bye. Apakah Anda baru pertama kali melihat tayangan dan halaman ini atau mungkin telah [musik] kesekian kali melihat
untuk membandingkan kembali dengan lainnya? Jika Anda mencari tahu mengenai layanan web hosting terbaik, kami pastikan Anda berada di tempat yang
tepat. Dengan domainesia dapatkan pengalaman menggunakan layanan hosting yang lebih baik [musik] dengan SSD berperform tinggi dalam infrastruktur cloud yang telah
dioptimalkan untuk kebutuhan [musik] personal maupun bisnis.
Teknologi ini memungkinkan Anda memperoleh layanan yang [musik] lebih stabil serta proteksi dari korupsi data.
Hosting domain Asia juga telah mendukung NOGS, Python, Ruby, [musik] Go, PHP, Java, serta Binary Linux. Lebih dari
200.000 pelanggan telah mempercayakan layanan [musik] hosting di Domia.
Kepercayaan yang kami jaga dengan garansi up 99,9% serta garansi uang kembali 100%.
Buat [musik] Anda lebih mendunia, segera beralih ke we posting Domaesia.
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Sesi kali ini kita akan membahas berbagai teknik optimasi JavaScript. Ayo bergabung dan diskusi ditemani juga sama Ivan dan Eka di sesi malam nanti. 🔔 Yuk mari ramaikan! Dimulai pukul 20:00WIB ya. 🏷 Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 🎁 DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hostin Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
30 Mei 2023
Ngobrolin Core Web Vitals
Core Web Vitals dibahas mulai dari alasan kemunculannya. Sebelum ada patokan bersama, orang mengukur kecepatan dengan YS...
21 Jun 2023
Ngobrolin DevTools
Chrome DevTools dibahas sebagai salah satu alasan sesungguhnya orang bertahan pada sebuah browser — bukan mesin renderin...
1 Apr 2026
Project Management Tools
Episode ini membahas tools project management, mulai dari yang klasik sampai yang lahir karena era coding agent. Diskusi...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .