Ngobrolin NextJS - 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://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin kali ini membahas update terbaru dari Next.js 14 beserta berbagai kontroversi dan perubahan signifikan yang dibawanya. Diskusi dimulai dengan keluhan para peserta mengenai kecepatan update Next.js yang dinilai terlalu cepat, seringkali mengadopsi fitur React yang masih bersifat experimental sebelum stabil, yang menyebabkan breaking changes dan API yang deprecated dalam beberapa major version. Para peserta berbagi pengalaman kurang menyenangkan saat mengupdate versi framework, terutama dalam lingkungan produksi. Topik utama yang dibahas mencakup pengenalan Turbopack sebagai pengganti webpack yang menjanjikan performa lebih baik, Server Actions yang memungkinkan pemanggilan fungsi server dari client components, dan Partial Prerendering (PPR) untuk mengoptimasi rendering konten statis dan dinamis dalam satu layout. Kontroversi terbesar dibahas adalah perilaku caching by default pada Next.js 14 yang dianggap berbahaya karena dapat menyebabkan unexpected behavior, sehingga pada versi 15 caching akan diubah menjadi opt-in setelah mendapat protes dari komunitas. Diskusi juga menyentuh perbandingan Next.js dengan framework lain seperti Remix, Astro, dan pendekatan tradisional seperti Laravel + Blade, serta tantangan dalam memilih teknologi yang stabil versus yang selalu mengikuti perkembangan terbaru.
Poin-poin Utama
- •Next.js 14 hadir dengan fitur-fitur utama seperti Turbopack (bundler baru), Server Actions, Partial Pre-rendering (PPR), dan peningkatan pada self-hosting sebagai respons terhadap developer yang bermigrasi ke OpenNext.
- •App Router mengubah paradigma dari Pages Router menjadi server first di mana semua komponen dianggap server-side secara default, dan hanya komponen dengan direktif 'use client' yang akan di-render di client.
- •Masalah utama Next.js adalah update yang sangat cepat dan sering mengubah atau meng-deprecated API, sehingga developer sering kesulitan untuk keep up-to-date dan menghadapi breaking changes.
- •Sistem caching di Next.js 14 masih caching by default yang bisa membingungkan, namun di Next.js 15 akan berubah menjadi opt-in caching sebagai respons terhadap feedback dari komunitas developer.
- •Turbopack diklaim lebih cepat hingga 96% dibanding webpack dan dalam status RC untuk production, namun banyak developer yang masih ragu untuk menggunakannya di lingkungan production karena masih eksperimental.
- •Partial Pre-rendering (PPR) memungkinkan kombinasi antara shell/static content dan dynamic content dalam satu halaman, mirip dengan konsep Island architecture dan App Shell pattern di PWA.
- •Diskusi juga mencakup alternatif framework seperti Remix, Astro, Hono, Fresh (Deno), dan Elysia JS sebagai pilihan yang lebih stabil, serta konsep modern monolith menggunakan Laravel + Inertia.js untuk developer PHP yang ingin UI modern tanpa kompleksitas full-stack JavaScript.
0:12Halo-halo-halo, selamat malam.
0:14Selamat malam.
0:17Ketemu lagi kita malam hari ini.
0:20Selamat hari Selasa.
0:22Seperti biasa, kalau hari Selasa itu adalah waktunya...
0:26Waktunya...
0:28Ngobrolin, weh.
0:30Weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh, weh.
0:33Pada sibuk apa nih?
0:35Karena saya habis sibuk...
0:37Gue sibuk banget.
0:38Astaga.
0:40Sibuk apa? Sibuk apa?
0:42Sibuk kerjaan.
0:44Sibuk kerjaan banget.
0:46Banget ya.
0:47Biasa kan...
0:48Kan, sudah memasuki ini kan ya?
0:52Ini sudah memasuk Q...
0:54Berapa ini?
0:56Masih Q2, tapi Q2-nya mau habis.
0:58Ampir tiga.
1:00Iya, sudah hampir tiga kan.
1:02Jadi banyak yang dipush.
1:04OKR, OKR.
1:08OKR.
1:10Aduh.
1:13Teman-teman sibuk apa?
1:15Lagi ngulik apa gitu ya?
1:17Lagi...
Lihat transkrip lengkap
1:19Tertarik ke...
1:21Framework apa misalkan ya?
1:23Dan seperti apa?
1:26Judul kita, malam hari ini kita akan membahas...
1:29Bukan membahas ya.
1:31The Next Java Street.
1:33The Next Java Street.
1:35The Next Java Street.
1:37Kita pernah beras Next Java Street nggak sih sebenarnya?
1:39Sebelumnya?
1:40Kayaknya pernah ya, Nextcom pernah ya kayaknya ya.
1:42Yang tentang Turgopek dan lain-lain ya.
1:45Iya, terus kemudian pernah yang sama...
1:48React ID.
1:50Frameworks.
1:53Tuh, cocok nih lagi belajar Next.
1:55Jadi bisa kita tanyain juga.
1:57Karena...
1:58Jujur kita penasaran banget sama...
2:01Update terbaru dari Next.js.
2:04Next.js 14.
2:07Udah dinilang sebenarnya kan dari tahun lalu ya.
2:10Akhir tahun lalu.
2:11Tapi kita belum sempet...
2:13Belum sempet catch up.
2:14Makanya malam ini kita sempatkan untuk...
2:16Cari tahu.
2:17Kira-kira...
2:19Update apa aja yang seru, apa yang menarik.
2:22Karena kita juga belum tahu.
2:24Tapi kita penasaran.
2:25Karena...
2:26Karena Next.js ini termasuk nilainya cepat ya.
2:28Kayaknya geraknya cepat dan...
2:30Ya, perkembangannya cepat sekali.
2:31Kadang...
2:32Apa ya...
2:33Mungkin dibandingin ekosistem yang...
2:36Tawas yang dulu.
2:37Ini kayak tergolong ekstrim nggak sih?
2:39Kayak dalam...
2:41Dalam beberapa major version.
2:43Atau apa?
2:45Bukan ada API yang diperkekit.
2:48Yang kayak dulu apa sih?
2:49GetStaticSite.
2:51Blah-blah-blah.
2:52Jadi dulu mereka prescribe...
2:55API-nya begini-gini-gini.
2:57Dalam 2-3 major update.
2:59Oh nggak.
3:00Itu udah diperkedit.
3:01Sekarang kita punya yang baru.
3:03Kayak geraknya lumayan cepat sih.
3:05Kalau menurut optimis gue.
3:07Dan ini satu lagi dilemanya.
3:10Apa sih?
3:11Dulu itu sebelum jadi full-time web dev.
3:14Bayangin.
3:15Enak banget kerja jadi developer.
3:17Tiap hari bisa ngulik.
3:19Bisa ngulik.
3:20Apalah framework baru atau apa.
3:22Sekarang terlalu banyak yang diulik ya.
3:25Terlalu.
3:26Waktu udah kerja, ya kan harus ngikutin kebutuhan di kerjaan.
3:30Dan nggak bisa gonta-ganti.
3:32Saya enak ngulik dulu juga kan.
3:33Dan kadang stack-nya yang kita nggak terlalu suka.
3:36Tapi ya harus adjust.
3:38Nah, giliran mau ngulik yang baru, yang seru, yang flashing new things.
3:44Hah, udah capek.
3:46Jadi nggak sempet akhirnya malah.
3:48Tapi ada pengalaman nggak sih.
3:51Upgrade versi dari misalnya Next.js.
3:56Berapa ke berapa.
3:58React berapa ke berapa itu.
4:00Punya nightmare nggak sendiri nggak sih kalian.
4:03Atau teman-teman disini yang nonton punya nightmare nggak sih.
4:06Mengupdate major version itu.
4:09Backward compatibility nggak.
4:12Atau breaking change.
4:14Belum lagi incompatibility.
4:16Gimana, pernah ini nggak?
4:19Karena pengalaman saya banyakan ngajar.
4:24Pernah punya pengalaman buruk ketika ngajar React Native.
4:29Oh no. Kenapa gitu?
4:32Jadi pagi itu masih versi sekian.
4:35Waktu sehari sebelumnya udah dicoba, demo-nya lancar.
4:40Begitu siang, itu nggak jalan.
4:42Ternyata ada upgrade.
4:43Pas siang itu.
4:45Begitu dilihat dokumentasinya itu udah berubah versi.
4:49Dan nggak bisa jalan.
4:51Nggak bisa dilock version.
4:53Tapi itu kan kalau create new React Native app gitu ya.
4:58Kalau pakai command kayak gitu kan yang muncul yang baru.
5:02Iya.
5:04Kan kalau misalkan demo di kelas gitu kan.
5:07Modulnya dijalani gitu ya kayak create new app gitu ya.
5:11Betul.
5:13Kalau kita bikin dari awal kan nggak mungkin kita lock kan versinya kan.
5:18Jadi itu pengalaman yang lumayan apa ya.
5:23Kok nggak jalan? Kaget kan? Panik gitu kan.
5:26Ayo kita lihat sama-sama dokumentasinya.
5:28Perasaan tadi pagi masih versi segini.
5:31Soalnya ini nya demo-nya itu pagi terus dilanjut siang.
5:41Pas pagi jalan siangnya udah nggak jalan.
5:43Itu sung banget sih.
5:47Kalau produk sih belum ya.
5:50Biasanya sudah terbiasa nge-lock version tadi.
5:53Jadi kalau ketika di package JSON itu udah nggak pakai carrot lagi.
5:57Udah nggak pakai yang tanda rumah begini kan.
5:59Udah dihapus semua. Udah lock version semua.
6:02Jadi cenderung lebih aman.
6:04Pakai carrot aja yang cacing. Jadi cuma patch version aja.
6:11Ya yang minor.
6:13Halo-halo.
6:15Kalau Eka ada nggak pengalaman?
6:17Nggak pernah sih.
6:19Soalnya kalau tempat kerja nggak pernah.
6:21Karena emang apa ya kayak ati-ati banget kayak harus bilang.
6:26Dan pasti yang lain juga ingetin beneran stand by nge-check dulu semua.
6:31Terus ada kayak end-to-end test.
6:34Jadi kalau yang minta update major version.
6:38Itu beneran cuma harus karena security reason.
6:40Bukan karena iseng atau pengen.
6:42Sama ya emang harus ditungguin.
6:44Dan semua yang lain juga kayak sambil ngerjain yang lain.
6:48Tapi stand by ngebantuin kalau ada apa-apa.
6:51Jadi nggak pernah kenapa-napa yang ekstrim.
6:54Dan emang kayak discourage sih.
6:56Even security pun ya kayak harus beneran conscience banget.
7:00Nah ini beneran udah nggak ada security update nih.
7:02Penting banget kayak digituin baru update tersebut.
7:06Tapi kalau personal, pribadi sih sering.
7:10Tapi kan cuma kayak starter slide atau template.
7:13Atau apalah coba-coba doang.
7:15Dan dulu tuh nggak ngerti, belum ngerti bedanya.
7:17Apa sih yang lancip begini sama yang begini?
7:20Carat sama...
7:22Carat sama apa ini namanya?
7:24Tilde.
7:26Bahasa sebutnya cacing.
7:30Kalau cacingnya tiduran begini dong jadi dust.
7:35Ya gitu.
7:36Namanya dulu belum itu sama sekali sih.
7:38Sampai pernah...
7:40Dulu pernah apa ya yang...
7:42Ya paling ketikungnya cuma incompatible.
7:47Antar...
7:49Ya antar versi lah.
7:51Tapi intinya belum pernah yang patah.
7:56Kalau saya barusan tuh...
7:58Sering, sering, sering.
8:00Kenapa, kenapa?
8:02Gimana ceritanya?
8:04Ya barusan ini, barusan kayak 2 hari lalu.
8:07Which is nggak bisa saya solve.
8:09Jadi ah sudahlah bodoh amat.
8:11Stay aja lah disitu.
8:13Mau gimana lagi?
8:15Jadi di downgrade versinya?
8:17Ya udah di lock aja disitu dulu.
8:19Karena nggak keburu waktunya.
8:21Jadi kayak memang nggak punya waktu.
8:23Maksudnya tadinya iseng aja...
8:26Coba update siapa tahu.
8:28Lebih cepet atau lebih bagus gitu ya.
8:31Setelah nyoba nge-stack 2 jam...
8:35Ah bodoh amat dah.
8:37Move on.
8:39Kasusnya itu kayak YJS ya.
8:44YJS framework itu buat collaboration editing.
8:49Dia si apa?
8:51Conflict Resolution Data Type.
8:54CRDT ya.
8:56Jadi saya ada server side-nya.
9:00Pake YJS.
9:02Tetapi YJS-nya ini...
9:04Dijalankan pakai V8.js.
9:06Jadi bukan...
9:08Bukan pakai node.
9:10Ya pakai node sih jalannya.
9:12Cuma bukan pakai node server.
9:15Jadi pakainya node runtime yang dari V8.js.
9:19Yang dari PHP.
9:21Jadi pakai PHP ngerunning node.
9:25Sebagai extension.
9:27Bisa.
9:29Namanya V8.js.
9:31Jadi PHP extension untuk ngerunning node.
9:35Di PHP server.
9:37Di PHP runtime bahasanya.
9:40Anyway.
9:42Tapi V8.js ini kan...
9:44Sesuatu teknologi yang...
9:46Nggak di maintain lagi.
9:48Jadi banyak hal-hal yang...
9:50Yang...
9:52Kayak IS module itu nggak jalan.
9:55Atau TypeScript itu nggak jalan secara module.
9:58Ya module nggak jalan. Harus di-compass sebagai...
10:00Common JS.
10:02Nah YJS-nya ini...
10:04Nge...
10:06Versi upgraded...
10:08Versionnya 36-37 gitu.
10:11Dia ubah ke TypeScript semua.
10:14Usah lah bukan ke TypeScript.
10:16Dia mulai pakai Type.
10:18Type system.
10:20Ya kan? Type system.
10:22Type-nya ditaruh mana?
10:24Kayak ambient gitu, DTS.
10:26Ya apa? Disikunya beneran.
10:28Nah kalau disikunya kodanya berarti kan harus...
10:30Di kodanya.
10:32Aduh harus sih...
10:34Dan saya nge-compiler pakai roll-up.
10:37Karena nggak mau ribet.
10:39Ke... Cuma ke Common JS.
10:41Jadi cuma kayak...
10:43Tapi hasil compilenya nggak...
10:45Nggak sempurna.
10:47Yah... Nggak jalan.
10:49Sebelumnya jalan. 36 jalan.
10:5137 nggak jalan. Ya sudah lah.
10:53Nyerah, nyerah.
10:5536 dikasih komen huruf besar.
10:57Jangan di-update. Nanti kacau.
10:59Move on, move on.
11:01Nanti gitu-gitu lah.
11:03Dan...
11:05Ini adalah salah satu ini ya.
11:07Salah satu...
11:09Sebab kenapa Next.js itu update-nya cepat.
11:11Karena...
11:13Dia...
11:15Sangat tergantung kepada react.
11:17Yang juga update-nya tidak kalah cepatnya juga.
11:19Mungkin beberapa tahun ini...
11:21Mungkin agak slowing down ya.
11:23Agak pelan sedikit.
11:25Tapi sebelum-sebelumnya itu...
11:27Kencang banget. Gitu.
11:29Kencang banget.
11:31Ini ada kontroversi apa sih? Ya maksudnya mild.
11:35Kontroversi yang Next.js itu...
11:37Pakai react yang masih beta.
11:39Pakai API yang...
11:41API-nya react yang belum dipublish.
11:43Sebetulnya.
11:45Jadi mereka pakai duluan.
11:47Kenapa ya kasusnya? Cuma...
11:49Nggak tahu detail. Lupa detailnya.
11:51Bentar. Cari dulu.
11:53Pokoknya ya itu tadi.
11:55Dia emang keep up banget...
11:57Sama perkembangan react. Dan bahkan react yang masih...
11:59Fitur react yang masih beta pun dipakai.
12:01Jadi ya salah satu...
12:03Harusnya dia bagusnya...
12:05Maksudnya...
12:07Best practice-nya kalau...
12:09Misalnya sesuatu yang belum nonjin...
12:11Mungkin dikasih experimental gitu.
12:13Iya.
12:15Jadi apa bedanya...
12:17Sama react ya?
12:19Nah ini ada...
12:21Artikel yang cukup...
12:23Deep dive. Baca bareng aja.
12:25Karena kemarin-kemarin pas...
12:27Itu kayak, "Oh iya. Udah lah."
12:29Maksudnya nggak rasanya penting buat...
12:31Explore...
12:33Kasusnya kayak gimana.
12:35Is next.js...
12:37Using unreleased experimental...
12:39React feature.
12:41Next.js...
12:47Beloved...
12:49Framework...
12:51For server render.
12:55Zoom in BTW.
12:57Oh iya, sorry. Eh salah.
12:59Salah zoom.
13:01Reactain API itu apa?
13:07Coba gue belum sempat nyoba.
13:09Reactain API?
13:13Apa? Coba itu.
13:17Jadi kesini larinya?
13:19Iya, iya.
13:21Itu mesti penjelasannya. Itu kan di highlight.
13:23In the upcoming next.js 14 release.
13:25You can put that.
13:27Try out.
13:29Kita pengen taunya ini.
13:31Pakai experimental kan?
13:33Experimental.
13:35Let you prevent a specific
13:43object instance from
13:45being passed to a client component
13:47like a user object.
13:51Only available inside
13:533rd server components.
13:55Oke, berarti ini kayak
13:57credentials atau apalah yang...
13:59Security.
14:01Security teams.
14:03The controversy, the journey of next.js
14:09into realm cutting edge technology
14:11began with its 13th
14:13release.
14:15The team behind next
14:17started incorporate feature that
14:19were not yet officially included
14:21in react stable release.
14:23Jadi belum masuk stable,
14:25udah dimasukin ke
14:27next.js 13. Nah cuma
14:29detailnya gimana tuh? Itu deflect
14:31atau enggak, enggak tau ya. Belum dijelasin.
14:33Misalnya react server
14:35component belum masuk stable.
14:37Blah-blah-blah-blah. Lalu
14:39yang 14, Reactain
14:41API.
14:43This forward thinking decision
14:47bahaya dong ya. Kalo misalnya
14:49kalau ternyata enggak jadi atau
14:51berubah, ya kan eksperimental.
14:53Kan dia udah ngasih flag maksudnya
14:55argument. Mungkin kalo dari perspektif
14:57team next.js, ya
14:59orang yang enable
15:01experimental flag, itu kan
15:03at their own risk ya. Siap tanggung
15:05resiko. Nah
15:07cuma kalo, ya itu kan ya.
15:09Dalam hal apapun ada perspektif
15:11A, B, C. Nah kalo yang protest kan
15:13jadi kayak apa ya, kayak mainan banget,
15:15bongkar pasang, ternyata nanti, oh
15:17ternyata bukan kayak gini ya, berubah.
15:19Oh, React juga ada
15:21canary-nya sekarang.
15:23Experiment
15:25unstable.
15:27Canary release channel.
15:29Sampai detik ini, ya
15:37betul. Belum stable ya.
15:39Belum stable ya.
15:41Berarti masih experimental
15:43gitu server component.
15:45Kita lihat nanti ya di
15:51next 14 ya, tapi ini kita run
15:53through dulu ya, tentang apa ini.
15:55Ini kan tadi kan
15:571-4 tuh flow-nya
15:59React canary ya, sebetulnya
16:01penjelasannya.
16:03Masih experimental, wow.
16:05Coba pake
16:09mendang-mending,
16:11bisa gak di-summary ini?
16:13Gak bisa.
16:15Dia cuma bisa bilang mending pake
16:17mcs atau remix.
16:19Experimental release
16:23Oh, pake nano-nano.
16:25Gemini nano mana?
16:27Gak ada disini ya?
16:29Udah ada prom API belum?
16:31Ada prom API soalnya.
16:33Buka yang web UI aja lah,
16:35jamunai.buda.com
16:37suruh summarize
16:39this article, what are the
16:41important points.
16:43Udah baca aja. Udah lah tanggung, the final
16:45assessment. Udah, udah mau
16:47kelar. At present
16:49sedang menjadi
16:51pioneer.
16:53Nah, tuh kan paragraf 2, it's placed
16:59under the experimental flag or property
17:01in config file.
17:03Iya, kalo misalnya mau
17:05pake fitur
17:07yang experimental
17:09harus siap dengan
17:11risiko. - Tapi ya bagus juga sih ya, Beka.
17:13Bisa jadi ngetes,
17:15membantu timnya react juga sih sebenarnya,
17:17gak ya? - Iya, oh, oh.
17:19Nah, kelinci percobaannya adalah developer
17:21yang pake fitur itu. Jadi
17:23maksudnya mungkin ada yang
17:25agak... - Tapi kan ada juga yang
17:27early adopter kan.
17:29Jadi asal jangan diaktifkan
17:31secara default aja.
17:33- Iya, betul. - Betul, betul.
17:35- Di saat kita install Next.js
17:3713 itu gak include kan, kecuali
17:39kalau kita mungkin 13.next
17:41atau apa gitu mungkin. - Nggak
17:43flag di confignya. Include
17:45cuma gak enable.
17:47- Oke. Mungkin
17:49ini ada faktor si Next.js
17:51nya merekrut beberapa
17:53orang dari
17:55tim react yang ada di Facebook
17:57kan, pindah ke
17:59Versel. Jadi dia tetap kontribusi
18:01ke react.
18:03Dan mungkin salah satu kerjaannya
18:05adalah ini. Dia tahu ini eksperimental
18:07tapi udah mau rilis misalkan. Dia udah punya
18:09bocoran misalkan gitu. Yaudah kita
18:11implementasi aja biar
18:13kita duluan dibandingkan yang
18:15lain gitu, jadi pionir gitu kan.
18:17Mungkin, mungkin. - Saya
18:19next.js, layangannya next.js siapa sih?
18:21Yang sedupak? - Trymix.
18:23- Yang head to head, trimix.
18:25Dulu Gatsby, Gatsby-nya udah...
18:27Gatsby-nya udah baik. - Trimix,
18:29Astro...
18:31- Yang head to head pake react.
18:33- Oh yang pake react.
18:35- Yang cukup besar remix doang ya
18:37kayaknya sekarang. - Remix, ya.
18:39Remix.
18:41Astro kan bisa pake
18:43react juga. - Astro bisa pake bukan react.
18:45Bisa pake yang lain. - Bisa pake yang lain.
18:47- Bisa pake all framework sama sekali.
18:49Ya beda ya.
18:51Nggak exactly head to head.
18:53- Nasibnya
18:57pemain next.js
18:59tanpa farcell masih
19:01ini nggak sih? - Pemain next.js tanpa
19:03farcell.
19:05Open... - Masih relevant nggak?
19:07- Open next. - Open next
19:09ini sebenarnya
19:11dia solving problem
19:13untuk supaya
19:15apa namanya
19:17si ininya tidak sulit
19:19deployment-nya.
19:21- Iya kan
19:23farcell itu kan memang untuk deployment.
19:25- Betul, betul. Bukan
19:27ke arah
19:29adu fitur sih.
19:31- Ya justru open next
19:33kan fiturnya ngikutin
19:35aja kan, next aja. - Ngikutin aja.
19:37- Jadi cuma perkara
19:39deployment target atau
19:41konfigurasi
19:43layer confignya.
19:45- Cuman agak gimana ya.
19:47Jadi next
19:49tergantung react.
19:51Open next tergantung next.
19:53Jadi ada 3
19:55year gitu.
19:57Terlalu abstrak jadinya.
19:59Abstraksinya terlalu abstrak.
20:01- Nah, tapi si open next ini nggak
20:03punya opini sendiri kan. Maksudnya
20:05kayak tentang routing lah misalnya.
20:07Iya dia ngikutin aja kan. - Enggak, dia ngikutin aja
20:09udah. - Iya itu
20:11layer yang harmless sih.
20:13- Dia mempersiapkan adapternya supaya
20:15bisa pakai server-server
20:17yang lain. - Yang lain, selain
20:19farcell lain. - Karena
20:21next.js by default ya karena
20:23kepentingan
20:25bisnisnya, dia nggak nyedian adapter.
20:27Padahal sebetulnya kalau di
20:29meta framework, ekosistem meta framework
20:31lah. Meta framework lain, adapter
20:33sekarang kayak udah common ya. Sweltkit
20:35punya, Astro punya. Jadi kayak
20:37plug and play mau misalnya target
20:39informenya, node atau
20:41versel atau Netlify atau apapun
20:43itu. - Kenapa nggak dikit ya.
20:45- Plakan dia punya ya versel.
20:47Gimana sih.
20:49- Konflik of internet.
20:51Cuman maksudnya bukan perkara teknis
20:53kan itu, perkara pure bisnis.
20:55Nah tadi perkara... - Nggak ada yang
20:57bikin ini ya?
20:59- Apa-apa? - Oh si Open Next itu yang bikin adapternya.
21:01- Open Next itu bikin
21:03cuma nggak built-in kayak meta framework
21:05lain, karena ya itu versel.
21:07Ya udah, community bikin adapter.
21:09Nah, ada lagi nih
21:11perkara
21:13next dan kontroversi. Sebenernya
21:15nggak kontroversial banget juga sih. Cuma
21:17maksudnya ini isu dengan default
21:19behavior. Jadi
21:21yang 13 kalau nggak salah
21:23sebelum ini kan udah mulai app router-nya
21:25udah stable ya, udah by default.
21:27- Oh iya. Perubahan yang
21:29cukup signifikan ya.
21:31- Iya dan ada, itunya sih nggak apa-apa.
21:33Cuma ada caching behavior.
21:35Nah masalahnya
21:37by default katanya cache dinyalain.
21:39Itu kan agak bahaya buat
21:41orang yang nggak tahu, nggak sadar. Nah
21:43ini yang, lupa dari 13
21:45atau 14 yang kayak gitu. Nah
21:47terus sekarang baru yang
21:49besok ini belum
21:51rilis, 15 RC baru
21:53caching-nya akan
21:55disabled by default karena
21:57pada protes.
21:59- Oh yang ini itu yang
22:01dikomplain sama
22:03Mas Irfan Maulana ya
22:05di Twitter itu sering
22:07beberapa kali dia sempat komplain katanya
22:09vets-nya
22:11next itu
22:13nggak murni.
22:15- Bukan. - Di-cache ya, di-cache ya.
22:17- Oh ini ya. - Mau ke-patch
22:19dan ada caching behavior-nya.
22:21Nah dan itu dia nggak bilang-bilang
22:23kayak by default. - Nggak bilang-bilang.
22:25- Kalau nggak salah bisa op.
22:27Lupa deh, either bisa op out.
22:29Atau ada konfigurasinya
22:31di-vetch-nya sendiri yang kayak
22:33ada argumen tambahan atau apalah.
22:35Disable caching or something.
22:37Cuma intinya
22:39by default kalau kita cuma nge-vetch biasa
22:41itu akan di-caching.
22:43Ya hasilnya
22:45bisa unexpected behavior
22:47karena orang nggak sadar itu lagi
22:49caching. Dan intinya cuma
22:51maksudnya kan pada protest, ya udah
22:53protest-nya didengar
22:55di-release selanjutnya akan
22:57dibuat
22:59opt-in. - Opt-in.
23:01Jadi kalau mau boleh,
23:03kalau nggak mau
23:05ya udah, gitu ya.
23:07Pakai yang normal vetch ya.
23:09- Kalau dipaksa kan jadinya
23:11be neonated.
23:13- Ya. Udah gitu
23:15katanya kalau kita pakai Create
23:17Next App itu berarti
23:19secara anonimus data kita di-collect ya.
23:21Dicatat ya.
23:23- Data installasinya kan?
23:27- Ya.
23:29- 15. - 15 ya.
23:31Tapi sebelum ke-15
23:33mungkin kita ngomongin 14 dulu kali ya.
23:35Ini udah ke-15 aja.
23:37- 14 aja belum give up.
23:39- Iya.
23:41Jadi kita malam ini mau
23:43tau update apa aja di
23:45Next 14. Kayaknya beberapa teman-teman di sini
23:47lebih update ya. Ada Rehan
23:49di sini ya yang bilang dari
23:51versi 13 sudah
23:53apa namanya? Sudah caching ini.
23:55Terus ada juga
23:57Miauliet. Ini juga lumayan
23:59update kayaknya. Nggak suka.
24:01Remy soalnya
24:03ada embel-embel dolar. Apa nih?
24:05Embel-embel dolar itu kayak
24:07PHP.
24:09Kalau
24:11saya sih suka dolar ya.
24:13- Sebagai anak suet saya suka dolar.
24:15Variable apa?
24:17- Saya suka dolar.
24:19Suka.
24:21Singapura dolar juga suka.
24:23- Euro.
24:25- Euro oke.
24:27- Rupiah juga suka.
24:29- Yang dolar-dolar gimana ya.
24:31- Ada ya yang bikin apa sih?
24:33- RP gitu.
24:35- Ada RP-nya.
24:37- Buat apa?
24:39Kalau untuk
24:41SEO, NSTS bagus nggak bagus?
24:43Salah satu kombulannya adalah SEO.
24:45- Dia udah ada extension atau
24:47hanya mengandalkan server
24:49site rendering ya?
24:51- Ya server site
24:53SSR.
24:55- Kan kalau site dulu mau implementasi
24:57meta-metanya itu
24:59pakai React Helmet dulu bahasanya.
25:01- Oh itu mereka
25:03sudah bisa pakai SSR.
25:05Udah ada built-in.
25:07Dan kelihatannya makin kesini.
25:09Yang 13-14 ini
25:11makin dimudahkan kok
25:13buat misalnya ganti routing nih.
25:15Soalnya ganti routing sekarang pakai filebase
25:17yang cara baru itu lah.
25:19Ngeganti head-nya,
25:21update head-nya juga udah ada
25:23API-nya dari mereka.
25:25- Di versi 14,
25:31yang pasti boosting performance.
25:33Ini udah pasti ya.
25:35Setiap update harusnya ada boosting performance.
25:37Salah satunya adalah
25:39Turbo Pack. Nah ini yang
25:41salah satu yang...
25:43Oh kurang ya?
25:45Yang menarik.
25:47Yang lumayan menarik.
25:49Yang lumayan menarik Turbo Pack ini.
25:51Tapi nggak tahu bisa apakah hanya
25:53exclusive untuk NEX
25:55atau bisa dipakai untuk umum.
25:57Harusnya untuk umum ya.
25:59Karena dari landing page-nya
26:01seperti ini kan.
26:03- Buat dev server juga, ya kok,
26:05pakai Turbo Pack.
26:07- Tapi di getting started-nya masih create neck apps.
26:09Masalahnya. - Iya, belum bisa.
26:11Apakah ini sudah bisa buat?
26:13- Belum ada yang...
26:15- Non-NEX? - Non-NEX.
26:17Selain NEX, maksudnya.
26:19Belum ada ini.
26:21- Atau bisa dipakai buat framework lain?
26:23- Iya, buat framework lain selain NEX.
26:25- Nggak perlu framework.
26:27Masalahnya hanya sekedar
26:29mengopile.
26:31- Iya, kayak VT.
26:33- Iya.
26:35Kayak VT. - Ada nggak di sini?
26:37- Coba.
26:39Ada Turbo Pack,
26:41Turbo Repo.
26:43- Ini apa? - Turbo.
26:49- Belum kayaknya ya.
26:51- Fender Embro system.
26:53Ya mungkin kalau yang
26:55jago build-tung,
26:57ya cek aja code-nya kayak
26:59di Oprek sendiri.
27:01Mungkin bisa kali ya.
27:03- Oh, bisa nih.
27:05Bisa ini.
27:07Ada install global.
27:09Ada install global.
27:13Terus Turbo Build.
27:15Oh, udah bisa.
27:17Getting started.
27:19Start for example.
27:21Assisting project.
27:23Udah bisa, udah bisa.
27:25- Ininya sama nggak
27:27sama webpack?
27:29- To existing project,
27:31the assumption is existing
27:33NEX.js project.
27:35Eh nggak deh, bisa sama coba.
27:37- Enggak, yang dari installing
27:39aja nih udah langsung kan.
27:41Terus abis itu masuk
27:43ke sini, apps/docs, misalkan
27:45Turbo Build. Bisa langsung kan?
27:47Kayaknya udah bisa ya.
27:49Tapi harus kita coba ya.
27:51- Ada nggak ini?
27:53Ininya Mas Riza, ada
27:55ada ada apa?
27:57Repo apa gitu? - Ada.
27:59Repo mainan.
28:01- Repo mainan. - Oh, DSF ya?
28:03- Ya, apapun lah.
28:05- Sample React App?
28:07- Nggak usah.
28:09Nggak usah react.
28:11Yang apapun lah, yang JavaScript
28:13yang perlu di-compile, TypeScript.
28:15- JavaScript, ya. Ada.
28:17Tapi boon.
28:19- Eh, nggak apa-apa.
28:21- Gak apa-apa ya.
28:23Apa nih? Oh, kurang gede.
28:27- Boon install.
28:29- Boon install.
28:31Global.
28:33- Oh, dia pakai
28:35global.
28:37- Coba NPM.
28:39- Oh iya, ini NPM.
28:41Install global.
28:43Harus global ya?
28:45NPX aja.
28:47- Yaudah. Coba NPX
28:49Turbo Build.
28:51- Oh, langsung gitu?
28:53NPX Turbo Build.
28:55- Ya, produsnya bisa dong.
28:57Yang di-build apa?
28:59- Yang isi directory.
29:01- Gini kali.
29:03- Dikit directory-nya dulu kali ya?
29:05- Bukan.
29:07Kita kan ada package JSON-nya.
29:09- Itu kan project directory.
29:11- Oh iya.
29:13Ini?
29:15- Iya, coba.
29:17- Package JSON ya. Kita lihat ya. Isinya apa?
29:19- Ada indexnya. - Isinya OHSDK.
29:21- Iya, ada.
29:23- Bitrock. Ada TypeScript.
29:25Oke, ada DevDependency.
29:27Boon.
29:29Bisa nggak? Gak yakin bisa sih.
29:31Tapi ya, oke lah. Kita coba ya.
29:33- Harusnya ada stacknya, tapi coba aja lah.
29:35- NPM.
29:37Turbo Build.
29:39Halo, Rahul.
29:43- Halo. - Kesel sendiri.
29:45Ngikutin Next.js. Kenapa, kenapa?
29:47Keselnya kenapa?
29:49- Karena cepat, karena berubah-ubah, karena...
29:51Apa ya?
29:53Seru-seru.
29:55Seru tapi kesel.
29:57- Mas Riza, itu main is
29:59versi 1.1.0,
30:011.0.0, versi 1.1.4.
30:03- Ini juga nggak tau apaan.
30:05Ngeselin install aja.
30:07"Pake Boon X ya?"
30:09Oh iya, bener juga. Kenapa nggak pake Boon X?
30:11- Oh iya.
30:13- Maaf, kita...
30:15- Ada ya?
30:17- Iya, kita baru tau. Ternyata ada
30:19Watashiwa.
30:21Watashiwa Watashi.
30:23- Kebiasaan, kebiasaan.
30:25- Halo, halo.
30:27- Halo.
30:29- Old habit, old habit.
30:31Oke, sambil kita
30:33lihat ya.
30:35Nah, ini yang pertama tentang
30:37Turbo Pack.
30:39Ada Mas Irvan, dia dipanggil tadi
30:41langsung dalam.
30:43- Iya, tadi kita bilang ngomongin
30:45itu, patch yang
30:47di-catch otomatis sama
30:49Mas Irvany dateng.
30:51Making things simpler.
30:55- Itu
30:57partial pre-rendering itu gimana sih?
30:59Oh, masih eksperimental.
31:01- Stable server action.
31:03Ini bukan yang tadi ya?
31:05Bukan server component ya?
31:07- Bukan, ini yang kayak
31:09form action itu loh. Form action
31:11tapi kalau dari client, tapi bisa
31:13manggil server side.
31:15- This is basically
31:17remote procedural, similar
31:19to TRPC, but built into
31:21Next.
31:23- Oh.
31:25- Tadi malah, oh
31:27Next is learning course dari
31:29itu resminya.
31:31- Iya, ini learning course-nya juga baru.
31:33Ya iyalah, baru. Orang baru update.
31:35- Kayaknya berubah semua.
31:37- Maksudnya platform-nya yang baru
31:39gitu loh.
31:41- Tapi memang salah satu
31:43keunggulan
31:45NSJS itu ya ini, learning
31:47platform-nya bagus. - Iya, detail banget.
31:49Kayak tadinya nggak bisa sama sekali,
31:51abis itu jadi bisa. Tapi begitu bisa
31:53muncul versi baru
31:55yang EPK-nya beda.
31:57- Jadi nggak
32:01relevan lagi gitu ya?
32:03- Bukan, ini sampai
32:0512 lesson loh, wow.
32:07Ini kita harusnya nanya ke
32:11Mas Irvan nih, update apa aja nih, yang
32:13Next.js, update apa aja nih.
32:15Kita nanya, disini nanya.
32:17- Udah selesai belum tuh? Turbo, turbo,
32:19udah selesai belum? - Oh, turbo.
32:21Turbo belum.
32:23- Ada apa? Lama banget ya?
32:25Kayaknya dia nggak hang.
32:27- Kayaknya nge-hang ya,
32:29bingung kali dia.
32:31Coba kita bikin folder baru
32:33aja lah.
32:35- Ah, nggak ada isinya, terus saya ngapain?
32:37- Turbo test, ya diisi
32:39something lah. Turbo test.
32:41Apa lagi?
32:43- Index.
32:45- Index atau email?
32:47- Index.js?
32:49- Oke.
32:51- Echo hello world.
32:53- Echo?
32:57Echo?
32:59- Server.js gitu ya.
33:01Ini server apa klien?
33:03App.js lah.
33:05Biar
33:07makin bingung. Ini
33:09klien apa server?
33:11Konsolok?
33:13Turbo.
33:15Udah?
33:17Terus?
33:19NPX.
33:21- Oh, turbo, ya.
33:23Boon X dong.
33:25- Mau Boon X aja?
33:27- Nggak jalan soalnya.
33:29Lebih lama lagi.
33:31Oke, lanjut.
33:33Oh, ini Strapi ya.
33:35- Coba, itu yang
33:37detail sih, yang enak
33:39dibaca tuh di Next.js block aja.
33:41- Yang ini ya?
33:43Eh, 14.2 ini.
33:45Eh, mana dia?
33:47Next.js block. - Next.js block aja.
33:49Jadi kita buka satu persatu
33:51block update-nya.
33:53Jadi pas mulai versi,
33:55berapa lah?
33:57Nah, yang bawah dekit dulu.
33:59- Ini?
34:01- Gue tuh terakhir ngulik. Ini 13,5.
34:03- Ini?
34:0513,5 ini.
34:07Berarti ini kan? 14 ya?
34:09Ini sama sih.
34:11Turbo pack, server action,
34:13partial prerendering,
34:15sama Next.js learn. Jadi udah ya?
34:17- Ya. Sekarang coba
34:19ke 14.1.
34:21- 14.1.
34:23- 14.1 itu.
34:25Improved self-hosting.
34:27- Self-hosting.
34:29Nah, gue dengar
34:31suara developer yang pada
34:33lari ke Open Next.
34:35-
34:37Karena udah ada yang bikin ya?
34:39- Dan dia sebenernya meng-admogic
34:41juga kebutuhan itu kan. Cuma tuh ya
34:43dibikin, ya dibikin agak sulit.
34:45Kita nggak dipermudah, ya
34:47demi kepentingan bisnis. Tapi sebenernya kan
34:49nggak dilarang ya. Emang itu terbuka
34:51bahwa mereka open ya. Emang bisa kok
34:53kalau mau. Cuma effort dikit.
34:55Terus apa itu? - Yang paling extreme
34:59adalah adopsi app router.
35:01Udah nggak ada lagi
35:03get server side props. Semuanya jadi
35:05server first.
35:07- Iya. Jadi sekarang apa ya?
35:09Kayak nge-ekspresinya. Kalo dulu kan
35:11ada get static, apa
35:13get server side props, ada get static
35:15page, ada get static
35:17path, kalo nggak salah.
35:19Nah, kalo sekarang perbedaan server
35:21client, ya semua dianggap
35:23server first. Tapi kalo
35:25misalnya untuk, kan sebenernya yang
35:27client itu adalah
35:29komponennya kan. UI-nya.
35:31Bukan route-nya. Kalo
35:33ada hal-hal yang perlu di client, ya
35:35komponennya kita kasih use client.
35:37Jadi kayak, apa ya, paradigma-nya berubah
35:39aja sih. - Oh,
35:41sekarang ada custom image optimization.
35:43- Oh, ini mah udah dari
35:4512. - Udah lama ya?
35:47- Udah lama, 11-12 gitu.
35:49- Kalo mau hosting
35:51sendiri, sekarang udah gampang
35:53image component.
35:55- Iya, dari dulu. Sebenernya itu
35:5711-12. Jadi
35:59kayak ada. Cuma itu kayak diumpetin
36:01juga sih. Jadi kayak by default
36:03itu makan compute-nya
36:05versel. Agak licik gitu. Maksudnya kalo
36:07buat orang yang developer-nya
36:09nggak terlalu ngedalemin ya. Trus
36:11misalnya
36:13blog post atau artikel
36:15news atau apalah yang image-nya banyak
36:17itu lumayan jebol juga sih.
36:19Tapi dari dulupun bisa diubah
36:21kayak provider-nya diubah.
36:23Misalnya kita punya CDN sendiri nih
36:25apa ya kayak image
36:27CDN apapun itu
36:29tinggal diganti aja provider-nya.
36:31Gue inget pake itu dulu
36:33pas apasih kerayokan sama Mas Zain
36:35dan temen-temen bikin
36:37warga-bantu warga itu loh. - Warga-bantu
36:39warga.
36:41- Itu tahun berapa itu? Nah, itu udah ada
36:43fitur buat
36:45nge-customize
36:47image.
36:49- Image.
36:51Oh, ternyata udah ada nih.
36:53Kalo mau tahu
36:55turbo-nya udah siap apa belum?
36:57RUI Turbo, yes.
36:59Development, yes.
37:01- Itu kan development, production
37:03nggak ada ya? Coba scroll ke
37:05- Production.
37:07No, 83%.
37:11Udah siap apa belum gitu.
37:13Udah siap pake di production apa
37:15belum. Ini berdasarkan
37:17testing ya.
37:19Testing, development test.
37:21600 or more
37:23since the last update.
37:25- Dan kayaknya emang si
37:27ya, test.
37:29Si turbo repo itu
37:31kayaknya di prioritasin buat
37:33next.js dulu deh. Jadi kayak walaupun
37:35theoretically, secara teori
37:37mungkin ya bisa buat apalah
37:39JavaScript lainnya, kayaknya
37:41dilihat dari docs-nya sekilas pun
37:43contoh-contohnya ya nggak jauh dari
37:45next.js.
37:47Mungkin nanti kalo production
37:49udah yes, ya
37:51bakal bisa. Meskipun suatu hari bakal bisa.
37:53Tapi sekarang mereka prioritasin
37:55kebutuhan mereka sendiri.
37:57Lagi-lagi ini kan perkara bisnis kan.
37:59Ini kan emang under
38:01payroll-nya Versel kan.
38:03- For versel.com, a large next.js
38:07application, we've seen
38:0976% faster, 96%
38:11code update with
38:13fast refresh.
38:15Banyak juga ya.
38:17- Ya, dan dari 2012-2013
38:19ini turbo pack
38:21ini udah experimental.
38:23Udah sebenernya enable dan kerasa
38:25sih dibandingnya misalnya
38:27sepung 11 gitu.
38:29Entah yang banget kayak, mungkin faktor
38:31gue ganti laptop juga sebetulnya sih.
38:33Cuma emang kayak
38:35pen-laptop itu nggak bunyi sama sekali
38:37dong.
38:39- Proof error message.
38:41Apa lagi?
38:43Ya, ini proof error message.
38:45Window is to report state and
38:47replay state. Okay.
38:49Data cache logging.
38:51Observability.
38:55Next image support picture.
38:57- Nah, itu yang full banget sih. Karena caching kan
38:59suka nyebelin kan. Maksudnya kita
39:01itu sulit nggak
39:03langsung kelihatan deh. Kalo misalnya
39:05di-log di server pas lagi def,
39:07itu bagus sih.
39:09Suka kagum sih.
39:11Kepikiran aja bikin fitur kayak gitu.
39:13- Ini tadi yang kita omongin ya?
39:17Server fetch-nya default
39:19cache. Di versi
39:2115 sudah...
39:23- Sampai 14 masih caching by default, 15
39:25opt-in.
39:27- 15 opt-in ya. Jadi by default nggak ya.
39:31- Oh, itu tadi komennya bagus tuh.
39:33Karena ada API baru
39:35kayak generate metadata yang kadang
39:37butuh fetch juga.
39:39Nah, sama mereka itu kayaknya di...
39:41Jadi kan isi halaman, misalnya
39:43gini dari client-side routing,
39:45dari list of posts, buka
39:47single post, buka salah satu post,
39:49post detail. Kan itu harus
39:51fetch data kayak dipake di metadata
39:53di head-nya buat SEO,
39:55buat kontennya juga.
39:57Nah, itu tuh emang jadi kayak
39:59kita, kalau nggak salah ya,
40:01encourage. Ya udah, semua di fetch aja
40:03nanti apa, di...
40:05di debut sendiri
40:07sama mereka, sama
40:09Next.js-nya. Jangan
40:11sekali dipake di berbagai
40:13tempat. Nah, exactly
40:15gimana. Karena belum pernah pakai buat production
40:17juga sih. Cuma coba-coba doang.
40:19Itu juga versi 13.5 dulu.
40:21Cuma, maksudnya, prinsipnya
40:23paradigma-nya kayak gitu.
40:25Jadi sebetulnya emang ada tujuan
40:27yang legitimate. Cuma
40:29mungkin kalau by default cache kan
40:31lebih menginginkan.
40:33Iya, karena nggak bilang-bilang, nggak ada infonya ya.
40:35Parallel
40:39routes apa?
40:41Allow you to simultaneously
40:43or conditionally
40:45render one or more pages in the same
40:47layout for highly
40:49dynamic session of the app.
40:51Can you say kalau
40:53contohnya, contoh yang
40:55apa ya, maksudnya UI
40:57pattern yang common,
40:59kebayang nggak WhatsApp, web,
41:01web atau email, atau
41:03apapun yang misalnya di kirikan ada list of
41:05post-nya. Ada index-nya.
41:07Terus kalau kita klik salah
41:09satu, di kanan
41:11nanti kayak single, single
41:13view-nya kan. Nah, cuma kalau
41:15di mobile, kalau di HP, itu kan
41:17sebenarnya kayak dua route yang berbeda kan.
41:19Pertama index, kita buka aja.
41:21Terus kita klik salah satu, masuk ke
41:23single, single page-nya.
41:25Nah, ini tuh kayak dipermudah
41:27sama app routing-nya.
41:29Tapi kalau belum pernah
41:31coba, itu pas, pas beneran
41:33mau, mau loading, itu
41:35nyelimit banget sih.
41:37Itu ribet, ribet
41:39tapi helpful.
41:41App router tidak lebih
41:47baik daripada page router.
41:49Tapi
41:51karena cache-nya jadi berasa kencang.
41:53Caching system-nya dia pinter banget.
41:57Ya, buat yang
41:59mungkin yang belum familiar, app router
42:01itu apa? Bedanya dibandingkan
42:03page router apa?
42:05Kalau page router itu ada folder
42:07pages kan?
42:09Kalau app itu gimana?
42:11Intinya file-based, tapi lebih
42:15ribet. Nih, bentar-bentar, ada link-nya.
42:17File-based, tapi
42:19lebih ribet.
42:21Ya, file-based juga.
42:23Caranya berbeda ya, caranya berbeda.
42:25Dia bikin merampuan sendiri.
42:27Yang emang
42:29secara spesifik,
42:31ya itu kayak ada optimization,
42:35ada kayak dia harus
42:37dibalik layar, ngebaca
42:39dulu semua, dan figure out
42:41mana yang perlu dilazy load,
42:43mana fetch yang perlu dijalani.
42:47Oke.
42:49App,
42:51dashboard, ini sub 3,
42:53ini root, leaf,
42:55okay. Terus
42:57URL segment,
42:59ini domain, ini segment, ini segment.
43:01Dan ada pola-polanya,
43:03kayak ada folder khusus yang
43:05misalnya square bracket,
43:07apa, titik 3 kali,
43:09terus nama slug-nya,
43:11terus misalnya ada
43:13nama component, nama file component
43:15khusus, jadi kayak page.tsx,
43:17itu ada apanya,
43:19masing-masing ada behavior-nya sendiri.
43:21Ini versi 13
43:23udah React Server Component,
43:25katanya Server Component belum
43:27kelar-kelar.
43:29Ya kan,
43:31ada di itu, kan belum kelar,
43:33belum stable, tapi kan sebetulnya
43:35udah, apa itu kan, Ria?
43:37Udah bisa dipake.
43:39Sudah bisa streaming ya, tuh.
43:43Ada streaming, tuh.
43:45Iya.
43:47Menarik.
43:49Oh.
43:51Apro toh
43:53sudah RSC
43:55yang default streaming
43:57page router, masih tradisional
43:59JavaScript SSRO.
44:01Intinya sih, kalau produksi,
44:03kalau yang high-stake,
44:05udah sebenarnya pakai pages aja, aman kok,
44:07nggak usah diapa-apain, maksudnya nggak ada
44:09perubahan yang ekstrim, ya.
44:11Cuma kalau emang pengen ngelik,
44:13kalau mau ngelik,
44:15baru app router, cuma ya jangan
44:17di production site yang
44:19high-stake juga.
44:21Karena banyak banget hal baru
44:23sekaligus kayak ada hal baru dari sini,
44:25dari sana, kayak dari
44:27berbagai hal.
44:29Termasuk ini ya, tadi
44:31page-nya, ya.
44:33Wah, banyak sekali.
44:35Tapi detail, loh.
44:39Misalnya pages, iya, detail pasti.
44:41Ini
44:43dokumentasinya salah satu yang terbaik,
44:45sih.
44:47Detail sekali.
44:49Advanced routing pattern.
44:51Oh, ini tadi yang para router, ya.
44:53Dan bahkan ada kayak misalnya
44:55kalau nggak salah loading atau apalah
44:57loading.tsx.
44:59Itu kan kayak
45:01under the hood-nya, dibaliknya udah pakai
45:03react-suspense itu.
45:05Itu memudahkan kita bikin loading view
45:07jadi komponen, kita bikin komponen
45:09buat loading, ada loading.tsx,
45:11ya.
45:13Loading UI and steaming.
45:15Paling bawah kanan.
45:17Ya, gitu lah. Pokoknya
45:19semua kayak udah dipikir dan disediain
45:21ada. Maksudnya itu
45:23positif-negatif ya, positifnya ya.
45:25Maksudnya ini kan emang kebutuhan
45:27yang umum udah disediain,
45:29fasilitasnya, fiturnya.
45:31Cuma negatifnya bingung, banyak banget hal
45:33baru yang dipelajarin.
45:35Ya.
45:37Gak ada
45:39yang salah sih.
45:41Gak ada yang salah sih, cuman
45:43kalau kita berangkat
45:45dari
45:47apa, router yang sebelumnya
45:49itu agak roaming ya,
45:51agak roaming terlalu banyak soalnya update-nya.
45:53Oh beda banget. Karena emang ini
45:55entirely kayak misalnya
45:57itu tadi kayak
45:59server sama klien,
46:01itu kan sekarang paradigma-nya dan
46:03cara nge-definisinya udah
46:05beda terus, ya
46:07belum kayak streaming, kayak suspens,
46:09itu semua udah backed in
46:11yang di app router.
46:13Itu hal bagus. Maksudnya fasilitasnya
46:15banyak, tapi semua
46:17opinionated. Karena ya
46:19mereka yang nawarin dalam berbagai
46:21apa? Ya, berbagai
46:23syntax lah, berbagai idea. Mereka ada
46:25profile ini gak sih? Kayak migrate dari
46:27page router ke
46:29app router?
46:31Atau langsung drop in?
46:33Gak tahu sih kalau migrate ya.
46:37Oke.
46:39Kalau
46:41ini kan 14.2
46:43tadi ya? Atau 14.1?
46:4514.
46:47Oh iya, kita tadi masih lagi baca
46:49block ya. Ini 13.
46:51Ini 13 tadi.
46:53Kita masih lanjut baca
46:55block lagi ya. Ada improvement
46:57yang 14.
46:59Jadi
47:01ya, ini kita gak usah baca ya.
47:03Kita naik ke 14.2.
47:0514.2 ya.
47:07Yang bulan April kemaren.
47:09Turbopack RC.
47:11Kalau mau ngomong Turbopack belum
47:13selesai juga sampai sekarang kayaknya.
47:15Itu kayaknya gak bisa deh.
47:17Kayaknya gak bisa ya. Kayaknya gak bisa.
47:19Detestable itu 14.2.
47:21Ya, thank you.
47:23Build and production improvement, caching improvement,
47:25Error DX improvement.
47:27Oh hampir-hampir sama ya. Perubahannya juga
47:29masih sejalur
47:31sama 14.1 ya.
47:33Katagorinya maksudnya.
47:35Yang penting major lah. Kan satu major
47:37version gak boleh ada
47:39perubahan yang ekstrim.
47:41Eh, 16 CSS
47:43bundler baru. Nah, ini penasaran.
47:45Pengen coba. Lightning CSS.
47:47Ini baru juga ya.
47:49Inovasi baru. Apa ini?
47:51Mereka pake kata Turbo, pake kata
47:53Lightning.
47:55Biar kita secara subliminal
47:57ngerasa ini, wah ini cepet banget.
47:59Lightning fast.
48:01Nanti Flash lagi namanya.
48:03Builder nya Turbo,
48:05CSS bundler nya Lightning.
48:07Nah, kalau ada yang
48:09lebih cepet daripada extremely fast
48:11CSS parser apa kita sebutnya? Super fast.
48:13Very very fast.
48:15Faster than anyone else.
48:17Faster than extremely fast.
48:19Pake Rust lagi.
48:21Everything Rust at the end.
48:23Semuanya Rust.
48:25Rust, Rust, Rust, Rust.
48:27CSS Nano.
48:29Ini apa CSS Nano ya?
48:31Belum pernah.
48:33CSS Build.
48:35CSS Build aja 17,2. Lightning CSS
48:374,16. Wow.
48:39Live Indie Feature.
48:41Ini input.
48:43Outputnya. Oh, ini sekaligus
48:45di itu ya. Target Browser.
48:47Di apa?
48:49Di...
48:51Compile ya.
48:53Error.
48:55Belum ada di NPM.
48:59Kok belum ada sih?
49:01Dia harus pakai global mas.
49:03Tadi saya udah coba.
49:05Oh iya bener harus pakai global.
49:07Harus install global.
49:09Harus install global, nggak ada NPS nya ya.
49:11Nanti juga, nanti juga harus ada
49:13package.json nya juga harus ada.
49:15Nanti dia ngamuk.
49:17Kita lanjut lagi.
49:19Creating device, yes.
49:21Crushed it.
49:23CSS Module.
49:25Ini apa sih? Apa aja sih?
49:27Buat itu ya. Intinya adalah buat compiling ya.
49:29Kayak post CSS gitu ya?
49:31Parser, parser.
49:33Created by Mozilla, ternyata.
49:35Oh, using the CSS
49:39parser and selector creates
49:41created by Mozilla.
49:43CSS parsernya dibikin sama Mozilla.
49:45Servo punya.
49:49Oke.
49:51Lanjutnya apa lagi?
49:53Ini hampir sama ya.
49:55Dia update nya
49:57diversal.com
49:59Dia kayaknya prioritasnya adalah improve
50:01compatibility
50:03test nya TurboPack.
50:05We verify top
50:07300 NPM packages
50:09using next.js app.
50:11Bisa di compile dengan TurboPack.
50:13Ya udah punya TurboPack, TurboPack.
50:15Ya, ini angkanya
50:17mungkin bisa misleading ya.
50:19Karena 96%
50:21dari satu
50:23domain doang.
50:25Jadi mungkin
50:27perubahannya misalkan dari
50:29satu detik ke setengah
50:31detik itu kan udah 50% kan?
50:33Karena cuma satu.
50:35Angkanya dramatis.
50:37Ya, angkanya mungkin
50:39agak dramatis. Karena yang dicoba hanya
50:41di satu website gitu. Nggak dicoba di
50:4310, 100 dan lain-lain.
50:45Jadi pasti angkanya wow
50:47keren sekali gitu, padahal
50:49nggak begitu berasa misalkan.
50:51Terus, apa lagi?
50:53Production improvement
50:55tree shaking.
50:57Oke. Caching.
50:59Persistent caching.
51:01Memory usage, ya.
51:03Masih lagi
51:05we're expecting
51:07to share more details in
51:09future release.
51:11Ya, lagi.
51:13Ya, performance ya intunya.
51:15Tree shaking, build memory usage,
51:17CSS.
51:19OK.
51:27CSS apa?
51:29Optimize. Semuanya optimize ya.
51:31Behaviornya juga.
51:33Kayaknya naik CSS ini.
51:39Cachingnya banyak amat ya.
51:41Iya, ada di mana-mana.
51:43Iya.
51:45Dia sangat
51:47sangat caching.
51:49Dari sini menjadi gini.
51:51Sangat caching.
51:53Nah, ini React 19.
51:55Ini yang seru
51:57to prepare for React 19.
51:59Jadi kayak mereka
52:01kecenderungannya nyolong start
52:03gitu lah kalau soal
52:05apapun yang berkaitan sama React ya.
52:11Ini apa?
52:13Ini apa?
52:15Itu udah nonton
52:17gue itu React from another dimension.
52:19Eh, baru tahu
52:21ternyata si Dana Bromoff
52:23sudah tidak di META lagi ya.
52:25Udah keluar ya?
52:27Iya, baru tahu.
52:29Di Blue Sky.
52:31Blue Sky.
52:33Blue Sky itu apa?
52:35Alternativenya Twitter.
52:37Yang Jack Dorsey kan yang bikin.
52:39Yang Jack Dorsey, iya.
52:41Udah punya akunnya
52:43sih mungkin? Blue Sky.
52:45Cuma buat scouting username
52:47doang sih.
52:49Cuman, iya, gak aktif.
52:51Iya, biar gak diambil orang.
52:53Biar gak diambil orang.
52:55React Canary. Oh, udah ada Canary ya.
52:57Ini kita gak usah baca yang
52:59ini ya. Nah.
53:01Sudah sampai 4/12.
53:03Sekarang 5/12.
53:0514/2. Iya, 14/2.
53:07Ini yang RC.
53:09Berarti yang akan datang ya.
53:11Ini belum ya. Kalau teman-teman mau coba
53:13mungkin bisa kali ya.
53:15Experiment ya.
53:17Support for React 19 RC.
53:19Tuh, kan cepet banget kan
53:21geraknya tiba-tiba udah.
53:23Ya, walaupun RC juga, walaupun
53:25RC ya, maksudnya tiba-tiba React 19
53:27aja.
53:29React Compiler.
53:31Ini Mas Irfan tadi ya.
53:33Yang Mas Irfan tadi
53:35yang komplain, nah, ini udah
53:37di-cache,
53:39tidak di-cache by default.
53:41Gak tahu apa
53:43akan berpengaruh. Nanti, tapi pasti
53:45ada protes lagi, karena maksudnya udah
53:47teranjur nulis kode, mungkin udah nulis
53:49dokumentasi, kayak ini cache by default,
53:51jadi harus begini-gini-gini, eh,
53:53berubah lagi.
53:55Jadi keliatannya kalau yang, apa ya,
53:57kalau yang buat, ya itu buat kerjaan,
53:59production side, penggunanya banyak,
54:01ini kayaknya jangan terlalu cepat.
54:03Kalau penggunanya banyak,
54:05jangan langsung upgrade aja ya.
54:07Ya, makanya maksudnya
54:09jangan terlalu
54:11ngikutin Next.js
54:13yang latest kayaknya deh.
54:15Ya, atau kalau pun
54:17mau, ya berarti harus per, apa ya,
54:19ini juga kita baru tahu detailnya
54:21banget, karena kita baca ini kan,
54:23jadi ya, developer-nya
54:25udah ngeluangin waktu buat
54:27keep up to date dengan apapun
54:29yang Next.js
54:31berarti ada celah nih, ada celah,
54:33bikin framework baru
54:35seperti Next.js, tapi
54:37lebih stabil.
54:39Nah itu good in theory,
54:41tapi pasti nanti ada keluhannya lagi ya.
54:43Susah, susah.
54:45Jadi
54:47Next.js kayaknya terlalu up to date ya,
54:49jadi kalau kita mau
54:51mengandalkan si Next.js sebagai
54:53platform yang apa ya.
54:55Sama aja, kalau di dunia
54:57Linux kan, satu
54:59Ubuntu, satu lagi Centos.
55:01Oh iya.
55:03Ah, Debian, Debian.
55:05Oh iya, Debian.
55:07Kalau Centos, Centos kan
55:09lama banget update-nya tuh.
55:11Makanya
55:13mengandalkan
55:17stabil.
55:27Kayaknya tadi udah ada deh
55:29partial pre-rendering.
55:31Tapi ada konfigurasi baru,
55:33new layout and page config
55:35option for incremental adoption.
55:37Jadi yang app routing ini banyak
55:39banget lah masing-masing tuh ada
55:41kayak config object-nya.
55:43Jadi itu banyak lah, punya banyak
55:45customization yang
55:47opinionated, lagi-lagi.
55:49Ini problem apa sih yang mau disolving
55:53sama partial pre-rendering ini?
55:55Ya itu...
55:57Gak tau, coba cari penjelasannya di blog.
56:03Rehydration itu loh kayaknya mas.
56:05Oh rehydration.
56:07Partial pre-rendering ya itu
56:09mungkin skeltone.
56:11Ya kayak ada yang netanya
56:13dynamic nunggu fetch. Kan dia udah tau tuh
56:15kan dia baca semua kan.
56:17Tapi kan ada yang nggak termasuk kayak
56:19skeltone-nya yang
56:21apa?
56:23Kayak loading state.
56:25Nah dia
56:27pre-render itu kali.
56:29Tuh kan semua jadi ada
56:33config-config yang dia, oh
56:35itu di config deh.
56:37Kirain di page.
56:39Nah ini baru nih, beneran baru liat
56:51sekarang ini.
56:53Execute code after a response
56:55with next after.
56:57Oh
56:59jadi bisa nambah
57:01kalau
57:03fungsi yang bisa
57:05dieksekusi setelah
57:07rendernya selesai.
57:09Oh ada kayak callback gitu ya?
57:13Ya.
57:15Kayak
57:17ini apa namanya?
57:19Component lifecycle kan?
57:21Cuma itu kan
57:23bawaannya. Use effect
57:25Masuknya. Use effect ya.
57:27Masih jadul banget ya component lifecycle.
57:31Di baliknya
57:33use effect. Component did
57:35unmount. Component did mount.
57:37Ya bener. Component
57:39did mount. Nggak? Bukan itu ya?
57:41Kalau after itu kan component did mount kan setelah
57:43di mount kan. Si render kan?
57:45Iya.
57:47Nah itu
57:49di chat itu private chat
57:51apa? Partial pre-rendering.
57:53Dia udah mengantisi pasti pertanyaan
57:55macam kita ini.
57:57Ya gitu.
57:59Menarik sih.
58:01Zoom in.
58:03Seperti biasa.
58:05Experimental feature.
58:07Nah dia
58:09what partial pre-rendering is?
58:11How it works?
58:13Jadi kayak apa ya?
58:15Bener. Bener.
58:17Kayak itu kan. Island
58:19Island apa?
58:21Architecture. Ada yang static
58:23Ada yang dynamic. Ada yang dynamic.
58:25Nah terus
58:27hubungannya partial pre-rendering
58:29adalah
58:31you might be able to pre-render
58:33oh ya
58:35island ya intinya.
58:37Island ya island.
58:39Once you're ready.
58:43Reveal the solution.
58:45Oh bener kan?
58:47Skeletonnya atau
58:49sideburnnya static.
58:51Data-datanya
58:53dynamic. Sebentar.
58:55Ini di PWA juga ada kan namanya
58:57apa? Skeleton?
58:59Epsilon. Epsilon.
59:01Shell. Shell kan?
59:03Itu sama dengan static juga
59:07kan sebenarnya kan?
59:09Iya. Cuma kalau itu kan
59:11pattern-nya.
59:13Yang di PWA itu kan pattern aja kan
59:15yang shell, up-shell.
59:17Iya sih. Iya bener.
59:19Kalau itu kan
59:21kalau contoh yang simplenya hello world-nya emang
59:23pakai HTML aja kan.
59:25Kalau ini kan semua komponen, tapi komponennya
59:27behavior-nya lain-lain.
59:39Allow you to render a route
59:41with a static loading shell
59:43static loading shell. Nah itu.
59:45Tadi itu ngomong skeleton sebenarnya maksudnya
59:47shell kayaknya deh.
59:49Gue ingetnya skeleton aja.
59:51Oke.
59:55Jadi.
59:57Berarti sudah kita bisa
59:59static terus kemudian dalamnya
1:00:01bisa dynamic.
1:00:03Iya. App shell-nya kita bikin static
1:00:05ini sebenarnya memudahkan
1:00:07kita. Kalau yang kayak PWA
1:00:09itu kan terpisah kan. Ini bikin sendiri
1:00:11up-shell-nya, terus yang ini
1:00:13yang dinamisnya beda lagi kan.
1:00:15Dan static-nya ya static aja, dynamic-nya
1:00:17harus di dalamnya.
1:00:19Maksudnya biasanya kan kalau yang standard PWA
1:00:21kan kayak shell-nya itu kayak
1:00:23logo, hamburger menu,
1:00:25footer, tapi dalamnya
1:00:27dynamic, kepisah. Nah kalau ini bisa
1:00:29campur.
1:00:31Static route shell.
1:00:33Ada. Nah itu island
1:00:35kalau di astro nih dibilangnya.
1:00:37Iya kalau di astro namanya
1:00:39island.
1:00:41Yes. Kita balik lagi kesini ya.
1:00:43Ya gitu lah.
1:00:45After. Create new apps.
1:00:47Ada design baru.
1:00:49Design baru.
1:00:51Wow, keren.
1:00:53Oke next.
1:00:55Buat dihapus sih sebenarnya.
1:00:57Apakah gak sayang kita udah bertahun-tahun
1:00:59lihat kotak-kotak yang 6 grit itu kan.
1:01:01Bosan ya bosan.
1:01:03Oh ini udah ditanya
1:01:05kalau kemarin kan
1:01:07ada flag kan minus-minus turbo.
1:01:09Kalau ini kita ingin mau pake atau nggak.
1:01:11Kalau pake flag ya tanya
1:01:13kalau udah ada flagnya ya udah.
1:01:15Ya mau nyoba silahkan
1:01:17pake FRC.
1:01:19Itu bagus tuh.
1:01:21Ada empty flag.
1:01:23A new empty flag has been
1:01:27added to CLI. This will remove
1:01:29extrano's files and styles
1:01:31resulting a minimal hellwork page.
1:01:33Nice.
1:01:35Penting ini.
1:01:37Optimize bundling of
1:01:39external packages.
1:01:41Ini, itu ya, vendor ya.
1:01:45Vendor.
1:01:47DPHP vendor namanya.
1:01:49Jamannya apa
1:01:53kayak Goldgrunt juga itu vendor kok.
1:01:55Iya, gigwary kan.
1:01:57Vendor-vendor.
1:01:59Package name.
1:02:01Okay.
1:02:03Other changes.
1:02:05Minimum react version is now
1:02:0719 RC.
1:02:09Breaking.
1:02:11Next image breaking.
1:02:15Remove skus in favor of sharp.
1:02:17Oh dia ganti ya. Nggak pake skus lagi ya.
1:02:19Balik lagi ke sharp.
1:02:21Terus kayaknya udah nggak di-update lagi.
1:02:25Jack-nya udah nggak di-update.
1:02:27Kayaknya udah nggak, nggak ngeriin skus lagi.
1:02:29Sekarang dia udah di-sharpify ya.
1:02:31Emang skus itu bukannya
1:02:35project open source ya?
1:02:37Iya, cuma ya
1:02:39kalau dia nge-maintain.
1:02:41Nggak ada yang maintain.
1:02:43Nggak bakal di-update lagi
1:02:45tapi yang sekarang ya masih tetap
1:02:47ada. Oh.
1:02:49Masuknya ke Google Chrome. Ya, pantas.
1:02:51Nggak di-maintain orang.
1:02:53Masuknya ke Google.
1:02:55Di organisasi ya?
1:02:57Masa sih. Masih ada kontributor kok.
1:02:59Ini kan open.
1:03:01Iya, tapi kan cuma udah...
1:03:03Udah nggak masuk KPI.
1:03:05Udah nggak masuk KPI.
1:03:07Males ah. Mendingan
1:03:09bikin open, apa, bikin
1:03:11e-commerce aja.
1:03:13Nah, terus apa, error when?
1:03:19Buset, breaking-nya banyak amat nih 15.
1:03:21Iya.
1:03:23Ya, namanya itu.
1:03:25Remove phone family hashing.
1:03:27Catching force dynamic.
1:03:29Will now set no store default to face case.
1:03:31Enable SWJ
1:03:35minify.
1:03:37SWJ ini apa?
1:03:39Itu, itunya
1:03:41Next.js
1:03:43apa, sistem apa ya?
1:03:45Server web component.
1:03:47Asal sih gue.
1:03:49Ini direveal sekitar 10-11
1:03:51compile, semacam
1:03:53compiler gitu, apa ya?
1:03:55SWJs.
1:03:57SWJ yang
1:03:59pakai GoLang.
1:04:01Yang pakai Rust. Lagi-lagi semua.
1:04:03Oh, Rust.
1:04:05Rust apa Go ya, antara itulah ya?
1:04:07Ini.
1:04:09Bedanya SWJ sama Turbo Pack apa?
1:04:11Ini bukannya bundler juga ya?
1:04:13Nah, itu
1:04:17maksudnya kapan Turbo-nya jalan,
1:04:19SWJ-nya jalan.
1:04:21Can be used both compilation and bundling.
1:04:23Oh, ini buat itu, pengganti bubble.
1:04:25Benar gak?
1:04:27Buble, buble, oh iya.
1:04:29Kita pernah bahas ini.
1:04:31Benar, benar.
1:04:33Buble.
1:04:35Oke, oke.
1:04:41Ya, iya, iya, ngetingat.
1:04:43Lanjut, lanjut.
1:04:45Benar-benar Rust, Rust, Rust, Rust.
1:04:47Sampe ada bahasa
1:04:49yang lebih kencang daripada Rust.
1:04:51Terpindah lagi.
1:04:53Ya, itu semua punya
1:04:55jadi default
1:04:57default behavior.
1:04:59Metadata
1:05:03and fallback.
1:05:05Ya.
1:05:07Parallel.
1:05:09Oke. Ini, oh udah
1:05:11sampe next 15 kita.
1:05:13Udah.
1:05:15Selesai.
1:05:17Jadi apa?
1:05:19Nextnya JavaScript?
1:05:21Next JS.
1:05:23Oh iya, baru sadar.
1:05:25Kenapa dia cepet, terus lalu pake
1:05:27yang paling baru namanya aja Next.
1:05:29Kalau orang komplain dijawab ya
1:05:31"You pake meta framework namanya Next,
1:05:33what do you expect?"
1:05:35Oh, berarti kita harus bikin
1:05:37framework namanya Previous.
1:05:39Previous JS.
1:05:41Previous JS.
1:05:43Pakainya apa yang udah
1:05:45ditinggalin gitu yang lama-lama.
1:05:47Jadi kita selalu forking
1:05:49versi Next JS yang stabil.
1:05:51Ini 14 kan?
1:05:53Previous JSnya 13.
1:05:55Next JS versi 13.
1:05:57Atau tiap deprekated
1:06:01justru kita bikin.
1:06:03Polyfill, polyfill untuk sesuatu yang
1:06:07dideprekated sama Next JS.
1:06:13Polyfill.
1:06:15Nah tadi ada komen-komen bagus tuh soal
1:06:1910-stack query.
1:06:21Ini ada pertanyaan bagus dari Abdul Malik.
1:06:25"Apakah library kayak 10-stack
1:06:27query masih diperlukan kalau buat
1:06:29Next JS up-router?"
1:06:31Ini jadi agak clash deh.
1:06:33Bingung juga sih soalnya.
1:06:35Jadi kalau di Next itu pake
1:06:39state managementnya
1:06:41pake apa? Udah di server aja langsung.
1:06:43State management itu kan luas banget ya
1:06:47data fetching.
1:06:49Kalau kita pake perspektifnya kayak jaman regex tuh.
1:06:51Dari data fetching
1:06:53sampai yang UI state
1:06:55juga semua kayak disimpan di state management.
1:06:57Nah masalahnya, masalah
1:06:59dalam tanda kutip ya, masalahnya
1:07:01ini kalau soal apa sih
1:07:03fetching data, fetching data
1:07:05sama kayak caching,
1:07:07sama apa, diduplicate,
1:07:09compare-compare gitu, itu udah dihandle
1:07:11sama Next JS.
1:07:13Tapi kan, misalnya yang
1:07:15UI state, ya nggak dihandle juga
1:07:17sama Next JS. Jadi
1:07:19itu tetap dibalikin ke masing-masing
1:07:21sih. Dan jujur
1:07:23belum pernah punya pengalaman yang
1:07:25pegang major site
1:07:27yang harus nentuin kayak gitu.
1:07:29Jadi sebetulnya kalau mau pakai, mau
1:07:33pakai sih bisa-bisa aja. Cuma kan ya itu
1:07:35concern-nya buat fetching data.
1:07:39Jadi kalau mau belajar Next JS...
1:07:41Ini disimpan bantu jawab kali ya?
1:07:43Nah itu jawaban yang udah kali.
1:07:45Nah itu jawaban yang udah kali.
1:07:47Tapi bener-bener nggak dihydrate.
1:07:49Jadi pas server fetch,
1:07:51pakai fetch biasa, pas client-side
1:07:53baru pakai regex query.
1:07:55Oh, handle buat
1:07:57di client-side-nya.
1:07:59Client-side-nya aja,
1:08:01client-side query-nya hanya untuk di client-side.
1:08:03Yang di server-side-nya nggak, gitu ya.
1:08:05Nah sama ini, pasti
1:08:07kalau sebelumnya pakai
1:08:09buat semua, server dan client,
1:08:11sekarang kan harus dipindah-pindah ke tempat
1:08:13yang atasnya.
1:08:15Sekarang atasnya semua kan harus ada
1:08:17use client tuh, yang client only.
1:08:19Nah itu agak
1:08:21PR-nya, soain dengan pattern-nya.
1:08:23Maksudnya pindah-pindahin
1:08:25file-nya tuh folder ya?
1:08:27Folder yang client...
1:08:29Udah, tambahin use client.
1:08:31Or use client.
1:08:33Mereka nggak nyediin code mode ya?
1:08:35Oke.
1:08:37Nggak ada segitu itu kali ya?
1:08:39Iya, oke.
1:08:43Kenapa Next.js memaksa menambahkan
1:08:45versi regex
1:08:47Canary padahal Next.js versi stabil?
1:08:49Karena mau pakai fitur-fitur
1:08:51baru-barunya itu.
1:08:53Itu kemungkinan kan
1:08:55tadi dia mau pakai regex server
1:08:57component RSC,
1:08:59sama apa tadi? Tain API.
1:09:01Nah belum ada di stable.
1:09:03Biar mereka
1:09:05lebih dulu.
1:09:07Bisa dapet yang, karena namanya
1:09:09Next.
1:09:11Biar bisa pakai API yang
1:09:13belum masuk di stable.
1:09:15Kompetisi framework itu berat.
1:09:17Jadi harus yang paling depan.
1:09:19Terdepan.
1:09:21Harus paling update gitu ya.
1:09:23Ya kita nggak tau ya
1:09:25alasan utamanya apa, tapi
1:09:27ada kemungkinan itu ya.
1:09:29Mereka pengen duluan, satu, yang kedua.
1:09:31Memang mereka butuh.
1:09:33Yang ketiga, karena memang
1:09:35ada kontributor-kontributor regex yang
1:09:37ada di Next.js. Jadi mereka udah tau lah
1:09:39kira-kira ini bakal dirilis, kok
1:09:41udah pasti bakal dirilis, cuman masih
1:09:43RSC atau experimental.
1:09:45Iya, jadi mereka
1:09:47langsung adaptasi aja, biar
1:09:49nanti ketika rilis, mereka
1:09:51udah duluan.
1:09:53Dan itu kayaknya positioning-nya mereka deh.
1:09:55Emang maksudnya mereka memposisikan
1:09:57diri sebagai framework yang
1:09:59pakai fitur terbaru.
1:10:01Kayak API terbaru
1:10:03di regex sendiri, itu kan semua
1:10:05ada manfaatnya. Itu hal yang positif ya.
1:10:07Kenapa ada RSC, kenapa ada
1:10:09TNAPI, ya walaupun
1:10:11belum stabil, masih bisa berubah-ubah.
1:10:13Tapi kan ada value-nya,
1:10:15benefit-nya. Nah, Next.js itu
1:10:17kayak positioning aja.
1:10:19Mereka framework yang manfaat.
1:10:21Itu kayak core value-nya
1:10:23Next.js. Core value-nya Next.js
1:10:25itu salah satu.
1:10:27Update-nya, iya.
1:10:29Nah, ini ada pertanyaan
1:10:31yang mungkin...
1:10:33Maksudnya cara
1:10:35mereka approach React
1:10:37Ecosystem tuh kayak gitu juga,
1:10:39atau justru sebaliknya,
1:10:41atau mirip-mirip, atau gimana?
1:10:43Oke. Ini ada
1:10:45pertanyaan tentang state management. Mungkin nggak terlalu
1:10:47berhubungan sama Next.js, tapi
1:10:49ada
1:10:51ada insight nggak state management
1:10:53sekarang yang dipakai apa, selain
1:10:55Redux. Kalau dulu kan Redux ya.
1:10:57Kalau sekarang banyak, ya.
1:10:59Redux so evergreen lagi sebetulnya.
1:11:01Ini untuk Next.js atau untuk
1:11:03React?
1:11:05Kalau ditulis use context,
1:11:07saya curiga pakai React, buat React.
1:11:09Apakah
1:11:11di Next umum menggunakan use context?
1:11:13Ya umum-umum aja.
1:11:15Kan React.
1:11:17Maksudnya si Next sendiri
1:11:19sudah bawa punya
1:11:21state management nggak? Gak.
1:11:23Masih state management.
1:11:25Ada sustain.
1:11:27Ya standard lah sustain.
1:11:29Ada JOT AI, JOTAI.
1:11:31Oh JOTAI.
1:11:33Ya, ada Xstate.
1:11:35Nanti orangnya dateng loh kalian.
1:11:37Ya, kalau kita
1:11:39state management, apa?
1:11:41Mas David.
1:11:43JOTAI lebih simple, semudah
1:11:45pakai use state.
1:11:47Kalau simple, kalau cuma 1-2 komponen yang
1:11:49perlu state management,
1:11:51use state, use context aja.
1:11:53Iya.
1:11:55Gak perlu, apa,
1:11:57apa sih yang lebih ini, kalau emang udah solving
1:11:59problemnya, ya udah pakai itu aja.
1:12:01Tapi kalau yang perlu,
1:12:03kalau yang UI-nya context, ya perlu sih.
1:12:05Kalau sustain tuh belum
1:12:07kesampaian pakai, cuma pengen pakai
1:12:09alusanya nggak logis banget
1:12:11karena landing page-nya bagus.
1:12:13Sustan.
1:12:15Kalau untuk di server side, apa
1:12:17relevan pakai state management?
1:12:19Ini udah dijawab sama November.
1:12:21Iya.
1:12:23State management itu
1:12:25cuma ada di react, artinya di client side
1:12:27kan ya.
1:12:29Dan fokusnya ya UI, jadi kayak misalnya
1:12:31sustan Xstate atau apa, buat kalau yang
1:12:33kita UI-nya
1:12:35ribet.
1:12:37Eh, kalau dulu kan, waktu jaman
1:12:39ya nggak perlu-perlu amat.
1:12:41Kalau dulu jamannya
1:12:43GraphQL sedang berjaya kan,
1:12:45pakai Apollo kan,
1:12:47sebagai state management juga bisa
1:12:49kan ya.
1:12:51Ya, pakai Apollo.
1:12:53Apollo client.
1:12:55Terus apa lagi ya, ada pertanyaan
1:12:57apa lagi?
1:12:59Nah, ini tadi permasalahan yang sama
1:13:01dihadapi Mas Ipan juga ya
1:13:03soal caching ya,
1:13:05udah ter-cache otomatis.
1:13:07Besok bakal diubah lagi.
1:13:09Iya.
1:13:11Cache itu
1:13:13double-edged sword katanya.
1:13:15Pedang mermata dua.
1:13:17Membantu tapi bikin pusing.
1:13:19Dan yang nyebelin,
1:13:21kalau udah dipublish nggak sih,
1:13:23udah dipush, maksudnya kalau misalnya user
1:13:25kita dapet data yang stale,
1:13:27itu kan sulit
1:13:29ngontrolnya.
1:13:31Oke. Ini ada yang bisa jawab,
1:13:33"Pakai NX14 pas run dev,
1:13:35ada tulisan kayak Webpack fail cache."
1:13:37Publish.
1:13:41Wah.
1:13:43Nggak tahu.
1:13:45Apakah
1:13:47mungkin
1:13:49harddisnya penuh?
1:13:51Jadi nggak bisa ke-cache.
1:13:53Nggak tahu juga.
1:13:55Itu banyak faktor ya.
1:13:57Jadi kita nggak bisa jawab ya, sorry ya.
1:13:59"Is it out of topic?
1:14:01Kalau sekarang bundling web bisa
1:14:03pakai Flutter.
1:14:05Apa ini lebih better dari NX?"
1:14:07Bundling web?
1:14:09Untuk web.
1:14:11Pakai data.
1:14:13Flutter untuk web
1:14:15masih
1:14:17surang katanya.
1:14:19Terakhir kita tanya sama yang
1:14:21jagoan Flutter.
1:14:23Ya,
1:14:25Enrico,
1:14:27dia kan cuman bisa Flutter,
1:14:29jadi dia bikin webnya pakai
1:14:31Flutter. Dan itu bundlingnya
1:14:33gede banget.
1:14:35Dia juga mau akui, cuman karena dia nggak bisa
1:14:37HTML CSS, jadi dia
1:14:39pakai Flutter terpaksa.
1:14:41Karena nggak bisa bahasa lain katanya.
1:14:43Mungkin bagus buat
1:14:45apa?
1:14:47Multiple target ya, minimal. Cuma
1:14:49kalau optimization yang
1:14:51pure web kayak apa,
1:14:53ya itu tadi yang client-side JS-nya
1:14:55dipecah-pecah,
1:14:57loading-nya sedikit-sedikit, itu kayak
1:14:59nggak mikir, emang nggak
1:15:01mengutamakan itu sih.
1:15:03Soal web performance.
1:15:05Kalau, ya, kalau hanya
1:15:07sempat kadar kayak internal
1:15:09internal
1:15:11application
1:15:13yang dipakai nggak hanya
1:15:15di dalam lokal net. Ya, silahkan sih sebenarnya.
1:15:17Tapi kalau sudah online,
1:15:19terlalu besar ininya.
1:15:21Terlalu besar ya? Terlalu besar
1:15:23bundlingnya.
1:15:25Ya, ini yang pernah
1:15:27ditunjukin ya,
1:15:29sama Enrico, waktu kita ketemu di
1:15:31Bogor ya, itu dia bilang ini
1:15:33pakai Flutter web. Ini berapa
1:15:35besar ini? Atau berapa kecil?
1:15:37Itu aja sudah
1:15:3911,4 Mega.
1:15:4111,4 Mega.
1:15:43Kalau pure static cuma,
1:15:45itu kan marketing landing page doang kan?
1:15:47Iya, landing page doang. Bukan
1:15:49aplikasi ya, bukan aplikasi.
1:15:51Canvas kit pakai Wasm lagi.
1:15:53Dan ini kalau misalnya di console
1:15:57ke page-nya itu
1:15:59Canvas.
1:16:01Isinya Canvas ya?
1:16:03Ini ya. Element.
1:16:05Bodi.
1:16:07Bukan, itu Flutter View.
1:16:09Flutter View, Flutter View.
1:16:11Oh, Flutter View.
1:16:13Nah, itu Canvas tuh.
1:16:15Tuh, ini.
1:16:17Flutter Glass Pane.
1:16:19Shadow Dome.
1:16:21Shadow Route.
1:16:23Mana ya?
1:16:25Mana Canvasnya?
1:16:27Canvas Container.
1:16:31Jadi
1:16:33seluruhnya itu satu Canvas.
1:16:35Ya, itu
1:16:37salah satu.
1:16:39Ya, itu
1:16:41salah satu ciri khasnya
1:16:43Flutter. Karena di mobile
1:16:45juga seperti ini mereka. Jadi mereka
1:16:47nge-pane satu persatu komponennya.
1:16:49Sama. Perlakuannya
1:16:51sama dengan web juga.
1:16:53Aksesibilitasnya gimana kalau Canvas ya?
1:16:57Ya, emang bukan di desain web itu.
1:17:01Buat game kali ya. Buat game cocok ya.
1:17:03Buat game gitu ya.
1:17:05Kembali lagi, kalau misalnya kayak
1:17:07internal application yang kayak banyak
1:17:09button-button.
1:17:11Tau gak sih?
1:17:13Quiz, quiz.
1:17:15Quiz atau misalnya gitu. Tau gak sih
1:17:17kayak misalnya
1:17:19di bandara kita
1:17:21setelah keluar dari toilet apakah
1:17:23menyenangkan.
1:17:25Nah, itu cocok.
1:17:29Gitu an. Jadi, mau pakai mobile,
1:17:31mau jadi web, cocok.
1:17:33Sama aja.
1:17:35Oke, lanjut.
1:17:37Tadi di artikel Next 14, kira-kira
1:17:39Next.js sudah bisa deploy untuk company belum.
1:17:41Ya, kalau tadi kan karena menggunakan TurboPack
1:17:43bilang no untuk production.
1:17:45Kan Next.js bisa pakai
1:17:47TurboPack atau enggak. Jadi, kalau yang
1:17:49belum no untuk production, jangan pakai
1:17:51TurboPack. Pakai webpack dulu.
1:17:53Masih open kok.
1:17:57Bisa gak sih? Next.js pakai PTE?
1:17:59Nggak bisa.
1:18:03Belum pernah lihat.
1:18:05Kalau iseng mau nyobain, coba.
1:18:07Exisibility-nya gimana?
1:18:15Ya, enggak ada kabar.
1:18:17PPR, apa sih ini tadi?
1:18:19Paralel.
1:18:21Bagus nih, ada koreksi
1:18:23bedanya dengan
1:18:25island architecture yang kita tahu.
1:18:27Commentarnya Rehan.
1:18:31Somewhere di atas.
1:18:33Ini?
1:18:35More than island.
1:18:37Jadi, yang statiknya itu dikirim dari
1:18:41server UdhaHTML.
1:18:43Beneran mirip SSG Shell.
1:18:47PPR ini yang statiknya itu pre-rendered.
1:18:51Bajian statiknya, kayak UdhaHTML,
1:18:53UdhaHTML.
1:18:55Dia memudahkan kita
1:18:57gak perlu bikin app shell di
1:18:59Service Worker dan lain-lain.
1:19:03Jadi, udah jadi satu di app itu aja.
1:19:05Jadi, memudahkan.
1:19:07Dikerjainya di server,
1:19:09dikirim UdhaHTML.
1:19:11Sudah pre-rendered.
1:19:13Dan mengurangi kerjaan main trap.
1:19:17Sekarang core web vital,
1:19:19apa itu? ENP atau apa?
1:19:21Yang baru, ya itu pokoknya.
1:19:23Pokoknya itu pasti
1:19:25improve itu banget sih.
1:19:27Nasibnya gimana kata
1:19:29Mas Ipan, itunya
1:19:31bundle size-nya Next.js
1:19:33masih cukup gede.
1:19:35Jadi, ya ujung-ujungnya ENP-nya juga.
1:19:37Ujung-ujungnya ENP-nya juga.
1:19:39VFX sebenarnya.
1:19:43Tapi kan ngurangin
1:19:45kerjaan parsing
1:19:47buat si UI komponennya lah.
1:19:49Minimal, apa sih?
1:19:51busy-time. Apa sih yang busy itu?
1:19:53Yang microtas-nya harus...
1:19:55Ya itu lah.
1:19:57Microtas-nya kan harus dikit-pikit-pikit.
1:19:59Gak boleh yang terlalu banyak,
1:20:01terlalu lama. Nah, itu kan ngurangin
1:20:03satu pertama
1:20:05yang di-render shell-nya.
1:20:07Walaupun secara size katanya tetap sama ya.
1:20:11Kalau Next.js bisa di-render Laravel, ngapain?
1:20:15Ini server dua-duanya loh.
1:20:17Laravel jalan di server, Next.js jalan di server.
1:20:19Overkill.
1:20:21Bisa, harus.
1:20:23Pakai React aja, pakai React.
1:20:25Pakai UI yang macem-macem, udah pakai
1:20:27Inertia atau apalah itu udah banyak...
1:20:29Ya, Inertia.js.
1:20:31Laravel dari pihak Laravel-nya
1:20:35juga kayaknya bikin deh mirip kayak gitu.
1:20:37Cuma gak tahu, gak inget apa namanya.
1:20:39Pokoknya intinya, kalau kita pengen pakai UI
1:20:41Framework Moderen
1:20:43dengan sistem full-stack
1:20:45Laravel itu udah bisa.
1:20:47Kayak Ivan tadi aja
1:20:51manggil
1:20:53Node-nya, ya.
1:20:55Di PHP.
1:20:57Nggak punya JS.
1:20:59Bentar, ngapain punya PHP?
1:21:01Nggak.
1:21:03Karena...
1:21:05Yjs-nya hanya ada
1:21:07release aja untuk
1:21:09Node.
1:21:11JavaScript, jadi harus di-jalan
1:21:13di server.
1:21:15Ya, apa boleh buat.
1:21:17Itu aja, apa,
1:21:19komen, komen line, apa,
1:21:21kalau PHP kan bisa kan, manggil
1:21:23command line, manggil perintah terminal.
1:21:25Oh gitu, bisa shell.
1:21:27Shell.
1:21:29Exec, ya.
1:21:31Shell exec,
1:21:33npm, create, next app.
1:21:35Ngapain? Coba aja cari PHP.
1:21:37PHP, V8.js, ada kok.
1:21:39Itu kan extension lama.
1:21:41Tapi jangan
1:21:43next.js juga, digabungin sama Laravel,
1:21:45overkill.
1:21:47Iya sih, kalau mau
1:21:49jalanin JavaScript aja tuh bisa, tuh.
1:21:51Ininya, repo-nya tuh.
1:21:53Udah lama banget, tapi
1:21:55nggak diminta.
1:21:57V8.js.
1:21:59Sudah 5
1:22:01tahun lalu, terakhir di-update.
1:22:03Terakhir di-update, 4 bulan
1:22:05yang lalu.
1:22:07Itu juga paling gini.
1:22:09V8.js
1:22:11untuk PHP.
1:22:13Ini juga update itu ya?
1:22:15Depend the bot.
1:22:17Apa nggak berat ini
1:22:21jalaninnya?
1:22:23Kan hanya untuk kebutuhan
1:22:25khusus kan? Bukan untuk
1:22:27sesuatu yang
1:22:29digunakan
1:22:31sehari-hari.
1:22:33Ini kan istilahnya kebutuhan khusus.
1:22:37Memang
1:22:39biasanya harus pakai gitu solusinya, apa boleh
1:22:41buat.
1:22:43Gue juga nggak suka.
1:22:45Ada LiveWire
1:22:49kalau di Laravel.
1:22:51Oh, kalau LiveWire itu
1:22:53agak
1:22:55berikut TMX sih.
1:22:57Iya, agak berikut TMX.
1:22:59Itu official
1:23:01apa? Yang bikin
1:23:03khusus dari Laravel-nya.
1:23:05Cuma yang nggak pakai
1:23:07Vue.
1:23:09Jadi dia pakai
1:23:11bahasa sendiri ya?
1:23:13Seperti
1:23:15JSX atau seperti
1:23:17SwiftUI ya?
1:23:19Tiba-tiba ada add-nya,
1:23:21punya syntaxnya dia sendiri.
1:23:23Cuma dinamik dan modern.
1:23:25Mindsetnya udah dinamik UI.
1:23:29Kalau mau bikin
1:23:31Next.php bisa nih.
1:23:33Jalanin JavaScript-nya,
1:23:35React-nya pakai VHS.
1:23:37Nanti di
1:23:39ini-nya,
1:23:41di client-nya,
1:23:43tetap jalanin React. Bisa.
1:23:45Oh, ngerti, ngerti. Mungkin
1:23:51maksudnya watasi ini,
1:23:53mungkin ya, mungkin ini
1:23:55interpretasi sendiri. Mungkin maksudnya gimana
1:23:57caranya React render,
1:23:59server render, tapi
1:24:01menggunakan PHP
1:24:03atau Laravel.
1:24:05Kalau misalkan kita pakai Laravel sebagai
1:24:07API, terus di client-nya pakai React kan
1:24:09dia nggak server render kan?
1:24:11Jadi pakai inertia dia asli
1:24:13jawabannya ya? Bukan?
1:24:15Jalanin React
1:24:17di client ya,
1:24:19dari sisi server tetap PHP,
1:24:21jalanin React-nya di client tetap bisa kan?
1:24:23Gak masalah.
1:24:25Bisa, nggak usah pakai Next.php, setap aja.
1:24:27Iya, jangan pakai
1:24:29JS itu overkill namanya.
1:24:31Yang natural thing dan
1:24:33apa ya, family to wear atau
1:24:35kukis atau apa kan harus satu, harus satu
1:24:37orang nih, harus satu tempat. Nah, perkara
1:24:39UI-nya pakai apa sih ya?
1:24:41Boleh-boleh aja ditambahin.
1:24:43Nih, bener kan maksudnya
1:24:45pakai itu
1:24:47tadi, apa? Inertia ya?
1:24:49Inertia
1:24:51JS.
1:24:53Saya juga belum pernah coba,
1:24:55tapi tau-tau aja, apa?
1:24:57Cuma tau, sekadar tau doang.
1:24:59Ini yang biasa dipakai di
1:25:01Google BPK nih.
1:25:03Ini oke kok. Iya, oke.
1:25:05Masa asal use case-nya nggak rumit-rumit
1:25:07amat ya, jadi intinya
1:25:09ini cuma kayak adapter sih, kayak adapter
1:25:11yang ngubungin dunia
1:25:13client-side UI
1:25:15sama the rest of the
1:25:17Laravel system, sisanya jadi
1:25:19kayak apapun lah, kayak misalnya middleware
1:25:21atau routing.
1:25:23Ya, semacamnya gitu.
1:25:25Routingnya tetap pakai
1:25:27Laravel, cuma ada kayak
1:25:29library-nya lah, buat
1:25:31nah, itu buat
1:25:33jadi penengah. Penengah ya, middleware.
1:25:35Middleware. Middleware.
1:25:37Middleware untuk UI,
1:25:39UI component. Untuk UI.
1:25:41Nah, component-nya standard, udah mau
1:25:43pake React, mau pake Swell, mau pake
1:25:45Vue, ya kayak React
1:25:47pelosan aja. Berarti jadi ya headless
1:25:49jatuhnya. Headless ya istilahnya ya?
1:25:51Oh, Doren monolitik.
1:25:53Jadinya modern monolitik.
1:25:55The modern monolith
1:25:57inertia.
1:25:59Membingungkan nggak sih bikin
1:26:01Debit nggak sih? Mau PHP ya, maintain
1:26:03PHP aja gitu. Kalo mau maintain
1:26:05JavaScript ya, all the way JavaScript.
1:26:07Ini kan UI-nya doang, client-side UI.
1:26:09Kalau UI dinamis gimana PHP?
1:26:11Kalo kita mau UI-nya
1:26:13dinamis gitu.
1:26:15Kalo perkara bingung mah, kayaknya malah
1:26:17lebih bingung untuk CS sih. Kalo gue ya.
1:26:19Cuma kalo bingung nggak bingung itu kan
1:26:21sebektif. Kalo ini beneran
1:26:23client-side UI.
1:26:25Udah itu aja. Jadi, use case-nya adalah
1:26:27kalo pake Laravel kan by default
1:26:29pake Blade sebelum ada Livewire.
1:26:31Breed ya, ha-ha.
1:26:33Kalau buat UI dynamic yang misalnya
1:26:35form-nya ada step 1, step 2, step 3,
1:26:37open, close, toggle,
1:26:39punya kalo yang UI-nya banyak
1:26:41interaksi gitu, ya bisa
1:26:43pake vanilla JavaScript. Cuma kan malas ya.
1:26:45Orang, orang pingin pake
1:26:47React, Swell, Vue.
1:26:49Yaudah, itu purely
1:26:51for that purpose.
1:26:53Dan inertia.js ini, dia
1:26:55agnostik ya, mau pake
1:26:57Vue, mau pake...
1:26:59Ya, ya.
1:27:01Itu udah kayak community.
1:27:03Jadi yang dia official
1:27:05dia sediain React sama Vue
1:27:07atau apalah, punya...
1:27:09Ada Swell juga tadi, ada Swell juga tadi.
1:27:11Itu client-side, client-side.
1:27:13Cuma dibuka kayak
1:27:15API-nya dibuka buat
1:27:17itu, buat adapter.
1:27:19Kayak nambahin semacam adapter
1:27:21baru.
1:27:23Nah, ini menarik juga nih.
1:27:27KSA.
1:27:29Kebanyakan developer PHP sering menggunakan Blade,
1:27:31Blade Component, pindahnya ke Livewire
1:27:33justru. Tapi kalo orang
1:27:35front-end, mungkin dia akan mencari...
1:27:37Kalo orang JavaScript, ya pingin pake React ya.
1:27:39Ya, mencari
1:27:41UI framework
1:27:43atau library yang seperti
1:27:45React yang sudah dimanjakan dengan React
1:27:47dan Vue, dan temen-temennya
1:27:49itu lebih memilih pake
1:27:51Inertia, mungkin ya.
1:27:53Pernah nyari ada Adonis.js
1:27:55buat aplikasi Monolith, tapi belum sempat
1:27:57pelajari. Iya, Adonis.js ini adalah salah satu.
1:27:59Ya, itu kayaknya lumayan high
1:28:01dari ekosistem Node.js, iya.
1:28:03Adonis.js ini
1:28:05Fullstack.js, iya.
1:28:07Terinspirasi dari
1:28:09Laravel, tapi Node.js.
1:28:11Oh, really? Pantes.
1:28:13Mirip.
1:28:15Semuanya ada ini Adonis.
1:28:17Tuh, pake Ace.
1:28:19Make, container, host.
1:28:21Cuma itu game brandingnya, positioningnya
1:28:23lebih ke bespoke back-end
1:28:25application ya, walaupun yang fullstack.
1:28:27Sama kayak Meteor. Meteor itu juga kan?
1:28:29Meteor, iya Meteor.
1:28:31Guravel lagi.
1:28:33Ada juga Guravel.
1:28:35Gulen, tapi kayak Guravel. Ada lho!
1:28:37Guravel.
1:28:39Guravel.
1:28:41Ini, first
1:28:43Frankenstein creature.
1:28:45Gorels gak ada ya?
1:28:47Gorels ya? Gorels.
1:28:49Kita bikin ini aja lah.
1:28:51Gulen, tapi
1:28:53pake baju Laravel.
1:28:55Ada tuh Gorels.
1:28:57Enggak, ini
1:28:59belajar reels.
1:29:01Oke lah.
1:29:03Frix, kita bikin Rastafel.
1:29:05Rastafel?
1:29:09Warnanya itu ya, merah kuning hijau ya.
1:29:11Rastafel.
1:29:13Rastafel.
1:29:15Yo man.
1:29:17Tagline-nya yo man.
1:29:21Yo.
1:29:23Yo.
1:29:25Rastafel.
1:29:31Bundafel.
1:29:33Adonis.
1:29:37Developer Laravel yang mau coba teknologi lain
1:29:39tapi gak mau ninggalin PHP.
1:29:41De Novel.
1:29:43Aduh.
1:29:47Rastafel.
1:29:49Rastafel, tapi
1:29:53tulisannya jadi Rasta.
1:29:55R-A-S-T-A aja. Rastafel.
1:29:57Rastafel.
1:29:59Kita punya semua.
1:30:01Ya betul sih, gak salah sih.
1:30:05Banyak yang terinspirasi dari
1:30:07Laravel ya.
1:30:09Sebenernya dia
1:30:11biru untuk of symphony sih sebenernya.
1:30:13Tapi ya banyak.
1:30:15Sekarang sudah banyak tambahan jauh
1:30:17ekosistemnya yang dia bikin bagus.
1:30:19Rastafel.
1:30:21Rastafel.
1:30:23Nah itu bisa tuh
1:30:31wasmnya buat ngeluh
1:30:33PHP. Kan waktu itu Ivan
1:30:35udah pernah kasih contoh tuh server
1:30:37PHP jangan di browser ya.
1:30:39Jadi teknologi bisa.
1:30:41Cuma siapa yang
1:30:43siapa yang terlalu senang
1:30:45buat bikin aja.
1:30:47Ini kan
1:30:51Laravel itu terinspirasi dari Ruby
1:30:53on Rails kan ya.
1:30:55Terus sekarang banyak yang
1:30:57menginspirasi
1:30:59eh terinspirasi dari
1:31:01Laravel ya.
1:31:03Berarti OG-nya
1:31:05yang full stack, yang segala ada,
1:31:07segala dikasih itu Ruby on Rails ya.
1:31:09Semuanya mulai dari
1:31:11Zen Framework.
1:31:13Zen Framework.
1:31:15Ngomongin soal Framework,
1:31:17belakangan ini lagi hangat
1:31:19Rails Web Hey Calendar yang lemut
1:31:21karena gak mau pakai Frontend.
1:31:23Kenapa jadi
1:31:25lambat? Tapi
1:31:27harusnya kalau Vanilla kan jadi lebih cepat.
1:31:29Dia pakai itu Hotwire.
1:31:31Hotwire itu kayak
1:31:33Livewire-nya Laravel.
1:31:35Jadi
1:31:37kayaknya sih ada
1:31:39kurang
1:31:41di sisi
1:31:43arsitekturnya sih.
1:31:45Jadi kayak misalkan
1:31:47kalau diklik dua kali itu
1:31:49masih bisa. Jadi gak
1:31:51di prevent gitu-gitu.
1:31:53Itu masalah developer-nya dong.
1:31:55Bukan masalah teknologi yang dipakai kan.
1:31:57Ya, jadi itu kan
1:31:59dia koneksinya pakai Websocket.
1:32:01Websocket-nya kebuka terus kan.
1:32:03Dan semakin banyak
1:32:05semakin besar loading-nya
1:32:07semakin, kan Hey itu kan
1:32:09calendar ya, calendar.
1:32:11Ada event, semakin banyak event-nya ya, semakin banyak Websocket-nya
1:32:13dan mungkin Websocket-nya gak
1:32:15di recycle atau gak dimati-matiin.
1:32:17Itu nge-stream
1:32:19terus gitu ya?
1:32:21Nge-stream terus.
1:32:23Nah, berarti
1:32:25kalau pakai teknologi yang powerful gitu
1:32:27harus siap, beneran ya.
1:32:29Harus siap dengan konsekuensinya yang
1:32:31selama ini juga kita pikir
1:32:33sebelum pakai teknologi canggih itu kan.
1:32:35Iya.
1:32:37Susah loh memaintain
1:32:39Websocket server itu susah.
1:32:41Websocket, betul-betul.
1:32:43Itu tricky sekali.
1:32:45Keep alive-nya itu loh kan, dia nge-streaming
1:32:47terus tuh.
1:32:49Dan itu yang membuat...
1:32:51Betul.
1:32:53Itu yang membuat...
1:32:55Katanya ya, kabarnya, itu yang membuat
1:32:57si perusahaan yang
1:32:59bikin Hey calendar itu
1:33:01atau Hey inbox itu.
1:33:03Mereka pindah, kan.
1:33:07Mereka pindah dari cloud
1:33:09ke on-premise. Karena mereka
1:33:11merasa terlalu mahal.
1:33:13Jalan terus.
1:33:15Karena itu juga.
1:33:17Websocket kan.
1:33:19Kebuka terus.
1:33:23Slim framework
1:33:25masih?
1:33:27Masih pakai?
1:33:29Ada YI.
1:33:31YI itu, YI framework.
1:33:33YI nggak asik apa nggak asik.
1:33:35Nggak asik.
1:33:37Ya, ada...
1:33:39Itu mas...
1:33:41Kalau misalnya mau tahu YI framework
1:33:43tanya Mas Peter.
1:33:45Oh ya, Mas Peter itu
1:33:47master-nya.
1:33:49Slim framework itu apa?
1:33:51Slim framework itu apa?
1:33:53Slim framework ini...
1:33:55Udah lama banget.
1:33:57Laravel yang slim-nya apa?
1:33:59Sebelumnya.
1:34:01Ada...
1:34:03Gimana sih Laravel yang slim-nya?
1:34:05Ada versi kecil.
1:34:07Versi slim.
1:34:09Lupa apa ya namanya ya?
1:34:11Laravel Lite?
1:34:13Tidak.
1:34:15Nih, temen-temen pasti tahu.
1:34:17Lumen.
1:34:19Udah nggak ada kan?
1:34:21Udah mati.
1:34:23Jadi,
1:34:25Slim framework itu
1:34:27ada sebelum lumen.
1:34:29Jadi jauh sebelum...
1:34:31Oh, minimal framework ya?
1:34:33Kayak express gitu-gitu ya?
1:34:35Ya, hanya untuk jadi
1:34:37REST API.
1:34:39Slim framework untuk jadi REST API.
1:34:47Apa lagi?
1:34:49Apa lagi?
1:34:51Tadi ngomongin Websocket, kan?
1:34:53Nah, temen-temen kalau mau ada
1:34:55apa?
1:34:57Ada ide buat topik,
1:34:59silahkan ke ngobrolin...
1:35:01Eh, ngobrolin kan?
1:35:03kesana.in/ngobrolin
1:35:05Ada masih yang buat tuh. Mas Irvan mana?
1:35:07Mas Irvan, terima kasih kita udah pakai kesana-in.
1:35:09Iya, kita pakai kesana-in.
1:35:11Jadi nanti arah...
1:35:13mengarah kesini, itu
1:35:15diskusi. Bukan cuma topik, tapi
1:35:17kalau temen-temen punya masalah kayak
1:35:19tadi tuh, ada yang apa?
1:35:21Case-nya error tuh.
1:35:23Mungkin bisa dijelasin di sini.
1:35:25Lebih lanjut. Gimana cara reproducenya.
1:35:27Mungkin bisa kasih reponya buat kita coba.
1:35:29Siapa tahu ada yang mau coba, kan?
1:35:31Taging kita ya, tagging kita.
1:35:33Jadi saya bisa dapet notif.
1:35:35Bukan cuman
1:35:37saran topik.
1:35:39Kalau pertanyaan ini udah banyak,
1:35:41nanti kita bahas lagi di
1:35:43satu episode khusus kita bahas
1:35:45di sini, pertanyaan-pertanyaan
1:35:47yang mungkin tidak ada
1:35:49kategori khusus, gitu. Jadi
1:35:51kita bisa bahas
1:35:53di satu episode khusus.
1:35:55Oke, oke, oke.
1:35:57Sip.
1:35:59Sip, kalau gitu.
1:36:01Mungkin untuk malam ini,
1:36:03udahan dulu.
1:36:05Untuk bahasan Next.js-nya
1:36:07cukup menarik.
1:36:09Sekaligus banyak insight.
1:36:11Dan banyak ide untuk framework.
1:36:13Ide yang masuk akal
1:36:15maupun nggak masuk akal.
1:36:17Iya.
1:36:19Tapi jadi penasaran ya. Jadi penasaran
1:36:21kira-kira.
1:36:23Ya, mungkin jawabannya,
1:36:25saya nggak tahu jawabannya apakah jawabannya Remix
1:36:27atau bukan. Kira-kira ada nggak sih framework yang
1:36:29di atasnya
1:36:31React tapi lebih stabil daripada Next.
1:36:33Karena kan permasalahannya di Next kan
1:36:35temen-temen di sini udah pada ini, kan.
1:36:37Kok dia ngambil yang eksperimental masuk
1:36:39ini, gitu kan.
1:36:41Yang lebih stabil ada nggak ya alternatifnya?
1:36:43Ya, pakai Next.js yang
1:36:45sebelum terakhir aja.
1:36:47Iya. Iya, itu bisa.
1:36:49Cuman kan kita tuh developer tuh
1:36:51gatel kan kalau ada update gitu kan.
1:36:53Kayaknya pengen gitu ya. Nah, itu lagi-lagi
1:36:55masalah developer, bukan masalah
1:36:57choice of framework. Sebetulnya misalnya
1:36:59stay di Next.js 12
1:37:01pakai pages router, ya udah kan
1:37:03nggak affected dengan
1:37:05semua ini.
1:37:07Nah, ini bagus nih, ide-nya nih.
1:37:09Oh, itu fundamental.
1:37:11Bahas res kondisian bagus.
1:37:13Kemarin masih ya sama Laravel
1:37:15ribut. Udah liat belum? Belum.
1:37:17Ributnya apa?
1:37:19Apa yang diributkan?
1:37:21Kalau Astro atau Gatsby?
1:37:23Gatsby udah mati suri.
1:37:25Dia jarang yang pakai.
1:37:27Kalau Astro,
1:37:29kalau Astro,
1:37:31iya.
1:37:33Bukan, iya.
1:37:35Kalau Astro itu kan dia
1:37:37terbuka untuk semua framework kan.
1:37:39Dan ujung-ujungnya kita diarahkan ke bikin
1:37:41komponen Astro kan, bukan komponen
1:37:43React kan. Ujung-ujungnya.
1:37:45Hono? Wah menarik nih.
1:37:47Hono bisa React.
1:37:49Bisa JSX ya, kalau nggak salah ya.
1:37:51Gatsby berat banget.
1:37:55Apolo?
1:37:57Apolo ini bukan GraphQL?
1:37:59Apolo Client?
1:38:01Apolo Client dan
1:38:03Apolo Server juga ada sih.
1:38:05Tapi kan buat GraphQL kan ya.
1:38:07Hono kali ya.
1:38:09Hono menarik ya.
1:38:11Hono nih, bahas Hono.
1:38:13Boleh, boleh, boleh.
1:38:15Kita tulis ya.
1:38:17Ultra fast web application
1:38:19framework.
1:38:21Bahas Hono tuh.
1:38:23Banyak yang minta Hono ya ternyata ya.
1:38:25Tellowin 4 nanti
1:38:27kalau update
1:38:29stabil dibahas.
1:38:31Oh, mudah-mudahan.
1:38:33Itu juga bagus tuh.
1:38:35Kita udah sempat
1:38:37bahas bukunya tapi ya.
1:38:39Yang bikin bukunya.
1:38:41Mas Adam Wotan kita bahas
1:38:43beberapa episode yang lalu.
1:38:45Tapi Tellowin nya sendiri belum kita bahas.
1:38:47Kalau Preact itu, on top
1:38:49of React juga nggak? Nggak.
1:38:51Preact itu adalah...
1:38:53Coba yang lebih ringan ya.
1:38:55Oh, ini bagus lagi.
1:38:57Jadi Prenex.
1:38:59Sebelumnya...
1:39:01Paseh aja.
1:39:03Masih tetep ya.
1:39:05Oke.
1:39:09Remix. Mungkin.
1:39:11Ya, bisa jadi. Remix bisa jadi.
1:39:13Spellkit.
1:39:15Beda, bukan React Spellkit. Spellkit ya.
1:39:17Gak head-to-head.
1:39:19Gak head-to-head.
1:39:21Sama juga dengan Astro.
1:39:23Astro juga, ya dia bisa pakai React.
1:39:25Tapi bisa pakai
1:39:27framework lain juga.
1:39:29Mungkin Quick juga mirip React.
1:39:31Tapi bukan dia nggak pakai React.
1:39:33Prenex.
1:39:35Itu kan.
1:39:37Ini omot apa Prenex?
1:39:39Oh, ElysiaJS menarik.
1:39:43ElysiaJS.
1:39:45Ini bun ya, dari bun ya.
1:39:47Itu lucu dong. Meta framework yang kecil-kecil kayak Elysia,
1:39:49Hono, apalagi.
1:39:51ElderJS.
1:39:53Masih hidup nggak sih? ElderJS?
1:39:55Itu dari Spellkit, bukan?
1:39:57Ke team password kit lah.
1:39:59Dulu kan belum ada tuh yang setara Spellkit.
1:40:01Dulu gue mulai mulai
1:40:03Meta framework Spellkit yang aneh-aneh, lucu.
1:40:05ElderJS, JungleJS.
1:40:07Gue pernah punya
1:40:09Production application itu.
1:40:11ElderJS.
1:40:13ElderJS ini bukannya Spellkit, ya.
1:40:15Meta frameworknya Spellkit, ya.
1:40:17Service side, ya.
1:40:19SSG. SSG only.
1:40:21Sebelum eranya
1:40:23Masih Spellkit ya?
1:40:25Masih Sapper.
1:40:27Developmentnya.
1:40:29Hmm.
1:40:31Oh, Ribut soal scaling.
1:40:33Terus dinotis sama
1:40:35Ya, biasalah.
1:40:37Namanya juga rebutan lahan.
1:40:39Ya gimana, kan?
1:40:41Open source maintainer
1:40:45tuh kayak peremannya.
1:40:47Kalau udah Ribut, datang.
1:40:49Ada apa?
1:40:51Ada apa sih? Kayak seniman gitu.
1:40:53Kayak skena-skenaan gitu.
1:40:55Kayak orang-orang.
1:40:57Kalau masalah
1:40:59yang major kan gak ada.
1:41:01Masalah kayak gitu-gitu doang. Cuma rame-rame.
1:41:03Pada rame-rame.
1:41:05Terus nanti lupa lagi. Terus nanti ada yang
1:41:07ada yang heboh, ada yang
1:41:09bikin heboh-heboh baru lagi, urusan lain.
1:41:11Itu mereka ramainya cuman di sosial media.
1:41:13Kalau ketemu mah
1:41:15rangkuran-rangkulan.
1:41:17Kita aja yang liatnya
1:41:19"Wah, ini Ribut apa?" segala macem.
1:41:21Nggak, aslinya mah nggak.
1:41:23Aslinya anti-sosial.
1:41:25Aslinya pas ketemu malu gitu
1:41:27intropart lah.
1:41:29Aslinya anti-sosial, diam-diam aja.
1:41:31Apalagi sama siapa remix
1:41:35yang suka cara Ribut itu lagi enteng ya?
1:41:37Oh iya.
1:41:39Oh enggak, kemarin juga dia cari masalah tuh.
1:41:41Oh, iya udah.
1:41:43Berarti emang hobi, emang passionnya.
1:41:45Emang hobi, emang bukan hobi.
1:41:47Cara marketingnya seperti itu.
1:41:49Cari keributan biar
1:41:53nggak perlu bayar iklan.
1:41:55Jadi dia nyari Ribut aja.
1:41:57Ember Jazz masih ada.
1:42:01Kayaknya suram ya.
1:42:05Ember mana sih?
1:42:07Masih, tapi ya suram.
1:42:09Masih cuman
1:42:11nggak ada user baru.
1:42:13Di-maintain aja.
1:42:15Nggak ada yang nyebut anggul.
1:42:17Anggul RGS.
1:42:19Hari ini rekod loh, nggak ada yang sebut
1:42:21JQuery loh hari ini.
1:42:23JQuery.
1:42:25Koa. Koa kan head-to-headnya
1:42:27Express ya dulu.
1:42:29Bukan.
1:42:31Koa itu
1:42:33next versionnya dari Express.
1:42:35Jadi experimentalnya tuh namanya Koa.
1:42:37Kalau udah masuk stabil dia kayak Express.
1:42:39Mentarnya sama.
1:42:43Kepu sama Honu, iya.
1:42:45Ini cuman buat nari gitu.
1:42:47Experiment aja.
1:42:49Experiment aja.
1:42:51Kepu sama Honu,
1:42:53iya sama. Kayaknya menarik ya.
1:42:55Kita bahas Honu ya.
1:42:57atau framework-framework kecil gitu ya.
1:42:59Honu ada
1:43:01Vastify, apa lagi.
1:43:03Alicia JS.
1:43:05Micro Framework.
1:43:07Minimalist.
1:43:11Oke, kalau gitu.
1:43:13Kita sudah terlalu
1:43:15melebar kemana-mana. Terima kasih banyak
1:43:17buat semuanya, buat inspirasi malam hari ini.
1:43:19Kita sangat terhibur dengan
1:43:21penaman-penaman yang ajaib.
1:43:23Kita jumpa lagi minggu depan dengan topic yang berbeda.
1:43:25Rastafah ya.
1:43:27Rastafah ya.
1:43:29Rastafah ya.
1:43:31Freshnya Denu
1:43:35juga termasuk ya.
1:43:37Jadi mudah-mudahan kita bisa
1:43:39bahas nanti sedikit-sedikit.
1:43:41Siapa tahu bisa dapat insight juga.
1:43:43Oke. Untuk malam ini, terima kasih banyak.
1:43:45Kita ketemu lagi minggu depan.
1:43:47Selamat malam, selamat istirahat. Bye-bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
11 Feb 2025
Optimasi Performa JS - Ngborlin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
2 Apr 2024
Ngobrolin Cache - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
10 Sep 2025
Ngobrolin Dokumentasi - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Mari membahas tentang berbagai alat untuk membuat dan menampilkan dokumentas...