Ngobrolin State of JS Bagian 2 - Ngobrolin WEB
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 Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini adalah kelanjutan pembahasan State of JavaScript 2023, berfokus pada meta framework, testing tools, dan build tools. Diskusi dimulai dengan pembahasan meta framework seperti Next.js yang mendominasi pasar, diikuti oleh Nuxt, dan Astro yang mengalami pertumbuhan signifikan. Astro menonjol dengan pendekatannya yang agnostik terhadap framework UI, mendukung React, Vue, Solid, hingga Vanilla JavaScript. Pembahasan juga mencakup sentimen pengguna terhadap berbagai meta framework, dengan Gatsby mengalami penurunan drastis dan Remix yang sempat hype namun memiliki kompleksitas tersendiri. Untuk testing tools, Vitest dan Playwright mengalami kenaikan popularitas yang signifikan menggeser Jest dan Cypress. Playwright mendapat pujian karena dokumentasinya yang di-revamp dan API yang mirip dengan Testing Library. Diskusi juga menyentuh build tools seperti Vite yang semakin dominan menggantikan Webpack, serta runtime baru seperti Bun yang memiliki bundler built-in bernama "Bundler". Episode ini juga menyoroti pain points utama dalam ekosistem JavaScript modern: excessive dominance dari framework tertentu (terutama React), terlalu banyak pilihan (choice overload), vendor lock-in concerns, dan dokumentasi yang kurang lengkap. Khusus untuk Next.js, isu utama adalah App Router instability, server components complexity, dan ketergantungan pada Vercel untuk deployment. Kesimpulan penting adalah pentingnya testing minimal untuk critical business scenarios, dan pentingnya memahami trade-off antara kemudahan penggunaan (magic) dengan kustomisasi.
Poin-poin Utama
- •Next.js mendominasi meta framework dengan pangsa pasar terbesar, namun memiliki pain points signifikan terkait App Router instability, server components complexity, dan vendor lock-in ke Vercel untuk fitur seperti image optimization
- •Astro menonjol sebagai meta framework dengan pertumbuhan dua kali lipat, menawarkan pendekatan framework-agnostic yang mendukung React, Vue, Solid, hingga Vanilla JavaScript, dengan tingkat kepuasan pengguna yang sangat tinggi
- •Gatsby mengalami penurunan drastis popularitasnya dari puncak kejayaan, sekarang lebih banyak pengguna yang memiliki experience negatif dibanding positif
- •Nuxt memiliki paradoks menarik: banyak yang sudah pernah mendengar namun tidak tertarik, namun pengguna existing memberikan tingkat kepuasan yang tinggi - kemungkinan besar karena dikaitkan dengan ekosistem Vue
- •Vitest menggeser Jest sebagai testing framework populer dengan keunggulan speed yang jauh lebih cepat, sedangkan Playwright naik signifikan menggeser Cypress untuk end-to-end testing berkat dokumentasi yang di-revamp dan API yang familiar dengan Testing Library
- •Bun muncul sebagai runtime baru dengan bundler built-in bernama 'Bundler', menawarkan alternatif untuk JavaScript development yang lebih terintegrasi
- •Deno Fresh dan SolidStart mulai mendapat perhatian sebagai meta framework pendatang baru dengan pendekatan yang berbeda
- •Pain points utama JavaScript modern: excessive dominance (React terlalu dominan), choice overload yang membingungkan developer baru, dokumentasi yang kurang (terutama Nuxt dan framework baru), terlalu banyak "magic" yang menyembunyikan konfigurasi, dan isu vendor lock-in
- •Testing penting minimal untuk critical business scenarios seperti login dan page loading, membantu mencegah regresi bug dan memberikan kepercayaan diri saat deploy
- •Diskusi juga menyentuh perbedaan antara framework yang battery-included (lengkap dengan berbagai fitur) versus framework yang minimalis, dan pentingnya menemukan keseimbangan antara kemudahan dan kustomisasi
0:12Selamat malam semuanya, selamat malam, selamat selasa malam, apa kabarnya?
0:22- Mudah-mudahan sehat semua, gimana... - Moga baik-baik semua, absen-absen.
0:27Weekend-nya, weekend-nya, apakah ada yang datang ke IO Extended?
0:32- Tiba-tiba ada yang datang. - Tiba-tiba ada yang datang.
0:36Iya, kemarin kita ketemu 2 orang.
0:39- 2 orang penonton. - Oh iya?
0:41Iya, iya kita ketemu bareng, kawan-kawan.
0:45Asyik, jumpa fans ya, ada jumpa fans pakai meja tangan-tangan gitu enggak?
0:52- Enggak lah. - Belum se-level itu.
0:54Beda sama WPU.
0:57Oh iya, kalau itu berat.
1:00Itu saingannya udah beda level ya.
1:05Tapi seru, maksudnya enggak cuma, enggak hanya foto-foto doang, tapi juga diskusi gitu.
1:12Bahkan sampai diskusi ini, top ekskripsi.
1:18Asik tuh, ada yang sudah mulai mainan AI enggak, ekskripsinya?
1:24- Atau pada AI semua nih sekarang. - Iya, banyak.
1:27Sekarang semua dosen pada AI malah.
1:30Mau propose ke AI, mau pakai Jemah atau Gemini gitu.
1:34Karena abis nonton talk-nya kita, "Wah Jemah nih menarik, bisa jalan di lokal, enggak bayar" gitu kan.
1:40Jadi, cocok lah ya buat kan nomad-nombad.
1:43Tapi kalau saya kan pakai Jemah, terus pakai Olamah kan ya.
1:50- Kalau pakainya tergantung spek laptopnya. - Tergantung spek, kalau M1 udah aman lah ya.
2:01Iya, kalau saya pakainya yang main-main aja ya, pakai laptop saya yang lama, yang i5, enggak pakai 3G.
2:10- Kan bisa, tapi lembut. - Panas.
2:15Cari itu loh, gaming PC.
2:20- Dan memori-nya harus... - Kalau token-nya banyak ya.
2:23Cari gaming PC rakitan, khusus buat kayak gitu, ntar kelar dulu lagi.
2:28Justru saya pakai PC saya yang lama, tetapi ada VGA kart-nya.
2:35GTX 2060 kayaknya yang lama tuh.
2:412060, justru bagus, padahal ini-nya prosesornya biasa aja gitu.
Lihat transkrip lengkap
2:48- Biasa aja. - Prosesor lama.
2:50- Jadi mainannya pakai ini deh, pakai PC. - Iya, lebih cocok sebenarnya.
2:57- Jadi, mending rakit PC ya? - Iya.
3:05Itu kan Mas Riza pernah share itu tuh, apa namanya?
3:09- Yang open source-nya, bukan open source kali ya, yang... - Transformer, apa?
3:18Trans... bukan ya, untuk co-pilot, co-pilot, pengganti co-pilot.
3:23Tapi yang pakai olamak, apa yang dia main kemarin ya?
3:27Ya, itulah.
3:29- Jadinya free kan, kalau co-pilot kan bayar tuh. - Iya.
3:34- Saya pakai itu, saya lupa namanya. - Kencang.
3:38Tapi enggak, saya uninstall, karena...
3:40- Untuk saya kan enggak cepat-cepat amat. - Oh, di laptop.
3:44- Kira indies kita di... - Iya, iya.
3:48- Jadi dia nembak ke PC. - Aduh.
3:50Itu PC lama, udah lah.
3:53- Loh, GTX bagus loh. - Iya, maksudnya secara listriknya.
4:00Oh iya.
4:02- Kita kan harus sustainable juga, Cik Ile. - Benar juga.
4:06Kalau co-pilot kan dibayarin kanton, ya udah lah budo amat lah.
4:12Ya, kalau untuk pilihannya itu ya enggak brainer lah.
4:18- Enggak Apple to Apple ya. - Enggak Apple to Windows.
4:22Enggak Apple to Windows.
4:24Nah, malam hari ini kita bukan membicarakan tentang AI.
4:30Mungkin nanti ada library AI, tapi kita nggak bicara tentang AI.
4:34Tapi kita lanjut membahas tentang state of...
4:38- Lanjutin yang kemarin, yang minggu lalu ya. - Iya, yang minggu lalu.
4:42Jadi minggu lalu itu kita bahas apa aja, minggu lalu kita bahas introduction-nya.
4:48Kenapa terlambat, kemudian demografinya.
4:52Ada negara-negara atau berbagai demografi lain.
4:56- Bahasa... - Bisa lihat yearly income-nya juga loh.
5:00Kalau yang kalian lewatkan coba, itu ke atas tadi Mas.
5:02Enggak berdasarkan bahasa atau berdasarkan library yang dipakai ya.
5:06Ya, yearly income...
5:10Terus bahasa laki-laki perempuan gender ya, experience dan lain-lain.
5:18Terus abis itu kita bahas tentang fitur...
5:22Itu termain seru juga ya.
5:24- Ada hal-hal yang kita nggak tahu. - Ada beberapa yang kita nggak tahu malah.
5:28Kita malah sekalian belajar fitur baru ini, dari software ini ya.
5:32Lalu kita bahas library, nah ini yang cukup seru.
5:37Kemarin kita sudah bahas tentang sentiment analysis-nya.
5:42- Lalu ada retention. - Webpack salah satu yang ini ya.
5:48Salah satu yang menurun trending-nya, trending sentiment negatif.
5:53Ya, masih di atas, tapi dia agak turun.
5:57Kenapa ya? Karena obsolete, atau karena lampau, atau karena jelek, lambat, atau gimana?
6:06Karena orang sudah malas setup, kalian konfigurasinya ribet dan sekarang sudah ada alternatif yang lebih automatis.
6:15Lebih cepat, lebih simpel, karena dibikin dengan teknologi yang baru juga ya.
6:21Webpack itu kan product of its time, waktu dulu ya emang paling optimal udah kayak gitu.
6:27Nah sekarang udah mulai banyak solusi yang lebih simpel.
6:31Sama pengalaman saya, IS Modul kan, ya IS Modul betul.
6:36Salah satunya ISB, IS Modul, terus juga browser udah mulai catch up.
6:43Lebih cepat daripada yang dulu.
6:45Saya juga pengalaman menggantikan IS Lin sama
6:47dengan biome, itu gak perlu pakai konfigurasi, enak sekali.
6:56Wow, plug and play.
6:59Iya, jadi dia ada defaultnya kayak kalau mau tambahin konfigurasi udah.
7:03Jadi memang kayaknya trendnya ke arah kesana ya, jadi konfigurasinya minim,
7:08atau gak ada sama sekali, kalau mau ubah silahkan.
7:11Nah begitu juga dengan, ya roll up, roll down, ada roll down kan?
7:17Masa ada roll down?
7:19Iya, roll up itu kan pake Jepang Street bikinnya, roll down itu pake Rust.
7:28Coba kasih nama nya, lumayan kumur sih.
7:33Semua akan ke-fitting pada akhirnya.
7:35Rust pada akhirnya. Benar, ini menarik juga ya.
7:41Apakah kita perlu belajar Rust?
7:47Kita kan, ya kalau mau belajar boleh, gak ada salahnya.
7:50Tapi kan kalau disini kita konsumen.
7:53Iya sih, kita hanya pengguna ya.
7:56Tapi sambil mulih ya, gak ada salahnya.
7:59Apalagi sekarang ada VT kan, VT itu menggantikan apa ya?
8:05Webpack?
8:06Webpack, saya mulai sekarang masanya project yang saya kerjakan itu,
8:15meskipun project nya project lama,
8:19tetapi kalau misalnya saya lagi build satu plugin tersendiri,
8:23atau salah satu modul yang benar-benar berdiri sendiri,
8:29saya udah gak mau pakai webpack yang ada di root project,
8:33saya langsung di plugin itu isolate,
8:37langsung, gak, saya pakenya udah langsung PNPM sama VT untuk nge-build nya.
8:45Tapi secara nya plugin yang saya build benar-benar isolated,
8:52cuma plug and play aja kalau ada disitu dinyalain jalan,
8:56kalau gak, ya udah gitu, gak ada sengkut-pound sama modul yang lain.
9:02Project besar juga pelan-pelan demigrasi ya, gak pakai webpack lagi.
9:06Tadi tuh baru upgrade storybook, setelah sekian lama,
9:10pokoknya di kerjaan ada project yang pakai storybook,
9:14nah sekarang ternyata mulai 8, major version 8 kesini,
9:19udah by default fit semua.
9:22Kalau mau ganti webpack, bisa kalau misalnya punya config yang ribet ya,
9:31cuma kalau projectnya simple, ya gak tahu pengalaman gue sih,
9:37langsung pakai fit, aman ternyata.
9:40Yang menarik lagi adalah jazz, jazz dan webpack ini kayaknya senasib ya,
9:47mulai ditinggalkan ya, karena ada fites.
9:51Fites, lagi-lagi ekosistem fit itu mencaplok.
9:55Luar biasa ya.
9:58Yang kejapan kan masih event new kan, komunitas kan?
10:02Komunitasnya flu ya.
10:05Tapi bukan event new kan ininya, maintainernya?
10:09Bukan, bukan official.
10:12Bukan, si Anfu-Anfu kan.
10:15Itu juga aktif banget ku ya.
10:19Better Vita atau Moon?
10:22Kan beda.
10:24Beda, satu runtime, satu...
10:28One runtime, Moon itu runtime, Vita itu adalah bundler.
10:33Moon itu penggantinya NPM.
10:36Tapi Vita bisa dijalankan di Moon dong berarti?
10:39Bisa.
10:40Harusnya bisa.
10:42Moon itu pesaingnya NPM ya.
10:47Moon itu node.
10:50Pesaingnya node.
10:55Dia runtime.
10:57Ada ini ya, ada built-in bundlernya ya berarti ya.
11:01Baru tahu sih belum pakai Moon, coba.
11:05Nah mas Risa yang udah pakai Moon tuh, udah pernah ke buy ini bundlernya.
11:10Saya baru install doang, kemarin yang banding-bandingin doang, mandang-mandang.
11:14Gara-gara waktu itu kan kita bandingin apa, size ya?
11:17Iya, bukan kecepatan, kecepatannya compile.
11:21Eh bentar, bundlernya Moon namanya 'dler' bukan?
11:24Mereka lucu sih.
11:25Bundlernya Moon namanya 'dler'.
11:28Bundled build?
11:30Bundler namanya.
11:32Namanya bundled build.
11:34Ah nggak asik, coba namanya 'dler'.
11:37N-D-L-E-R.
11:39Bundled.
11:41N-D-L-E-R.
11:43Bundler.
11:45Bundler, bundler mulu ya bundler.
11:48Oh, kalau dari apa namanya, dari benchmark yang ditampilkan di Moon,
11:55yang adalah subjektif ya dia paling cepat sih ya dibandingkan yang lain.
11:59Tapi ini kan diwajibnya Moon ya.
12:01Dan karena specially, dan apa, itu kan dibikin khusus, test case-nya dibikin yang lukung itunya dia.
12:08Terus lukungin, tapi ada benernya juga sih, mungkin optimal karena kan.
12:12Ya, bisa jadi juga.
12:16Sesuai arsitektur runtime-nya dia.
12:18Betul, betul, oke.
12:20Terima kasih ya, AntiPatternJSU namanya.
12:24Cukup ini ya, menarik ya.
12:26AntiPatternJSU, kita baru tahu juga.
12:28Namanya AntiPattern.
12:30Oke, kemarin kita udah masuk juga ke front-end framework.
12:36Kita udah bahas tentang trending-trendnya React.
12:40Intinya adalah React masih di atas, agak jauh dengan teman-teman yang lain, tapi view...
12:46View catch up.
12:48View mulai catch up, angular turun terus, trendnya dari tahun 2018 dia menurun terus.
12:54Tapi nggak tahu ya, tahun depan ini bakal naik, bisa jadi karena mulai ada fitur yang...
13:01Fitur baru.
13:03Ya, trendnya naik terus, sedangkan solid, ya cukup solid ya.
13:10Tetap nggak banyak yang pakai, maksudnya di production, di lingkup profesional, tetap nggak banyak yang pakai, belum.
13:16Belum banyak.
13:18Kalau solid ya, bukan solid ya, pre-act ya.
13:22Pre-act malah agak turun, tapi sedikit kenaikan cuma 1% dari tahun lalu.
13:27Terus ada lead juga yang so-so.
13:30Tadi ngeliat ada...
13:33Ada pemain baru, HTMX.
13:35Itu bisa dimatiin yang nggak mau, coba di atas itu kan ada Alpine, misalnya macam.
13:40Ada Alpine, Alpine dimana Alpine posisinya?
13:43Oh ini Alpine.
13:45HTMX dibawah, baru mulai tahun ini ya.
13:48Ya kan, baru-baru.
13:50Solid juga naik ya, lumayan.
13:54Trendnya re-act naik-turun, stabil lah ya, bisa dibilang cukup stabil.
14:02Ada stats yang juga mirip-mirip seperti lead.
14:09Terus kemarin kita udah bahas tentang re-act kegembiraan.
14:18Sentiment, positif negatif.
14:23Antara react dan view, jumlahnya hampir mendekati.
14:29Yang isi.
14:31Yang isi, yang isi sama, cuma...
14:35Lo kiohumi banyak yang ada.
14:37Ini juga sama, yang isi 21 ribu.
14:42Ini juga sama, hampir sama ya.
14:46Semua pada ngisi.
14:48Semua pada ngisi.
14:50[suara reaktor]
14:55Gak suka sama, gak suka sama itu tuh.
14:58Gak suka sama react.
15:02Frontend framework lain, ada Astro.
15:08Yang cukup signifikan ya.
15:11Yang cukup signifikan, terus Ember.
15:15Dan Nux ini 8% ya, lumayan banyak juga ya.
15:19Nux JS seberendah ya, itu ngukur apaan sih?
15:22Ada Frontend framework.
15:25Yang isi kali.
15:27Remix juga sedikit.
15:29Astro paling banyak ya.
15:32Oh ini pertanyaannya apa ya?
15:34Favorit gitu, harus pilih satu atau gimana ya?
15:37Gak ada tulisannya lagi ini, pertanyaannya apa?
15:40Di bawah kayaknya, di bawah ada.
15:42Yang kuning-kuning.
15:44Biasanya di atas.
15:48Ini sekadar pertanyaannya.
15:50Mungkin yang mereka paling suka atau gimana ya.
15:54Masa sih pengguna, kalau soal jumlah pengguna gak mungkin ya.
15:57Pengguna Nux JS di bawah Astro, Ember, Nux.
16:01Astro mungkin lebih sedikit ini apa ya?
16:06Atau yang baru mulai pakai.
16:10Cidulnya gak jelas ya?
16:12Oke kita lanjut dulu, happiness.
16:18Ini Frontend secara umum ya.
16:20Semakin menurun ya happinessnya ya.
16:24Oh yang kita bahas seminggu lalu,
16:28kebanyakan pilihan, pusing, ganti pilihan, pusing.
16:31Main pointnya juga sama.
16:33Bikinnya lama.
16:35Masa yang geduk suatu fitur lama,
16:37pada berotes, terlalu cepat, buru-buru.
16:40Mas Donny bilang selain yang populer.
16:46Nux JS sedikit sekali ya.
16:52Btw ada di teman kantor yang gak suka banget sama JavaScript,
17:00karena dia orang backend banget,
17:02dia bisa hampir segala banyak.
17:05Maksudnya dia sekarang bagiannya memang infrastruktur.
17:10Dia mengatakan most of the time yang dia pakai untuk urusan JavaScript
17:17adalah dealing with dependency.
17:19Setupnya, dependensinya segala macam itu aja udah habis waktunya.
17:24Which is true, main pointnya itu kelihatan disini.
17:30Excessive complexity.
17:32Tapi sebenarnya kalau bikin figure,
17:35PSP pun kalau bikinnya pakai Laravel,
17:39komposer JSON itu PSP library dependency-nya banyak juga
17:45dan harus di-link sama itu ya,
17:50versioning juga tergantung kompleksitas.
17:53Tapi kalau dibandingin sama yang pure dunia backend doang,
17:56gak ada round-in-nya ya beda sih.
17:58Lebih cepat JavaScript ya, lebih banyak dan lebih cepat.
18:01Jadi dependensinya itu bisa overload.
18:06Choice overload. Nah itu bahasanya nomor 2. Choice overload.
18:11Ini kemarin kita belum terlalu dalam juga ya.
18:15Ini react-issue, saya yang melihat ini cukup lucu ya.
18:18Excessive dominance. Terlalu dominan ya.
18:21Ini masalah ya buat orang-orang.
18:23Ya buat yang gak suka react, masalah dong.
18:26Oh iya, kita udah bahas juga nih kemarin.
18:29Jadi ini kan sebetulnya pertanyaannya sendiri di survey itu freeform ya.
18:34Jadi orang bukan pilihan, tapi nulis dengan kata-kata mereka sendiri,
18:39terus dikategorisasi, diklasifikasi dengan AI.
18:43Jadi emang gak perfect sih kalau ada keyword kayak slow misalnya.
18:49Itu dimasukin ke kategori masalah performance.
18:52Padahal kadang maksudnya yang slow, yang lainnya misalnya apa sih,
18:56fitur-fitur JavaScript itu dirilisnya lambat karena W3C
19:00atau apa, ambil keputusannya lama.
19:03Jadi ini gak sempurna juga sih kategorisasinya.
19:07Vue.js issue adalah migration issue.
19:11Vue.js issue adalah Vue.js issue.
19:15Tapi bisa diklik kan? 141 bisa aja.
19:20Jawabannya apa? Nah ini yang juga jadi salah satu kendala ya
19:25dari Vue 2 ke Vue 3. Kita udah sempat bahas ya sama warat ya waktu itu
19:31tentang bagaimana pains-nya berpindah dari Vue 2 ke Vue 3.
19:37Kalau Vue.js issue ini apa?
19:41"Reinventing the wheel 5 times a month."
19:45"Vue must not become react."
19:51Oh emang gak ada karasana ya? "They are trying to do."
19:56"React is operated because corporate use, corporate world should just consider the choice."
20:02Oh ini yang kemarin ada juga nih kita udah baca.
20:05"Too many jobs for react and not enough jobs for Vue."
20:10"Lot of frameworks rely on JS exercise learning curve especially coming from Vue."
20:17Menarik-menarik ya.
20:20Oke, nah malam hari ini kita akan lanjut lagi ke arah meta framework.
20:25Yang tadi ada Next.js, ada Nux juga ya yang meta termasuk juga Astro.
20:32- Astro. Gatsby masih ada. - Gatsby masih ada.
20:38Masih lumayan banyak yang pakai ya ternyata ya.
20:42Cukup naik malah. Ada naik 1%. Lumayan.
20:50Nah ini baru head-to-head antara meta framework.
20:55- Jadi ada Next.js, ada Nux, ada Astro. - Gatsby, tragis.
21:03- Yang paling signifikan net-nya Astro ya. - Astro.
21:07Dua kali lipat ya. Sedangkan Next.js ya dominan ya.
21:12- Astro pakai apa? - Pake Astro.
21:15- Astro kan meta. - Meta framework.
21:20Oh framework atau UI library-nya. Apa aja bisa.
21:24- Astro. - Mereka punya built-in format.Astro.
21:28Terus bisa bawa yang officially supported, React, Svelte, Vue, Solid.
21:34Kalau nggak salah JavaScript, Vanilla pun bisa.
21:37Jadi kalau bisa pakai Vanilla JavaScript,
21:39ya mau pakai custom element atau mau masukin lead,
21:43ya mestinya bisa ya. Cuma belum coba.
21:46Terus yang unofficial, kayaknya ada yang bikin integrasi sama apa gitu yang lainnya.
21:53Cuma yang jelas major UI framework atau library supported semua.
21:58Yang kayak React, Svelte, Vue.
22:00Next.js dominan dan naiknya cukup signifikan juga.
22:05Dia sendiri di atas, kemudian ada Nux juga naiknya cukup signifikan juga.
22:09Gatsby, walaupun turun tahun 2003...
22:13Gatsby terepet nggak sejatuh yang disangka ya?
22:15Iya.
22:16Kalau kita pakai patokannya sosmed atau Hacker News kan kayaknya udah nggak ada yang pakai Gatsby.
22:23Tapi sebetulnya dunia nyata kan nggak se-extreme itu ya.
22:27Kayak misalnya apalah website company yang menengah atau apa yang dibuat dengan Gatsby empat tahun lalu.
22:33Salah satu project yang saya maintain masih pakai Gatsby loh.
22:36Makanya nggak mungkin semua langsung di-rewrite.
22:39"Ah, Next.js lagi ngetrend."
22:41Re-write, "Ah, nggak mungkin gitu kan."
22:43Jadi sebetulnya ya walaupun jatuh berkurang nggak terjun bebas juga.
22:48Ya, Eleventy naiknya sedikit ya.
22:52Stabil.
22:54Stabil naiknya lumayan.
22:57Sekarang naik 1%.
22:59Dofusaurus, Solid Start baru mulai.
23:02Denofresh juga baru mulai.
23:04Penetang baru.
23:07Kemudian kita lanjut ke Sentiment.
23:10Nah, ini yang seru orang happy atau?
23:14Lumayan happy ya sama Next.js ya.
23:1844 lawan 13%.
23:21Tapi?
23:23Ya, jadi bar yang punya ringkas summary dulu, bar yang dikiri itu kan udah pakai.
23:28Ada yang senang, ada yang nggak senang.
23:31Terus kalau bar yang di kanan itu apa sih biru-iju ya, toska ya.
23:37Baru dengar doang.
23:39Tapi pengen pakai atau nggak pengen pakai?
23:42Oh, ini 50/50 ya jatuhnya ya.
23:45Tapi itu nggak nyangka.
23:47Kalau kirain orang yang udah denger Next.js tapi belum pernah pakai,
23:51asumsi gue adalah hampir semua akan mau nyoba.
23:55Ternyata nggak.
23:56Ternyata hampir separuh-separuh tuh.
23:5822% mau pakai,
24:0020% udah denger,
24:03belum pakai, dan nggak tertarik.
24:06Gue salah satu dari situ.
24:09Pernah pakai.
24:11Nggak ada project yang mau dikerjakan pakai Next.js.
24:15As simple as that.
24:17Tapi pakai untuk main-main supaya sekedar tahu.
24:21Pakai, sekedar tahu, dan coba-coba.
24:24Oh, begini caranya, udah.
24:26Itu ya berarti beda lah.
24:28Beda kasus sama yang bar yang kanan dan merah.
24:32Kalau yang merah itu nggak pengen pakai.
24:34Bukan karena belum ada peluang kan lah ya.
24:38Hurt of it, tapi interested.
24:40Cuma belum dapat project yang cocok.
24:43Itu ijo.
24:45Itu berarti kalau misalnya suatu hari ada project yang kelihatannya cocok,
24:49ya udah why not, coba kan.
24:51Cuma sekarang belum ada, ya udah nggak usah pakai dulu.
24:54Hanya 1% dari responden yang tidak pernah denger Next.js.
24:59Penasaran.
25:01Tapi 1% kelompok itu cukup tertarik dan cukup involve
25:06buat ngisi supaya state of JS.
25:09Tapi belum pernah denger tentang Next.js sama sekali.
25:12Menarik ya, maksudnya itu bayamin profilnya mereka tuh
25:16orang kayak apa, kerja dimana.
25:18Apakah nggak sosmedan atau ngeliat apa,
25:22channel atau forum diskusi web-web sama sekali,
25:26atau mereka komunitas apalah yang beneran terpisah.
25:29Atau iseng jawab.
25:31Bukan penontonnya ngobrolin web dia.
25:34Berarti anak-anak ngular, kan dia punya segmen sendiri.
25:41Anak-anak ngular, tapi garis keras.
25:43Kalau yang nggak garis keras, kayaknya yang pasti pernah denger ya, minimal denger.
25:49Siapa tahu dia masih berkutat di DQRI.
25:55DQRI garis keras.
25:59Oke.
26:01Nah, yang cukup menarik juga NUX ya.
26:04NUX ini banyak yang denger,
26:07tapi nggak tertarik.
26:11Belum pernah pake.
26:13Lebih banyak yang nggak tertarik daripada yang tertarik.
26:17Daripada yang tertarik, iya.
26:19Tapi sebetulnya buat yang udah pake,
26:22tingkat kepuasannya cukup tinggi, kan?
26:25Cukup tinggi, tingkat kepuasannya cukup tinggi.
26:27Berarti NUX ini ada apa ya,
26:30ada sesuatu yang membuat orang-orang nggak tertarik,
26:33belum tertarik untuk lirik ya.
26:36Ada metafremo yang dipakai oleh Vue.
26:39Vue, Vue.
26:41Vue Press.
26:43Terlain NUX. Ada nggak?
26:45Ada Vue Press ya, berarti ada seingannya.
26:47Astro bisa.
26:49Kalau Astro nggak head-to-head exact,
26:53tapi orang yang suka nge-moding dengan Vue bisa pakai Astro.
26:57Iya.
26:59Jadi ada, berarti ekosistemnya nggak sematang Next.js kan, NUX ya.
27:04Tapi kan spesifik, niche.
27:07Makanya ini sebenarnya sih karakteristik yang niche ya.
27:10Bagi yang di luar itu,
27:12di luar itu maksudnya yang bukan pengguna NUX,
27:15ya kayak banyak yang nggak tertarik lah.
27:17Cuma karena mungkin penjelasan paling gampangnya,
27:22mungkin mereka bukan konderview, ya kan?
27:25Jadi walaupun udah denger, ya sama sekali nggak pengen,
27:28karena emang nggak tertarik sama Vue bisa aja.
27:31Iya, iya, iya.
27:33Kemudian Gatsby, ya kita udah tahu sama-sama ya.
27:36Gatsby menarik nih.
27:38Sebenarnya profilnya mirip sama NUX.
27:40Cuma kalau buat yang udah pakai,
27:43kayak seneng nggak senengnya dibalikin itu.
27:45Iya, kembalikan.
27:47Kalau NUX yang dari sedikit, relatif sedikit yang pakai,
27:51sebagian besar dari mereka senang positive pengalamannya.
27:55Kalau Gatsby, dari sedikit yang pakai, ijo.
27:58Saya 18% itu saya.
28:00Pake, nggak senengnya dibalikin.
28:03Iya, iya, iya. Merah, merah.
28:05Saya maintain, ada maintain project.
28:09Dan NUX saya nggak mau kembangin lagi fitur di situ,
28:11cuma maintain aja, udah.
28:13Berarti kan untuk negative experience.
28:17Masukin data ke halaman aja kalau pakai GraphQL.
28:22Eh, sekarang sih kayaknya udah nggak ya, cuman...
28:25Dia ada Gatsby server, renderingnya ada.
28:28Cuma kan the purpose dari Gatsby, ada ah Gatsby 5 dulu.
28:33Cuman nggak, maksudnya nggak diterapin lagi.
28:36Maksudnya di project yang saya pakai nggak pakai.
28:39Nggak pakai yang 1% renderingnya.
28:42Jadi hanya pakai static side-nya aja.
28:45Static side generator.
28:47Lalu kemudian Astro.
28:49Astro ini banyak...
28:51Astro ini penggunanya lebih sedikit lagi sebenarnya.
28:54Penggunanya lebih sedikit yang udah pakai.
28:56Cuma sebagian besar banget happy, puas.
29:00Wajar, karena kan Astro lebih baru kan
29:03dibandingkan NUX dan Gatsby kan.
29:05Banyak yang nggak tahu, tapi...
29:07Tapi banyak yang nggak tahu.
29:10Di bawah...
29:12Kalau orang kerja biasa,
29:14orang yang nggak terlalu ngikutin.
29:18Maksudnya misalnya mungkin udah kerja settle sebagai developer,
29:22di perusahaan yang bukan startup, yang established.
29:25Gak nonton channel kita.
29:27Gak nonton WPU.
29:29Ya pokoknya nggak ngikutin gitu.
29:31Belum pernah denger Astro kayaknya make sense banget deh.
29:34Maksudnya kebayang profile orang yang kayak gitu.
29:37Ya, ya.
29:39Yang menarik adalah spell kit yang sebenarnya duluan daripada Astro.
29:43Kan apa barangan ya?
29:45Spell kitnya duluan, tapi spell kitnya akan nggak juga ya.
29:49Masih di-maintain nggak sih sama Licharis?
29:52Masih di-maintain lah.
29:54Fulltime malah.
29:56Iya, fulltime di Versel dia.
29:58Oh iya.
29:59Dan kayaknya nggak hire entah berapa ya, nggak terlalu banyak.
30:02Kayak satu atau dua maintainer fulltime lainnya.
30:05Dibayar...
30:07Dibayarnya sama Versel.
30:10Cuma maksudnya apa?
30:11Perjalanannya ya independent, full buat maintain.
30:14Spell kit sih, satu ekosistem.
30:17Tingkat kepuasannya hampir-hampir sama seperti Astro.
30:20Cukup besar.
30:21Ini mirip, dan yang belum pernah dengar itu lebih sedikit dibandingkan Astro sebenarnya.
30:28Tipis, benar tipis lebih sedikit.
30:30Tapi yang nggak mau pakai, yang nggak tertarik pakai lebih banyak ya.
30:3420 persen ya.
30:36Ya, tipis juga sih.
30:37Karena spell kit kan spesifik.
30:39Buat orang kasusnya mirip laksa tadi.
30:41Kalau orang yang emang...
30:45Sudah terperangkap di dunia react ya.
30:48Ya apapun sih, maksudnya punya orang yang nggak pengen ngonding pakai spell,
30:53ya otomatis ke exclude kan.
30:56Nggak pengen pakai spell kit.
30:58Nah, ngomongin dunia react, Remix juga meta framework untuk react.
31:04Tapi cukup besar juga ini.
31:07Tidak tertariknya.
31:1050-50 nih.
31:13Itu kalau diklik angka 25-nya, gimana itu apa?
31:16Ada bisa diklik nggak sih respondennya?
31:18Harusnya bisa kanan-kanan.
31:20Nggak, nggak bisa.
31:21Oh iya bisa.
31:22Bisa kalau ada tanda...
31:24Bigger community.
31:26I wish it have bigger community.
31:28I love the concept of remix, but I hate react.
31:32Oh yang not interested ya, berarti negatif ya.
31:35Negatif.
31:37Project feels like it went dead after Shopify acquisition.
31:41Oh gara-gara dibeli, jadi orang jadi kurang tertarik.
31:44Karena emang, kan kayak di merge sama react router juga ya.
31:51Jadi bukan di merge sih, cuma kayaknya developmentnya bakal lebih fokus di router-nya.
31:58Ini juga menarik nih.
32:00The hype surrounding this project feels artificial.
32:03Oh iya yang cari drama-drama itu ya.
32:07Mungkin maksudnya itu.
32:09Yang membanding-bandingkan dengan framework lain dan secara frontal ya.
32:13Selamat malam, Abu Lucu.
32:16Kamu lucu sekali.
32:18Selamat malam.
32:20One obscure layer on top of the other.
32:26Oh, jadi sebagai framework yang mengaku sangat dekat dengan browser.
32:33Tapi ternyata nggak sedekat itu.
32:37Sepertinya banyak layer-layernya menurut dia.
32:41Nggak yakin akan panjang umur.
32:44Ya takutnya kan gitu di acquisisi, habis itu...
32:49Ya, habis itu hilang.
32:52Remix is not currently a component choice given server component in Next.js.
32:57Oh gara-gara server component juga ya.
33:00Dan kasusnya dia ternyata pakai Next.js.
33:03Ya udah, kan bagi dia, sama-sama pakai React.
33:06Udah ada server component, yang apa yang pindahkan?
33:10Dajar baru lagi.
33:12Menarik-menarik ya.
33:14Ada Remix, ada apa lagi ya?
33:17Yang React-based apa ya?
33:21React-based? Iya, Next.js.
33:24Next.js, Astro.
33:26Next.js, Astro, Remix.
33:29Astro, Gatsby.
33:30Oh, ini Gatsby.
33:33Ini nggak masuk ya? Redwood nggak masuk ya?
33:37Gak cukup banyak kali ya, nggak cukup besar, nggak top 10.
33:42Oke, Eleventy juga kurang.
33:47Dokusaurus ya ini niche ya, sangat niche ya.
33:50Karena ini khusus dokumentasi.
33:52Dan itu punya tujuan spesifik.
33:55Reakt juga nih.
33:57Oh itu React-based ya?
33:59Iya, React-based.
34:00Makanya banyak yang nggak tahu tuh.
34:02Saya juga kalau nggak gara-gara ngobrolin web, nggak tahu tuh.
34:05Makanya dengerin web.
34:07VT, Boon, IS Build, atau No Build?
34:10No Build.
34:12No Build.
34:14Vanilla.
34:17Vanilla.
34:19Eleventy. Ini Eleventy yang saya pakai buat website pribadi nih.
34:23Eleventy itu dari dulu ya.
34:26Dan dia punya apa?
34:29Jadi web ngumpunan kan?
34:31Bisa, bisa dipakai web komponen, tapi...
34:37Ya Vanilla JavaScript sih.
34:39Mau dipakai buat bikin custom element ya boleh.
34:42Ini server side, server side, server side, generator, generator.
34:49Static side generator.
34:51Susah banget ya.
34:53SSG, banyak kan?
34:55Kompleksiti, choice overload sih. Terms-nya aja ada server side generator.
35:02Front-end kan, meta framework-nya itu bukan quick.
35:05Namanya quick city ya kalau nggak salah ya.
35:07Belum masuk ya.
35:09Builder.io bukan ya?
35:11Eleventy, iya saya juga pakai Eleventy.
35:14Wah Mas Donny juga pakai Eleventy ya.
35:16Mantap, mantap.
35:18Ketualan ini, itu yang website yang dibikin Mas Yohan kan. Apa itu yang mau buat?
35:26Oh, WWID dulu ya?
35:30WWID, situasi WWID dulu kan, pakai Eleventy.
35:35Hah, masa nggak?
35:37Kayaknya ya.
35:38Enggak-enggak, itu pakai lead.
35:40Oh iya, iya, iya.
35:42Kok gue kebalik-balik sih lead sama Eleventy?
35:47Quick city bener.
35:49Ini, ini, ini.
35:51Quick city kan?
35:53Ini kan, server focus feature kan?
35:59Quick city.
36:01Quick city.
36:03Preact.
36:05Enggak lah, setting barunya keliatannya belum.
36:07Kalau preact ini,
36:09Quick itu UI library, quick city itu meta framework-nya.
36:15Meta framework-nya yang ada routing dan macem-macem.
36:18Kalau preact itu kan masuk ke front-end ya.
36:21Meta framework-nya preact kan nggak ada ya, dia nebeng kan.
36:24Nebeng masuk next.js tapi pakai preact.
36:27Harusnya apapun yang bisa jalanin, apapun yang bisa jalanin react,
36:30harusnya preact didesain buat compatible dengan apapun yang bisa jalanin react.
36:36Preact itu masuknya ke front-end framework.
36:39Kita udah bahas di minggu lalu, ada preact di sini.
36:43Ada, ini dia, eh mana dia?
36:46Preact itu ada.
36:48Tapi kalau di meta framework itu dia nggak masuk karena dia itu adalah UI library.
36:54Jadi dia mungkin masuknya ke sini nih.
36:57Ke sini, ke Gatsby.
36:59Pokoknya yang bisa jalan, apa, yang menggunakan react itu bisa menggunakan...
37:05Next Gatsby, Astro, Remix.
37:09Cuma mungkin nggak terlalu straight forward ya.
37:12Karena masing-masing meta framework itu kan sebetulnya udah pakai dependensi react.
37:17Nah bisa sih, bisa pasti di-replace pakai preact.
37:20Cuma exactly langkah-langkahnya kayak gimana, setting-nya ribet atau nggak.
37:25Di-compare sama performance benefit-nya.
37:28Kan sebenarnya sekarang juga kalau udah di-compile, misalnya combine antara SSR atau SSG.
37:34Kan nggak semuanya harus di-load di client-side, belum ada island.
37:40Nah itu case by case sih.
37:42Apa performance benefit-nya jangkir balik buat pakai preact itu worth it atau nggak?
37:47Kalau udah pakai meta framework.
37:50Oke.
37:54Nah berikutnya, yang menarik juga Denofresh ya.
38:01Ini cukup baru, tapi bisa melangkahi solid start.
38:05Denofresh ini adalah framework.
38:07Solid start juga baru.
38:09Oh iya solid start, baru solidnya yang udah lama ya.
38:12Solidnya yang agak lama. Ini semua sama anak gue.
38:16Bagian 59 sama 65%.
38:19Nggak pernah dengar Denofresh sama solid start.
38:21Nggak pernah dengar Denofresh ya. Solid start. Solid start itu meta frameworknya solid.
38:25Kita tuh bahas deno, fresh deh kayaknya pernah.
38:28Sempet bahas. Iya waktu island.
38:31Waktu bahas island, bahas sekilas banget.
38:34Bahas sekilas. Dia sinteksnya mirip-miriak.
38:39Episode 1.
38:42Ya episode 1 yang sebetulnya episode 2.
38:46Karena kita mulai dari 0.
38:48Oh iya iya iya oke.
38:50Siap siap siap.
38:52Oke.
38:54Other meta framework, analog.
38:56Apa ini?
38:58Apa ini? Analog paling gede loh.
39:02Kalau kuasar udah pernah pukul masuk fit press.
39:06Other itu dibanding apa ya?
39:09Oh mungkin ada satu input adakah meta framework lain yang belum disebut di atas.
39:16Oh angular.
39:18Tapi pakai fitting.
39:20Oh interesting.
39:22Bisa SSR sama statik state generator loh.
39:27Hybrid.
39:29Kayak mobil aja hybrid.
39:31Dari kapan dia?
39:33Last week update-nya.
39:37Mulainya kapan?
39:40Tahun lalu ya?
39:42Nitro, nitro ini apa?
39:45Terus kuasar, kuasar ini kan framework ya.
39:55Buat multi platform ya.
39:59Iya.
40:01Quick dengan tadi tuh.
40:03Beberapa teman-teman udah membahas.
40:05Quick masuk sini 8%.
40:07Tapi analog gede juga ya.
40:09Tapi gede nya itu.
40:11Nah kita kan ke pengaruh visual ya.
40:13Ternyata banyak banget.
40:1578 orang doang.
40:17Hanya 78 orang dari ratusan ribu.
40:21Tadi puluhan ribu lah.
40:23Dibanikan dengan 20 ribu ini aja tuh kecil sekali ya.
40:27Satu titik garam di lautan.
40:29Feed press tadi bukan view press.
40:33View press ada juga ya?
40:35Ada, ada juga.
40:37Semua pakai press-press aja.
40:39Nest.
40:41View press ya ada.
40:43Nest.
40:45Nah itu beliin ya.
40:47Ada next, ada next, ada nest.
40:49Ada nespress.
40:51Ada satu lagi.
40:53Nespress loh.
40:55Nest, nest, next, nukes.
40:57Nukes.
40:59Nek, nats, nes. Nukes gak ada.
41:01N-o-x-a kan ya.
41:03Nukes.
41:05Nggak tahu.
41:07Belum pernah denger.
41:09Ada adonis.
41:11Nukes.js juga ada.
41:13Adonis ada yang pakai.
41:15Refine.
41:17Adonis kayaknya tuh.
41:19Refine.de kenal ya.
41:21Cuma gak inget itu apa.
41:23Ritual for enterprise.
41:25Ritual itu apa?
41:27Aku juga gak tahu.
41:29Ritual itu
41:31no code platform.
41:33Hmm.
41:35Ini udah pakai.
41:37Oke.
41:39Ini buat enterprise ya berarti ya.
41:41Hmm.
41:43Tampilannya sih keren ya.
41:45Ini tuh karakternya kayak Laravel ya.
41:47Maksudnya ekosistemnya Laravel.
41:49Yang apa? Kayak semua ada.
41:51Semua dikasih decisionnya.
41:53Gak harus ketengan mikir
41:55router pake apa,
41:57state pake apa.
41:59Keliatannya sih silas dari itu.
42:01Ada Meteor.
42:03Ada Boon.
42:05Boon masuk sih.
42:07Random juga ya.
42:09Red Boon.
42:11Soalnya Boon ini lengkap.
42:13Dia memang
42:15runtime.
42:17Tapi udah bisa bikin
42:19request-response servernya
42:21udah ada.
42:23Terus JSX-nya juga dia udah support.
42:25Seperti ini langsung.
42:27Langsung dari ini ya?
42:29Oh berarti
42:31berarti JavaScript
42:33runtime-nya dia udah langsung bisa JSX.
42:35Betul.
42:37Sama kayak Deno. Makanya
42:39si Deno Fresh itu menggunakan ini.
42:41Gak perlu pakai JSX, gak perlu install JSX.
42:43Atau React DOM segala macem.
42:47Menarik.
42:49Terus bisa bikin
42:53yang kalau buat ini.
42:55Ada gak ya? Buat
42:57meta framework-nya. Ini server render
42:59udah pasti kan. Server render kan.
43:01Secara otomatis kan.
43:03Dia mentranspile
43:05saja.
43:07Iya. Dan mungkin
43:09gara-gara itu dia jadi masuk kesini.
43:11Mungkin ya. Red Boon.
43:13Dia gak bisa replace perennya
43:15framework. Redwood.
43:17Redwood masuk.
43:19Meteor masih ya. Ternyata masih ya.
43:2113 orang.
43:2313 orang yang pakai.
43:25Ya pakai masih ada sih.
43:27Ada.
43:29Masih berkembang juga kok.
43:31Adonis. Adonis.
43:33Adonis ini cukup nih.
43:35Karena mungkin 12 orang ini
43:37adalah penggemarnya Laravel.
43:39Yang pindah ke Node.js. Dia cari yang mirip.
43:43Jadi pilihlah
43:45Adonis.
43:47State of JS 2024 kapan?
43:49Belum. Tahun depan.
43:51Ya nanti.
43:53Sampai 2024 selesai.
43:55Follow salah satu dari kita.
43:57Nanti kalau ada survey-nya kita
43:59tweet. Kita share.
44:01Other answer. Ada lagi gak
44:03yang lain? Apa nih?
44:05Kok gak bisa diklik ya? Diklik aja untuk other answer.
44:07Yang kiri. Gak bisa.
44:09Oh gak ada.
44:11Other answer.
44:13Terus sedikit dulu ya.
44:15Coba dari total.
44:17Keliatan dari totalnya berapa di bawah.
44:19Bawah bawah bawah.
44:21Berarti yang other itu
44:25hanya isi
44:272% dari
44:2923.000
44:31partisipan.
44:33Jadi mungkin pertanyaannya apakah
44:35framework favoritmu
44:37tidak disebutkan di atas?
44:39Atau semacamnya?
44:41Eh itu kayak shift.
44:45Kita bahas tuh kemarin.
44:47Google developer expert.
44:49Data enthusiast.
44:51Apa tuh? Pocket base tuh apaan sih?
44:53Pocket base itu adalah
44:57database
44:59ss service.
45:01Kayak super base.
45:05Atau kayak firebase.
45:07Data base nya realtime.
45:09Tapi ini pakai skill light.
45:11Can be deployed as
45:15a single binary to $5
45:17server.
45:19On a scale 0 to 4
45:23how happy you are with current state of
45:25meta framework?
45:27Dua setengah.
45:29Tapi ya not bad sih.
45:31Not bad.
45:33Ya udah masuk ke lumayan
45:35gitu ya.
45:37Nah berarti ini kan
45:41menengah ke atas
45:432.2 berarti
45:45oke lah.
45:47Meta framework pain points
45:49next stage issue.
45:51Ini apa isunya?
45:53Padahal pertanyaannya meta framework
45:57window lock in.
45:59Catching, patching.
46:01Caching, patching.
46:03API. Slow.
46:05Everyone uses
46:07Next.js which is
46:09Next.js specifically is point
46:15marketing driven ya.
46:17Terrible DX
46:19documentation. Kenapa documentation ya?
46:21Nah cuma ini kan subjektif.
46:25Kita udah bikin setengah
46:27ya mereka yang bikin
46:29orang fairsale udah bikin dokumentasi setengah
46:31ti ya tetep aja bakal ada yang
46:33gak sesok.
46:35SST not supporting Nux.
46:37SST itu
46:39framework yang bisa deploy
46:41meta framework ke
46:43service cloud.
46:47Lebih spesifiknya
46:49AWS. Dan dia
46:51belum mendukung Nux. Jadi dia terpaksa
46:53harus pakai Next kalau mau pakai SST.
46:55Kayaknya ya kalau melihat
46:59setimen ini.
47:01Ini masalahnya terlalu spesifik semua ya.
47:03No jobs.
47:05Gak ada job untuk Next.js.
47:07Atau dia? Dia aja.
47:09Dia doang. Gak dapat kerja.
47:11No auto import in Next.js.
47:15Nux yang ada ya.
47:17Cuma auto import kalau di support
47:21nanti ada yang komplain juga.
47:23Kan gak jelas kan gimana.
47:25Gua pertama kali pakai Nux tuh
47:27bingung sih asli kalau gak biasa ya.
47:29Product of the devil.
47:31Lock in ya.
47:41Kebanyakan vendor lock in ya.
47:43App router is just bad.
47:45Lot of bugs and unstable feature crashing
47:47your app with every release.
47:49Beta features like production ready.
47:51Not perfect but
47:53at least it brings us closer to standard
47:55to use react.
47:57Kita pernah bahas ini loh.
47:59Kita pernah bahas
48:01concept atau behavior
48:05Next.js itu kan selalu
48:07catch up dengan
48:09teknologi terbaru ya.
48:11Itu behaviornya
48:13dari Fremont ini.
48:15Karakternya dia, brandingnya.
48:17Jadi kalau mau cari stabil ini ya
48:21pakai ini.
48:23Karen.js mungkin ya.
48:25Karen.js ya.
48:27Present.js gitu.
48:29Jangan Next.js ya.
48:31Unstable React.
48:37Kita pernah bahas dan dia pakai react
48:39yang experimental kan.
48:41Yang experimental betul.
48:43Shift between front and back end
48:45framework.
48:47App router tuh unstable.
48:49Too hard to migrate.
48:53State management.
48:55Layout and middleware not flexible.
48:57Client caching creating many issue.
49:03Kita juga bahas kan nih yang by default
49:05caching.
49:07Only for React
49:13frameworks. They are pushing RSC
49:15as new thing. Even though
49:17it's more limiting than the solution
49:19we had before.
49:21Vendor lock in.
49:23React server component.
49:25Kalau kan dia harus dipake.
49:27Mau pakai
49:29client render semua juga gak apa-apa.
49:31Tapi ya itu
49:33sulit bikin orang banyak seneng ya
49:35ternyata.
49:37Tidak bisa menyenangkan semua orang.
49:39Tapi mostly
49:41kebanyakan masalah utamanya
49:43adalah vendor lock in, caching
49:45sama app router. Complainnya ya.
49:47Sama stability.
49:49Ya, stability ya.
49:51Karena mereka pakai
49:53experimental features.
49:55Complexity. Kita lihat apa yang
49:57kompleks menurut mereka.
49:59Overengineer, Jenga Towers.
50:01Rendering mode.
50:03SSR, ISR, ISR.
50:05Too much complexity.
50:11Masalahnya that they exist.
50:13Bit too complex.
50:15Overengineer.
50:17Ini kita gak bisa.
50:19Semua pokoknya kompleks aja ya.
50:21Nah, deployment.
50:23Kompleksity.
50:25Hosting, cache, image
50:27transform. Oh, ini ada hubungan sama
50:29Next juga kali ya.
50:31Ya, atau sebenernya
50:33framework apapun sih yang punya image
50:35transform on the fly kan berarti butuh
50:37server ya buat ngejalanin
50:39itunya. Convert
50:41image. Maksudnya
50:43kalau kita develop
50:45Next.js kan
50:47agak, kalau kita
50:49pakai semua fitur, beberapa fitur utamanya
50:51itu agak susah di deploy
50:53di tempat lain kan.
50:55Jadi under lock-in jatuhnya ya.
50:57Karena ada itu.
50:59Yang kemarin ada yang bikin
51:01community Open Next.
51:03Open Next kan.
51:05Tapi kan itu pasti
51:07tertinggal kan.
51:09Tertinggal kan.
51:11Mungkin gue update dari Next.js dulu kan.
51:13Ya, cukup aktif. Tapi kan kita juga
51:15update dari Next.js.
51:17Nah, itu tergantung. Lagi-lagi
51:19subjektif, seberapa kita
51:21harus latest, se-latest
51:23apa sebetulnya kan.
51:25Kalau cuma beda beberapa minggu atau satu bulan
51:27dari yang terbaru sebetulnya ya nggak
51:29mudap juga kan.
51:31Bisa juga kita pakai itu kan.
51:33Kita pernah belas di Next.js.
51:35Iya, bisa.
51:37Sama apa?
51:39Di Previous.js.
51:41Kayak di Docker Image juga bisa kan.
51:45Kalau mau nggak pakai Versel ya.
51:47Cuma ya extra effort.
51:49Hosting Next.js was absolute nightmare.
51:51Absolute nightmare.
51:53Cuma mungkin ini ya.
51:57Ini agak
51:59bias juga mungkin orang yang ngisi
52:01survey state of JS.
52:03Itu kan kemungkinan orang front-end yang front-end banget ya.
52:05Jadi maksudnya apa?
52:07Ada kayak semacam
52:09sense of entitlement.
52:11Pengen experience yang
52:13segampang, sesimple drag
52:15and drop-nya atau apa?
52:17Auto deploy-nya
52:19Netlify dan Versel.
52:21Pengen sisi itu.
52:23Tapi pengen juga pengen kemampuan
52:25portability. Pengen gratis.
52:27Maksudnya pengennya banyak. Padahal sebetulnya
52:29infra itu kan kayak infra
52:31deployment, ICD itu kan sebetulnya
52:33satu field yang
52:35ya kayak semacam satu ekspertis
52:37sendiri ya. Jadi kayak nggak matching-nya
52:39disitu kan.
52:41Oke. Deployment, integration,
52:43not for astro or fresh.
52:45They are fine.
52:47Ini ada yang nanya nih.
52:51Next 14 masih harus
52:53running di Versel class. Saya pernah coba
52:55di Next 13 without dear.
52:57Image nggak bisa dipakai.
52:59Iya, image itu spesifik ke
53:01Versel ya. Benar nggak sih?
53:03By default, spesifik ke Versel.
53:05Tapi di config-nya
53:07bisa diubah. Kita mau misalnya
53:09pakai Cloudinary ya.
53:11Misalnya kita punya Cloudinary.
53:13Kita masukin apa?
53:15API key Cloudinary ya.
53:17Webgenerate on the fly atau semacamnya.
53:19Bisa. Itu dari
53:2112 kayaknya deh.
53:23Oke.
53:27Kemudian version changes.
53:29Ini update-nya terlalu cepat ya.
53:31Breaking changes.
53:33Transition.
53:35Termasuk juga view ya.
53:37Bukannya terlalu cepat, tapi
53:39habis saja susah kita. Kayak nggak ada
53:41code mode-nya atau terlalu banyak yang
53:43harus diubah.
53:45Migration tools-nya tidak didukung
53:47terlalu gimana-gimana ya.
53:49Kalau misalnya
53:51upgrade, major
53:53upgrade itu banyak perubahan ya, Masih.
53:55Next.js ini. Belum pernah
53:57sampai produksi. Belum pernah.
53:59Ya itu yang terakhir
54:01major kayaknya yang apa?
54:03Appdir sama
54:05ini kayaknya.
54:07Yang perubahan
54:09architektur.
54:11Caching juga ya.
54:13Sebelumnya by default
54:15on, terus di selanjutnya by default
54:17off.
54:19Itu karena kayak salah decision.
54:21Tapi generally antar
54:23versi, versi major
54:25kalau major pasti ada yang breaking ya.
54:27Cuma nggak
54:29ekstrim-ekstrim amat sih
54:31sebetulnya. Selain ya
54:33pages-router ke app-router.
54:35Tapi kan sekarang pages-router
54:37belum di-deprecate juga, masih
54:39bisa dipakai. Iya, masih bisa dipakai, betul.
54:41Tapi pengalaman saya
54:43migrasi dari
54:45spellkit
54:47versi beta ke spellkit
54:49versi 1, itu
54:51sangat
54:53menyenangkan.
54:55Nggak ada masalah apa-apa. Karena ada code-nya juga kan?
54:57Ada kayak komennya.
54:59Ada komen lain kayak dia nyariin.
55:01Iya, nyariin.
55:03Terus ada migration guide-nya juga
55:05cukup bagus, gampang diikuti
55:07dan nggak ada, istilahnya nggak ada yang
55:09update macem-macem gitu.
55:11Jadi kayaknya smooth lah.
55:13Prosesnya tuh smooth.
55:15Cuma yang nomor 2 itu
55:19yang nomor 2-2 tadi bisa
55:21relate sih. Karena ekosistem
55:23kalau pakai library external
55:25itu mungkin nggak
55:27kompatibel. Terutama pas
55:29lagi musim, apa?
55:31Yang ada RSC
55:33mulai center kan, jadi di atas harus
55:35pakai directive use-client tuh.
55:37Kalau pengen jalanin by-side.
55:39Kalau nggak fail. Nah itu banyak library
55:41lama yang belum pakai use-client kan
55:43atau use-report.
55:45Betul, betul, betul.
55:47Jadi ini banyak
55:49masalah di version
55:51lack of documentation.
55:55Ini kan meta framework
55:57in general.
55:59Nux 3 kurang
56:01dokumentasinya.
56:03Masih dianggap kurang.
56:07Laravel Docs should be the standard.
56:09Memang sebagus itu ya.
56:13Lengkap.
56:15Lengkap dan kayaknya apa ya?
56:17Pembagiannya mungkin
56:19bagus ya. Itu kan harus
56:21disurvey banget walaupun informasinya
56:23ada, kan keywordnya kita nyari
56:25di halaman apa, di bagian apa.
56:27Documentation and example
56:31lack of documentation.
56:33Nah, ini positifnya adalah
56:35opportunity buat kita
56:37atau temen-temen yang lain.
56:39Kalau menemukan framework
56:41atau library yang
56:43dokumentasinya dirasa kurang bagus,
56:45silahkan pull request atau
56:47tanya, tulis di issue. Boleh nggak saya
56:49improve? Nah, lumayan kan?
56:51Buat belajar
56:53kontribusi.
56:55Kalau yang agak ego sedikit, dikontainin aja.
56:57Bikin youtube channel yang bisa
56:59atau bikin, apalah blog yang
57:01isinya apa, pinpoint hal-hal
57:03yang nggak ditemuin di dokumentasi
57:05tapi kayak practical, how to,
57:07bla-bla-bla.
57:09Masa bisa bahas elixir, contohnya.
57:11Kan orang ngesersu nyari
57:17di dokumentasi nggak nemu, jadi cari-cari
57:19di tempat lain,
57:21pada masuk ke channel atau blog
57:23temen-temen deh.
57:25Itu udah cukup sering
57:27dibahas. Maksudnya, kan banyak
57:29yang suka sama elixir juga
57:31nanyain, kenapa sih elixir nggak populer?
57:33Ya, ini
57:35kalau ngomongin hal kayak gitu kan
57:37kayak ayam sama telur ya?
57:39Populer dulu?
57:41Gak populer karena banyak
57:43konten. Mau digrow dulu?
57:45Digrow ekosistemnya dulu biar populer.
57:47Gitu. Jadi
57:49ya saya memutuskan untuk
57:51melakukan apa yang bisa saya lakukan,
57:53memperbanyak konten aja. Jadi siapa
57:55tahu nanti orang-orang Indonesia yang nyari elixir ya
57:57sudah ada nih kontennya yang berbahasa
57:59Indonesia, gitu.
58:01Kalau misalkan nggak ada
58:03kan tadinya dia tertarik, terus ngelihat
58:05bahasa Inggris semua nggak jadi deh,
58:07gitu kan, bisa begitu.
58:09Ya ini berlaku untuk semua ini ya,
58:11semua teknologi ya, bukan hanya elixir.
58:13Nah ini dijawab nih sama Mas Rehan.
58:15Masih bisa dipakai tapi nggak ada
58:17update page router, kasihan nggak kebagian
58:19fitur streaming SSR.
58:21Oh yang tadi ya?
58:23Jadi belum di-deprecate,
58:25tapi nggak dapet fitur
58:27baru.
58:29Ini apa? Oh FairSale. FairSale ada
58:31kategori khusus.
58:33Kategori main pointnya FairSale.
58:35Apa masalahnya?
58:37Masalahnya FairSale.
58:39Nah pertanyaan berikutnya
58:41adalah apakah Svelte dan Svelkit
58:43akan mengalami hal yang serupa?
58:45Karena sekarang kan research-nya
58:47di FairSale juga.
58:49Apakah dia akan vendor lock-in?
58:51Sejauh ini belum ya.
58:55Karena Svelkit kan pakai sistem adapter,
58:57ya kan, bisa di-deploy di FairSale,
58:59bisa di-deploy di Netlify,
59:01atau server node.js apapun.
59:03Nah itu
59:05next-nya kan tergantung
59:07seberapa, kayaknya research itu kan
59:09kelihatannya ya dari omongannya jenis orang
59:11yang cukup idealis ya.
59:13Apakah misalnya
59:15kedepannya FairSale
59:17mendorong halus biar adapternya
59:19dihilangin, by default pakai
59:21FairSale, ya kalau user
59:23mau bikin ekosist, apa, komunitas
59:25mau bikin solusi di luar itu boleh.
59:27Nah, series-seriesnya mau
59:29atau nggak kan, itu tergantung.
59:31Kalau misalkan,
59:33nggak tahu ya, udah lama nggak ngikutin
59:35Svelkit, apakah
59:37mereka sudah membuat semacam
59:39image component?
59:41Kayaknya ada ya?
59:43Nggak tahu.
59:45Cuma kalau Svel kan
59:47pendekatannya, mereka nggak
59:49ngasih komponen-komponen
59:51yang siap pakai kayak gitu kan.
59:53Kalau user mau bikin sendiri ya
59:55boleh.
59:57Kayaknya pernah dengar deh, tapi
59:59ya, coba dicari aja.
1:00:01Ya, mungkin unofficial, coba
1:00:03cari Svel image component.
1:00:05Adanya
1:00:07Enhanced Image.
1:00:09Images.
1:00:11Eh ada nih. Ada kan?
1:00:13Tuh, beneran kan ada?
1:00:15Enhanced Image.
1:00:17Cuma diinstall terpisah.
1:00:19Tapi
1:00:21official ya, official package ya?
1:00:23Official.
1:00:25Bagus sih, jatuhnya. Jadi, mau saya apa?
1:00:27Ini opt-in.
1:00:29Cuma, ya kalau mau
1:00:31coba, boleh.
1:00:33Apakah hanya bisa di deploy
1:00:35tersel? Enggak ya harusnya ya?
1:00:37Enggak. Ini, gue langsung baca
1:00:39loading image dynamically from CDN.
1:00:41Bisa di Cloudinary.
1:00:43Bisa
1:00:45di CDN mana pun sih.
1:00:47Masih cukup unopinated ya?
1:00:49CDN agnostic ya.
1:00:51CDN agnostic.
1:00:53Dan sebetulnya Next.js image
1:00:55component juga udah seperti itu sih.
1:00:57Cuma emang
1:00:59mungkin ini trick bisnis lah di
1:01:01dokumentasinya ya.
1:01:03Contohnya, contoh defaultnya ya
1:01:05pakai Fairsell.
1:01:07Slow.
1:01:09Banyak yang bilang slow di
1:01:11development. Next.js ini.
1:01:13Bukan slow hasil
1:01:15app-nya ya? Bukan slow hasil akhirnya.
1:01:17Tapi slow pada saat
1:01:19development-nya berat gitu.
1:01:21Berat, berat mungkin.
1:01:23Mungkin
1:01:25kalau lagi dev server gitu ya?
1:01:27Iya. Karena pernah ada
1:01:29ngeliat beberapa tweet.
1:01:31Cuma ada satu sih.
1:01:33Jadi dia coba develop di
1:01:35Cloud gitu.
1:01:37Kayak model apa ya?
1:01:39Gitpod ya model Gitpod itu.
1:01:41Agak berat.
1:01:43Kayaknya nggak kuat gitu.
1:01:45Nggak ngangkat.
1:01:47Nah, kalau yang pakai
1:01:49TurboPack, nggak tau ya. Mungkin kalau yang
1:01:51by default,
1:01:53mungkin lambat.
1:01:55Kalau yang pakai TurboPack,
1:01:57jauh lebih cepat sih.
1:01:59No batteries included
1:02:01framework like Rails,
1:02:03Ralaver, Phoenix to speed up
1:02:05development. Ada.
1:02:07Redwood. Apa sih battery?
1:02:09Semua lengkap gitu.
1:02:11Lengkap kayak Ralaver.
1:02:13Semua ada. Serba ada.
1:02:15Redwood, padahal kita kau aja.
1:02:17Kita udah bahas.
1:02:19Nah, cuma karena itu
1:02:21sunking belum populernya. Nah.
1:02:23Gue alih bidang
1:02:25jadi launcher Redwood aja apa ya?
1:02:27Bisa-bisa.
1:02:29Slow build, AMR, HDR.
1:02:31Speed during development tuh.
1:02:33Banyak yang slow slow slow.
1:02:35Terutama yang bagian ini ya, development ya.
1:02:37Ya, karena ini kan
1:02:39topiknya lagi komentar
1:02:41tentang slow.
1:02:43Iya.
1:02:45Everything except pure
1:02:47feed is painfully slow.
1:02:49Oh.
1:02:51Apapun yang bukan feed,
1:02:53lambat.
1:02:55Nah, cuma standar lambatnya
1:02:57orang juga lambat cepet orang juga
1:02:59agak lain-lain ya.
1:03:01Maksudnya seberapa tinggi
1:03:03requirement-nya.
1:03:05Apa nih? Kayaknya Astro mau juga
1:03:07apa nih? Mau apa nih?
1:03:09Mas Rehan. Gak dapat
1:03:11konteks nih. Mau bikin apa?
1:03:13Image component kayaknya. Image component ya?
1:03:15Oke. Mungkin. Gatau sih
1:03:17sekarang. Tadi kan kita lagi bahas image component.
1:03:19Bisa jadi. Iya iya bisa jadi.
1:03:21Very slow.
1:03:23Ya, terutama itu bad experience ya.
1:03:25Gatuhnya ke bad experience.
1:03:27Reak itu kenapa sih ada itu-nya sendiri?
1:03:29Reak ada UI
1:03:31pillow-nya sendiri nomor 8.
1:03:33Unsupported API.
1:03:39Kayaknya nggak tepat.
1:03:41Unexpected errors. Next is great
1:03:43but view itself has some gachas
1:03:45that if not aware of
1:03:47could become a problem.
1:03:49Incomplete documentation.
1:03:51I mean.
1:03:53Dari tadi harus banyak yang sebut itu ya.
1:03:55Oh ada DB. Iya.
1:03:57Astro
1:03:59batteries included. Astro mau
1:04:01batteries included ya.
1:04:03Aos belum ya.
1:04:05Astro DB
1:04:07lumayan gitu kan.
1:04:09Would like Laravel feature
1:04:13in Nuxt. Nuxt still feel
1:04:15immature. Memory leak.
1:04:17SSD not supported tadi udah
1:04:19perverse class
1:04:21internalization.
1:04:23SSR
1:04:27the rest.
1:04:29Apa sih masaya the rest?
1:04:33Kalau Firebase
1:04:35posisinya dimana ya?
1:04:37Data base.
1:04:39Firebase kan redaknya
1:04:41banyak ya.
1:04:43UI-nya juga ada.
1:04:45Firebase itu kan sebesar.
1:04:47Maksudnya kalau dia kan ada
1:04:49authentication modul.
1:04:51Oh ya.
1:04:53Iya Firebase itu banyak banget.
1:04:55Ini dianggap
1:04:57komplain ya. Nuxt dia is really awesome.
1:04:59Salah.
1:05:01Ya AI bisa
1:05:03salah.
1:05:05Nuxt using legacy
1:05:07webpack. Nuxt documentation.
1:05:09Kebanyakan sih documentation kalau Nuxt ya.
1:05:11Belum lengkap. Configuration
1:05:13routing ada ansar.
1:05:15Sama React tuh ada itunya ada logo
1:05:17kayak apa sih fill-nya gitu.
1:05:19Engga ini
1:05:21clean aja karena
1:05:23ya karena
1:05:25ada website-nya. Kalo ini kan gak ada
1:05:27performance-nya.
1:05:29Number 15. Too much magic.
1:05:31Ini ngarahin ke
1:05:33siapa nih?
1:05:35Ya apapun pokoknya itu kan
1:05:37bebas.
1:05:39Painpoint-nya meta framework.
1:05:41Under the hood magic.
1:05:43Too much magic.
1:05:45Some framework.
1:05:47Ada yang komplain tentang Nuxt. Ada yang tentang Nuxt.
1:05:49Siapa punya campur.
1:05:51Auto import magic.
1:05:53Tapi pertanyaannya.
1:05:55Pertanyaannya apakah
1:05:57kita mau
1:05:59bikin project
1:06:01yang gak pakai meta framework.
1:06:03Pakainya vanilla semua. Kayaknya
1:06:05susah juga ya.
1:06:07Kalo cuma kayak single page gitu.
1:06:09Single page gitu ya gak apa-apa
1:06:11juga sih.
1:06:13Ya kalo single page ya gak apa-apa.
1:06:15Kalo contoh kayak kemarin
1:06:17yang saya buat di Depok juga.
1:06:19Cuma 3 halaman HTML. Vanilla semua.
1:06:21Itu gak apa-apa. Maksudnya
1:06:23yang udah lumayan kompleks gitu.
1:06:25Kalo yang ada authentication,
1:06:27ada routing. Ya jujur meta framework.
1:06:29Gak mau kan?
1:06:31Di point apa?
1:06:33Harus loncat ke meta framework.
1:06:35Kalo udah ada routing. Sama
1:06:37kayak routing dan
1:06:39atau authentication
1:06:41dan atau dynamically
1:06:43generated pages.
1:06:45Ya misalnya list of polls
1:06:47based on data. Nah itu
1:06:49udah mulai pusing ya kalo
1:06:51vanilla JS
1:06:53manual semua. Antara 3 itu
1:06:55single page.
1:06:57Oke.
1:06:59Jadi pertanyaan berikutnya
1:07:01apakah ada meta framework yang tidak terlalu banyak
1:07:03magic.
1:07:05Tapi point of meta framework adalah
1:07:07magic.
1:07:09Point of meta framework kan
1:07:11of inanated ini kan.
1:07:13Mengumpulkan hal-hal itu.
1:07:15Cuma mungkin
1:07:17segantung definisi magic.
1:07:19Kalo terlalu banyak yang diumpetin
1:07:21kayak ini kan trade off
1:07:23antara apa ya? Customization
1:07:25dan kemudahan.
1:07:27Dan kemudahan
1:07:29langsung pakai. Nah ini gimana
1:07:31caranya? Cari point di tengah-tengah
1:07:33kalo semuanya diumpetin under the hood.
1:07:35Terus bahkan konfigurasi
1:07:37nyarinya dimana kan seperti magic.
1:07:39Kalo terlalu banyak config
1:07:41membuat customisasi
1:07:43gampang.
1:07:45Maintainnya juga susah.
1:07:47Si maintainernya tuh kayak
1:07:49kalo mau maintain
1:07:51jadi jauh lebih susah.
1:07:53Setuju sih. Jadi kayak next JS
1:07:55tadi ada yang komplain wah gak bisa auto
1:07:57auto import.
1:07:59Sementara ada yang komplain
1:08:01too much magic ya auto import itu masuk
1:08:03magic kan? Karena bingung
1:08:05maksudnya ini dari
1:08:07library apa aja misalnya kita punya
1:08:09kita pakai 4 library external
1:08:11dan kita import menggunakan
1:08:137 metode dari 4
1:08:15library itu. Nah terus ada satu
1:08:17yang gak kompatibel harus diganti.
1:08:19Nah itu tuh. Nah masing-masing
1:08:21metode yang di dalamnya tuh diambil dari mana
1:08:23pusing juga gak sih?
1:08:25Terutama kalo belum biasa ya.
1:08:27Wah menurut mas
1:08:29Rehan ini solid start itu
1:08:31magicnya tidak terlalu banyak.
1:08:33Kita malah belum tau ya
1:08:35belum pernah cek ya.
1:08:37Mas solid itu juga sering bikin
1:08:39live stream ya.
1:08:41Siapa sih namanya tuh mas solid?
1:08:43Rian Karniato
1:08:45siapa gitu.
1:08:47Dia bikin
1:08:49live stream dan dia emang ngerjain
1:08:51dan dia tuh kalo ngejelasin
1:08:53detail banget. Tapi ya gitu
1:08:55tapi dia bukan hanya membahas solid kan dia
1:08:57bahas framework-framework lain juga kan?
1:08:59Ya dia suka ada tamu juga
1:09:01sambil ngobrol gitu.
1:09:03Terakhir sih yang gue nonton adalah
1:09:05dia ngobrolin Astro
1:09:07di sama Mas Astro
1:09:09apa lupa namanya.
1:09:11Something-something.
1:09:13Gitu.
1:09:15Cuma dia agak geles gitu.
1:09:17Mas Haris.
1:09:19Mas Haris.
1:09:21Rian Mas Haris.
1:09:23Nah si Rian Karniato
1:09:25ini kan ada yang bilang
1:09:27"Mu bikin video kaya highlights
1:09:29atau kisi-kisi yang di ringkas
1:09:31biar orang mengonsum?"
1:09:33Terus dia jawabnya yang belak-belakan gitu
1:09:35"Malus, gak sempet?"
1:09:37Kalau saya mau nonton ya ini silahkan nonton 3 jam.
1:09:39Kalau enggak ya udah gak apa-apa.
1:09:41Cuman dia gak bikin.
1:09:43Ya terus orang bilang kan
1:09:45marketing lah
1:09:47buat kan sekalian
1:09:49framework-framework
1:09:51dia bikin yang lebih
1:09:53ditonton. Tapi dia bilang ya itu
1:09:55di luar scope-nya dia.
1:09:57Kalau orang lain ada yang mau.
1:09:59Misalnya bikin kan sebenarnya misalnya pake
1:10:01itu satu apa yang auto, yang dikomen itu
1:10:03yang ada timestamp-nya.
1:10:05Yang mau digituin terserah.
1:10:07Mau bikin apa terserah. Cuman dia gak pengen
1:10:09bikin konten yang
1:10:11lebih menarik
1:10:13buat marketing framework-nya dia.
1:10:15Di klip aja.
1:10:17Kalau ada yang mau bikin gitu ya
1:10:19ada yang effort bikin klip dari
1:10:21YouTube juga udah bisa sih.
1:10:23Bisa cuma sih.
1:10:25Mas Raina gak mau.
1:10:27Dia gak mau bikirin itu.
1:10:29Dia bilang dia mau konsentrasi bikin
1:10:31framework-nya, sisi
1:10:33technical-nya.
1:10:35Ya ini
1:10:37standarnya developer ya.
1:10:39Gak penting
1:10:41jualan. Yang penting produknya
1:10:43bagus. Walaupun orang gak banyak yang tahu.
1:10:45Mungkin tugasnya kita ya
1:10:49yang tidak bisa
1:10:51konten creator.
1:10:53Yang bukan framework-nya.
1:10:55Kan kalau semua orang bikin, semua
1:10:57developer bikin framework.
1:10:59Developer experience.
1:11:01Banyak konten.
1:11:03Itu kan
1:11:05jadi salah satu bagian dari
1:11:07developer experience
1:11:09kan gitu.
1:11:11Dokumentasi bagus.
1:11:13Artikelnya banyak. Atau paling tidak
1:11:15ada tutorial di
1:11:17dokumentasinya. Terus
1:11:19kita cari juga
1:11:21referensi-nya banyak. Itu bagian dari
1:11:23ekosistem developer experience.
1:11:25Sebagus apapun
1:11:27framework-nya, kalau dokumentasinya
1:11:29gak lengkap ya, gak bisa
1:11:31dipakai juga.
1:11:33Seperti jQuery.
1:11:35Gak lah.
1:11:37JQuery malah sudah
1:11:39sangking banyaknya yang pakai.
1:11:41Ya udah semua tahu cara pakainya.
1:11:43Kecuali kalau pas loading 2 instance.
1:11:47Ya.
1:11:49Kalau jQuery itu dia memang dioptimize
1:11:51untuk memenangkan
1:11:53apa namanya
1:11:55survey-survey seperti ini. Karena
1:11:57satu website tidak cukup hanya
1:11:59satu jQuery. Bisa pakai
1:12:012 jQuery. Jadi dia
1:12:03kalau di survey itu ada 2.
1:12:05Jadi 2 kali lipat.
1:12:07Vote-nya. Kalau dicek kan.
1:12:09Wah ini kalau dicek kayak
1:12:11apa?
1:12:13Ini website-nya pakai apa? Oh pakai jQuery
1:12:15versi 2 dan versi 3.
1:12:17Masing-masing klagen bawa itu sendiri
1:12:21jQuery sendiri kalau
1:12:23jQuery jaman dulu.
1:12:25Oke.
1:12:27Kita lanjut.
1:12:31Kita lanjut ke ini aja. Ke build tool
1:12:33testing atau membahas yang mana.
1:12:35Testing.
1:12:37Karena testing.
1:12:39Testing tapi sekilas aja.
1:12:41Sekilas ya. Testing itu yang paling
1:12:43main of the masing-nya adalah ini.
1:12:45Hit-test.
1:12:47Itu hit-test.
1:12:49Naiknya 20%.
1:12:51Playwright bagus lho.
1:12:53Playwright bagus.
1:12:55Playwright juga termasuk tinggi.
1:12:57Oh. Playwright itu
1:12:59si Microsoft itu kayak bikin
1:13:01apa ya reformasi.
1:13:03Apa sih pohonnya? Mereka jadi
1:13:05halaman dokumentasinya
1:13:07dirombak. Terus kayak tutorialnya
1:13:09juga dirombak semua. Terus
1:13:11kayaknya sekitar ya itu sekitar 2 tahun
1:13:13lalu lah. Mulai tahun lalu
1:13:151-2 tahun lalu.
1:13:17Mereka juga rajin ke
1:13:19discord-discord channel
1:13:21web developer. Kayak cari feedback
1:13:23dari developer gitu.
1:13:25Jadi intinya
1:13:27dokumentasinya di revamp banget.
1:13:29Dan pengaruhnya ya oke juga ya.
1:13:31Intinya
1:13:33mereka punya cukup banyak
1:13:35dana untuk dihabiskan untuk
1:13:37mendevelop si Playwright ini
1:13:39supaya bagus. Kenapa? Karena
1:13:41mereka menggunakan API
1:13:43yang mirip Cypress. Mereka
1:13:45menggandeng si CanCyDot untuk
1:13:47testing library API-nya juga
1:13:49mirip-mirip di Playwright. Jadi
1:13:51banyak yang pakai akhirnya.
1:13:53Karena familiarity-nya.
1:13:55Orang nggak perlu belajar
1:13:57API baru lagi.
1:13:59Kalau udah pernah dari Cypress,
1:14:01pakai Playwright itu gampang.
1:14:03Saya dari testing library ke Playwright cepat.
1:14:05Ke Playwright juga gampang.
1:14:07Mereka membuka pintu sebanyak-banyaknya
1:14:09karena risosnya banyak. Gede.
1:14:11Dibandingkan yang lain ya.
1:14:13Jess.
1:14:17- Tapi Vitesse,
1:14:19Vitesse sama Jess itu ceritanya
1:14:21agak mirip kayak gitu juga.
1:14:23Gue ngalamin banget
1:14:25Vitesse juga salah satu yang
1:14:27familiarity-nya, maksudnya kita nggak perlu
1:14:29banyak berubah ya.
1:14:31- Hampir semua lah ya. 95%
1:14:33kali. Nggak ada yang diubah
1:14:35apa test suite-nya kayak expect-blah-blah.
1:14:37- Tapi semua pada naik loh.
1:14:39Berarti makin banyak orang
1:14:41testing.
1:14:43- Iya, pada orang sudah mulai
1:14:45aware untuk testing.
1:14:47- Nah, dan di sisi
1:14:49lain si library testing-nya juga pada
1:14:51apa sih? Kayak bikin lebih mudah
1:14:53diakses lah. Dokumentasinya dibagusin.
1:14:55Contoh-contohnya.
1:14:57- Iya-iya. Mocha ini kayak
1:14:59cukup stabil ya. Padahal
1:15:01dia lebih dulu dari
1:15:03Jess. Jadi abis Mocha,
1:15:05kepopuleran Jess naik, abis itu
1:15:07ditimpa lagi sama Vitesse. Tapi dia tetap
1:15:09stabil ya.
1:15:11- Iya, itu tadi penjelasannya sama
1:15:13Jess di... - Orang udah keburu nanti.
1:15:15- Nah, terus apa website yang dibuat
1:15:1710 tahun lalu atau 5
1:15:19tahun lalu lah. Apalagi testing,
1:15:21kan lebih jarang
1:15:23di single-single kan. Siapa juga yang
1:15:25mau, mau
1:15:27kini tumbel buat ngerimai
1:15:29semua test.
1:15:31Nanya teman, ngapain?
1:15:33Nariurite atau refaktor testing?
1:15:35-
1:15:37Ya terus kan bahaya banget.
1:15:39- Jarang kan testing di
1:15:41refaktor. - Berarti semua test yang
1:15:43ada kan harus dicobain satu-satu, kan
1:15:45siapa yang makan?
1:15:47Jadi setelah dipakai Mocha... - Mocha ini...
1:15:49kabarnya banyak dipakai
1:15:51di library testing untuk library.
1:15:53Jadi udah, mungkin udah keburu pake
1:15:57Mocha, ya ngapain juga ke Jess dan lain-lain.
1:15:59- Jujur sih se muridnya
1:16:01belum pernah pake Mocha
1:16:03dan gak tau sinteksnya kayak apa.
1:16:05Dan selama ini belum pernah ada perluannya.
1:16:07Jadi ya udah.
1:16:09- Mirip sama Jess, gak beda jauh.
1:16:11- Merip. - Proda owner bilang,
1:16:13"Eh, test kita
1:16:15ini,
1:16:17berhasil mulu,
1:16:19berhasil mulu,
1:16:21ubah aja lah framework-nya."
1:16:23Gitu.
1:16:25- Yang menarik adalah,
1:16:27ini nih, positivity.
1:16:29Positivity.
1:16:31Jess itu turun.
1:16:33Jess itu turun.
1:16:35- Karena lebih berantit ya.
1:16:37Vitesse-nya naik pasti. - Storybook naik.
1:16:39Cypress turun.
1:16:41Papetir...
1:16:43- Oh bisa ya?
1:16:45- Gitu-gitu aja. - Testing library naik.
1:16:47Playwright naik tinggi.
1:16:49- Wow.
1:16:51- Vitesse lebih tinggi lagi.
1:16:53- Wow.
1:16:55Selenium mungkin
1:16:57turun ya benar.
1:16:59Test Cafe turun sedikit.
1:17:01Mock Service ya baru.
1:17:03Jadi kelihatan ya.
1:17:05Jess mulai turun.
1:17:07Test Cafe itu
1:17:09test suite juga sih.
1:17:11- End-to-end. - End-to-end testing ya?
1:17:13- End-to-end, iya.
1:17:15Ya dia bisnis, kayak bisnis,
1:17:17dia bisa kayak pakai bahasa bisnis gitu.
1:17:19Nanti di-translate.
1:17:21- Oh pakai kata-kata berarti...
1:17:23- Kayak Cucumber ya?
1:17:25Bahasa Inggris ya?
1:17:27- Iya.
1:17:29- Jadi di sini Jess mulai turun.
1:17:31Si Vitesse mulai naik.
1:17:33Udah mulai banyak kan bermunculan
1:17:37library
1:17:41author atau maintainer itu
1:17:43migrasi dari Jess ke Vitesse.
1:17:45Testing Tools.
1:17:49Experience.
1:17:51Ini experience-nya.
1:17:53Jess masih tinggi.
1:17:55Dan tingkat kepuasannya juga oke.
1:17:57- Ya, reasonable.
1:17:59- Ketarikannya juga oke.
1:18:01Storybook sama, kurang lebih.
1:18:03- Storybook tuh buat visual testing-nya ya?
1:18:05- Ya, visual testing.
1:18:07Kalau Cypress ini
1:18:09integration testing ya. End-to-end testing juga ya Cypress.
1:18:11- Bisa dua-duanya.
1:18:13- Bisa dua-duanya.
1:18:15Ini juga lumayan.
1:18:19Buka yang 50/50 sekarang ya
1:18:21mulai ditinggalkan berarti.
1:18:23Dan ada yang
1:18:25dengar, tapi nggak mau
1:18:27pikir lagi.
1:18:29- Udah denger, cuma nggak terperiksa.
1:18:31- Testing Library ini
1:18:33cukup tinggi.
1:18:35Dan tingkat kepuasannya
1:18:37cukup tinggi. Ininya masih 50/50.
1:18:39Tapi jarang di dengar.
1:18:41- Tapi banyak banget, belum denger. Berarti nggak follow
1:18:43can-see-dots.
1:18:45- Nggak follow can-see-dots.
1:18:47- Nggak.
1:18:49Dia bukan react-only. Kan ada yang lain.
1:18:51Spell juga ada.
1:18:53Gimana sih?
1:18:55- Itu kayaknya
1:18:57salah kategori deh.
1:18:59AI-nya salah.
1:19:01- Mungkin karena testing library itu
1:19:03apa ya? Kan
1:19:05awalnya memang react kan.
1:19:07- React testing library awalnya.
1:19:09- React testing library. Udah gitu kan
1:19:11si can-see-dots-nya kan
1:19:13memang dia influencer-nya react kan.
1:19:15Karena dia bikin remix kan.
1:19:17- Kan sekarang underlying testing library
1:19:19tapi bisa react, bisa swell, bisa lain-lain.
1:19:21- Dulu dia anggulan.
1:19:23- Dulu kerja di Facebook, bukan?
1:19:25- Bukan.
1:19:27Dia PayPal.
1:19:29- Oh.
1:19:31- 29%
1:19:33Papetir juga lumayan, tingkat
1:19:35kepuasannya lumayan tinggi.
1:19:37Tapi ada juga yang tidak
1:19:39begitu tertarik.
1:19:41Kalau Vitesse, wow.
1:19:43Kepuasannya lebih jauh lagi.
1:19:45- Yang udah denger juga
1:19:47pengen coba.
1:19:49Tapi lumayan banyak juga sama.
1:19:51- Playeride juga sama.
1:19:53- 27%
1:19:55belum denger.
1:19:57- Playeride juga sama,
1:19:59hampir sama seperti Vitesse juga.
1:20:01Ini mirip.
1:20:03- MSW nih, sedikit banget
1:20:05yang udah denger.
1:20:07- MSW iya.
1:20:09- Gak pernah pakai gua.
1:20:11- Gak denger malah.
1:20:13- Ini buat making service worker ya?
1:20:15- Iya, sesuai namanya.
1:20:17Namanya deskriptif ya.
1:20:19Gua taunya gara-gara
1:20:21beli core testingnya.
1:20:23Iya.
1:20:25Jadi kayak...
1:20:27- Kalau GraphQL API?
1:20:29- Oh, kalau GraphQLnya belum coba, mungkin bisa juga.
1:20:31Ya, literally buat
1:20:33nyoba apa?
1:20:35external request.
1:20:37Biar gak harus
1:20:39nge-hit endpoint beneran.
1:20:41Cuma tahu gara-gara
1:20:43apa beli core
1:20:45testingnya, can see dots.
1:20:47Di situ ada kayak cuma satu chapter tentang
1:20:49mob service worker.
1:20:51Yang nyoba itu doang, cuma
1:20:53belum pernah pakai di project.
1:20:55- Oke.
1:20:57Testing tools lain, Boon.
1:20:59Boon ini ada testingnya juga udah built-in.
1:21:01Mengengkap sekali ya.
1:21:03Jasmine.
1:21:05Jasmine ini
1:21:07adalah
1:21:09cikal bakal dari Jazz.
1:21:11Karma...
1:21:15Kayaknya saya buat angkatan sama Jasmine.
1:21:17Dulu-an. - Dulu-an Jasmine ya?
1:21:19- Dulu-an Jasmine.
1:21:21Jasmine itu adalah
1:21:23test runner pertama yang bisa
1:21:27jalan di browser.
1:21:29Di browser ya. Kita pakai
1:21:31CDN, dia bisa jalan.
1:21:35VT sama atau beda?
1:21:37Beda. VT kan
1:21:39ini, apa?
1:21:41Bundler. Kalo VT
1:21:43buat testing. - Library testing.
1:21:45- Namanya kan sudah test.
1:21:47Ada testnya.
1:21:49- Ava.
1:21:51- Istanbul mana?
1:21:53Kok gak ada istanbul?
1:21:55- Ya itu masuk
1:21:57Other Answers kali.
1:21:59Noctua apalah? Notep?
1:22:01Ufu? Apa sih? Ini belum pernah
1:22:03terliru semua.
1:22:05- HTTP Server Working Explanation.
1:22:07- Server Working Explanation.
1:22:09Oh, ini hatu-hatunya MoxServiceWorker tadi ya.
1:22:11- Japa. Japa ini
1:22:13kayaknya menarik deh. Pernah
1:22:15ngelirik juga, tapi
1:22:17ini sebelum Vtes
1:22:19kayaknya. Sebelum Vtes muncul dia
1:22:21sempat muncul.
1:22:23No overhead.
1:22:25Dan sekarang, oh ini buat
1:22:27backend ya?
1:22:29Backend. Khusus backend.
1:22:31Dan sekarang,
1:22:33sudah ada,
1:22:35Node.js sudah muncul
1:22:37test runner sendiri.
1:22:39Jadi mungkin agak terkis ya.
1:22:41Baru mau muncul tiba-tiba
1:22:43udah ada apes ya.
1:22:45Si Japa ini.
1:22:47Deno juga sama seperti bun.
1:22:49- Demo test namanya apes.
1:22:51- Logonya itu ya, monyet ya.
1:22:57Apes.
1:22:59Bukan.
1:23:01- Keyunit ini buat
1:23:03jQuery bukan?
1:23:05Bukan ya?
1:23:07- Easy to use JavaScript
1:23:09unifesting by one.
1:23:11- Oh, bukan. Bukan.
1:23:13Ini buat
1:23:15kayaknya buat di browser juga.
1:23:17- Kayaknya pernah lihat gua ini.
1:23:19- Keyunit. Yang lain ada?
1:23:21Apa? Gak bisa diklik ya?
1:23:23- Istanbul. - Gak bisa.
1:23:25- Ya, Istanbul 40% lah.
1:23:27- Sisa nya itu Istanbul.
1:23:29- Nggak ada lagi sih yang pakai Istanbul.
1:23:31Sedih gua.
1:23:33- Istanbul bukan buat
1:23:35copyrights ya.
1:23:37Tapi itu buat testing juga ya.
1:23:39- Painpoint.
1:23:41Mocking.
1:23:43Configuration.
1:23:45Performance. Yes.
1:23:47- Yes. Ya, biasa ya.
1:23:49Berarti makin banyak yang dipakai, makin banyak
1:23:51komplainnya.
1:23:53- Yes, banyak masalah memang.
1:23:55Morelic. Import problem.
1:23:57- Import. - Annoying.
1:23:59- Super annoying. Betul. Makanya pindah ke fitness.
1:24:01- Yes, module.
1:24:03Dia masih belum yes module
1:24:05soalnya. Jadi butuh
1:24:07bubble dan lain-lain.
1:24:09- Iya.
1:24:11- I want to test my private methods. Just why?
1:24:13- I want to test my private methods. Just why?
1:24:15- Yes, dom. Slow
1:24:19compilation.
1:24:21Just ASM support is constant
1:24:23headache.
1:24:25Too slow.
1:24:27ASM. Banyak kan ASM ya.
1:24:29Sama konfigurasi.
1:24:31Excessive complexity
1:24:33muncul lagi, end-to-end testing, bingung,
1:24:35flakiness, TypeScript support,
1:24:37Cypress.
1:24:39- Flakiness itu apa ya?
1:24:41- Flakiness itu maksudnya apa ya?
1:24:47Kayak yang ditest nggak sesuai
1:24:49sama kejadian
1:24:51ya. - Bukan.
1:24:53Kayak item-item gitu loh.
1:24:55Jadi kayak hasilnya
1:24:57bisa beda-beda.
1:24:59- Oh, nggak konsisten.
1:25:01- Unreliable ya berarti.
1:25:03- Iya, unreliable.
1:25:05Jadi di tes sekarang, true.
1:25:07Tapi di tes selanjutnya bisa false.
1:25:09- Atau time out atau apa gitu ya kali ya?
1:25:11TypeScript support,
1:25:15Cypress. - Gue sering
1:25:17ketemu di jazz gitu deh. Kayak memory leak
1:25:19gitu loh. Jadi kayak
1:25:21tiba-tiba dia hasilnya fake.
1:25:23Tapi kalau di riran, benar.
1:25:25- Benar.
1:25:27- Nah, ini sebagian bukan keputuhan ya.
1:25:31Sebagian sebenarnya positif tuh nomor 3
1:25:33time consuming, but the benefits are
1:25:35serious.
1:25:37- Iya, tapi yang
1:25:39di-highlighted kan time consuming-nya
1:25:41sama CAA-nya kali ya? - Iya, karena
1:25:43AI ya. Kan dia bilang,
1:25:45"Saya sebenarnya makan waktu, tapi ya
1:25:47setara. Serious benefits-nya."
1:25:49- Satu project gue sekarang untuk ngarahin
1:25:53integration test itu, satu
1:25:55PR ya. Satu PR
1:25:57sebelum bisa di match itu
1:25:59nunggu 45 menit.
1:26:01- Wah. - Oke, apa
1:26:03GitHub Actions?
1:26:05- Iya. - Travis atau
1:26:07semacamnya.
1:26:09- Catalan nggak masuk.
1:26:11Catalan nggak masuk. Bukan JavaScript.
1:26:13Catalan bukan JavaScript.
1:26:15Ini adalah survei JavaScript.
1:26:17Jadi nggak ada katalon ya.
1:26:19Eh, jangan-jangan ada katalon
1:26:21JavaScript, saya nggak tahu.
1:26:23Kalau saya sih bukan JavaScript ya.
1:26:25Dan itu testing tools yang
1:26:27bukan diketik kan,
1:26:29dark and drop gitu-gitu kan.
1:26:31Testing skenario ya istilahnya ya.
1:26:33Saya nggak tahu istilahnya.
1:26:35Cypress.
1:26:37Apa nih?
1:26:39Bacanya.
1:26:41Ini termasuk
1:26:43sentimen negatif berarti ya?
1:26:45- Nggak tahu. Menurut AI.
1:26:47- Cypress makes life
1:26:49worse.
1:26:51- Fragility, karma,
1:26:53jasmine. Do use
1:26:55headless browser though.
1:26:57- Tapi Cypress itu ini-nya
1:26:59lumayan sih.
1:27:01- Dokumentasinya bagus loh.
1:27:03- Bagus ya. - Ya itu tadi
1:27:05opini kan, subjektif itu.
1:27:07Bagus-nya bagus.
1:27:09- Node.js.
1:27:13- Nod will in. Sekarang udah...
1:27:15- Nod sudah difix.
1:27:17- Ini udah juga...
1:27:21- Ini kan udah.
1:27:23- Ini juga...
1:27:25- Eh, cuma snapshot testing
1:27:27dan lain-lain, nggak tahu bisa atau...
1:27:29- Belum-belum ya.
1:27:31Mocha watch mode
1:27:33with TS node and ESM
1:27:35not working.
1:27:37- Not all browser APIs
1:27:41are implemented in Node.js
1:27:43testing, like resize observer
1:27:45ya iyalah.
1:27:47- Pertanyaan, pertanyaan.
1:27:49Kalau kita bikin test case,
1:27:51perluka pakai
1:27:53TypeScript atau
1:27:55JavaScript aja?
1:27:57- Selama ini sih JavaScript doang.
1:27:59- JavaScript cukup ya?
1:28:01- Test-nya kan, kode test-nya?
1:28:03- Ya, kode test-nya.
1:28:05JavaScript.
1:28:07- Saya JavaScript doang, karena
1:28:09saya pakai TypeScript.
1:28:11- Ribet komponennya.
1:28:13- Bukan yang nambah layer satu complexity sendiri ya?
1:28:15- Ya makanya sih.
1:28:17- Jalanin Mocha
1:28:19pakai TS node
1:28:21sama ESM biar...
1:28:23- TS node-nya buat
1:28:25ngerender si komponennya?
1:28:27Mungkin ya.
1:28:29- Oke, oke, make sense.
1:28:33Testing tools.
1:28:37Front-end testing.
1:28:39I never sure what or how
1:28:41to test the component.
1:28:43Front-end testing.
1:28:45- Nah, itu kalau ada yang punya masalah
1:28:47yang nomor satu, direkomendasikan.
1:28:49Ya, kalau mau cari resource gratisan, ya silahkan.
1:28:51Tapi kalau misalnya ada
1:28:53jenna lebih, beli
1:28:55course testing-nya.
1:28:57Mas Kensy Dodds, recommended.
1:28:59Kan dia perspektifnya juga,
1:29:01perspektifnya, apa
1:29:03gampang dicerna buat front-end dev?
1:29:05- Self-thought atau apalah,
1:29:07gak masalah.
1:29:09- Setup-nya sulit.
1:29:11- Berarti kita bisa
1:29:13bedak buku-nya aja dong.
1:29:15Atau video?
1:29:17- Video dia, online courses.
1:29:19- Video-nya pendek-pendek gitu.
1:29:21Pendek-pendek, terus ada contoh-contohnya.
1:29:23- Kalau videonya di-review,
1:29:27gak itu sih, gak bisa ya.
1:29:29- Wah, kayak enak.
1:29:31- Republish bagi, gak usah lah.
1:29:35- Difficult to test.
1:29:37Ya, masih banyak
1:29:39yang ini ya, kesulitan untuk
1:29:41testing di sisi front-end.
1:29:43Biasanya bingung
1:29:45mau ngetes apa. Ini karena
1:29:47kalau back-end kan kayaknya
1:29:49udah lebih jelas ya, udah lebih mature ya
1:29:51untuk testing ya.
1:29:53Kalau front-end kayaknya
1:29:55masih... - Testing business logic.
1:29:57- Iya, masih agak-agak
1:29:59membidikkan. - Ada itu kan,
1:30:01pyramid of testing. Berarti ya mengerti
1:30:03pyramid of testing aja dulu.
1:30:05- Banyak yang complain itu
1:30:09front-end, itu
1:30:11susah ditest.
1:30:13- Ini kayaknya sebetulnya separuhnya bukan
1:30:15masalah teknis deh, tapi masalah
1:30:17apa ya, kayak habit-nya sih, habit
1:30:19culture, jadi kayak apa ya,
1:30:21gak tahu apa yang ditest.
1:30:23Itu kan berarti ya, gak terbiasa
1:30:25aja. Maksudnya Jessup.
1:30:27Oh bukan, ada Jess, pesaingnya
1:30:29Jess. - Ada.
1:30:31- Tidak, dia script runtime
1:30:33untuk Linux saja.
1:30:35Jess Jess.
1:30:37- Kenapa?
1:30:39- Test dari user aja, bagus.
1:30:43- Kalau ada user yang
1:30:45lapor, oh ini rusak.
1:30:47Bisa diakses lah, itu berarti
1:30:49kan itu failing test-suit ya.
1:30:51- Itu namanya BDD.
1:30:53- Bakterifan
1:30:55Development.
1:30:57- Jangan lupa di-lock ya.
1:30:59- Bukan yang Epic ya,
1:31:01ada yang satu lagi ya.
1:31:03Kalau Epic, ini yang dia
1:31:05bahas remix ya?
1:31:07- Ya, web dev secara unggul.
1:31:09Ya, tapi pakai remix ya,
1:31:11karena dia
1:31:13suka membuat remix.
1:31:15- Terus ini dokumentasinya mana?
1:31:17Oh di GitHub ya.
1:31:19- Ini anak Linux,
1:31:21jadi kayaknya
1:31:23dokumentasinya di-code.
1:31:25Kayak di-code aja, baca aja.
1:31:27- Kamingsun itu?
1:31:29Kenapa masak suit itu ya?
1:31:31Salah kayaknya ya.
1:31:33- Docsnya kamingsun.
1:31:35Apa? I/O?
1:31:37Kok I/O?
1:31:41- I/O.
1:31:43- Ayoloh.
1:31:47- L/O apa I/O nih?
1:31:49L/O ya?
1:31:51- I/O.
1:31:53- L/O.
1:31:55- Runtime-nya ini
1:31:57ya JavaScript runtime-nya ini.
1:31:59Modulnya.
1:32:01- Kenapa masuk?
1:32:03- Tapi bisa masuk ya?
1:32:05Ada 44 orang.
1:32:07Apa janyangan?
1:32:09Just fine.
1:32:11Salah.
1:32:13Salah kategori.
1:32:15- Oh iya, just fine.
1:32:17- Salah kategori.
1:32:19Salah, salah, salah.
1:32:21- Just don't write bugs.
1:32:23Itu masalahnya.
1:32:25Just don't write bugs shaking my head.
1:32:27Nomor 4.
1:32:31- VITES.
1:32:33Apa masalah VITES?
1:32:35- Just should let VITES take over.
1:32:39VITES is great, but limiting.
1:32:43Ini yang nomor 1 sama 2
1:32:49itu sebenarnya malah memuji VITES ya.
1:32:51Bagus sebenarnya.
1:32:53Ini sebenarnya VU3-nya, bukan?
1:33:01Ini juga
1:33:07ini juga positif sebenarnya.
1:33:11- Apa itu?
1:33:13- Common JS, yes,
1:33:15module pain if not
1:33:17a modern testing framework like VITES.
1:33:19Kalau selain VITES...
1:33:21- Memuji VITES.
1:33:23- Ini sebenarnya muji.
1:33:25VITES is slower than VITES.
1:33:27VITES is slower than BUN.
1:33:29Oh berarti BUN paling cepat.
1:33:31- BUN paling cepat.
1:33:33Ya kan itu tadi disesuaikan.
1:33:35Sesuai dengan...
1:33:37- Iya, tadi ada.
1:33:39Slow startup times,
1:33:41but VITES solves that completely.
1:33:43Ini juga positif.
1:33:45Most popular option
1:33:47JS is much slower than
1:33:49alternative like VITES, ini juga positif.
1:33:51Banyak positifnya, berarti nggak relevan
1:33:53penpoinnya. Error handling,
1:33:55other answer apa?
1:33:57Over limit, cut off answer, oh ini ya.
1:33:59Ini nih.
1:34:01Course-nya yang ini ya, yang apa?
1:34:03Testing Javascript ya.
1:34:05.com
1:34:07Page dulu.
1:34:09Oke.
1:34:11Recommended resource
1:34:13web app testing and tools.
1:34:15Oh ini yang bikin pick ya.
1:34:17Ini yang bagus-bagus
1:34:19juga loh.
1:34:21Recommendednya ini.
1:34:23Bagus, bagus.
1:34:25Ini dari front-end masters, bukan?
1:34:27Iya bener.
1:34:29Dari front-end masters.
1:34:31Jualan dikit, tapi dia kasih yang
1:34:33kualitas yang sudah kayak editor-editor.
1:34:35Jualan tapi emang...
1:34:37dan emang sesuai sama market kan.
1:34:39Adversarial, editor-choice ya.
1:34:41Editor-choice.
1:34:43Oke.
1:34:45Mungkin kita
1:34:47stop sampai disini dulu kali ya.
1:34:49Stop dulu, ngantuk.
1:34:51Tidak ngantuk.
1:34:53Sudah ngantuk.
1:34:55Buat yang mau
1:34:57apa, memulai testing,
1:34:59ini sangat direkomendasikan ya
1:35:01sesingjavascript.com, walaupun
1:35:03harganya tidak murah ya.
1:35:05Tapi worth it ya.
1:35:07Buat Indonesia, itu ada diskon negara
1:35:09diskon negara berkembang.
1:35:11Perti purchase ya.
1:35:13Perti purchase.
1:35:15Sama kalau apa sih kayak Black Friday
1:35:17atau apalah yang di Amerika suka diskon-diskon
1:35:19gitu, itu diskon juga.
1:35:21Jadi apa, udah ada potongan karena
1:35:23negara agak susah.
1:35:25Plus diskon, ya
1:35:27diskon apa, buy event itu.
1:35:29Black Friday masih lama.
1:35:3110-3 bulan lagi.
1:35:33Eka kan udah beli ya.
1:35:35Coba dikontak, mas Ken
1:35:37Sidwarts-nya undang kesini.
1:35:41Alusannya saya udah beli kursus.
1:35:43Mau promosiin.
1:35:45Oh, cuma dia sekarang gak terlalu
1:35:47semangat promosi itu.
1:35:49Dia fokusnya ke yang webdev itu.
1:35:51Karena disambungin sama Remix.
1:35:53Remix ya.
1:35:55Sekalian ngomongin playwright aja
1:35:57di sini. Remix juga bisa, boleh.
1:35:59Gak masalah.
1:36:01Kita mah terima-terima aja.
1:36:03Terus Eka-nya,
1:36:05gimana kontaknya?
1:36:07Oh no, berani bayar
1:36:09berapa.
1:36:11Oh iya dia, dia emang
1:36:13dia kerjaannya kan bikin workshop nanti.
1:36:15Dibedah-bedah kirim invoice.
1:36:17Dapet invoice.
1:36:19Full stack gak perlu testing.
1:36:21Enak aja.
1:36:23Siapa bilang.
1:36:25Justru.
1:36:27Kalau
1:36:29kalau ini, kalau
1:36:31yang nge-developnya sedikit,
1:36:33maksudnya orangnya yang kecil
1:36:35dan
1:36:37yang di-maintain
1:36:39gak lama-lama amat ya
1:36:41testing sih overhead.
1:36:43Tapi kalau timnya sudah banyak,
1:36:45yang memakai banyak,
1:36:47dan legacy code nya itu
1:36:49sudah lebih dari
1:36:512 tahun, 3 tahun.
1:36:53Kalau gak punya testing,
1:36:55nah itu
1:36:57apa namanya,
1:36:59hidup menjadi
1:37:01jauh lebih susah.
1:37:03Kapan bahas re-query?
1:37:05Tapi walaupun gak perfect ya,
1:37:07maksudnya gak 100%
1:37:09ya 1, 2,
1:37:113 skenario paling penting
1:37:13end to end.
1:37:15Kita sebutnya minimal
1:37:17critical scenario harus
1:37:19di-covered.
1:37:21Harus bisa login, jangan sampai tiba-tiba user gak bisa login.
1:37:23User harus bisa buka landing page dan ada
1:37:25kontennya.
1:37:27Kalau pun gak bisa perfect yang kayak
1:37:29orang-orang.
1:37:31Ya maksudnya gak perlu end to end testing yang 100%
1:37:33segala macem.
1:37:35Implementasinya
1:37:37bisa buka
1:37:39landing page.
1:37:41Betul-betul.
1:37:43Terus itu enak sih karena disambungin ke
1:37:45ICD pipeline sih.
1:37:47Karena daripada musim pusing juga kan
1:37:49kalau harus cek setiap
1:37:51nge-deploy, cek satu per satu,
1:37:53terus bisa login, terus bisa apa.
1:37:55Ya belum contoh, ada waktunya juga.
1:37:57Dibikin aja udah kalau
1:37:59itu passing semua baru bisa deploy
1:38:01nah malah udah kerja sekali
1:38:03gak usah dipikir lagi.
1:38:05Kecuali implementasi kita berubah.
1:38:07Sebagai salah satu pandangan
1:38:11saya ngeliatnya sekarang di salah satu
1:38:15bank
1:38:17yang marketnya
1:38:19di 50 negara.
1:38:21Terus kalau misalnya
1:38:23apa namanya?
1:38:25Tanpa testing
1:38:27saya gak berani untuk nge-deploy.
1:38:29Cuma kalau bank
1:38:31serem sih, harus lebih
1:38:33serius ya.
1:38:35Meskipun gak ada urusan sama transaksi ya.
1:38:37Karena saya gak ada urusan sama transaksi.
1:38:39Tapi ada compliance.
1:38:41Bukan, gak ada urusan sama transaksi.
1:38:43Jadi gak ada urusan sama bank yang untuk
1:38:45internet banking. Ini murni
1:38:47hanya konten.
1:38:49Tetapi urusannya sama compliance.
1:38:51Dan itu kan urusan compliance
1:38:55itu urusan sama
1:38:57gak main-main sama
1:38:59gak main-main.
1:39:01Jadi legal.
1:39:03Jadi gak bisa sembarangan.
1:39:05Minimal banget.
1:39:09Kalaupun misalkan temen-temen
1:39:11udah terlanjur
1:39:13projectnya udah terlanjur jalan
1:39:15gak ada testingnya. Minimal
1:39:17ketika ada bug, mulai bikin test
1:39:19untuk solving bug.
1:39:21Itu starting point yang
1:39:23paling minimal. Kecil-kecil aja dulu.
1:39:25Jadi mulai sesuatu yang critical.
1:39:27Pilih aja critical requirement,
1:39:29critical business scenario.
1:39:31Itunya aja dulu mulai.
1:39:33Bikin satu-satu.
1:39:35Jadi mulai tenang kepalanya.
1:39:37Karena biasanya
1:39:39kadang-kadang,
1:39:41bukan kadang-kadang, sering kali
1:39:43kita fixing bug ini, muncul bug yang
1:39:45lain. Kita fixing ini, bug yang tadi
1:39:47muncul lagi. Karena gak di-check.
1:39:49Oke main-main itu, yang kepala gue yang muncul
1:39:51itu tau gak sih di time zone?
1:39:53Pukul satu, muncul.
1:39:55Tau kan?
1:39:57Tau, tau.
1:39:59Jadi, ya...
1:40:03Kadang, ada lagi itu yang mainan
1:40:05tau gak ya? Gigi. Yang dia main
1:40:07buka gigi, terus kita harus pencet
1:40:09giginya satu-satu.
1:40:11Jadi, kira-kira bugnya ini
1:40:13bukan gak ya?
1:40:15Kira-kira bug ini bukan ya?
1:40:17Tiba-tiba,
1:40:19benerin, terus kegigit.
1:40:21Nah, itu sakit.
1:40:23Itu namanya
1:40:25gacha.
1:40:27Gacha development.
1:40:29Cari bugnya pake gacha.
1:40:31Kalo beruntung dapet, kalo gak beruntung
1:40:33bugnya nambah.
1:40:35Kalo nambah yang tadi gak betul, sekarang
1:40:39nambah satu lagi. Malah salah.
1:40:41Malah jadi salah.
1:40:43Begitulah. Oke, kalo gitu.
1:40:45Belum udahan, jangan lupa,
1:40:47silahkan teman-teman
1:40:49kunjungi kesana.in/
1:40:51ngobrolinweb.
1:40:53Kita bisa diskusi disini.
1:40:55Kita udah bahas.
1:40:57Monorepo belum, database scaling
1:40:59belum, dokumentasi belum,
1:41:01licensing menarik nih.
1:41:03Big O.
1:41:05Fundamental ya. Design pattern.
1:41:07Kita belum pernah balik ke fundamental ya.
1:41:09Belum ya.
1:41:11Nah, kira-kira
1:41:15apakah si apa?
1:41:17Si state of JS-nya perlu kita lanjutkan
1:41:19sampai
1:41:21dimana? Kayaknya perlu ya.
1:41:23Tinggal sedikit lagi kok. Paling satu episode
1:41:25lagi ya terakhir kali ya.
1:41:27Atau kali di gabung sama ya
1:41:29kita cari inspirasi dulu. Kali misalnya
1:41:31bahas tentang mobile desktop,
1:41:33di gabung aja sama topik
1:41:35yang misalnya bahas elektron.
1:41:37Ya kita bahas elektron. Oh iya, menarik, menarik.
1:41:39Benar, benar, benar.
1:41:41Tapi kita merendung dulu ya.
1:41:43Merendung dulu ya. Bisa gak ya
1:41:45kalau repo testing dipisah
1:41:47sama repo project?
1:41:49Bisa, tapi
1:41:51buat apa? Buat apa?
1:41:53Jadi maintain dua project
1:41:55dong. Nanti kalau misalkan ada perubahan
1:41:57ketemu bugs-nya di
1:41:59testing, terus perbaikinya di sini
1:42:01yang di aslinya enggak.
1:42:03Gimana tuh? Terus kalau kayak unit testing
1:42:05berarti komponennya udah dipublish
1:42:07dulu gitu ke NPM misalnya.
1:42:09Ya bisa sih kalau bisa atau enggak, bisa.
1:42:11Tapi kan berarti misalnya sambil
1:42:13test. Iya.
1:42:15Ngefix dulu, dipublish,
1:42:17terus di-testing. Biasanya test code-nya
1:42:19itu satu
1:42:21berdampingan dengan
1:42:23source code.
1:42:25Ya, pertanyaannya kenapa harus
1:42:27dipisah?
1:42:29Takut ngerusak gitu testing-nya. Kan testing-nya
1:42:31di file atau di folder yang berbeda.
1:42:33Nggak bakal ngerusak kode aslinya, kan?
1:42:35Nggak bakal dibuild juga, kan?
1:42:37Apa yang menyebabkan
1:42:41ingin dipisah gitu.
1:42:43Pasti ada
1:42:45case tertentu.
1:42:47Mau ngetestim
1:42:49supaya enggak berantem.
1:42:51Biar enggak berantem
1:42:53ya testing.
1:42:55Kode-nya biar enggak berantem kode-nya.
1:42:57Nggak konflik gitu.
1:42:59Konflik apa nih?
1:43:01Konflik kode apa konflik
1:43:03berantem sama orangnya.
1:43:05Nggak mau bikin testing.
1:43:07Kode-nya berantem.
1:43:09Kode-nya berantem.
1:43:11Oke. Mungkin untuk malam ini
1:43:13Tapi paling susah tuh nge-maintain testing lho.
1:43:15Satu lagi. Nge-maintain testing.
1:43:17Pasti.
1:43:19Saya sering ya
1:43:21nggak sekarang sih sudah disiplin
1:43:23enginer-enginer yang
1:43:25kubu sebelah. Memulainya
1:43:27itu susah. Kalau udah disiplin gampang.
1:43:29Kadang-kadang ada
1:43:31zaman dulu tuh supaya
1:43:33supaya testing-nya pas
1:43:35kode
1:43:37nge-maintain testing-nya yang didisable.
1:43:39True, true.
1:43:41Iya.
1:43:43Sama kayak bingung
1:43:45ini ISLIN-nya kok ini ada warning ya.
1:43:47Terus nggak bisa di-purequest kan.
1:43:49Diignore aja.
1:43:51ISLIN
1:43:53Ignore file.
1:43:55Mantap.
1:43:57Apalagi TS, TS Ignore.
1:43:59TS Ignore.
1:44:01Ini-ini nggak apa-apa lewat.
1:44:05Oke, oke, oke, oke.
1:44:07Ya, jadi untuk malam ini
1:44:09sekian dulu. Kita ketemu lagi
1:44:11minggu depan.
1:44:13Topiknya sama atau
1:44:15beda? Ya, ditunggu aja.
1:44:17Atau mirip-mirip? Atau mirip-mirip ya.
1:44:19Kalau, apa namanya?
1:44:21Kalau misalkan
1:44:23temen-temen mau
1:44:25suggest topic, boleh
1:44:27tadi di ngoprolin web/
1:44:29ngoprolin web, kesanain/
1:44:31ngoprolin web.
1:44:33Ini dia. Nanti kita
1:44:35lihat-lihat lagi, oke?
1:44:37Sekian dulu. Selamat malam, selamat istirahat.
1:44:39Sampai jumpa. Bye-bye.
1:44:41Bye-bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
23 Sep 2025
Toolkit Modern - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini akan membahas tentang alat bantu modern seperti vitest, unjs, roll...
18 Nov 2025
Serba Serbi Pengujian: Vitest, Jest, dkk - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini membahas serba-serbi pengujian atau testing, spesifiknya akan memb...
4 Jun 2024
Ngobrolin NextJS - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...