Optimasi Performa JS - Ngborlin WEB

2:01- Alin-alin. - Nah, anak Pertamina itu.

2:08- Anak Pertamina. - Tapi naikin ke Pertamax udah 1200-900 sekarang.

2:13- Loh. - Iya.

2:16Kok jadi kesana ngomongnya.

2:18Jadi ketemu lagi kita malam ini seperti biasa di hari Selasa Malam.

2:23- Waktunya ngobrol-ngobrol. - Ngobrol-ngobrol.

2:27- Btw nanti Eka nyusul ya. - Iya, Eka belum ada.

2:31Nanti lagi meeting dia, lagi meeting.

2:35- Hah, itu dia orangnya. - Nah, baru diomongin.

2:39- Udah diomongin, udah datang. - Hadir.

2:43- Hello. - Hello, hello, hello.

2:45Sudah selesai meeting-nya?

2:47- Aman. - Aman.

2:49Bisa gak sih ngejok gue masuk secara iseng?

2:52- Masuk di deeper. - Kita belum bahas.

2:55Bisa-bisa.

2:58Kita mau bikin Pertamax JS. Loh.

3:02BPJS aja BPJS.

3:05- BPJS. - BPJS.

3:09Oke, jadi malam ini rencananya kita mau ngobrolin tentang bagaimana tips dan trik lah ya.

3:21Tips dan trik melakukan optimasi performa JavaScript.

3:27Jadi sebagian besar yang akan kita obrolin adalah seputar async, defer, sama dan import.

3:37Yang lain-lainnya juga boleh silahkan.

3:39Jadi kalau temen-temen juga punya pertanyaan seputar bagaimana mengoptimasi JavaScript,

3:45- Bisa ditanyakan juga di kolom komentar. - Silahkan lah ya.

3:48Nah, kita mau ambil topik ini kenapa sih kita perlu async JavaScript, kenapa kita perlu defer.

3:57Nanti kita bahas bedanya sama satu lagi.

4:00- Apa satu lagi? Async, defer dan... - Dynamic import.

4:03- Apa? - Dynamic import.

4:05Dynamic import sebenarnya chunking ya.

4:08Ngemotong-motong dan hanya load saat dibutuhkan gitu ya.

4:12Lebih lat lagi deh ya.

4:14Kenapa sih? Ujung-ujungnya adalah core web vital.

4:20Adalah performance dari page load, dari user experience, nggak cuma page load ya, user experience.

4:26Karena sekarang kan ada itu ya, ada... apa namanya?

4:32Web vital yang baru, core web vital yang baru, baru setahun ini diangkat, yaitu namanya ENP.

4:41Interaction to Next Pain.

4:44Interaction to Next Pain.

4:53Menggantikan first input delay.

4:58First input delay.

5:00Jadi FID sekarang sudah resmi deprecated ya, tahun 2024 tanggal 31.

5:08Tidak dipakai lagi FID.

5:13Jadi penggantinya Interaction to Next Pain.

5:17Jadi JavaScript ini sangat berpengaruh sekali untuk ENP.

5:26Pernah nggak sih teman-teman menggunakan situs, kalau di scroll itu sulit gitu, kayak dia nge-patah-patah.

5:34Itu artinya Interaction to Next Pain.

5:39Bagi di load, tiba-tiba edge-nya berusaha, berusaha nge-load, akhirnya yang kita tadinya cuma scroll,

5:48scroll nggak terjadi apa-apa, tiba-tiba nge-scrollnya udah panjang.

5:52Itu Interaction to Next Pain.

5:54Beda ya sama itu apa namanya, kayak layout shift ya, ini bukan layout shift.

6:00Jadi kayak, ya ini nih contohnya nih kalau di-click turunnya lama, tuh itu kan, nge-stuck gitu yang sebelah kiri tuh.

6:06Oh, jadi ke-pack-nya 2 kali akhirnya dia height lagi gitu ya?

6:09Bukan, jadi di-click nggak terjadi apa-apa.

6:12Kalau di-click, di-click, di-click 2 kali, kan di-click pertama nggak terjadi apa-apa.

6:18Klik 2 kali, bingung kan.

6:21Nah, jadi karena nggak responsif, inilah WebVital.

6:27Ini terjadi semua karena JavaScript.

6:30Enggak juga sih. CSS juga pengaruh, tapi penyebab utamanya JavaScript.

6:36Bahasa awamnya berarti ini pokoknya lemok ya, lelep.

6:39Jadi kalau misalnya kita dapet input dari user bahwa, "Wah, website-nya lemok nih."

6:45Ya, bisa koneksi, network connectivity-nya bisa, tapi kan maksudnya bisa aja berarti lemok atau lelep

6:51itu maksudnya nggak responsif waktu user berinteraksi di halaman itu, kan?

6:57Betul.

6:59Perlejian. Ya, lezi loading lah ya.

7:05Tapi untuk, bukan hanya untuk image.

7:07Kalau lezi loading itu kan lebih ke image gitu ya, tapi ini lebih ke script.

7:14Terutama JavaScript yang kita akan bahas malam ini.

7:19Jadi GNP itu adalah bagaimana menilai sebuah halaman, responsiveness sebuah halaman

7:28ketika user ingin berinteraksi dengan halaman tersebut ya.

7:33Baik untuk click, atau tap, atau tombol atas, tombol bawah, scroll, dll.

7:41Ini ada detail-nya lagi ya, oke.

7:46Jadi untuk, salah satu untuk meningkatkan GNP ini, kita bisa menggunakan tiga hal tadi.

7:54Yang pertama adalah script asing, devr, dan juga nanti dynamic import juga ada hubungannya.

8:03Tapi kita akan bahas tentang elemen script dulu kali ya.

8:06Elemen script itu ternyata perkembangannya udah banyak kan.

8:09Kalau dulu kan cuma script kemudian type-nya apa?

8:14Ada dulu text JavaScript awalnya kan.

8:17Terus sampai situ muncul modul sama, apa? Type sama dengan modul.

8:24Yang buat modul ES6 itu?

8:26Type sama dengan modul?

8:28Type sama dengan modul.

8:30Sama dengan modul. Jadi bisa kita pakai ES modul gitu kan.

8:34Terus ternyata sekarang juga ada banyak atribut-atribut yang lain.

8:38Nah yang kita mau bahas ini asing ini.

8:41Jadi kalau kita, kita panggil atau kita load sebuah JavaScript dengan script element.

8:51Terus kita tambahkan asing atribut.

8:55Artinya script klasik, script klasik akan didownload secara paralel.

9:03Dan akan diavolusi ketika sudah selesai didownload.

9:11Jadi kalau misalkan bedanya adalah kalau misalkan kita tidak menggunakan atribut asing.

9:25Maka paste-nya akan menunggu.

9:30Dia nge-download dulu tapi nggak melanjutkan parsing sisa script-nya.

9:36Kalau bahasa ini, kalau tanpa atribut asing atau differ, dia akan menjadi synchronous load yang akan menjadi render blocking.

9:50Render blocking, iya.

9:52Jadi sama seperti kita lagi nge-load CSS.

9:55Jadi waktu saat page load, nanti kalian teman-teman mau baca namanya Critical Rendering Path itu dari Ilya Grigorik.

10:08Critical Rendering Path ada di web.dev.

10:11Saat page ngerender, nge-parsing dari dokument type itu dari paling atas.

10:22Terus kemudian dari head, body, sampai terus seterusnya.

10:25Saat nge-parsing script, terus kemudian link CSS.

10:31Kalau CSS, dia sudah pasti render blocking.

10:33Karena dia menunggu CSS-nya selesai didownload baru dia terusin rendering-nya.

10:40Sama kalau script tanpa ada atribut asynchronous, asing ini atau differ.

10:46Browser akan stop proses rendering-nya sampai script selesai didownload dan dipars.

10:58Dan dieksekusi.

11:00Karena HTML, tag HTML itu dia sifatnya serial kan.

11:07Jadi dari atas ke bawah.

11:09Ketika sampai ke body, di body ada script.

11:11Nah script ini yang akan didownload dulu, kalau script dengan SRC.

11:18Yang akan didownload dan dieksekusi.

11:21Baru kemudian ke divid root, baru kemudian ke sini.

11:24Dan dia tidak akan ke bawah sebelum proses tag-tag ini selesai.

11:31Kalau kita tambahkan script asing, maka ini dia bisa secara paralel berlanjut dulu.

11:39Ini juga di belakang layar, mungkin dia sambil download.

11:41Begitu sudah selesai baru dieksekusi.

11:43Jadi agak ditunda sedikit ya.

11:45Ditunda apa? Bukan ditunda ya istilahnya ya?

11:49Tidak ditunda sih, tapi...

11:51Bukan.

11:53Kalau as...

11:55Bukan single-credits kan ya?

11:58Cuma fetching-nya itu di background ya?

12:01Berarti fetching-nya itu running di latar belakang.

12:06Dia nge-fetch di belakang, maksudnya di background.

12:11Di thread yang...

12:13Tidak sih, tetap di thread yang sama, tetapi...

12:16Cycle-nya, tau gak sih yang loop itu?

12:20Event loop.

12:24Event loop, tetap nge-jalanin.

12:28Tetapi dia akan didownload dulu.

12:31Setelah selesai didownload, langsung...

12:34Immediately dieksekusi.

12:36Kalau asingkronus.

12:38Jadi kalau analogi lucu-lucuannya itu kayak pesan makanan, order makanan.

12:44Jadi kita lagi mau kerja nih.

12:46Kalau misalnya yang tanpa asing itu kan...

12:49Kita harus pergi ke warung atau rumah makan.

12:52Kita harus keluar, ambil kendaraan.

12:54Kita pergi ke warung, beli makanan.

12:56Dibungkus di sana atau dimakan di sana, nunggu.

12:59Baru balik lagi, baru bisa kerja lagi.

13:02Kalau ini kan berarti kalau asing, kayak kita order dari aplikasi...

13:07Apa? Makanan dan semacamnya.

13:10Kita order aplikasi, sambil nunggu...

13:12Makanannya dibeliin, disiapin, kita sambil kerja.

13:16Iya, betul-betul.

13:18Jadi ketika makanan yang nyampe...

13:20Ya kerja kita berhenti, kita makan dulu gitu ya.

13:24Oke.

13:26Ini ada kemiripan.

13:29Kemiripan dengan Defer.

13:31Juga masih di elemen script ya...

13:34Ada atribut yang namanya asing...

13:36Dan ada atribut yang namanya Defer.

13:39Bedanya adalah...

13:42Ada nggak di sini Defer?

13:44Bedanya kalau Defer itu...

13:47Dia sampai setelah DOM Content Loaded selesai di eksekusi...

13:52Artinya si JavaScript-nya akan di-queue dulu nih.

13:58Setelah selesai semuanya sampai...

14:02Si browser ini selesai ngerender sampai DOM Content Loaded ke eksekut...

14:06Which is...

14:07Sudah sampai...

14:08Footer lah ya bahasanya sih, sampai bawah di-close.

14:11Sampai bawah di-close.

14:13Selesai, semua aset-aset sudah selesai di-download.

14:17Lalu JavaScript ini mulai di satu-satu...

14:20Mulai di-download, di-parse, dan di-eksekusi.

14:24Jadi udah di paling ujung setelah...

14:27Sebenarnya teknisnya...

14:29DOM Content Loaded, di-eksekusi, di-fire...

14:32Lalu JavaScript-nya di-download.

14:35Dan ini yang aneh, bukan aneh sih...

14:38Ini kan dua atribut berbeda.

14:40Bisa dipakai dua-duanya, kalau mau.

14:43Hmm, oke.

14:45Jadi, kalau dulu kan kita ngakalinnya...

14:49Awalnya kan script itu adanya di-head.

14:52Di-head setelah title atau meta gitu kan.

14:56Di-tag-head gitu ya.

14:58Terus abis itu...

15:00Ada trend yang menyebutkan...

15:02Trend harus dibawah sebelum body tag.

15:04Sebelum body tag.

15:06Iya.

15:08Maksudnya itu kan dia sebetulnya biar render-nya.

15:11Biar UI-nya, DOM-nya dipainting.

15:14Proses painting-nya jalan dulu.

15:16Minimal kan udah muncul sesuatu di layar.

15:19Habis itu baru...

15:21Fetchingnya pas script dan lain-lain.

15:23Dan dengan property atau atribut ini...

15:28Kita gak perlu di-header lagi.

15:31Mau dimana aja tetap menggunakan devr atau asing.

15:34Dia akan melakukan hal yang mirip.

15:37Dan kalau buat asing sama devr ini...

15:40Ada artikel yang bagus tuh penjelasannya.

15:43Buka yang di Google Docs.

15:45Ini ada perbandingannya.

15:48Dan seperti biasa dulu...

15:51Pertama kali kan penasaran banget sama asing devr.

15:54Baca MDN, baca Docs, gak ngerti-ngerti.

15:57Pas baca artikel itu langsung ngerti.

16:00Hebat.

16:03Tapi pas baca MDN tetap aja baca kalimat...

16:06Kan bentuknya kalimat paragraf itu tadi penjelasan.

16:09Yang manggut-manggut, soal tau, begitu selesai baca, apa lagi?

16:12Soal tau.

16:15Nah ini kan script yang tradisional.

16:18Ini yang standar ya, tanpa ada tribut apa-apa.

16:21Ini yang tadi kita bahas.

16:24Terus...

16:26Begitu HTML parser menemukan ini...

16:29Maka akan nge-load scriptnya, scriptnya di-execusi.

16:32Di-execusi.

16:35Semua itu selesai baru mem-parsing...

16:38Kebawahnya baru bisa dilanjutin.

16:41Itu yang tadi kita bahas.

16:44Ya, jadi ada impact terhadap loading time.

16:47Kalau kita tunggu, scriptnya selesai di-execusi.

16:50Kalau scriptnya memakan waktu yang lama...

16:53Maka parsingnya juga akan jadi kayak blank page aja ya.

16:56Alaman putih.

16:59Sisa alamannya.

17:02Nah, ini kalau kita menggunakan cara...

17:05Tradisional seperti ini...

17:08Posisi script akan mempengaruhi loading time.

17:11Jadi kalau kita taro di head, berarti dia nungguin...

17:14Kalau kita taro di head, baru dia ke body.

17:17Kalau kita taro di bawah, penjelasannya di situ juga.

17:20Artinya...

17:23Posisi menentukan prestasi.

17:26Prestasi. Nah, itu kan beneran position matters.

17:29Itu tadi...

17:32Yang baru sampe kita bahas.

17:35Asing soalnya.

17:38Itu kan di-divert tadi, di-divert.

17:41Ya, posisi menentukan prestasi.

17:44Kalau kita taro di head, dia akan...

17:47Load ini dulu, baru dia ke body.

17:50Yang mungkin menyebabkan alaman web kita...

17:53Ada alaman putih dulu.

17:56Kalau scriptnya, apalagi scriptnya gede gitu ya.

17:59Atau melakukan pekerjaan yang berat.

18:02Nah, kalau kita taro di bawah, mungkin itu akan jauh lebih baik ya.

18:05Jadi setidaknya HTMLnya keliatan dulu.

18:08Kecuali kalau...

18:11Menggunakan metode client side rendering.

18:14Gak ngaruh. Soalnya...

18:17HTMLnya isinya div dengan id root kosong.

18:20Sama aja. Gak keliatan juga.

18:23Kan biasanya terjadi flash of unstyled.

18:26Flash of unstyled content.

18:29Jadi putih baru ke log.

18:32System font semua.

18:35Ya.

18:38Nah, kemudian...

18:41Nah, ini yang kita bahas tadi tuh.

18:44Pada ke-2 common solution, script tag-nya ditaro di paling bawah.

18:47Di sebelum closing body tag.

18:50Nah, kalau kita seapus itu harus men-support browser yang...

18:53Belum bisa asing divert.

18:56Dan itu lama banget kayaknya, mungkin browser.

18:59Lebih dari 5 tahun yang lalu kali ya.

19:02Nah, itu ya...

19:05Solusi lama, solusi old school.

19:08Sebelum closing body tag itu ya bisa dipakai.

19:11Nah, kalau solusi yang baru itu tadi.

19:14Itu asing dan divert.

19:17Asing dan divert.

19:20Asing dan divert keduanya cara penggunaannya mirip.

19:23Jadi tinggal tambahkan atribut asing.

19:26Atau divert. Nah, bedanya yang tadi ya.

19:29Dan itu dia akan melakukan...

19:32Pekerjaan secara paralel atau...

19:35Secara sincronus lah ya.

19:38Soalnya nggak bilang paralel ya.

19:41Soalnya kan single thread kan.

19:44Jadi mungkin dia akan melakukan...

19:47Menunda, bukan menunda ya.

19:50Akan melakukan men-download fetching.

19:53Fetching script dan juga eksekusi.

19:56Ketika main thread-nya lagi...

19:59Tingkat kesibukannya rendah.

20:02Tidak terlalu sibuk, lagi udah...

20:05Pekerjaannya udah berkurang.

20:08Sedangkan Devar, Devar ini dia menunda.

20:11Menunda proses download...

20:14Atau fetch dan eksekusi script ini.

20:17Setelah...

20:20HTML-nya diparsing gitu ya.

20:23Bukan.

20:26Maksudnya Devar kan?

20:29Devar, Devar, iya.

20:32Script Devar ini artinya menunda...

20:35Sampai dom-content loaded.

20:38Oh, dom-content loaded, iya.

20:41Beda event, beda trigger-nya.

20:44Sampai dom-content loaded di event nggak faham.

20:47Dom-content to dom-content loaded...

20:50Artinya sampai...

20:53Dom-nya semua selesai di-download.

20:56Sampai di-download.

20:59Bukan di-render ya, di-download.

21:02Siap.

21:05Nah, disini ada ininya ya.

21:08Ada perbandingan secara ininya ya.

21:11Oh ya, itu ada ketangannya yang menarik sih.

21:14Tadi sebelumnya ini semua...

21:17Itu ngaruh kalau kita masukin scriptnya di-head.

21:20Kalau misalnya script tag-nya sebelum closing tadi...

21:23Di-bawah nggak ngaruh?

21:25Ya nggak ngaruh juga kan, terakhir. Udah keluar semua kan.

21:28Jadi yang kadang saya bingung...

21:31Dia sudah taruh di paling akhir JavaScript-nya...

21:34Tapi dia Devar lagi, iya.

21:37Nah, cuma ini tipe-tipe pertanyaan interview from N nggak sih?

21:40Terus jelasin.

21:43Oh iya, benar juga.

21:46Ini sinis-sinis hal-hal trivia-trivia yang bisa mumpuli.

21:49Mendasar, mendasar.

21:52Apa fundamental ya? Bagian dari fundamental ini?

21:55Anyway, ini nih, pas lihat grafik ini...

21:58Langsung ngerti, langsung paham.

22:01Apakah kalau kita terbiasa menggunakan framework...

22:04Tetap ini, tetap relate?

22:07Ya, kalau besok ganti framework...

22:10Atau kalau harus handle...

22:13Eh, kalau pakai framework...

22:16Kalau kita pakai script external, GTM lah, apalah...

22:19Itu kan kita harus nambahin script head sendiri juga.

22:22Oh iya, benar juga.

22:25Walaupun di next head, head component itu...

22:28Yang head pakai hal besar itu...

22:31Kita harus paham eksistensi atribut-atribut ini...

22:34Dan kenapa pakai itu.

22:37Benar, benar.

22:40Jadi, kurang lebih kayak gini ya. Mulai parsing HTML...

22:43Terus kalau ini tanpa ya...

22:46Tanpa deferral atau parsing, dia akan fetch script...

22:49Eksekusi, baru kembali parsing HTML lagi.

22:52Nah, selama yang magenta biru itu tetap jadi...

22:55Abu-abu itu kan weight...

22:58Weight itu beneran kosong, putih, nggak apa-apa.

23:01Ya, halaman kosong.

23:04Kalau menggunakan, apa nih?

23:07Masih pakai yang lama, tanpa deferral asing...

23:10Tapi script tag-nya ditaruh di bawah.

23:13Nah, jadi lebih oke karena kan...

23:16Udah selesai parsingnya.

23:19Kalau dengan asing...

23:22Maka parsingnya tetap jalan...

23:25Berbarengan dengan fetch script.

23:28Download scriptnya.

23:31Yang tadi kita pesan makanan...

23:34Mas Gojek-nya pesan pergi ke warung...

23:37Warungnya masak, kita sambil aktivitas juga kan.

23:40Tetapi, begitu makanannya datang...

23:43Kita makan dulu.

23:46Ya, berhenti.

23:49Oke, oke, ngerti, ngerti, ngerti.

23:52Habis itu, baru balik kerja lagi kan?

23:55Setelah selesai makan, kerja.

23:58Kalau defer...

24:01Skripnya, makanan kita pesan...

24:04Tapi kita selesai makan dulu.

24:07Tapi kita harus nyelesain kerja dulu.

24:10Kita selesai, baru boleh makan.

24:13Kalau analoginya pakai makan...

24:16Gampang ya.

24:19Baru nyambung ya.

24:22Nah, gue dapet ide soal analogi makan itu...

24:25Gara-gara baca artikel ini sih...

24:28Mungkin ada laper juga ya pas baca itu.

24:31Jadi pas ngerti-ngerti, ini kayak pesan makanan.

24:34Pas baca MDN tadi...

24:37Defer, atribut, blablabla.

24:40Yang paling sering menjadi pertanyaan...

24:43Kapan pakai sincronus...

24:46Kapan pakai asinkronus...

24:49Dan kapan pakai defer.

24:52Gimana tuh?

24:55Ada penjelasannya.

24:58Dom interactive script smart defer...

25:01Di eksekusi setelah...

25:04Dom interactive event.

25:07Berarti kan kalau butuh seluruh domnya udah selesai...

25:10Ya pakai defer kan?

25:13Nah...

25:16Teman-teman coba ada yang...

25:19Ini nggak punya kasus?

25:22Contohnya kasus.

25:25Kasus pertama.

25:28Pernah relay nggak tiba-tiba?

25:31Pace-nya kadang error...

25:34Mengatakan jQuery-nya nggak exist.

25:37JQuery non-exist sehingga dollarnya jadi nggak bisa.

25:40Atau jQuery load apa ternyata nggak bisa.

25:43Terus kadang bisa.

25:46Tapi kenapa?

25:49Padahal kodanya nggak berubah.

25:52Itu karena kita akal-akalan...

25:55"Ini jQuery kok gede banget ya?"

25:58"Coba di asinkronuskan saja."

26:01JQuery yang di asinkronuskan...

26:04Script line...

26:07Tidak di asinkronuskan.

26:10Script line di asinkronus juga.

26:13Akhirnya yang terjadi adalah balap-balapan.

26:16Begitu balap-balapan terjadi race condition.

26:19Script kalian jalan duluan...

26:22Selesai di download dan di-execusi...

26:25Tetapi jQuery-nya masih on the way.

26:28Ibaratnya kalau soal makan...

26:31Makanannya datang duluan...

26:34Tetapi sendoknya belum datang.

26:37Nggak bisa makan juga gitu ya?

26:40Akhirnya yang mau makan error.

26:43Kecuali pesan makanan padang nggak apa-apa ya.

26:46"Akan pake tangan lah."

26:49Atau tangannya datang belakangan.

26:52"Luh kok ini jadi seram?"

26:55Kan mau duluan ceritanya.

26:58"Ayamnya ditunggu belakangan, nasinya ditunggu dulu."

27:01Atau pesan makanan beda-beda.

27:04Ada nasinya dimana, ayam penyeknya dimana...

27:07Terus ST-nya dimana.

27:10Di sini lah analognya makan nggak bisa dipakai lagi.

27:13Race condition kan.

27:16Mau makan ayamnya dulu datang, nasinya mana.

27:19Benar, benar.

27:22Gak bisa.

27:25Kalau misalnya...

27:28Apa namanya?

27:31Asal pakai...

27:34Tanpa mengerti fundamental bagaimana...

27:37Cara bekerja, "Ah, mau biar cepet nih."

27:40Katanya pakai asing atau pakai differ.

27:43Ternyata semua dibikin asing atau semua dibikin differ.

27:46Biar cepet gitu ya, tujuannya biar cepet.

27:49Page load-nya cepet gitu.

27:52Yang terjadi adalah error.

27:55Nanti semua error bingung. Kenapa?

27:58Terus, next-nya gimana dong?

28:01Kalau jQuery kan atau React library-nya kegedean.

28:04Gimana dong?

28:07Atau biasanya vendor kan.

28:10Vendor JS-nya kegedean.

28:13Main JS-nya 2 MB.

28:16Vendor JS 2 MB, main.js-nya 100 KB.

28:19Contohnya.

28:22Tetapi kan vendor harus duluan kan.

28:25Supaya main.js-nya ada.

28:28Karena dipakai kan.

28:31Jadinya kalau dibikin asing pasti kacau.

28:36Karena yang pasti duluan selesai di download pasti main.js.

28:39Karena satunya 100 KB, satunya 2 MB.

28:42Nah, disinilah perlu yang namanya...

28:47menggunakan, misalnya kalau kasus yang vendor dan main,

28:55ya pakainya differ.

28:57Karena differ itu eksekusinya disesuaikan dengan...

29:02waktu dia di queue.

29:05Urutannya akan sama dengan urutan saat dia ditemukan.

29:09Jadi kalau vendor duluan yang di-diver, baru main.

29:15Nanti saat selesai di download, vendor duluan diparsing, baru main.

29:21Pertanyaannya kapan asingkronos dibutuhkan?

29:27Kalau perlu secepat mungkin diproses ya.

29:32Analitik biasanya ya.

29:35Kalau kita pengen ngitung, apalah time to first, blablabla.

29:39Kalau kita perlu ngitung ada waktu loaded atau waktu...

29:46Biasanya tracking.

29:49Terus kemudian ads.

29:54Pernah nggak sih tau kayak yang hot spot gitu.

30:03Biasanya tau bagian mana yang paling sering di-click user.

30:08Kan itu kan harus seger-sesgera mungkin di-load.

30:13Lalu kemudian cookie, cookie, cookie, cookie konsen.

30:20Cookie konsen itu juga harus mungkin di-load.

30:23Supaya script-script yang lain nggak ke duluan menanam cookie-nya.

30:29Harus nungguin si cookie konsen.

30:33Dibolehin apa nggak gitu kan?

30:35Iya, dibolehin apa nggak, di-stop.

30:37Lalu ads tadi sudah ya.

30:42Paling sering itu untuk di-ads itu ada yang disebut dengan header bidding.

30:48Pernah dengar header bidding?

30:50Enggak, belum.

30:53Ini untuk sebuah ad slot.

31:00Kan kalau kita buka site ada slot-slot ads-nya ya.

31:04Kita itu supaya memaksimalkan revenue.

31:08Kita tentunya nggak cuma hanya dari satu provider ads aja yang kita gunakan.

31:16Kita maunya ads-slot kita terisi dengan ads yang paling banyak duitnya dong.

31:25Paling banyak ngasih duit lah gitu ya.

31:32Jadi biasanya ada disebut lelang.

31:37Jadi slot-nya itu di lelang.

31:39Siapa yang lebih paling tinggi untuk slot-nya di situs kita?

31:45Itu urusannya si advertisement lah ya.

31:48Advertisement itu ada multiple advertisement, slot-nya satu.

31:52Jadi kita bisa nge-load header bidding script kita duluan.

31:57Untuk ngasih tahu untuk menanyakan yang mana yang paling tinggi duitnya.

32:03Itulah yang kita pasang.

32:05Yang akan nge-load.

32:07Memenangkan load ads-slot yang itu di saat page load.

32:15Header bidding ini perlu dijalankan sesegera mungkin.

32:18Karena kita nggak mau juga ads-nya ke delay.

32:21Semakin ke delay ads-nya, semakin sedikit impressionnya.

32:28Tentu yang kayak gini kita perlu ada kompromasi. Kalau kita load-nya secara sincronus, render blocking.

32:39Kalau render blocking, sama sekali ads-nya nggak muncul.

32:43Karena sudah ditinggal user karena kelamaan.

32:46Tapi kalau kita load-nya belakangan sekali, user keburu nge-scroll ke tempat lain.

32:53Kan biasanya kalau ads yang paling mahal itu yang paling atas ya. Top bar gitu ya.

32:58Sudah nge-scroll ke tempat lain. Akhirnya nggak muncul juga, impressionnya nggak bagus.

33:04Atau click-through rate-nya rendah. Akhirnya nggak mau lagi di bidding.

33:09Jadi ada kompromasi. Disitulah kompromasi kita perlu load-nya secara asingkronus.

33:15Gak apa-apa mengorbankan sedikit execution time untuk header bidding. Tetapi ads bisa muncul dan duitnya bisa dapet.

33:25Disitu perlu yang namanya komunikasi dengan client, komunikasi dengan...

33:33Jadi menghubungkan marketing dengan stakeholder dan dengan owner misalnya.

33:41Karena biasanya kadang-kadang dari marketing pengen digenjut suruh banyak revenue, banyak ads.

33:47Tapi dari sisi lain, dari tim lain, ini kok page yang lambat.

33:52Mereka pakai biasanya nge-scan pakai page speed atau pakai web page test gitu.

34:01Atau GT matrix. Ini score kita C. Kenapa? Suruh secepetin.

34:07Satu sisi marketing, stakeholder yang lain bilang, kita butuh ads ini diperbanyak misalnya.

34:17Karena kita perlu mengejar target. Dua hal yang berbeda bertolak-belakang, ads versus page speed.

34:25Disitulah challenge-nya kalau sudah urusannya yang... kalau situs beritanya startup masih baru-baru mulai ada traction.

34:42Masih trafficnya masih rendah, nggak masalah. Tapi kalau kita sudah sampai tahap 1 jam aja mungkin 20 juta request, beda cerita kan?

34:53Itu penampak berapa jumlah ad slot itu harus ada yang namanya budgeting.

35:02Ad slot-nya nggak boleh kebanyakan, tracking-nya nggak boleh kebanyakan.

35:07Terus kemudian GTF-nya harus di-maintain dari sisi client.

35:15Gak boleh kita udah capek-capek nge-optimize, eh ternyata si marketing team-nya semana-mana menanamkan sesuka hatinya tracking script yang mereka mau tambahkan.

35:29Disitulah letak dunia permarketing dan digital marketing versus page load.

35:42Ya, ada pertanyaan yang sangat menarik nih.

35:49Tentang yang ini ya, execute script ini ya, berapa lama wait-nya itu tergantung seberapa complex script-nya betul dan hardware client-nya.

36:02Jadi dari menulis script juga kan ada JavaScript itu by default kan dia, kalau secara load JavaScript itu asingkronus ya, nge-execusi script ya sekarang kan.

36:21Eh nggak sih, tetap aja asal dia tidak berhubungan sama dom-manipulation.

36:28Kalau dia dom-manipulation dia akan ke-block, dia menjadi asingkronus.

36:32Kalau dia eksekusi function, eksekusi yang fetching misalnya kan dia by default sudah asingkronus.

36:44Jadi kalau nulis script pun jangan juga nulisnya misalnya gini, begitu JavaScript-nya di-load, langsung eksekusi seabrek-abrek.

36:56Pastikan yang mana yang mau dijalankan saat itu juga, setelah script selesai di-download dan di-execusi.

37:03Mana script yang perlu di-diver mungkin saat page load, onload, saat onload baru di-execusi, itu juga perlu dipilah-pilah.

37:15Kalau bahasa kerennya three-sacking, mana script yang perlu di-import, mana script yang perlu di-jalankan saat itu, mana script yang bisa di-jalankan belakangan.

37:27Pertanyaan selanjutnya agak oh-oh tapi menarik juga, apakah kita perlu mengakomodasi user-user yang mematikan JavaScript di browser?

37:37Tergantung user-nya.

37:43Tergantung aplikasinya juga.

37:45Bukan user-base kita, jadi ini tuh, gue dulu pernah punya pertanyaan yang mirip kayak gini sih, terutama karena kalau misalnya lihat di Twitter,

37:55Circle, Frontend Twitter yang kadang idealis banget itu kan emang sering address itu ya, kayak harus bisa diakses.

38:05Terutama harus bisa diakses itu juga kan banyak layer-nya ya, misalnya kalau user-nya mematikan JavaScript, apakah jadi satu halaman beneran kosong?

38:16Karena misalnya kayak yang tadi dibahas Irfan tadi ya, yang cuma body, react-up-nya di-load ke body jadi cuma satu div placeholder doang.

38:30Nah kalau itu kan jelas buruk ya, maksud saya itu jelas bukan praktis yang bagus.

38:35Tapi kalau misalnya aplikasi kita interaktif, banyak UI interaction-nya, berapa waktu yang dibutuhin secara realistis buat kayak ngakal-ngakalin semua?

38:46Berarti kalau misalnya semua pengen harus bisa tanpa JavaScript-nya, masing-masing interaksi, masing-masing dynamic UI-nya tuh harus dibikinin endpoint sendiri kan?

38:59Kayak dibikin halaman atau halaman terpisah lah baratnya.

39:03Atau semua dibikin form terus ngeload halaman baru dengan query parameter misalnya kalau banyak misalnya apa ya, misalnya search, searching yang banyak filter-filternya.

39:18Nah itu kan kalau misalnya buat dekerjaan, kita gak punya waktu dan resource yang unlimited buat ngerjain itu semua.

39:26Jadi sebetulnya pada akhirnya kalau misalnya buat aplikasi production, ya survey aja userbase kita, berapa banyak sih orang yang beneran nge-disable JavaScript dari userbase kita?

39:38Tapi sebetulnya emang ada sih niche-nya orang kayak ada circle tertentu kayak orang yang conscious banget tentang privacy lah yang terutama biasanya orang negara maju ya kayaknya di Indonesia jarang yang segitunya.

39:50Jadi emang ada dengan jumlah yang sangat sedikit orang yang emang by default matiin JavaScript.

39:56Nah cuma kan balik ke kita masing-masing kan, dianggap worth it gak ngabisin waktu dan tenaga sebanyak itu buat apa?

40:07Pasti satu persatu fitur kita bisa diaksesan pada JavaScript, nah kalau di seluruh project yang selama ini gue kerja di tempat kerja sih jawabannya adalah enggak.

40:21Jadi ya di height aja kalau JavaScript-nya non-active ya paling di atas ada keterangannya "please enable JavaScript" udah gitu doang sih.

40:28Kalau di tempat saya kerja enggak dipaksakan tetapi ada baseline-nya yang penting kalau JavaScript di-disable page-nya enggak rusak, enggak berantakan, masih bisa dibaca gitu.

40:46- Yang main kontennya di-load lah minimal. - Walaupun interaksinya enggak bisa gitu ya.

40:53Ya main kontennya masih bisa di-load, ya menu-nya karena biasanya kan sekarang kan menu, jadi pemilihan ini juga kan ya, jadi pemilihan arsitektur juga kan ya sistem arsitektur juga.

41:08Kalau misalnya tadinya hamburger menu-nya harus dari awalnya pemilihan penggunaan JavaScript akhirnya kita memilih tanpa JavaScript jadi hanya permainan CSS aja.

41:18Jadi hamburger menu bisa lo pakai CSS tanpa JavaScript atau Accordion, ya Accordion kan banyak yang pakai JavaScript.

41:27- Udah ada HTML ya. - Oh, Accordion sekarang udah bisa pure CSS.

41:31Iya, jadi kenapa pindah, jadi bisa pindah hanya tanpa menggunakan JavaScript.

41:37Jadi karena bukan mandatori tetapi kan dijadikan sebuah salah satu test case preferable-nya itu kalau misalnya diusung juga atau dicoba juga produk yang di-develop tanpa JavaScript itu seperti apa.

41:57Nah jadinya kita push boundary ya, jadi enggak, ah nyamannya kan gue pakai React Accordion aja lah gitu. Atau udah terbiasa sama satu library tentu itu aja dipakai dari project ke project, jadi enggak ada perubahan.

42:11Padahal teknologi makin maju. CSS bisa banyak melakukan hal yang banyak.

42:17Jadi tanpa banyak hal yang bisa dilakukan tanpa harus JavaScript jadi solusi.

42:27Untungnya sekarang tuh framework-framework juga udah mulai mengakomodir ini ya, contohnya kayak Astro.

42:37Kita kan sangat mau mengusahakan se-minimal mungkin. - By default tanpa client-side JavaScript. - Iya, by default tanpa client-side JavaScript pun sudah bisa berjalan.

42:49Walaupun mungkin interaksinya nggak bisa gitu ya, nggak bisa di-click. - Tapi lagi-lagi itu tadi kalau ada client-side interaction ya harus mau nggak mau, maksudnya kita harus open JavaScript client-side.

43:02Cuma mindset-nya mulai diubah bahwa kalau content yang nggak perlu client-side interactivity ya harus compatible buat semua.

43:12- Compatible buat semua, iya. Jadi kelebihannya sekarang tools-nya sudah semakin banyak mendukung ke arah sana sih.

43:21Jadi orang-orang juga sudah semakin, apa ya, semakin kritis gitu ya. Kenapa harus semuanya JavaScript gitu kan?

43:28Padahal sebenarnya interaksinya mungkin di bagian bawah untuk komentar doang gitu kan. Yang mungkin bisa di...

43:36- Atau bisa jadi juga, bisa jadi kritik. Ini kan JavaScript dipakai hanya saat dikomentar atau misalnya saat di below the full. Kenapa JavaScript ini harus di-load awal-awal banget?

43:48Dia bisa menggunakan trik-trik kayak misalkan nungguin dia sampai mendekati di ke bawah aja baru di-load si JavaScript untuk komentarnya.

44:03Dari awal karena belum tentu juga orang yang baca artikelnya mau menulis komentar kan.

44:10Jadi ya mungkin secara, apa ya, secara kerjanya itu mirip-mirip kayak yang tadi ya, laziness, lazy loading-nya image kan.

44:26Kalau kita bikin image gallery kan, nggak mungkin semuanya dulu di-load kan. Semua image di-load. Sampai 100-100-nya gitu kan.

44:34Belum tentu juga dia sampai ke bawah gitu. Apa ini? Cortex? - Saya masih ingat.

44:46- Nggak bisa. Nggak boleh, jangan-jangan. Cortex itu kompleks ya. Bukan masalah apa, banyak lah. Banyak faktor.

44:57Cortex itu itu ya, framework baru ya. - Gua udah sempat bakal merusahangin joke, cuma gua nggak tahu itu apa.

45:07Nggak tahu Cortex. Aplikasi pelaporan pajak yang baru. - Iya, baru launching, baru launching, kayak migrasi dari aplikasi yang lama.

45:28- DGP Online ya, DGP Online. - Buat pembaruan, pembaruan.

45:38Terus hubungannya sama Beyond BSI apa? Beyond BSI apa? Saya juga nggak tahu ada masalah apa dengan Beyond BSI.

45:46- Nggak tahu dah. - BSI itu Bank Satia Indonesia kan.

45:51Berarti ada aplikasi namanya Beyond BSI gitu ya. Saya nggak tahu, nggak ngikutin.

45:57- Dan tidak ada hubungannya sama asing dan defer juga sih. Itu masalahnya di luar itu. Masalahnya di projects gitu ya.

46:09Bukan di JavaScriptnya ya. Bukan hanya di JavaScriptnya. Kita nggak tahu ada masalah di JavaScriptnya ada apa nggak ya.

46:17- Nah, ini ada pertanyaan lagi nih dari Krisna. - Good question.

46:27- Bagi itu kalau kita offload ke web worker atau service worker, bisa mendingankan main thread. - Iya, kan ada tuh. Ada service kan? - Parti. Parti Town. Parti Town. Parti Town Builder I/O.

46:47Coba baca ini ya. Coba baca. Saya belum pernah pakai. Coba tahu itu ada yang mencoba eksperimen untuk offload semua tracking-tracking nggak semua ya.

47:04Jadi nanti kita bahas pelan-pelan. Parti Town ini mencoba membuat library. Bukan library, ya. Library ya. Kayak menjalankan third party itu ke web worker.

47:21- Iya, ini dia. - Kayak offload gitu ya. Offload. Untuk ngirimin data yang ini. Mendelegasikan. Nah, lebih tepatnya itu.

47:32Pekerjaan yang tadinya harus dikerjakan oleh main thread, thread utama, sehingga bisa dikerjakan oleh yang di background, yang di belakang layar.

47:42- Tidak mengganggu loading-nya. - Dan baru tahu ternyata itu bagian dari Builder I/O ya. Builder I/O itu kan punya si siapa itu? Mas yang bikin Quick, ya?

47:52- Ya, yang bikin angular 1. - Quick ke QWIKA ya. - QWIKA. - Iya, Quick. Builder. I/O.

48:02- Quick, QWIC, beda lagi. - Beda lagi. - Itu HTTP 3. - Builder. I/O ya.

48:11- Susah banget. Iya kan, ya. - Iya, ini Quick. Framework baru. Framework baru.

48:17- Udah lama sih ini. - Yang bikin adalah... - Iya, itu si yang bikin angular 1.

48:23- Misko, Misko. Pak Misko. - Iya. - Yang bikin angular dulu.

48:29- Nah, tujuannya itu salah satunya. - Builded by performance nerds. Branding-nya aja kayak gitu. Builded by performance nerds.

48:42Goal-nya adalah free up main thread resource to be used only for primary web app execution, sandbox third-party script, isolating long-running task,

48:54reduce layout tracing, throttle third-party script, allow third-party script to run exactly how they're coded without any alterations, read and write main thread DOM operation synchronously.

49:12Belum pernah coba, namun konsepnya menarik dan harusnya bisa meninggankan. Namun nggak tahu juga ya sampai sebatas apa.

49:24Karena ada juga yang sebagian untuk... apa namanya? Sebagian tracking script kalau hanya sekedar page load atau scrolling dan dia nge-trigger dan hanya ngirimkan saja,

49:41mungkin bisa gitu ya, bisa mempercepat. Tapi kan nggak semua ya, karena ada juga yang namanya on-click. Jadi kalau misalnya video di on-click, play, pause, play dan pause, terus mempercepat,

50:00atau download button, atau submit form. Itu kan ada yang namanya DOM. DOM ini juga ya, DOM trigger gitu ya. Trigger by DOM event gitu.

50:17By DOM ya. Itu saya nggak tahu sampai sebatas apa bisa mempercepat karena main thread-nya dibebaskan. Belum ada hasil analitiknya, komparasinya.

50:36Nah itu selama ini agak penasaran aja sih sama perbandingannya. Maksudnya lebih cepat sekian persen itu kalau in the real world dengan operasi yang di-app pada umumnya itu

50:48sesignifikan apa sih? Jangan-jangan cuma beda 0,001 millisecond misalnya. Lagian dari web worker ke main thread itu kan juga setiap harus kirim event kan, misalnya user nge-scroll atau nge-click, kirim event ke web worker-nya baru diproses.

51:07Walaupun itu juga pasti 0,001 millisecond juga sih. Tetap ada ini kan, ada overhead-nya juga kan antara komunikasi antara web worker sama main thread akan jadi overhead.

51:27Jadi tergantung kompleksitas yang kita kirimkan. Kalau cuma hanya kirimkan data, kayak kalau pakai GTM-nya cuman data layer push gitu aja sebenarnya.

51:37Sebenarnya nggak banyak-banyak amat gitu. Nggak nge-blocking apa-apa gitu. Beda ceritanya mungkin kalau ada...

51:47Rendering 3D atau apa kali ya?

51:50Bukan, bukan rendering. Jadi data yang waktu kita mau kirimkan, kita masih melakukan proses komputasi.

52:04Nah itu baru kerasa kali kalau kita lakukan proses komputasi yang berbeda. Ya apalah itu ya.

52:12Ini ada use case-nya. Meskipun seluruh aplikasi web bisa jalan dengan party town, tapi lebih cocok menggunakan kode yang tidak berada di critical rendering part.

52:29Maksudnya yang bukan berdaitan sama UI. Yang tadi itu kan tracking.

52:36Contohnya ya ini ads atau analytics, GTM, mixpanel juga termasuk analytics, apalagi HubSpot ini?

52:47Kayak plugin-plugin model, kayak ada chat yang di kanan bawah, itu termasuk nggak ya? Masuk ya?

52:57Bisa, bisa. Live chat ya? CRM. HubSpot itu CRM.

53:06HubSpot itu juga punya embed juga, form embed.

53:11Oke, jadi tidak semua ya. Tergantung itu juga ya. Kalau misalkan yang berhubungan dengan UI, kalau di delegasikan malah jadi mungkin ada, tadi overhead cost-nya.

53:32Betul, betul. Mending nunggu sampai WASM bisa akses DOM.

53:44Ini komentar yang berhubungan dengan apa ya? Konteksnya apa ya? Yang ini ya, yang tadi, party town tadi.

53:53Emang ada Whatchannel WASM bisa akses DOM? Gak tahu. Kayaknya enggak deh. Kayaknya peruntukannya beda deh.

54:05Gak tahu ya bisa apa. Kalau bisa juga, jadi bingung nggak sih? Karena ada main thread. Sekarang ini kan DOM itu hanya bisa di akses oleh main thread.

54:17Supaya tidak usah nulis JavaScript maksudnya. Seburuk itukah JavaScript?

54:30Keras lah, pakai framework keras. Kan ada kan yang udah bisa ngerender jadi HTML ya?

54:37Iya, coba cari framework-framework yang rendernya di server. Jadi nggak perlu ngerender di client.

54:47Misalkan Laravel kan ada hotwire ya, ada Phoenix Live View, ada hotwire. Hotwire bukannya Rails ya?

54:58Ya itulah pokoknya salah satu lah ya. Jadi server back-end juga berlomba-lomba untuk supaya mengurangi penggunaan JavaScript.

55:09Tapi kalau kita balik ke lagi, kalau udah menggunakan TypeScript, apakah masih experience-nya masih buruk nggak sih?

55:18Ya kalau ditanya kita sih enggak ya, karena kita udah sering menggunakan JavaScript.

55:25Tapi buat temen-temen yang di back-end mungkin agak frustrasi ya menggunakan JavaScript ya. Apalagi yang sudah terbiasa dengan Type.

55:34Terus tiba-tiba JavaScript dynamic type-nya.

55:38Ini loh rocket.rs framework, web framework, pakai Rust.

55:47Ini nggak perlu menulis JavaScript gitu ya? Iya, kayak Laravel cuma versi Rust-nya.

55:55Aduh merah sekali. Kok sakit mata ya? Kayak error-nya React Native gitu ya?

56:01Ini merah putih ya. Ternyata ngantuk, abis itu langsung mulai ya nih.

56:07Ini accessibility-nya berapa sih? Coba klik kanan dulu lah.

56:11Kontrasnya sih kontras, gue rasa kontras, cuma bikin sakit mata aja.

56:17Enggak sih, itu dulu arah ke tulisannya web framework-nya, itu lah web framework.

56:25Ini? Iya, nah, inspect. Terus? Terus ke...

56:32Ya harusnya di situ sih. Udah sih, harusnya ada di sini.

56:37No contrast information available.

56:42Dimana sih?

56:45Ya, coba.

56:49Nggak ada, itu kan image.

56:52Ini image bukan lah, ini text kan? Nggak, text.

56:57Kok nggak ada ini?

57:00Nggak, kelihatan ini kalau pakai... Coba di styles, tab styles.

57:06Tab styles? Dimana styles?

57:10Di bawah, tab styles di bawah.

57:13Terus? Warnanya, cari warna.

57:16Atribut color.

57:18Nggak ada sih.

57:20Color atau background?

57:24Biasanya di hover, dia langsung kelihatan.

57:29Ya kalau ada properties CSS color-nya.

57:34Okay, anyway.

57:40Gimana, kodenya gimana ini? Coba kita...

57:45Itu tadi kan ada contohnya di halaman depan yang bikin sakit mata itu.

57:50Oh di bawah, oh.

57:53Macro use.

57:56Oh ini route-nya, function hello, format.

58:02Oh jadi begini ya.

58:05Terus launch.

58:07Okay, terus.

58:10Ini kan back-end kan?

58:13Oh form juga ada.

58:16Nah itu ngerender, itu web framework kok.

58:21Iya, web framework kan. Ini back-end kan?

58:25Cuma ya nggak pakai client-site interactivity ya.

58:28Oh ini back-end aja.

58:33Full-stack tapi ya.

58:38Menarik.

58:41Websocket and stream.

58:44Data plus support testing.

58:48Kalau ada yang mau belajar RAS.

58:51Itu pokoknya di hype-up-nya tuh semacam Laravel, tapi versi RAS.

58:57Bagi yang nggak mau nulis javascript, tapi nggak mau nulis javascript juga.

59:02Ini sebenarnya kayak pakai bubble aja.

59:05Kayak pakai bubble itu aja ya, di-convert ke javascript ya.

59:09Bubble?

59:11Iya kayak transpile, jadi last code di transpile ke javascript.

59:17Iya, timelapse javascript.

59:20Sama kayak ada yang dulu pernah buat PHP kan.

59:23Nulis PHP, di-convert jadi javascript.

59:27Tapi emang sudah bisa semua gitu.

59:34Semua maksudnya apa tuh?

59:36Maksudnya ya nggak ada limitasi gitu.

59:39Limitasi untuk?

59:42Ya misalnya nggak, apakah semua yang dari RAS itu bisa di-convert ke javascript atau versi?

59:50Ini kan ya framework request response tradisional kan ya?

59:59Oh itu server-side?

1:00:02Oh kirain jadi javascript.

1:00:06Nggak, ini server-side kayak express lah.

1:00:10Yang gue bilang PHP itu dia bisa, ya dia nulis PHP jadi javascript.

1:00:19Javascript itu maksudnya berarti termasuk web API gitu.

1:00:23Iya kayak JSX atau TSX.

1:00:31Oh canggih juga.

1:00:33Nah kalau itu lebih berbayang sih.

1:00:35Ini contohnya nih ada Gleam.

1:00:38Gleam ini selain bisa untuk backend, bisa di-convert ke javascript.

1:00:46Ada tuh misalkan, ya kayak gini nih, nanti bisa di-convert jadi javascript.

1:00:52Nah dia ada nggak disini ya itu namanya?

1:00:56Docs, writing claim, install.

1:01:03Gleam, javascript, nggak ada ya?

1:01:11Gleam, javascript.

1:01:15Itu, Gleam can additionally compile to javascript.

1:01:23Enabling you to use your code in the browser or anywhere else javascript can run.

1:01:30Mana javascriptnya?

1:01:32Dari gini, jadi javascript.

1:01:44Iya bener, javascript itu.

1:01:48Nggak sih, ini belum javascript, tapi udah bisa document query.

1:01:53Bisa nakses, bisa nakses web API kan.

1:01:56Public, fn, digital, fn itu javascript kan.

1:02:00Mana? Bukan lah, ini Gleam.

1:02:02Itu apa?

1:02:04Mana ada public function, javascript semua function kan public.

1:02:09Public, public.

1:02:13Kalau di, ya.

1:02:15Public, public.

1:02:17Ya berarti bikin compiler sendiri ya?

1:02:20Iya, betul.

1:02:23Javascript.

1:02:25Kita udah kemana-mana nih.

1:02:29Kita belum bahas chunking.

1:02:32Perlu bahas chunking apa nanti aja?

1:02:35Soalnya kayaknya agak nggak nyambung ya.

1:02:37Dynamic import.

1:02:43Cukup ya.

1:02:46Kita pilih topik kita selanjutnya yuk.

1:02:49Diskusi-diskusi ya.

1:02:51Oh iya sebelum itu kita, ini saya mau komentar ini.

1:02:54Kapan javascript bisa langsung di browser?

1:02:57Kayaknya tunggu ini bisa dulu deh. Apa tuh namanya?

1:03:02Flutter bisa di browser dulu baru bisa javascript.

1:03:09Lama bener.

1:03:11Cuma itu kayaknya macam udah dari dulu.

1:03:14Cuma kelihatannya counts-nya kecil.

1:03:18Kut, bener-bener terjadi.

1:03:21Kenapa? Apa masalahnya?

1:03:24Jangan salah loh.

1:03:26Types itu tadinya mau diintroduce di ES4.

1:03:30Tapi nggak jadi, 2003 loh.

1:03:32Tahun berapa itu?

1:03:37Jadi batal.

1:03:39Makanya dari ES3 langsung ke ES5.

1:03:43Nggak ada ES4.

1:03:46Sama kayak PHP. PHP 7 nggak ada PHP 5, nggak ada PHP 6.

1:03:52Udah ada types-nya nih.

1:03:54Ada generic tuh, ada generic-nya.

1:03:57Ada macem-macem.

1:04:00Dari ES4. Kalo temen-temen mau, eh kok translate sih.

1:04:03Kalo temen-temen mau, bisa ke sini nih.

1:04:06Archive Mozilla. Atau ada paper-nya.

1:04:09Yang javascript 20 years later.

1:04:13Itu ada.

1:04:15Jadi sebenarnya javascript itu mau ada types.

1:04:19Tapi entah kenapa mungkin ditolak ya.

1:04:21Karena namanya visi-misi awal dari javascript

1:04:26adalah bahasanya harus dinamis dan mudah digunakan.

1:04:29Karena ada script-nya.

1:04:31Istilah script itu kan jadi gampang digunakan.

1:04:35Nggak memudahkan end user atau orang yang baru belajar programming

1:04:40untuk nulis script lah, kira-kira kayak gitu.

1:04:45Paling mentok yang kayak di note itu sih.

1:04:48Kalo yang di note sekarang kan.

1:04:50Typescript definition itu nggak menyebabkan error.

1:04:54Jadi akan di strip. Jadi kode yang ada typescript definitionnya

1:04:59bisa otomatis dihapus typescript definitionnya.

1:05:04Tapi ya nggak bisa ngejalanin kode typescript juga.

1:05:08Cuma nggak bikin error aja kalo ada definitionnya.

1:05:12Dan tidak butuh transpiler atau compiler.

1:05:16Jadi bisa langsung native gitu ya.

1:05:19Kalo browser pake TS apakah akan menjadi cepat? Tidak.

1:05:24Belum tentu. Bisa jadi lebih cepat.

1:05:29Tapi juga di sisi yang lain dengan menggunakan typescript

1:05:35atau type language itu error yang dilakukan oleh developer lebih berkurang.

1:05:45Jadi lebih dari sisi developer experience ya kalo type system itu ya.

1:05:51- Oh karena typescript kan ya menge-enforce type checkingnya dia

1:05:57kalo udah lagi run, time kan. Kalo udah running nih.

1:06:00Mau kata kita nulis kode TS, misalnya argumennya harus number.

1:06:05Kalo prakteknya yang diterima string, ya typescript nggak bisa ngapa-ngapain

1:06:08kalo kodenya udah jalan.

1:06:10Tapi misalnya waktu kita lagi coding error atau untuk compile error.

1:06:15- Iya. Ini kan membantu juga karena semua yang dikirimkan oleh HTML

1:06:21dalam bentuk form atau apa, semuanya adalah string.

1:06:24- String. - Iya.

1:06:26Itu yang kadang-kadang orang miss.

1:06:29Berarti HTML-nya harus dikasih type.

1:06:33Gak bisa juga. Dikirimnya kan pake text. Gak bisa.

1:06:40Dikirimnya kan kalo request response itu kan pake text.

1:06:43Jadi ya tetep aja harus text ya.

1:06:45Jadi lebih ke developer experience betul.

1:06:48- Nah itu DX. Itulah musimnya phone work.

1:06:52- Iya. Jadi dari sisi kecepatan, performance tidak secara langsung berpengaruh.

1:07:02- Soal runtime sih nggak ngaruh ya. - Lebih type safe aja.

1:07:07- DX lebih type safe. - Karena type itu sangat ini lho.

1:07:12Typing itu sangat signifikan lho untuk bukan bugs free ya.

1:07:21Lebih ke arah. - DX maintainability.

1:07:24- Less bugs. - Iya. Sama dokumentasi.

1:07:30Kalau kita mau tahu cara kerja fungsi tanpa harus melihat isinya, kita bisa lihat types-nya kan.

1:07:36Oh dia written integer. Oh parameternya ada 2, tipenya apa.

1:07:42Berarti kalau browser dibundling pake compiler bun, harusnya jadi cepat.

1:07:51Kan sudah di-compile. Gak nangkep sih.

1:07:55Bun itu pake JavaScript engine-nya siapa ya?

1:08:01Pake JavaScript engine kan? Yang punya... - Webkit ya?

1:08:06- Webkit. Jadi sebenarnya sama.

1:08:10Browser itu dan Webkit itu Safari bukan? Eh salah, JavaScript core.

1:08:18Safari pake JavaScript core. - Iya, Safari.

1:08:22- Webkit lebih tepatnya. Safari menggunakan Webkit. Bun juga menggunakan Webkit.

1:08:28- Kalau si Mozilla pake apa kemarin? - Spider monkey.

1:08:36- Spider monkey? - Oh iya.

1:08:38Menurutnya kalau nama-nama hewan itu Mozilla deh. Mereka suka banget sama hewan.

1:08:42- Sedangkan Chrome pake VA. Jadi Node itu pake VA. Bun itu pake...

1:08:48- Yang pakai JavaScript core. Dino itu pake VA.

1:08:52- Dino itu pake VA. Jadi sebenarnya sama engine-nya.

1:08:56- Bikin sendiri dari awal apa ya? - Agak sedikit nangkep karena ada kata compile.

1:09:02Atau compiler. Kayaknya sekarang compile-compiler itu udah agak rancu ya.

1:09:07Kalau dulu kan compile lanjut itu pasti cepat kan dibandingkan interpreter kan.

1:09:12JavaScript mau di-compile pake apapun larinya tetap interpreter.

1:09:15Nggak ngaruh kemana-mana. Compiler itu dari TypeScript di-compile ke JavaScript.

1:09:21Jadi istilah compile itu udah agak berbeda dibandingkan dulu ya.

1:09:26Kalau dulu kan... - Kalau compiler itu jadinya execution.

1:09:30- Eksekusi. Ya file-nya bisa di-eksekusi langsung secara native.

1:09:34- Jadi yang setara sama VA-nya. VA itu adalah engine-nya, runtime-nya.

1:09:41Mesin yang menjalankan kode kita. Binary.

1:09:51Jadi nggak bisa dibaca sama mata manusia binary.

1:09:55Kalau JavaScript bisa walaupun di aglify, di minify, tetap bisa kan dibacakan.

1:10:02Walaupun nggak jelas variable-nya cuma satu karakter gitu.

1:10:07Tapi tetap bisa dibaca. Kalau interpreter itu.

1:10:11Jadi kodenya itu tidak hilang. Tidak di-compilasi.

1:10:15Sedangkan compiler kalau bahasa yang compile ya dia jadi binary. Ego lah.

1:10:24- Lebih tepatnya transpile sih ya sebenarnya transpile.

1:10:28- Iya. Transpilasi. - Pilasi.

1:10:32Kalau bahasa Inggrisnya apa sih? Di-converse sih bahasa Indonesia-nya.

1:10:37- Di-converse. - Di-translate.

1:10:41- Translate dari satu bahasa ke bahasa yang lain.

1:10:44Dari TypeScript, Redscript, PureScript, dan script-script lainnya.

1:10:49Ke JavaScript. Dari JavaScript baru dijalankan di browser.

1:10:52Sebagai informasi juga, tadi kan TypeScript ya.

1:11:00Jaman dulu, Google punya wacana untuk menanamkan Dart ke dalam browser Chrome.

1:11:11Tapi tidak berhasil. - Gimana ya?

1:11:16Kamu bayang di alternate universe dimana Dart beneran diterantik.

1:11:21- Dart beneran diterantik. Mungkin flutter-nya nggak ada.

1:11:25- Tapi bikin sendiri. Firefox bikin sendiri.

1:11:29Semua bikin language sendiri di browser-nya masing-masing.

1:11:33- Yes. Internet Explorer juga sempat. Microsoft sempat mencanangkan

1:11:39mau bikin J++. Kalau nggak salah. - Namanya lucu-lucu.

1:11:45- Jadi dia nggak setuju dengan yang dibuat oleh Netscape pada saat itu.

1:11:51Mocha atau JavaScript. Mereka mau bikin sendiri namanya J++.

1:11:56Untuk browser mereka sendiri. Jadi berantem browser war.

1:12:05Itu yang kejadian browser war.

1:12:08Sebelum kita udahan, kita mau ngajak teman-teman untuk diskusi

1:12:13tentang materi minggu depan. Kira-kira kita mau bahas apa ya minggu depan?

1:12:18Sekalian aja kita omongin sekarang. - Kayak kan kita edisi khusus minggu depan.

1:12:23- Iya kan? - Nggak, minggu depannya lagi.

1:12:27- Jadi, by the way, ya ini asil. - Kan udah pernah.

1:12:34- Udah pernah. - Berarti nggak nonton episode berapa ya itu?

1:12:37- Iya kan? Beda orang. Kita ada di episode lama banget.

1:12:42- Saking banyak ya. Kita aja nggak inget episode berapa.

1:12:45- Episode berapa ya? - Dan nggak inget kemernya apa.

1:12:50- Dari awal kita sejara browser yang pernah. - Awal kan?

1:12:54- Kila sejara browser. Oh, safari doang. - Nggak, pernah kita bahas sampai...

1:13:00- Enggak, inget kok sampe buka Wikipedia-nya yang... - Timeline-nya itu loh ada timeline-nya.

1:13:07- Oh iya iya iya. - Dan cuma itu kayak bahas tentang apa?

1:13:10- Cuma inget banget pernah bahas evolusi browser engine. - Episode 14.

1:13:15Episode 14, judulnya browser. - Oh, sangat nggak spesifik ya?

1:13:22- Sangat tidak spesifik. - Teramban, teramban, teramban.

1:13:26- Jadi, kita udah membahas. 14, 14 itu tahun berapa ya? 2022 ya? 2023 ya?

1:13:32- Ya, 2 tahun lalu. - 2 tahun lalu.

1:13:35- Ya, mungkin ada yang belum ngeh ya. Kita sudah mengundang dari 2 tahun yang lalu.

1:13:41Kita sudah sempet bahas. - Udah tahun ke-2.

1:13:45- Bahas NitroJS. Oh, menarik nih NitroJS.

1:13:52- Buka GitHub-nya kita, Mas. - Oh iya, buka GitHub ya.

1:13:56Bentar, bentar, mau diatur dulu nih. Kita punya GitHub Discussion.

1:14:02Jadi, kalau teman-teman mau ikutan join diskusi, diskusinya nggak mesti...

1:14:08apa namanya, nggak mesti dalam bentuk pertanyaan mungkin, atau mau bahas topik,

1:14:17atau mau bahas masalah yang dihadapi, misalkan performa sini kok website saya lambat ya,

1:14:22atau gimana, bisa langsung ke sini aja. Jadi, kita bisa sambil diskusi di luar.

1:14:27- Dan di depan di situ juga udah ada yang dijadiin episode kan ya?

1:14:30- Ada, ini sama Mas. - Kayak video kan udah nih bulan lalu.

1:14:34- Ya, kita close aja nih, kita close. Yang belum, apa lagi?

1:14:40Tadi ada bahas NitroJS, oke, kita close aja ya. Ini apa, idea?

1:14:48- Ideas, ideas. - NitroJS.

1:14:53Dan server engine yang dipakai berbagai framework besar, oke.

1:14:57- Bukan, maksudnya NitroJS itu adalah server engine yang

1:15:01dipakai beberapa framework besar.

1:15:07- NitroJS, yang dipakai oleh beberapa framework besar.

1:15:17- Framework besar, contohnya apa framework besar ini?

1:15:20- Setaran dari Mas Alif Nuriana. - Oh iya, namanya juga perlu ya.

1:15:26- Dari, ide dari Alif Nuriana, oke.

1:15:37Protokol untuk transfer data, Tiatmoko. Protokol untuk transfer data,

1:15:46ini apa nih? GRPC, RSI-PI, gitu ya? Atau apa nih, protokol?

1:15:52- Http, websocket, gitu ya? - Http.

1:15:56- Udah kita bahas ya. - Ftp, Ftp berarti, Ftp, SMTP, Pop3.

1:16:04- Bisa, bisa, bisa. Kita pernah bahas email, tapi belum bahas SMTP.

1:16:10Http kita pernah bahas, tapi Http doang, belum kita bahas.

1:16:15Websocket udah pernah kita bahas ya, kalau nggak salah ya.

1:16:17- Pernah, pernah. - Pernah sama Mas Ahlinya, Mas Johan.

1:16:23- Genis-genisnya, oh bener ya? Yang ini, Ftp, SSH, gitu ya?

1:16:29- Nggak, SSH nggak. Nggak itu SSH bukan protokol.

1:16:34- Ftp kan ada SFTP. - Iya, yang belakangnya TPP.

1:16:38- Transfer data. - Yang belakangnya TPP, transfer protokol.

1:16:42Blablabla TPP, Http, Ftp.

1:16:46- Iya, SMTP. - Ftp, Ftp.

1:16:49- Ftp, SCTV. - Cukup, cukup, cukup.

1:16:57- Protokol, web lain. Eh, protokol apa ya?

1:17:02Itu termasuk protokol web nggak sih? Kayak SMTP gitu?

1:17:05- Nggak, itu email. Bukan web. Webnya cuma Http.

1:17:10Hypertext, transfer protokol.

1:17:16Protokol seperti, protokol bahas, apa ini? Protokol, apa tadi?

1:17:22Protokol untuk transfer data.

1:17:26Misalkan SMTP, terus apa lagi tadi? Ftp, SMTP.

1:17:35- Http. - Http, Https.

1:17:40- Https ya kali ya. Https, websocket? Buat transfer data?

1:17:46- Itu bukan protokol. - Oh iya.

1:17:50- Eh, kalau mau protokolnya WSS. - RPC?

1:17:54- Iya bener, kalau mau protokol. - Bisa transfer kan?

1:17:56- Bukan, bukan. Maksudnya yang protokolnya itu WSS-nya.

1:18:00WSS, protokol, adakan websocket, skir websocket.

1:18:05- CTI. - CTI, oke.

1:18:12- Dan lain-lain. Ide dari mas Triad Moko.

1:18:21Triad Moko aja ya.

1:18:23Apa lagi? Nux, analog sama solid-start. Analog itu apa?

1:18:31- Oh, masih ada UDP, TCP. - Oh iya bener.

1:18:35Nah, UDP, TCP aja kali ya. Kita bahas ya.

1:18:38- Bluetooth belum bahas. Bluetooth misalnya.

1:18:42- UDP. - Osi model.

1:18:47- Osi model. Seven layer, seven layer.

1:18:52- Gua gak ngerti ini semua, ini semua. - Swap, ada DHCP.

1:18:57SSC, server send event. Itu bukan protokol tapi ya.

1:19:02- Bukan protokol. - Itu cara mengirim data.

1:19:04- Bukan. Itu kan lagi pernah di episode. - Pernah, pernah.

1:19:09- FTP, NTP. Oh, NTP. - Oke, salah.

1:19:14Yang buat update jam itu loh, jam. Yang buat update waktu, universal time.

1:19:21Apa ya protokolnya itu ya, lupa ya. Bukan, NTP.

1:19:26- NTP? - Iya, NTP. Network Time Protocol.

1:19:32Ayo loh. Kalo misalnya handphone-nya naik pesawat, turun di Singapura, terus update jamnya.

1:19:40Itu NTP.

1:19:42- Ya, otomatis aja dari aplikasinya dan settingnya. - Iya.

1:19:46- Ya, otomatis aja tapi kan ada mekanisme. - Bukan dari setting, itu dari...

1:19:50- Dia konek ke NTP protokolnya si Sapala itu entah si Android, entah si iOS, tak tau.

1:19:56Boleh tuh kan pada nggak tau kan, jadi kita bahas ya protokolnya.

1:20:00- Iya, gue juga nggak tau. - Oh, boleh, boleh. NTP ya.

1:20:03- NTP, iya. - NTP.

1:20:05- Ini udah di luar web kayaknya ya. - Apa tuh?

1:20:10Apakah boleh bertanya di luar konteks, boleh?

1:20:15- Asal tidak menyangkut privasi. - Cuma maksudnya di jawab atau nggak tergantung.

1:20:22- Oh, nanya-nya boleh. Nanya-nya boleh, boleh aja. - Boleh terjawab, kalau nggak kan tergantung.

1:20:27- Asal di jawab atau nggak tergantung.

1:20:31- Sama jawaban. Bahas Firebase Data Connect.

1:20:35- Wah, ini boleh. Kita tampung dulu. - Harus nanya ahlinya ya.

1:20:39- Tapi harus cari nanti. - SMA gede Firebase aja seru nih kayaknya.

1:20:43- Ya, bahas Firebase Data Connect.

1:20:48- Semua akan postgrip pada akhirnya. - Iya.

1:20:52- Harus ajak GDE Firebase. - Ya nggak harus juga, cuma lebih seru.

1:20:59- Siapa? Lim kaya, Lim. Lim Sang E.

1:21:03- Oh iya, dia lucu. Seru ngelawak aja udah.

1:21:08- Oke. Nah, kan. - Mas Dito, senyakos.

1:21:15- Langsung ngomong sama Mas Dito. Salah Mas Dito.

1:21:19- Saya titip Makassar. - Oh itu Mas Dito mau ya?

1:21:21- Ayo X. - Nggak, saya mau ke Makassar.

1:21:24- Oh. - Boleh nggak?

1:21:26- Kita bahas Firebase sama Mas Dito aja gimana yang jadi narasubanya.

1:21:30- Iya. Iya. - Mau nggak? Mau ya?

1:21:33- Mau ya. Nanti sebagai gantinya kita ke Makassar.

1:21:37- Iya. Bertiga, bertiga. - Bertiga.

1:21:41- Tuhan minta ke Makassar cuma pengen makan ikan kudu-kudu sama apa itu?

1:21:47- Kudu-kudu. Yang ngasih ide nggak hadir.

1:21:53Coba apa, apakah boleh bertanya di luar Cortex?

1:21:59Nggak boleh, ya. Nggak boleh bertanya di luar Cortex.

1:22:02Di bahasnya Cortex. Apa dia pakai set hosting? Lemot banget. Nggak tahu.

1:22:09- Waduh, nggak tahu. - Kalau lemot itu faktornya banyak ya.

1:22:14Bukan hanya hosting ya. - Nah, kita harus dicek pakai Core Web Vitals juga.

1:22:18- Eh, kalau misalnya kayak kita bahas, salah satu program yang kita...

1:22:26Kita ada ide kemarin itu adalah bahas atau analisis sebuah situs yang kalian setuju.

1:22:34- Iya. Kan kita dulu sempat ada bedah buku. Kita menambah lagi bedah web, bedah website.

1:22:42Nah, teman-teman punya contoh atau ada website yang mau di bedah nggak?

1:22:48Selain website pemerintah. - Dan website yang aman secara aturan.

1:23:00- Yang tidak NSFW. Tidak menyebabkan...

1:23:08YouTube yang tidak menyebabkan YouTube Mas Riza kena ban. - Yes, sampai ini masih...

1:23:20Masih channel pribadi, mohon maaf ya. Jadi tolong dikondisikan ya.

1:23:28Kalau website-website yang di pinggir jurang, tolong jangan ya.

1:23:34- Kalau temen-temen mau... - Masukin aja dulu salah satu topik Mas Riza.

1:23:42Bedah situs. - Bedah web.

1:23:46- Bedah situs lah kalau... - Bedah situs.

1:23:52- Ininya, teman-teman silahkan submit URL-nya.

1:23:58Silahkan submit URL web yang ingin di bedah.

1:24:06- Sekarang no government, no NSFW. Yang NSFW, yang non-NSFW.

1:24:18Ya lebih baik sih situs kalian sendiri ya. - Ya kliennya atau pernah dibikin.

1:24:28Cuma kalau misalnya punya set project atau start-up atau apalah yang emang teman-teman yang in charge.

1:24:36Atau punya klien pun kalau kliennya bersedia, nggak keberatan ya.

1:24:42- Kalau nggak website pribadi juga boleh. Tolong di bedah.

1:24:46Kayak bedah rumah nanti kita ganti. Dirombak.

1:24:52- Tuh kita nge-mentaring dong tapi... - Jangan kebalik dong.

1:24:58Agak ngeri ya. Nggak lah, website-website yang ini aja, misalkan situs berita, misalkan bedah.

1:25:06Situs berita apa ya? Kumparan gitu. Boleh nggak sih? Boleh aja kan?

1:25:12- Ya boleh. Cuma misalnya lebih oke lagi, nggak apa-apa sih, nggak ada turun, nggak boleh kan?

1:25:18Cuma lebih oke lagi sih kalau di-submit sama, ya misalnya pada nge-submit projectnya masing-masing aja.

1:25:24Misalnya saya bikin aplikasi buat blablabla, buat tuker-tukeran bareng bekas atau apalah.

1:25:30Pokoknya ada orang punya project atau start-up, terus pengen di analisa.

1:25:36Terutama yang dipakai orang banyak ya. Kalau blog pribadi kan, maksudnya ya paling gitu-gitu aja.

1:25:42Dan user-nya juga, pengguna-nya mungkin nggak terlalu banyak yang akses.

1:25:48Tapi kalau misalnya ada production app yang dipakai banyak orang, mungkin pengen dicek.

1:25:54- Ya portfolio atau baru habis bikin project apa? - Oh ya portfolio habis.

1:25:58- Kalau showcase project sudah ini-nya mas... - Sudah ada Pak Dika ya? - Sandika, Pak Dika. Kita yang bedah situs aja.

1:26:06Kita benar-benar bongkar kayak bedah rumah deh.

1:26:10- Oh bedah rumah. Nanti bisa, kalau kodenya open source, nanti kita pull request. Wih, gila.

1:26:16- Betul-betul. - Karena pull request-nya nggak sesuai.

1:26:22- Kalau open source, kita pull request. Tapi kalau tidak open source ya, kita cuma liat dari sisi luarnya aja, nggak bisa di-edit kan.

1:26:27- Kayak boom request jaman Hector Burfes gitu. Asal ngedit satu baris.

1:26:32- Nah itu dari Mas Alif tuh. Semfer dan workflow.

1:26:39- Semantic versioning. - Boleh itu. Kita belum pernah. Good idea.

1:26:44- Good idea. Semantic versioning bagus ya.

1:26:47Bahas tentang semantic versioning.

1:26:53Ini bisa di-copy nggak ya? Teksnya tulis aja.

1:26:58Semfer untuk aplikasi web.

1:27:03- Dan serangkaian workflownya. - Dan serangkaian workflownya.

1:27:11Idea dari Mas Alif Nur Liana.

1:27:17- Oke. Cukup untuk sekarang. "Saya terbiasa react, apakah sulit untuk migrasi ke spread?"

1:27:23Tidak. Gampang-gampang. - Sebetulnya UI framework mah semua prinsipnya.

1:27:30Asal fundamentalnya udah kuat, mirip-mirip. Tapi masing-masing kan punya perspektif sendiri.

1:27:38- Bahasa fundamentalnya kuat itu susah. Itu relatif.

1:27:45- Ya, mungkin itu jam terbang sih. Tapi kalau susah sih enggak ya.

1:27:51Cuma kan masing-masing punya paradigma sendiri. Kalau susah, enggak.

1:27:56Cuma harus switch. Jangan maksain mikir dengan mindset react pas lagi ngoding swell.

1:28:03- AHA itu termasuk salah satu yang autodidact kan. Dan nggak punya background programming kan.

1:28:12Dulu belajarnya dari HTML, CSS, JavaScript, atau langsung framework?

1:28:16- HTML, HTML, CSS. - Jadi fundamental itu syarat sebenarnya.

1:28:27Cuman kalau belum terlalu kuat fundamentalnya, mungkin langsung dihadapkan dengan framework.

1:28:37Begitu belajar framework yang lain mungkin agak sedikit gamang ya, bingung gitu.

1:28:42Tapi kalau sudah dapat konsep bagaimana cara front-end framework bekerja,

1:28:51itu tinggal masalah berganti sintaks aja ya, kurang lebih ya.

1:28:59- Iya, beda sintaks ya. Gugling ngetahukan AI assistant sintaksnya gimana.

1:29:07- Apalagi sekarang sudah ada AI kan, jadi bisa nanya-nanya ya.

1:29:11Convert aplikasi react saya menjadi swell. Terus AI-nya tinggal bilang pakai Astro aja.

1:29:21Nggak perlu di-convert. - Bisa dicampur ya, dalam satu aplikasi.

1:29:26Kode existing yang udah terlanjur dibikin pakai react, ya udah tetap react aja.

1:29:30Terus nanti kalau mau nambah-nambahin, bisa pakai swell.

1:29:34Bisa Astro, sebagai Astro fangirl. Jadi bisa ya, promo Astro.

1:29:39- Saya malah senang pakai swell, belajar react kayak skill issue.

1:29:42Banyak yang bilang swell itu memang secara sintaks itu lebih sederhana,

1:29:48tapi swell yang baru juga sudah mulai cukup kompleks juga ya, mirip-mirip juga sama.

1:29:54- Kan udah ada rune, rune, rune. - Iya udah runes, runes.

1:29:58Nah, selanjutnya setelah kita kumpulin ide, kita mau bahas yang mana buat minggu depan?

1:30:05- Teman-teman tolong vote ya. - Tolong vote ya, bisa ke sini.

1:30:10ATTPS, kesana.in/ngobrolinweb. Silahkan di-vote. Sekarang juga, kita tunggu.

1:30:24- Kalau menurut saya, yang paling connect apa nih, yang paling bisa cepat kita...

1:30:30- Protokol. Ini di TCP. - Protokol menarik.

1:30:34- Boleh, protokol... - Ini yang paling seru tadi ya, kita nggak tahu.

1:30:40- Ya, boleh deh. - Ya, maksud saya karena

1:30:44something different aja kan, beda dari yang dibahas kemarin-kemarin.

1:30:48- Semantic versioning. Kalau beda situs kan harus ada website-nya ya.

1:30:57Kita belum ada website-nya, jadi belum di salah.

1:30:59- Beda situs, nunggu submission aja dulu. - Nunggu teman-teman dulu.

1:31:01- Udah protokol aja. - Protokol atau NitroJS menarik nggak?

1:31:06- Boleh, protokol atau Nitro ya. NitroJS. Bentar. Googling dulu.

1:31:13- Semfer tuh. Semfer juga menarik sebenarnya, tapi mungkin untuk 2 minggu atau 3 minggu lagi ya.

1:31:26Wah, nggak ada yang nge-vote. Gimana dong? Oh, kita vote di YouTube aja apa ya?

1:31:32- Vote di YouTube, berarti ada dua kegiatannya ya. - Emang bisa dibikin.

1:31:35- Bisa, bisa, bisa. Bentar ya. - Ada maksimal items-nya nggak?

1:31:40- Enggak. Eh, ada 4 atau berapa gitu. Mana dia?

1:31:46- Start polling, bahas apa minggu depan? - Nitro. - Tadi apa? Protokol.

1:31:56- Protokol, Nitro. - Protokol, UDP, TCP, dan lain-lain. Yang kedua tadi apa?

1:32:03- Nitro ya? - Ya, NitroJS.

1:32:07- Yang ke-3, Semfer. Apa lagi? Yang ke-4? - Yang ke-4.

1:32:13- Cukup lah. - Udah ya, tiga aja ya. Start polling.

1:32:17- Bisa ya dibikin polling ya? - Bisa, bisa. Start poll.

1:32:23Dah, silahkan teman-teman polling di YouTube atau di... Oh ini udah ada yang 2-2-2 nih.

1:32:33Udah situs 2. Siapa yang ini? Bisa kelihatan nggak orangnya? - Enggak. - Enggak kelihatan?

1:32:43Protokol UDP, TCP masih menang sekarang. Kita lihat aja. Langsung.

1:32:57Live vote, live vote, ayo. Dipaksa loh. Oh CI/CD juga menarik loh.

1:33:07- Bukannya udah ya? Lo mau apa? - Continue integration.

1:33:13Boleh lah, kita catat dulu aja ya. Catat dulu aja. Kalau udah ya berarti kita tinggal close ya.

1:33:23Bahas CI dan CD. Ini 2 hal yang berbeda, bisa jadi 2 topik sih ya.

1:33:31Ide dari Mas Efraim. Udah sampai mana? 60%? Kita tunggu sampai 2-1-3-5 ya. 1 menit lagi ya.

1:33:57- Ngasih waktu 1 menit dong. - Mau 5 menit, samaan. Kan udah dari tadi.

1:34:03Kayaknya kalau jumlah penonton kita ada berapa nih jumlah penonton?

1:34:11- Ada 24. Yang aktif berapa? Yang aktif setengahnya mungkin 12. 60%-nya udah milih yang atas tuh nggak nambah-nambah lagi.

1:34:23- Udah, belum. 2-1-3-5 ya. 1 menit lagi. Satuin sama Semfer. CI/CD sama Semfer disatuin.

1:34:33- Emang nyambung ya? - Jangan lah.

1:34:37- Bisa, bisa. - Iya bisa, cuma jangan.

1:34:41- Jangan, CI itu penting dan cukup panjang juga. Tuh, naik lagi malah. 6-4.

1:34:48Sudah ya, berarti deal ya. Kita end ya, polling-nya ya. Berarti minggu depan kita akan bahas tentang protokol.

1:34:58Oke, terima kasih buat yang sudah ikutan polling. Kita akan bahas tentang versiening.

1:35:08Sip, kalau begitu. Oke. Untuk malam ini, udah dulu. Kita ketemu lagi minggu depan.

1:35:18- Saya di different kota. Kota yang berbeda. - Oh, di Manila ya?

1:35:23- Iya. - Jalan-jalan terus, mantap.

1:35:26- Amin. - Asik.

1:35:27- Workcamp ya? - Iya.

1:35:30- Workcamp, oke. Jadi kita akan bahas tentang protokol ya. UDP, TCP, oscilator.

1:35:39- Boleh, nginggul-nginggul. - Terima kasih buat semuanya. Yang udah ikutan vote juga terima kasih.

1:35:48Yang udah ikutan komentar juga terima kasih. Kita akan kembali lagi.

1:35:51Yang udah kasih saran, terima kasih banyak. Kita ketemu lagi minggu depan. Selamat malam, selamat istirahat. Bye bye.

1:35:57Bye bye.

1:36:00Terima kasih telah menonton!