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