Ngobrolin TanStack - Ngobrolin WEB

1:28Udah dua aja, LinkedIn atau Youtube aja.

1:31Coba teman-teman nge-message, coba di-posting nonton dari mana.

1:35Twitter, Twitter.

1:37Kalau Twitter harus itu, harus premium.

1:41Twitter-nya.

1:42Twitter-nya harus premium ya?

1:44Iya.

1:46Nanti kita naikin aja Twitter Mas Riza ke premium.

1:50Oh boleh.

1:52Asyik.

1:54Asyik, oh iya.

1:56Gainnya banyak.

2:00Oh iya, keren.

2:02Logonya keren tuh.

2:04Logonya.

2:06Siapa dulu dong yang desain? Bukan gue.

2:08Ya, kamu engineer doang.

2:12Desainnya pakai prompting.

2:14Itu namanya LM Generated.

2:20Tapi sekarang kayaknya kalau Go Generated bisa lebih baik ya.

2:25Lebih bagus lagi ya.

2:27Kalau dulu Generated ini kan tahun lalu, satu setengah tahun lalu.

2:31Generated ini.

2:33Pas awal-awal baru bisa generasi pakai apa ya?

2:36Kok lupa ya, pakai apa ya?

2:38Masih pakai Bing.

2:41Bing kan paling awal tuh yang bisa bikin image generation yang gratis.

2:48Sedangkan kalau pakai Discord gue lupa, Mid Journey.

2:56Mid Journey kelamakan.

2:58Lama banget bikinnya jadi gini ya.

3:00Dan hasilnya juga bagus.

3:02Tetap lebih bagus.

3:04Zaman itu lebih bagus Bing.

3:06Satu setengah tahun yang lalu.

3:08Oke.

3:10Ya, jadi.

3:12Kalian bikin komunitas di Twitter.

3:14Banyak ya yang main Twitter ya?

3:16Bisa ya.

3:18Baru tahu Twitter komunitasnya.

3:20Karena udah nggak Twitteran, nggak tahu.

3:24Keren.

3:26Itu keren lagi tuh Eka.

3:28Lumayan menarik.

3:30Kalau memang ramai di Twitter, bisa kita nanti bikin Twitter community ya.

3:36Boleh, boleh.

3:38Boleh dicoba Mas Fidi.

3:40Terima kasih.

3:42Jadi malam hari ini kita akan bahas, kita akan bedah.

3:45Sebenernya.

3:47Kalau bilang bedah framework, agak ini ya.

3:49Agak misleading ya.

3:51Agak kurang tepat karena.

3:53Ini agak meluas.

3:55Jadi supersetnya ya.

3:57Supersetnya.

3:59Jadi kalau di dunia front-end itu.

4:01Ada universe-universe nya ternyata ya.

4:05Kayak Marvel ya.

4:07Iya.

4:09Kayak Marvel kan bisa ada dunia sendiri.

4:11Iya.

4:13Awalnya kan, awalnya itu universe nya si apa?

4:17Yvan Yu. Yvan Yu itu ada universe gak sih?

4:19Ada kan. Sekarang jadi void zero itu kan ya.

4:21Iya.

4:23Ecosistem.

4:25Akhir-akhir ini dia bikin.

4:27Akhir-akhir ini ya.

4:29Sebelumnya kan dia berkutat di Vue.

4:31Masih-masih hilang.

4:33Hilang?

4:35Nggak. Masih di sini.

4:37Berkutat di Vue.

4:39Terus abis itu dia bikin VT kan.

4:41Dan VTES.

4:43Eh VTES sih bukan dia yang bikin ya.

4:45Pokoknya ekosistemnya lah ya.

4:47Nggak. Komunitas.

4:49Terus kalau yang terkenal banget kan.

4:51Kalau di Ecosystem Vue ada mas Antoni Fu.

4:55Jadi ya ini universe-universe.

4:57Istilah pecandaan kita aja.

4:59Karena saking banyaknya.

5:01Kayaknya bolak-balik kita mau dia lagi.

5:03Di berbagai library pendukung.

5:05Universe.

5:07Universe.

5:09Kita coba aja sih kalau si Mas Anfu ini.

5:11Banyak.

5:15Karena gue nggak pake Vue.

5:17Ya nggak terlalu banyak yang dipake.

5:19Yang gue pake slide dev.

5:21Terus yang buat icon.

5:23Oh VTES dia yang bikin.

5:25Icones.

5:27Itu yang buat kayak icon browser.

5:29Icon.

5:31Icones lah. Icones. Nggak tahu gimana bacanya.

5:33Coba kita lihat ya.

5:37Website pribadinya.

5:39Oh kecil banget.

5:41Creator of VTES ternyata dia creator of VTES.

5:43Kita baru tahu dia.

5:45Kirain si Evan Yu yang bikin.

5:47Tapi kita bukan.

5:49Uno itu punya dia yang bikin.

5:51Uno CSS juga dia yang bikin.

5:53Tuh kan dia tuh kayak punya.

5:55Dia kayak punya alam semesta sendiri gitu kan.

5:57Jadinya.

5:59Terus juga.

6:01Yang terkait sama Ecosystemnya Vue.

6:03Core teamnya.

6:05CSS ini yang apa namanya.

6:07Meta frameworknya Vue ya.

6:11Meta frameworknya Vue juga.

6:13Dia ikut kontribusi.

6:15Terus ada Siki.

6:17Siki ini.

6:19Keren juga nih. Saya pake ini.

6:21Markdown highlighter.

6:23Gue juga pake.

6:25Untuk di kayak.

6:27Untuk di block.

6:29Block.

6:31Block engine gitu.

6:33Atau dimanapun sebenernya.

6:35Iya.

6:37Untuk dimanapun.

6:39Banyak ini. Lengkap.

6:41Bahasanya lengkap.

6:43Jadi menarik.

6:49Bahasa yang disupport.

6:51Terus ada lagi.

6:53Yang baru-baru.

6:55Yang ini kan. Un.js.

6:57Ada yang itu nggak un.js.

7:01Yang ini juga kan.

7:03Pernah ya.

7:05Kita nggak bahas.

7:07Nggak. Maksudnya episode ini kita nggak bahas.

7:09Mereka ini cuma intro aja.

7:11Intro.

7:13Ini kan banyak ya.

7:15Un.js.

7:17Nanti.

7:19Ada 60 giga loh.

7:21Banyak sekali.

7:25Dan universe yang mau kita bahas adalah.

7:27Ini.

7:29Malam hari ini.

7:31Itu memang sengaja ya logonya.

7:33Untuk.

7:35Untuk tanning gitu ya.

7:37Iya ya.

7:39Ini AI Generated deh.

7:41Kan tanning.

7:43Tanning buat ini hitam itu.

7:45Berjemur di pantai.

7:47Berjemur ya.

7:49Nah ternyata.

7:51Si 10 stack ini.

7:53Ini ekuivalennya kalau tadi.

7:55Punyanya Anhu kan di view.

7:57Nah.

7:59Terus 10 stack kan.

8:01Emang gambarnya.

8:03Kirain buat tanning.

8:05Ya mungkin apa.

8:07Multi interpretasi.

8:09Karena yang bikin namanya Tanner.

8:11Oh namanya Tanner.

8:13Sama kayak Anfu ya.

8:15Tapi Anfu.

8:17Nggak begitu.

8:19Apa namanya nggak begitu.

8:21Dia kan menyingkat namanya juga kan.

8:23Anthony.

8:25Apa namanya Anthony Fu.

8:27Oh iya.

8:29Ini yang kayaknya stacknya.

8:31Stacknya Tanner.

8:33Ini ya. Tanner Lindsey.

8:35Tanner Lindsey.

8:37Yang bikin.

8:39Tapi nggak dia sendiri kan.

8:41Maksudnya dia yang inisiat ya.

8:43Nggak dia.

8:45Dia yang inisiat.

8:47Dan fun factnya ini.

8:49Gue tahu nama ini.

8:51Udah saya dari dulu banget.

8:53Saya bekerja di web dev yang proper.

8:55Yang.

8:57Ya yang pakai JS Framework.

8:59Itu dulu pakai.

9:01Framework SSG React.

9:03Bikinannya dia.

9:05Namanya React Static.

9:07Sekitar tahun 2017 tuh.

9:09Dulu tuh kayak head to headnya sama Gatsby.

9:11Dulu kan kalau SSR kayak.

9:13Oh iya iya iya.

9:15Nah cuma kalau Gatsby itu kan.

9:17Dulu mainly SSG.

9:19Tapi ribet banget kan.

9:21Terus kayak apa sih.

9:23Conventionnya ribet.

9:25Nah kalau React Static.

9:27Bikinannya si Tanner dulu itu.

9:29Kayak ya simple banget straight forward.

9:31Ambil data dari ya source apapun.

9:33Ya udah langsung di render.

9:35Jadi maksudnya sejarahnya.

9:37Jadi dulu dia kerja normal gitu.

9:39Maksudnya dulu dia developer.

9:41Kerja di entah apalah.

9:43Ya stanger lah.

9:45Kayak creator apa.

9:47Kayak toko open source lainnya.

9:49Cuman kayaknya ya eventually setelah.

9:51Makin banyak bikinannya dia.

9:53Library nya dia yang dirilis.

9:55Akhirnya itu dia kayak.

9:57Bikin company sendiri.

9:5910 stack itu.

10:01Ya mungkin kalau sekarang sih.

10:03Punya tim ya.

10:05Cuma dulu awalnya.

10:07Ya dia kayak developer individu.

10:09Bikin macem-macem apa.

10:11Bikin SSG framework.

10:13Bikin library yang kayak React Table.

10:15Dulu tuh namanya React Table.

10:17Itu itu salah satu yang terkenal banget juga.

10:19Maksudnya kalau.

10:21Kalau pernah bikin rich table.

10:23Yang pakai sort. Yang computer. Yang gitu gitu.

10:25Akhirnya jadi ini ya.

10:27Pasti pernah pakai punya dia.

10:29Nah terus.

10:31Makin lama makin berkembang.

10:33Dia quit his job.

10:35Dia berhenti kerja jadi developer.

10:37Dia seriusin full time ini.

10:39Terus kayak jadi yang tadinya semua react centric.

10:41Sekarang mulai bergeser.

10:43Ke framework agnostik.

10:45Jadi kayak ada integrasi nya ya.

10:47Macem-macem sih ada yang.

10:49Masih fokus ke React.

10:51Ada yang lebih agnostik.

10:53Tergantung library nya kan.

10:55Nggak semua langsung bisa dibikin.

10:57Full framework agnostik.

10:59Oke.

11:03Banyak banget itu di kiri kan.

11:05Iya.

11:07Jadi ini awalnya dari React Table.

11:09Terus 10 stack query juga.

11:11Awalnya dari React query kan ya.

11:13Iya banyak-banyak itu kayak

11:15unrelated gitu.

11:17Dulu dia React.

11:19Dulu sih React query kayaknya sampai agak-agak

11:21ini juga masih center ya.

11:23Masih ada kan React query?

11:25Nggak ya?

11:27Ganti nama.

11:29Tapi ini ya library nya

11:31masih ada nggak?

11:33Masih-masih.

11:35Oh ya?

11:37Masih.

11:39Masih ada.

11:4110 stack query.

11:43Masih.

11:45Oh ya masih ada.

11:47Cuma.

11:49Ini nih.

11:53Kalau sampai versi yang 3.

11:55Dia masih support sampai versi yang 3.

11:57React query.

11:59Tetapi untuk versi yang 4.

12:01Nanti sudah berubah jadi.

12:0310 stack query.

12:0510 stack React query.

12:07Jadi dia roba ini nya.

12:09Nama library nya.

12:11Organisasi nya.

12:13Oh cuma?

12:15Iya organisasi nya baru.

12:17Dia satuin semua ke

12:1910 stack.

12:21Iya.

12:23React query ini kan juga

12:25salah satu yang oke ya.

12:27Iya.

12:29Masih pakai sampai sekarang.

12:31Tapi gue nggak tahu kalau itu

12:33ini.

12:35Dari 10 stack.

12:37Iya.

12:39Ya karena dia belum branding.

12:41Tidak.

12:43Belum branding.

12:45Namanya straightforward banget ya.

12:47React static.

12:49Jadi kalau bikin static stack generator ya React static.

12:51Bikin library buatan ya

12:53React table.

12:55Buat query, React query.

12:57Trus sekarang dia udah

12:59printing.

13:01Kayaknya nggak boleh pake kata react gitu lagi kali.

13:03Mungkin dia kena copyright.

13:05Nggak lah.

13:07Dia mau jadiin satu semuanya.

13:09Mau jadiin satu.

13:11Biar jadiin satu.

13:13Biar jadiin satu.

13:15Biar jadiin satu.

13:17Biar jadiin satu.

13:19Atau dia lebih utama

13:21karena pengen fremo agnostik.

13:23Kalau dia pake kata react query.

13:25Jadi nggak bisa.

13:27Jadi nggak bisa yang lain.

13:29Nah itu kan dari tagline nya

13:31juga udah kelihatan kan.

13:33Prioritas itu scroll ke atas deh.

13:35Nah for TSJS,

13:39React, Solid, View, Swelt, Angular.

13:41Jadi kayak dibela-belain.

13:43Semuanya dimasukin ke caption.

13:45Jadi kayaknya rebranding aja.

13:47Nggak cuma

13:49React doang.

13:51Nah ini, React query ini

13:53salah satu yang

13:55generasi setelah

13:57Redux ya.

13:59Redux kan sempet

14:01populer banget gitu.

14:03Jadi kayak de facto kan.

14:05Tapi setelah itu kan mulai Google.

14:07Karena setelah itu harus dipake ke pisah.

14:09Pisah-pisah itunya kan.

14:11Kayak reducernya itu.

14:13Mau fetching aja susah banget.

14:15Nah si React query ini kayaknya lebih

14:17maksudnya keuntungan-keuntungannya kayak caching.

14:19Kayak yang compare sama request sebelumnya

14:21tetap ada.

14:23Tapi kayak API nya, syntax nya.

14:25Lebih straight forward kan.

14:27Karena waktu

14:29Redux itu diciptakan,

14:31React nya

14:33masih versi-versi

14:35belum sedinam

14:37saat React query

14:39diciptakan.

14:41Bukan juga secara

14:43architecture lah ya.

14:45Jadi waktu React query

14:47sudah muncul,

14:49secara keilmuan lah.

14:51Secara kematangan frame

14:53atau library-nya si React itu

14:55sudah lebih maju. Sehingga dia

14:57bisa lebih mudah implementasinya.

14:59Lebih simpel.

15:01Lebih simpel. Saat jamannya Redux.

15:03Redux mau berubah

15:05atau mau rewrite semua

15:07juga nggak bisa. Karena sudah terlampau banyak

15:09yang gunakan.

15:11Kalau berubah caranya sudah susah.

15:13Makanya...

15:15Nanti banyak yang ngamuk.

15:17Semua library atau punya

15:19popular yang udah dipake banyak orang,

15:21itu kayaknya backwards compatibility-nya

15:23itu harus...

15:25ada satu dilema.

15:27Kalau dibangun sama jamannya

15:29React 3,

15:314, itu kan ya sudah

15:33nggak bisa diapapain lagi.

15:35Memang begitulah architecture-nya.

15:37Sama ini kan

15:41waktu itu, seingat saya itu

15:43abis Redux,

15:45terus muncul kan GraphQL

15:47bersama Apollo

15:49yang buat

15:51patching data sama state

15:53management. Terus abis itu

15:55tiba-tiba muncul

15:57React Query yang katanya lebih simpel.

15:59Jadi nggak perlu ada Redux,

16:01nggak perlu ada Apollo.

16:03Bisa jadi satu aja.

16:05Terus buat

16:07patching dan lain-lain.

16:09Moving semua ya dari situ.

16:11Redux pindah semua ke Redux Query.

16:13Menarik, menarik, menarik.

16:17Terus abis itu

16:19mungkin dia mulai dari dua itu

16:21Table, ini kayak

16:23standar lah ya.

16:25React Table,

16:27Query, terus abis itu lebih

16:29spesifik kan ke Router.

16:31Kalau mau bikin yang tadinya ClientShot

16:33rendering, mau ada

16:35routing-nya, pilihannya

16:37kalau dulu kan de facto-nya kan

16:39React Router ya. Yang kemudian

16:41jadi Remix, abis itu balik

16:43lagi jadi React Router lagi kan.

16:45Ternyata dia juga bikin ya.

16:49Iya.

16:51Itu udah lama, cuma

16:53kayak rebranding-nya

16:55baru sekarang.

16:57Kenapa, Ivan?

16:59Caranya gimana sih

17:01React Router? Keren.

17:03Bisa digituin.

17:05Ada DevTools-nya ya.

17:07Ini niat banget ya bikin

17:09library langsung dibikin supaya

17:11useful DevX-nya bagus.

17:13Itu niat loh.

17:15Desainnya juga udah biasa ya.

17:17Itu dari dulu banget

17:19jadi kayak apa, selalu

17:21diiterate-iterate kayaknya dipercaya

17:23lagi.

17:25Cara apa, gimana tadi

17:29pertanyaannya? Router, cara pake Router-nya.

17:31Iya, cara pake gimana nih?

17:33Ini fitur-fiturnya ya.

17:35Sama, mirip lah.

17:37Pilihin Router.

17:39File-based ya, file-based

17:41route generation.

17:43Kayak Next.js.

17:45Next.js jaman pages.

17:47Iya, sebelum

17:49sampai sekarang

17:51juga selalu masih file-based ya.

17:53Oh, jadi kalau misalkan kita mau mulai

18:01pake, kita

18:03pake React seperti biasa dulu

18:05pake fit atau pake apa,

18:07habis itu kita install kayak gini aja ya, langsung ya.

18:09Iya, ini kan soalnya terpusak.

18:13Apa ketengan, Router-nya doang.

18:15Ya, ketengan-ketengan.

18:17Wah, menarik nih yang ketengan-ketengan gini

18:21jadi gak berat ya.

18:23Kayaknya lebih bagus ketengan gini daripada

18:25jamanya meteor gitu, kayak semuanya

18:27everything sudah ada.

18:29Iya.

18:31Tergantung butuh apa.

18:33Tergantung orangnya juga.

18:35Kalau orangnya overthinking ya, mungkin

18:37yang ketengan gini bingung ya, oh,

18:39pilih yang mana nih ya, React Router apa?

18:41Iya.

18:43Atau ngak bisa compact gitu, misalnya

18:45empat orang, semua punya cara mikir

18:47sendiri-sendiri, mau pake

18:49state management, berumpak ribut

18:51dulu, seharian.

18:53Alhasil,

18:55udah pake Apollo Client,

18:57udah pake Apollo state-nya,

18:59terus ditambahin Redux, tuh.

19:01Iya.

19:03Sering ditambahin apa?

19:05Jadi, nge-fetch-nya

19:07dari GraphQL,

19:09pake Apollo Client,

19:11disimpan...

19:13Ya, abis itu

19:15disimpan di Redux.

19:17Semua-semua disimpan di Redux ya.

19:23Saya bikin begitu.

19:25Oh, tapi bisa

19:29tidak file-based juga berarti ini?

19:31Ini ada kayak

19:33fiturnya, kayak

19:35flagging-nya kayaknya.

19:37Ya, itu template

19:39starter-nya aja.

19:41Kan, itu tuh

19:43penyatang itu create TS

19:45router. Bisa

19:47pake template custom.

19:49Oh,

19:51oke. Template-nya adalah file

19:53router ya. Berarti ada template-template lainnya

19:55berarti ya.

19:57Kalau kita

19:59nggak mau kakai

20:01create TS router, kita harus

20:03jalanin ini ya, harus install ini ya.

20:05Kalau manual,

20:07ya itu.

20:09Terus konfigurasi

20:11pt-nya.

20:13Oke, terus baru

20:15kita bikin ini ya,

20:17folder routes, terus ada root

20:19SS. Ini

20:21link. Oh, dia pake link ini

20:23juga ya.

20:25Link yang dibungkus.

20:27Tapi, link-nya dia punya.

20:29Iya, dibungkus.

20:31Iya, dia punya bumpunan link.

20:33Iya, sama aja kayak

20:35NSCS, coba kan.

20:37NSCS.

20:39Create

20:41TS, apakah

20:43masih digunakan?

20:45Masih di-maintain kan ya.

20:47C-R-A.

20:49Coba lihat ya. Udah, cuma udah.

20:51Aku nggak bisa pake versi React yang baru.

20:53Oh, ya.

20:55Sudah tidak direkomendasikan

20:57di dokumentasi React-nya.

20:59Iya, nggak didokumentasiin.

21:01Lama nggak bisa pake versi React yang

21:03paling baru.

21:05Oh, udah berhenti berarti?

21:07Sudah berhenti beroperasi.

21:09Ya, di-maintain juga versi.

21:11Nggak, nggak berhenti. Cuma ya, apa?

21:13Dikunci di versi React-nya.

21:15Apa ya?

21:17Yang terakhir lah.

21:19Sudah. Deprecated.

21:21Oh, iya.

21:23Sebaiknya jangan digunakan lagi.

21:25Sebaiknya jangan digunakan lagi.

21:27Maksudnya, if you are following a tutorial.

21:31Paragraph kedua.

21:33Misalnya ngikutin tutorial.

21:35Ya udah, ngikutin aja dulu.

21:37Maksudnya nggak bahaya, nggak gimana.

21:39Cuma kalau misalnya

21:41mau bikin baru, nggak perlu.

21:43Udah nggak relevan lagi.

21:45Kalau mau bikin

21:47yang client-side only,

21:49yang hanya client-side rendering,

21:51bisa pake VT. VT Starter.

21:53Ya.

21:55Jadi gantinya itu.

21:57Kalau mau yang full stack ya,

21:59pake antara Next.js,

22:01atau Remix, atau 10 stack tadi ya.

22:03Salah satunya. 10 stack Starter.

22:05Nah, yang baru itu

22:07ada itu tuh

22:09Create TS Router App lagi ngetrend.

22:11Yang ini ya?

22:13Create TS Router App.

22:15Punyanya 10 stack tadi.

22:17Oh, punya dia juga?

22:19Oh.

22:21Ini adalah?

22:25Equivalent to

22:27Create Rec App.

22:29Jadi ini penggantinya ya?

22:31Gak harus buat 10 stack router ya.

22:33Bentar, di private chat.

22:35Ini nih.

22:37Coba buka di private chat.

22:39Ini beda.

22:43Oh, DCLI-nya.

22:45Eh, mana kali?

22:47Ini ya.

22:49Salah satunya.

22:51Nah.

22:53Oh.

22:55Bisa

22:57buat

22:59app macam-macam.

23:01Oh, jadi dia bikin

23:03kayak Create Rec App, tapi

23:05dari 10 stack. Cuman

23:07udah termasuk fitur

23:09router-nya ya.

23:11Ya, kalau mau

23:13pakai,

23:15kalau mau bikin single page app.

23:17Cara pakenya gimana?

23:21Oh, yang tadi ya?

23:23Yang tadi, NPX

23:27label-label.

23:29Nah, itu tolong.

23:31Coba aja, Mas.

23:33Pake itu, apa?

23:35Tools yang itu, bisa kan?

23:37Pake tools, apa namanya?

23:39Yang buat LiveJS

23:41itu loh.

23:43Langsung aja.

23:45Eh, namanya My App.

23:47Ya, udahlah. Yes.

23:49Oh, RUNJS.

23:51RUNJS.

23:53Gimana caranya?

23:55RUNJS.

23:57Pernah kita bahas sekali ya?

23:59RUNJS.

24:01R-U-N-J-S.

24:03Kayak JavaScript Playground gitu.

24:05Emang bisa NPM?

24:07Bisa?

24:09Bukan JavaScript doang.

24:11JavaScript Client.

24:13Coba scroll, kalau nggak salah sih bisa.

24:15Kalau nggak salah ya.

24:17Apa?

24:19Salah kali.

24:21Itu install NPM package tuh.

24:23Itu tunjuk lah seterus-terusannya.

24:25Iya, tapi installnya ini nggak

24:27NPM install blablabla.

24:29Pake itu, apa namanya?

24:31Pake tools-nya. Oh iya, bisa ya?

24:33Tapi bisa jadi server.

24:37Ini Lodas loh, dicontohinnya.

24:39Nggak tahu juga sih.

24:41Belum pernah coba sedalam itu.

24:43Ntar gue coba.

24:45Ada AI-nya juga.

24:47Oh.

24:51Nggak sebentar ya.

24:53Seperti biasa.

24:55Ini apa aja ya?

24:57Nah sambil install, lihat ini deh.

24:59Menarik sih, balik ke home-nya.

25:01Coba.

25:03Balik ke home, scroll ke bawah.

25:07Bawah lagi.

25:11Seriusan ya.

25:13Banyak. Bawah lagi.

25:15Bawah lagi.

25:17Bawah lagi.

25:21Terus.

25:23Terus.

25:25Nah, nah.

25:27Terus.

25:29Sponsor paling besar salah satunya, Boon.

25:31Lucu.

25:33Oh iya.

25:35Boon, sanity.

25:39Nah, bawah lagi.

25:43Oh.

25:45Oh, Boon punya duit sekarang ya.

25:51Nah, bawah lagi.

25:53Iya ya, dari mana ya?

25:55Tapi ini Sponsor Project.

25:57Mungkin ada Sponsor Project.

25:59Ini juga Sponsor Project.

26:01Nah, kebawah lagi yang tadi.

26:03Masih kebawah lagi, Mas.

26:09Kebawah lagi.

26:11Bawah lagi.

26:13Mas bisa, scroll, delay ya.

26:17Kebawah lagi.

26:19Terus.

26:21Nah, bawah lagi.

26:23Bawah lagi.

26:25Bawahnya button yang hijau itu.

26:27Bawahnya lagi, itu lucu deh.

26:29And add on, ya.

26:31Baca itu.

26:33And add on an open source project.

26:35Kayak dia nyengir gitu.

26:37Apa sih nih? Kayak tahun 99 aja.

26:39Terus.

26:41Dia nggak mau ada iklan gitu ya.

26:43Dia kayak.

26:45Dia di Intense Tech tuh kayak misi

26:47mulianya beneran sesuai idealismunya

26:49dia gitu lah. 100%

26:51privately owned, tanpa paid

26:53product, tanpa venture capital,

26:55tanpa

26:57akwisisi, ya, liatnya.

26:59Nggak tahu terkabul atau nggak. Terus.

27:01Blablabla. Terus click itu, check out

27:03our ethos.

27:05How we plan, gimana dia

27:07mencanain biar bisa sustainable.

27:09Nah, ini jadi kayak

27:11dia punya misi mulia untuk

27:13open web, open standard.

27:15Makanya dia juga pindah keser dari

27:17React ke, apa,

27:19framework atau library

27:21agnostik.

27:23Agnostik, ya.

27:25Core values-nya tuh yang di, apa,

27:27independently owned, blablabla.

27:29Tanpa investor luar, blablabla.

27:31Open web, open standard.

27:33And freedom to compose and

27:35deploy anything you want, anywhere

27:37you please.

27:39Ya, ini mulia banget sih. Cuma nggak

27:41tahu. Maksudnya di depannya ya, semoga bisa

27:43aware.

27:45Mari kita lihat. Apakah

27:47dia akan menjual cloud hosting?

27:49Tapi dia jual

27:51merch, tuh. Merch.

27:53Dia jual merch, dia jual course,

27:55maksudnya kursus, ya. Maksudnya, apa,

27:57sponsorship. Dia jual course, ya.

27:59But they take free sponsor. Cuma

28:01maksudnya nggak

28:03kayak yang Next.js dibawah

28:05Carcel, gitu. Kalau itu kan emang disetir.

28:07Apa, kalau ini.

28:09Keren juga, nih.

28:11Kualan tetap, terima sponsor tetap, tapi

28:13kayak dia

28:15fokus idealismunya dia.

28:17Keren juga, nih.

28:19T-shirt-nya.

28:21Nah, ini menarik.

28:25Ya, ada 10 stack-nya sih.

28:27Tapi nggak kelihatan apa ya.

28:29Ya, art aja udah.

28:31Tapi kan branding-nya dia.

28:33Cuma lucu aja desainnya menarik.

28:35Iya, desainnya menarik.

28:37Nah, itu no pressure,

28:39bla-bla-bla, no corporate influence.

28:41Oh, berarti

28:43ini agak sedikit bertolak-belakang

28:45dengan Void Zero, ya.

28:47Void Zero itu

28:49memang cepat. Void Zero kan

28:51difunding.

28:53Ya, tapi maksudnya kenapa bertolak-

28:55belakang, ya. Bisa kan

28:57kalau soal funding dan non-funding, oke

28:59lah. Tetapi secara visi,

29:01apakah Void Zero

29:03benar-benar disetir?

29:05Oh, nggak tahu. Kalau disetirnya nggak tahu. Yang jelas kan

29:07visi funded kan. Maksud

29:09yang saya sebutkan itu ya,

29:11perbedaannya bertolak-belakang ya, dia nggak mau

29:13atau belum mau.

29:15Mungkin belum ada tawaran yang gede aja

29:17kalau ada tawaran yang gede.

29:19Pasti ada sih. Sebenernya pasti ada kalau udah

29:21seukuran ini. Cuma ya dia,

29:23idealismunya dia. Itu kan sebegini,

29:25dia bikin, itu bikin

29:27perusahaan

29:29swasta kan tadi bilang private,

29:31dia bikin kan untuk nyalurin cara

29:33mikirnya dia. Nah, kalau udah gitu kan nggak ada

29:35benar-benar salah.

29:37By the way, kalau misalnya

29:39teman-teman kayak kita

29:41atau teman-teman yang penonton di sini

29:43mau kayak bikin

29:45seperti ini juga,

29:47maksudnya bikin

29:49open source project yang bisa

29:51sustainable.

29:53Terus kemudian, apakah

29:55kalau secara hukum

29:57kita perlu set up ini nggak sih?

29:59Set up non-profit organization,

30:01yayasan gitu nggak sih?

30:03Karena terima

30:05donasi kan?

30:07Nah, kan

30:09donasi juga kayak

30:11apa itu yang dipakai astral, dipakai banyak

30:13kan ada

30:15tergantung-tergantung

30:17kalau misalnya GitHub sponsor gitu kan.

30:19Kan ada TNC-nya sendiri,

30:21itu individu nggak apa-apa.

30:23Tapi kalau yang aduh lupa namanya

30:25open-open apa itu yang dipakai astro

30:27yang dulu kita pernah bahas, terus dipakai

30:29macem-macem library lain, yang kayak

30:31ada poolingnya, orang bisa donasi,

30:33terus kayak dipakai

30:35buat maintain

30:37open collective.

30:39Nah, itu

30:41atas nama individu

30:43bisa atau nggak kan, pasti dia punya

30:45legalitas sendiri.

30:47Iya, maksudnya kan kalau secara di Indonesia nih

30:49anggap aja boom

30:51dari luar negeri atau

30:53anggap aja

30:55angular deh, angular

30:57atau Google gitu mau

30:59ngesponsorin

31:01proyek karyana bangsa

31:03kita gitu. Tetapi kan

31:05pasti butuh entitas kan?

31:07Karena dalam dari company besar yang

31:09ngasih sumbangan itu kan

31:11butuh entitas dan

31:13terpajakan segala macem.

31:15Kita perlu undang lawyer kali ya

31:17satu saat di obrolan web ini ya.

31:19Sepatutnya.

31:21Cuma kalau yang

31:23on-the-surface-nya ini begon-begonnya

31:25dia ngasih

31:27donannya, perusahaan besar kan

31:29nggak mungkin tiba-tiba cuma transfer

31:31minta rekening BCA

31:33atau mandiri atau BNI, nggak mungkin gitu kan

31:35pasti dia ada caranya

31:37misalnya pakai perjanjian, kontrak.

31:39Nah, itu kan kontraknya berarti

31:41kontrak kan bisa macem-macem juga, kontrak

31:43kan bisa sama individu, bisa sama

31:45organisasi atau

31:47perusahaan, apa, badan hukum.

31:49Nah, kan itu tergantung banget

31:51si apa? Si yang mau

31:53ngasih duit itu, terms-nya kayak gimana?

31:55Kerajanya di NGO nih.

31:57Kalau di NGO-nya kan berarti ada entitas.

31:59Entitasnya yang terima bisa

32:01menampung

32:03donation atau

32:05government project yang

32:07untuk non-profit kan

32:09sebenarnya kan?

32:11Iya, bisa. Nah, kalau kan

32:13non-profit kayak ada TNC-nya sendiri

32:15misalnya harus

32:17bisa di-audit secara public

32:19jadi kayak harus laporan keuangannya

32:21itu harus tersedia untuk

32:23di-audit, kayak itu masing-masing negara

32:25juga kan ada TNC-nya sendiri.

32:27Terus kayak misalnya

32:29kalau di ranak non-profit sih

32:31lebih ke misalnya apply funding

32:33itu kan emang ada yang cuma

32:35terbuka untuk jenis

32:37non-profit, blablabla. Jadi

32:39kalau balik ke topik ini, kita pengen bikin

32:41library open source, kalau levelnya

32:43masih di GitHub Sponsors

32:45itu mah individu juga

32:47masih nggak apa-apa kan. Itu individua

32:49nggak terlupusin dengan

32:51entitas ya.

32:53Ya, misalnya

32:55teknikali sih, kalau mau nyumbang

32:57misalnya atau meta atau apa

32:59kalau lewat platform GitHub

33:01Sponsors, ya sah-sah aja.

33:03Tapi kalau perusahaan besar, biasanya mau

33:05lontorin dana besar, pasti kan

33:07punya, ya itu tadi program sendiri

33:09jenis kontraknya kayak gimana.

33:11Kita pengen ya lucu deh coba di show.

33:13Kenapa?

33:15Eh, bisa lah siung.

33:17Bisa, bisa sih.

33:19Sudah jadi admin.

33:21Nggak,

33:23kalau ini mungkin

33:25sama atau beda nggak tahu ya

33:27minta pendapatnya juga.

33:29Kalau di komunitas

33:31waktu kita mau bikin conference

33:33itu kan kalau mau terima sponsor

33:35nggak bisa tuh pakai

33:37pribadi. Makanya

33:39waktu awal dulu

33:41Ruby conference sama

33:43Python conference mau bikin

33:45itu teman-teman dari komunitas bikin

33:47namanya Perkodi.

33:49Jadi kalau teman-teman mau bikin perusahaan

33:51apa, perusahaan

33:53open source yang menerima donasi

33:55bisa ikutan sini aja

33:57daripada bikin sendiri.

33:59Jadi daripada punya

34:01apa namanya, bukakan nih

34:03harus ada, ya

34:05harus yayasan, harus ini, harus ngurus

34:07kemana-mana, ikutan ini aja.

34:09Tujuannya ya sebenarnya

34:13cuman punya

34:15rekening bersama sebenarnya.

34:17Regber.

34:19Regber, tapi versi ini ya.

34:21Regber.

34:23Yang 2017.

34:25Kenal siapa ini ya?

34:29Gio.

34:31Gio.

34:33Yang Gio sama Mas

34:35Didik.

34:37Didi Ucasono.

34:39Didi ini kan yang Ruby kan?

34:41Ruby-Ruby ya.

34:43Jadi mereka kayak bikin yayasan untuk

34:47supaya nggak perlu ngurus-ngurus lagi

34:51kalau mau bikin conference atau ya tadi

34:53kalau mau bikin entitas itu ikutan

34:55sini aja.

34:57Cookpad.

35:01Cookpad.

35:03Ada yang mau lihat-lihat, silahkan.

35:05Oke.

35:07Kita kembali ke topik ya.

35:09Teknologi agnostik by default.

35:13Saya cuman mendoakan supaya ada

35:15karya anak bangsa sekelas ini nantinya

35:17gitu, siapa tahu.

35:19Terbuka.

35:21Jadi temen-temen nggak usah

35:23khawatir mikirin yang tadi ya.

35:25Nggak perlu mikirin, wah gimana nih harus bikin

35:29perusahaan blablabla. Udah.

35:31Mulai aja dulu.

35:33Wah, ini ada dari LinkedIn.

35:37Ada nonton dari LinkedIn.

35:39Kita baru pertama kali multistream

35:47ke LinkedIn sama ke YouTube.

35:49Jadi selamat datang.

35:51Setahu saya kalau dapet grant atau kerja

35:53sama dengan perusahaan, biasanya perhamputan.

35:55Nah itu grant tadi kan.

35:57Grant funding.

35:59Itu harus ada badan hubungan.

36:01Iya, kalau mau sponsor pun kadang-kadang

36:05kalau perusahaan besar, pasti dia

36:07mintanya entitas. Nggak mau dia

36:09kayak...

36:11Nggak usah harus perusahaan

36:13besar, mas. Perusahaan yang

36:15terdaftar.

36:17Kalau atas nama perusahaan, harus ke

36:19yang ada entitas yang nggak bisa ke pribadi.

36:21Oke.

36:25Nah, lagi-lagi tergantung platform

36:27perjanjiannya kayak gimana kalau

36:29dianggap sebagai apalah

36:31ya nggak tahu ya, dianggap sebagai

36:33pilihannya

36:35antara kalau misalnya pribadi ke pribadi

36:37berarti si pemilih perusahaan, ya udah

36:39kalau gue nggak bisa pakai perusahaan, pakai

36:41pakai nama gue pribadi ke orang

36:43pribadi, itu bisa.

36:45Kalau memang mau support doang.

36:47Iya, mau support doang.

36:49Kalau saya konsultasi

36:51atau semacamnya, itu bisa

36:53NPWP pribadi.

36:55Oke.

36:57Nah, tapi kan lagi-lagi

36:59ini kan abstrak ya,

37:01programnya kayak gimana, ini kan cuma

37:03berandain-andain aja. Kalau misalnya kita

37:05pengen bikin project open source

37:07terus ada perusahaan besar yang

37:09support. Nah, support itu kan

37:11sebetulnya kalau yang di

37:13ranah legal, supportnya itu apakah

37:15sebagai grant, funding, apa

37:17dianggap sebagai project CSR-nya

37:19mereka, itu kan ada

37:21kategorinya sendiri.

37:23Pakai Saweria,

37:25mana mau perusahaan-perusahaan besar

37:27donasi lewat Saweria.

37:29Ya, sih perusahaan besarnya nggak mau.

37:31Nggak mau.

37:33Ya, kalau yang donasi

37:35sesama, apa, individu

37:37ya aman. Tapi

37:39kalau, apa,

37:41kalau perusahaan besar mah nggak mau.

37:43Kalau tiba-tiba yang donasinya

37:45gede, nah, itu harus dicurikai.

37:47Jangan-jangan.

37:49Oke, back to topic.

37:51Oke, kembali ke topic ya.

37:53Jadi

37:55menambah ide-ide aneh.

37:57Udah mikirin duit aja, jadi bikin projectnya

37:59aja boleh. Nah, akhirnya

38:01selesai.

38:03Akhirnya selesai.

38:05NPM start.

38:07Oh, tiga-tiga. Wih, langsung pakai VT.

38:09By default. Iya.

38:11By default. Keren.

38:13Iya, emang VT kan berimigrasi dia semua.

38:15Jadi CRA?

38:17Itunya dia.

38:19Oh, berarti dia

38:21nyambungnya ke

38:23VT ya, dia pakai

38:25VT ya dari awal ya.

38:27Jadi pakai 10-stack

38:29start ya?

38:31Enggak, ini belum start. Ini 10-stack aja.

38:33Ini pakai router.

38:35Enggak, nggak ada 10-stack

38:37aja. 10-stack router.

38:39Jadi kayak 10-stack itu kayak

38:41umbrella term-nya. Cuma dia punya

38:43macem-macem opsi yang tadi di halaman

38:45awal itu yang kita lewatin, kita

38:47control. Dia load

38:49widget-nya loh tadi tuh.

38:51Widget-nya dia bisa di-routing.

38:53Routingnya jadi kayak...

38:55Ada dev-nya, dev tools-nya.

38:57Iya, dev tools-nya.

38:59Ini nih dev tools-nya, jadi mana dia?

39:01Router, eh bukan.

39:03Ih, ada report

39:05buat vitals loh. Langsung...

39:07Iya, jadi kayak udah semua.

39:09Jadi, kan tadi pertanyaannya buat

39:11semacam...

39:13Semacam nggak gantiin.

39:15Orang-orang yang sekarang

39:17udah kan itu tadi

39:19Create React App udah

39:21depiketit. Nah, terus kalau mau bikin

39:23baru SBA, gimana kan?

39:25Selama ini kita ngasih saran, ya udah pakai

39:27VIT aja. Cuma kalau mentahan kayak cuma

39:29VIT sama React, kan

39:31belum banyak, belum ada fasilitas-fasilitas

39:33builds and whistles kayak yang

39:35dikasih sama Create React App kan.

39:37Nah, ini kayak drop-in

39:39replacement-nya adalah si Create

39:4110-stack router app ini.

39:43Tapi Create React App nggak ada

39:45router juga, dia lebih

39:47nambahin satu berarti.

39:49Iya, satu fitur.

39:51Cuma maksudnya buat apa? Yang kayak kita

39:53bikin sesuatu yang agak mateng

39:55lah. Kalau cuma VIT sama React luar, kan

39:57cuma satu counter.

39:59Singletis app doang, bener.

40:01Testing library itu punya CanSeedle kan?

40:03Ya, betul.

40:05Testing library itu.

40:07Testing library,

40:09VITES,

40:11WebFighter.

40:13Standard lah ya. WebFighter.

40:15Kalau WebFighter ini, DCRA juga

40:17udah ada. Nggak usah kaget.

40:19Coba gimana hasilnya kalau di dari ininya?

40:21Buka console log-nya

40:23tadi?

40:25Ini?

40:27Inspek elemen? Apa yang ini?

40:29Kayaknya ini buat router doang.

40:33Oh iya. Inspek elemen.

40:35Iya, di console.

40:37Console, console, console, console.

40:39Console.

40:41Iya.

40:43Lo ngapain? Kalo di

40:45reload?

40:47Reload?

40:49Ya reload.

40:51Lo, kalo udah keluar.

40:53Kalo udah keluar itu

40:55hasil

40:57WebFighter.

40:59Di-enable nggak?

41:01Nggak, mungkin belum nyalain.

41:03Ini udah.

41:09Ya itu console.log.

41:11Dalemnya kasih

41:13callback function

41:15to.log.

41:17Ya.

41:19Oke, ya.

41:21Block?

41:29Block by client, karena localhost.

41:31Bukan.

41:33Oh gitu?

41:35Gak tau.

41:37Oke.

41:39Nah itu submit

41:47bug ke

41:49kan ini open source semua.

41:51Kita mau liat. Nah ini DevTools-nya

41:53ada di sini.

41:55Jadi kalo kita harus pake.

41:57Yang dikiri tadi, kiri-bawah.

41:59Nah, hilangkan kiri-bawah.

42:01Kalo mau pake

42:03DevTools, nah ini.

42:05Komponen.

42:07Komponen base dia.

42:09Ini

42:11routes-nya, terus ada index.

42:13Kalo kita mau bikin

42:15routes baru.

42:17Oke, patch.

42:19Ini ya di routes-nya.

42:21Coba

42:23.tsx

42:25Udah dibikinin.

42:27Kok bisa?

42:29Kok bisa?

42:33Coba ini deh.

42:35Enggak.

42:37Oke, ulang ya.

42:39Ini .tsx, kita hapus.

42:41Oke.

42:43Bikinnya pake ini.

42:45src

42:49routes

42:51.jsx

42:53Yes.

42:55.sx

42:57Oke.

42:59Oke.

43:01Wow.

43:03Dia gak detek

43:05perubahan file.

43:07Dia langsung inject.

43:09Inject ya.

43:11Nice.

43:13Coba buka route-nya.

43:15Coba.

43:17Coba buka ya.

43:19Eh, harus pake link ya?

43:21Coba pake A aja ya.

43:23Itu pake A kok itu?

43:25Enggak.

43:27Kan ada yang pake link.

43:29Kalau

43:31di dalam itu nanti SPA-nya gak jalan.

43:33Ini?

43:35Iya sih.

43:37Ini gak pake SPA ya?

43:39Coba aja.

43:41Coba, coba.

43:43Iya.

43:45Tapi

43:47internet-nya gak ya?

43:49Cuman, gak SPA ya?

43:51Tapi hapusnya kelihatan bukan itu.

43:53Link.

43:55Link ya?

43:57Link.

43:59Gak tahu bentar.

44:01Eh, salah.

44:03Link.

44:05Link-nya sama ref.

44:07Pake ref. Error.

44:09Gimana kalau dicari

44:11di Docs?

44:13Bocan Docs.

44:15Kebiasaan ya nyari-nyari sendiri.

44:17Eh, mana dia? Ini.

44:19Router.

44:21Nah, search.

44:23Control.K.

44:25Link.

44:27Control sama K.

44:29Manual.

44:31Gimana kalau search?

44:33Control K.

44:35Comment.

44:37Nah, link.

44:39Link.

44:41Mana?

44:45Itu link option.

44:47Yang nomor 2.

44:49Link option. Coba.

44:51Oh gitu.

44:53Link 2.

44:55Ya, link itu.

44:572.

44:59Mana 2?

45:01Oh iya.

45:03Tidak terbaca.

45:05Tuh.

45:07Ternyata di comment juga udah ada.

45:09Disini juga ada kan?

45:11Harusnya ya.

45:13Property 2 is missing.

45:15Kenapa kita gak baca disini ya?

45:17Oke.

45:19Karena tadi belum tau pake

45:21turning link.

45:23Baik.

45:25Nah, coba tadi back.

45:27Oke.

45:29Ya, jadi SPA.

45:31Berarti ini SPA ya?

45:33Tep.

45:35Oke.

45:37Kok gak ini ya?

45:39Masih keblok ya.

45:41Oh, Webvital ini kali.

45:43Lu pake ini kali ya? Apa namanya?

45:45Mas Liza pake...

45:47VPN?

45:49Bukan.

45:51Pake ad blocker gitu?

45:53Enggak.

45:55Nah, itu mungkin.

45:57Itu gak ad blocker?

45:59Itu content blocking.

46:01Atas, atas, atas.

46:03Block third party aja.

46:07Block third party aja. Nah, dah.

46:09Coba.

46:11Nah.

46:13Tadah.

46:17Ya, wamsudah.

46:19Keren.

46:21Ya, wamsudah kelihatan FCP-nya apa.

46:23Ya, gak ada apa-apa.

46:25Ya, gak ada isinya, bang.

46:27Pasti bagus.

46:29Tapi kan

46:31kalau sudah terintegrasi sama Webvital

46:33wikini kan.

46:35Ya, enak. Masaya tinggal

46:37di depan mata.

46:39Orang yang pake ini juga kan isinya bakal

46:41diganti isinya dia sendiri kan.

46:43Tapi kebantu banget.

46:45Di depan mata.

46:47Ini react router

46:51tapi type safe. Ada

46:53generate type. Ya.

46:55Eh, emang react router gak ada ya?

46:57Baru tahu sih.

46:59React router

47:01kayaknya lebih simple deh.

47:03Kayak cuma bikin routing aja.

47:05Karena dulu juga mereka mulainya

47:07dari JavaScript sebelum

47:09ada TypeScript ya.

47:11Sebelum TypeScript seperti sekarang.

47:13Pakai 2, pakai 2.

47:15Ya, ya. Maaf ya.

47:17Kita belum pernah

47:19pakai. Ketanya LLM.

47:21Oh, ada ya LLM

47:23sd.txt. Ya, sayangnya belum ada.

47:25Belum ada. Oh, belum ada.

47:27Oh, belum ada.

47:29Gue lagi menyoba kemarin. Karena

47:31kemarin nih minggu lalu, kita kan nyoba LLM

47:33sd.txt. Ya.

47:35Sd.txt belum bikin.

47:37Oke, menarik-menarik.

47:41Dan, dan

47:43tidak sulit ya. Karena udah

47:45kayaknya udah umum ya.

47:47Sudah terbiasa. Ya, kayak itu common

47:49use case. Dan apa ya?

47:51Sebenernya dia punya

47:53keunggulan dari karena dia sama

47:55mereka lama bikin di Ecosystem

47:57React. Terus kayak orang

47:59user developer tuh kayak

48:01udah ketanam best practice-nya.

48:03Nah, sekarang walaupun udah

48:05framework agnostik. Maksudnya bisa

48:07dipakai di macem-macem. Ya, kayak

48:09sekarang udah familiar aja jadi.

48:11Hmm.

48:15Oh, sekarang React Router malah udah

48:17kayak meta framework ya sekarang ya.

48:19Malah ganti ya. Bukan.

48:21Jadi sebenarnya agak ya

48:23rancu sih. Jadi kalau 10-stacks

48:25intinya mah 10-stacks start itu

48:27yang

48:29yang lebih SSR

48:31friendly. Nah, cuma

48:33kalau cuma pengen apa, ada routing-nya

48:35aja. Jadi itu 10-stacks router

48:37ini. Mereka sampai

48:39nulis blog post. Buka deh

48:41di private chat.

48:43Jadi itu dia kayak

48:47kata pengantarnya di dokumentasinya

48:4910-stacks start.

48:51Tuh kan, 10-stacks

48:55start overview.

48:5710-stacks start adalah bla-bla-bla

48:59powered by React 10-stacks router.

49:01Jadi emang ya kayak remix.

49:03Kayak remix kan

49:05powered by React router ya.

49:07Nah, ini 10-stacks start

49:13powered by 10-stacks router.

49:15Jadi 10-stacks start

49:19kayak

49:21lebih dilengkapin aja.

49:23Apa aja, oke.

49:25Ada nested routing, ada

49:27routing. Pokoknya semua routing lah ya.

49:29Kemudian ada filebase

49:31routing juga.

49:33Kalau dynamic routing

49:35nggak ada ya? Dynamic routing

49:37kayak setelah

49:39blog.

49:41Harusnya ada lah ya. Masa nggak ada sih.

49:43Iya.

49:45Nah, itu.

49:47Terus ke bawah. Itu kan tadi

49:49yang ternyata 10-stacks router.

49:51Nah, 10-stacks start itu

49:53kayak lebih

49:55lengkap aja based on

49:57semua yang di 10-stacks router itu

49:59plus to full SSR

50:01streaming

50:03for function.

50:05Bisa SSR juga.

50:07Bisa SSR, bisa

50:09CSR.

50:11Kalau kita perlu SSR,

50:13kita mau pakai 10-stacks start, tapi kalau cuma

50:15pure CSR

50:17kayak single-touch cat gitu.

50:19Itu tadi 10-stacks router udah cukup.

50:21Iya, iya, iya.

50:23Build from scratch.

50:31Dia ngasih tahu

50:33kalau mau

50:35bikin, iya,

50:37kalau mau set up project kosong

50:39atau project yang sudah jalan mau

50:41dirubah, ini ada caranya.

50:43Daripada kalau yang...

50:45Karena kalau pakai NPX

50:47start gitu kan, kalau kayak...

50:49Iya, itu harus dari awal, dari kosongan

50:51pakai starter template.

50:53Iya. Dan banyak konfigurasinya

50:55sudah dihidang didalam

50:57library-library itu.

51:01Oh, dia

51:03merekomendasikan Netlify.

51:05Karena dia partnership

51:07sudah, dia partnership.

51:09Official

51:11deployment partner.

51:13Netlify kan sudah bisa server

51:17back-end. Ya nggak sih?

51:19Iya, bisa.

51:21Function bukan?

51:23Node ya? Node.js ya?

51:25Kayaknya sudah node deh.

51:29Karena sebenarnya dia cuma raper dari

51:31AWS.

51:33AWS.

51:35AUS.

51:37Mereka semua itu rapernya

51:39AWS.

51:41Iya.

51:43Cuma

51:45JavaScript developer friendly.

51:47Kita nggak usah lihat

51:49panel AWS yang bikin busnya.

51:51Clerk.

51:53Clerk.

51:55Database.

51:57Kayak Sentry pernah denger deh.

51:59Sentry itu apa?

52:01Sentry itu analytics.

52:03Error analytics.

52:05Oh iya, iya, iya.

52:07Kayak New Relic gitu ya?

52:09Kayak apa?

52:11Kayak New Relic.

52:13New Relic ya?

52:15APM kan?

52:17Ada browser,

52:19browser-nya juga ada browser

52:21site-nya.

52:23Browser monitoring bahasanya.

52:27Database-nya apa aja boleh

52:29tapi

52:31oh dia

52:33kerjasamanya sama ini ya?

52:35Satu-satu ya? Postgre.

52:37Kalau untuk authentication, untuk deployment,

52:39untuk database,

52:41konvex ini apa ya?

52:43Kayaknya database

52:45as a service kali ya?

52:47Back-end as a service ya?

52:49Ya.

52:51Apa sih maksudnya serverless

52:53Postgre, serverless database

52:55itu maksudnya gimana sih

52:57serverless gitu.

52:59Serverless itu pada dasarnya adalah

53:01as a service pasti sebetulnya.

53:03As a service.

53:05Gampang ya kan?

53:07Kalau serverless

53:09function, gue ngerti nih

53:11ceritanya. Karena sekali

53:13misalnya kita info function,

53:15jalanin, dia

53:17selesai. Kita cuma bayar

53:19per micro time yang

53:21terpakai. Tapi kalau serverless

53:23database itu

53:25pasti

53:27menangkep sih.

53:29Itu gimik sih. Sebenarnya kalau dilihat

53:31sekilas dari

53:33deskripsinya sama

53:35kemarin juga gue udah buka website-nya

53:37satu-satu. Lihat depannya doang.

53:39Hosted database as a

53:41service.

53:43Tapi bayarnya tetap

53:45per storage atau

53:47per month?

53:49Harus kita cari

53:51narasumber yang bisa kita

53:53ajak ngobrol.

53:55Serverless database.

53:57Kayak hosted

53:59database as a service.

54:01Kalau serverless function

54:03kita udah paham.

54:05There is no such thing serverless.

54:07Iya pasti.

54:09Wireless earphone

54:11juga dalamnya ada kabelnya pasti.

54:13Cuma kita nggak lihat kabelnya aja.

54:15Jangan salah. Serverless itu

54:17bukan new server.

54:19Tapi servernya sedikit.

54:21Atau server yang kita maintain itu sedikit.

54:23Sama bukan kita yang maintain

54:25servernya.

54:27Bukan kita yang ngobrol servernya. Kita bayar

54:29untuk service-nya. Kita bayar untuk service

54:31database-nya.

54:33Orang banyak salah sangka, wah

54:35ini serverless tapi kok masih ada server?

54:37Ya namanya serverless, bukan no server kan.

54:39Ya nggak bisa.

54:41Ada yang free neon.

54:43Ada yang free neon.

54:45Ya neon ada freemiumnya ya. Benar-benar.

54:47Kontongannya mungkin autoscaling

54:49betul. Tapi RDS juga udah

54:51autoscaling kan. Eh nggak ya.

54:53RDS auto back up.

54:55Tapi tidak autoscaling kan.

54:57Bukan. RDS itu bisa

54:59autoscale. Kan ada scaling

55:01apa? Vertical atau horizontal.

55:03Kalau RDS

55:05itu bisa scaling

55:07horizontal.

55:09Kalau scaling verticalnya hanya

55:11bisa one time.

55:13Artinya kalau sudah naik nggak bisa turun.

55:15Oh iya iya iya.

55:17Anjay bahaya banget.

55:19Ya iyalah.

55:21Kalau storage-nya sudah dinaikin, nggak bisa

55:23diturunkan lagi. Bisa data lost.

55:25Data-nya abis, hilang loh.

55:27Oh storage-nya ya?

55:29Bukan

55:31dekat machine run.

55:33Semua-semuanya kan

55:35kalau sekali naik kan memory naik,

55:37CPU naik, data

55:39storage-nya juga naik.

55:41Storage-nya ikut di itu kan.

55:43Bertambah.

55:45Ada segudang

55:47kompleksiti.

55:49Mengkonfigur itu semua.

55:51Pakainya serverless. Ya someone else yang

55:53mengkonfigur itu semua.

55:55Kan udah dikasih konfigurasinya kan.

55:57Iya.

55:59Termasuk juga

56:01termasuk juga kartu credit kita.

56:03Seperti diserahkan kepada orang lain.

56:05Iya itu

56:07mengerikan. Eh ada static

56:09pre-renderingnya.

56:11Nitoro.

56:13Nitoro itu apa lagi?

56:15Nanti kita mau bahas

56:17ini.

56:19Ini menarik

56:21static pre-rendering

56:23dulu. Ini isinya fit

56:25dan nitro sama

56:27ini menurutku

56:29fenomena yang menarik sih.

56:31Nitoro itu adalah

56:33nitro itu

56:35pokoknya

56:37buat ngahendernya

56:39target deployment.

56:41Oh.

56:43Ada blog post-nya dari

56:45Tenstake, bentar. Si Tenor.

56:47Ketauan robot nih.

56:51Ketauan AI.

56:53Mas Riza AI nih.

56:55Kayak kita semua AI.

56:59Saya

57:01create web server.

57:03Next Generation Server

57:05Toolkit. Ini kayak Express bukan sih?

57:07Pendatungnya Express bukan sih?

57:09Noh ini belum ada sebelumnya.

57:11Kayak menarik sih.

57:13Deploy them wherever you prefer.

57:15Posisinya dimana?

57:17Jadi bikin server

57:21memungkinkan suatu

57:23library atau punya software JS

57:25JavaScript based untuk

57:27di deploy di macem-macem target.

57:29Kayak misalnya aku lah di

57:31Cloudware

57:33Workers atau

57:35di mana? Cloudware Pages tadi.

57:37Cloudware Pages.

57:39Di deploy nih.

57:41Bisa dimana aja?

57:43Framework untuk meng-handle

57:45macem-macem target deployment.

57:47Nah, yang udah

57:49disediakan sama mereka adalah

57:51zero-config provider.

57:53Tapi kayak yang namanya framework.

57:55Jadi kayak bisa di-customize. Jadi misalnya suatu hari

57:57bakal ada provider jenis

57:59lain yang

58:01berbeda lagi.

58:03Bakal bisa ada lagi.

58:05GCP misalnya. Tadi nggak ada yang sebut GCP.

58:07Nggak ada GCP.

58:13Tak ada.

58:15Tadi kita ngomongin AUS doang.

58:19AUS sama AUS.

58:21Azure Cloudware

58:23Pages.

58:25AUS.

58:29AUS.

58:31AUS.

58:33Itu firebase app hosting kan udah keintegrate sama

58:35Cloud.

58:37Sekarang.

58:39Itu udah zero-config.

58:41Itu ada dua.

58:43Ada HIO.

58:45Firebase

58:47app hosting.

58:49Firebase.

58:51Firebase ya.

58:53Ini kayak

58:55kalau di

58:57Go itu ada namanya apa ya?

58:59Numpah is namanya. Ada kayak Tulkit-tulkit juga

59:01namanya.

59:03Namanya tagline-nya juga mirip.

59:05Coba ya.

59:09Menarik sih dia

59:11apa?

59:13Gorilla sama nggak?

59:15Gorilla.

59:17Soalnya ini sama-sama Tulkit.

59:19Nggak tahu nih sama apa nggak.

59:21Soalnya dia ada

59:23library-library yang lain juga.

59:25Jadi ketengan juga.

59:27Oh kalau Nitro.

59:29Oh ini head-to-headnya Tenstake.

59:31Kayaknya temen-temen yang pakai Go

59:33yang lebih mengerti daripada kita

59:35tolong dicerahkan.

59:37Kalau Tenstake

59:39kan front-end.

59:41Kalau Nitro ini.

59:43Sama Nitro.

59:45Kayaknya beda deh.

59:47Ini cuma buat

59:49target deployment

59:51untuk web server.

59:55Server-nya juga ada.

59:57Ini udah nggak apa-apa.

59:59Ada QVStory.

1:00:01Maksudnya semua yang

1:00:03enforce dengan menjalankan photo server.

1:00:05Mari kita simpan untuk

1:00:13episode-episode berikutnya ya.

1:00:15Ini enak nih dibahas Nitro.

1:00:17Jadi intinya

1:00:19adalah

1:00:21kalau kita yang bikin

1:00:23web-app itu kita kemungkinan

1:00:25nggak langsung pakai Nitro-nya.

1:00:27Nitro itu memfasilitasi pembuat

1:00:29meta framework kayak Tenstake Star.

1:00:31Terus kayak tadi yang dikomen

1:00:33Nux.

1:00:35Sebentar dulu juga Express

1:00:39itu kan

1:00:41SpellKit terus Nex

1:00:43terus hampir semua meta framework

1:00:45pakainya Express backend-nya kan.

1:00:47Dulu ya nggak tahu sekarang.

1:00:49Dulu ada pilihan tuh SpellKit.

1:00:51Mau pakai Polka

1:00:53atau pakai Express.

1:00:55Apakah positioningnya

1:00:57si Nitro itu seperti itu?

1:00:59Ya nggak kayaknya deh.

1:01:05Kalau dulu kan

1:01:07semua by default semua

1:01:09Node.js ya. Kita misalnya nggak punya

1:01:11runtime lain mau pakai Express

1:01:13mau pakai Polka. Perbedaannya

1:01:15tipis karena semua

1:01:17masih di bawah Node.js.

1:01:19Nah sekarang kayak lebih macem-macem lagi

1:01:21mungkin, dan sejujurnya

1:01:23gue nggak terlalu ngerti intinya

1:01:25perbedaan masing-masing runtime. Tapi maksudnya dengan

1:01:27sekarang runtime-nya namun

1:01:29macem-macem kan mungkin ada yang perlu

1:01:31di adjust juga.

1:01:33Mungkin dia jadi rapper atau jadi

1:01:35itu ya. Jadi apa?

1:01:37Jadi kayak polyfill

1:01:39untuk berbagai

1:01:41runtime kali ya.

1:01:43Jadi kalau disini nggak ada, oh dia pakai

1:01:45callback-nya kemana gitu ya.

1:01:47Dia jadi middleware.

1:01:49Yang

1:01:51yang bikin Nux nggak usah

1:01:53mikir beneran implementasi

1:01:55detail-nya gimana buat ngejalanin

1:01:57di

1:01:59Deno, atau Node, atau

1:02:01apapun, 10 stack start juga

1:02:03kayak gitu. Jadi kayak

1:02:05memfasilitasi macem-macem

1:02:07meta framework.

1:02:09Dan

1:02:11Deno is block tuh, menarik tuh

1:02:13si tanner-nya. Tadinya dia mau

1:02:15pakai adapter. Maksudnya buat 10 stack start

1:02:17dia yang manuali bikin adapter-nya

1:02:19untuk Netlify, bikin

1:02:21adapter buat Vercel,

1:02:23dan lain-lain. Setiap kali Vercel

1:02:25ada update

1:02:27ya dia kayak harusnya soain.

1:02:29Terus dia mikir, "Anjir, abis itu

1:02:31gue nulis adapter, ya kalau cuma dua."

1:02:33Terus dia liat,

1:02:35dia ngebandingin remix. Jadi kayak

1:02:37adapter-adapternya tuh kayak tipe-tipe gue udah 10

1:02:39aja. Kayak makin lama makin banyak.

1:02:41Dan itu kan dia harus memaintain

1:02:43terus kan. Jadi kan nanti

1:02:45pusing. Terus

1:02:47dia nyari apa, pendekatan

1:02:49lainnya.

1:02:51Akhirnya malah pakai itu

1:02:5310 stack start sama dengan

1:02:55nitro, tambah fit, tambah

1:02:57plus 10 stack roaster.

1:02:59Iya, sama

1:03:01berarti kayak express jaman dulu.

1:03:03Kurang lebih ya.

1:03:05Java Stack tool can to build

1:03:07comfort state framework with your own opinion.

1:03:13Oh, ada preset-presetnya.

1:03:15Oke, oke.

1:03:17Nah, presetnya yang tadi kita lihat itu, yang ada

1:03:19Azure, AWS, firebase, uphosting,

1:03:21dan lain-lain.

1:03:23Berarti sudah kayak opinion

1:03:25itu cara

1:03:27nge-build aplikasi

1:03:29back-end sama front-end

1:03:31sekaligus ya 10 stack start itu ya?

1:03:33Ya, 10 stack start ya.

1:03:35Jadi dia

1:03:37udah gabungin beberapa. Pertama

1:03:39yang ini kan, router. Query masuk gak?

1:03:41Enggak ya? Belum.

1:03:43Maksudnya query ketengan kalau mau

1:03:45pakai. Iya, kan dia hanya

1:03:47untuk back-end-nya saja, membangun

1:03:49back-end-nya. Terus front-end-nya

1:03:51ya terserah lu sebenarnya mau

1:03:53pakai query, 10 stack query

1:03:55gue boleh aja gitu.

1:03:57Tapi minimumnya

1:03:59minimumnya 10 stack router.

1:04:01Iya.

1:04:03Untuk

1:04:05transpiler-nya, bundler-nya

1:04:07vt, nitro-nya back-end.

1:04:09Kurang lebih gitu ya.

1:04:11Dan sudah opinionated ya.

1:04:13Sudah ada config-confignya dari dia.

1:04:15Iya, sudah disiapkan.

1:04:17Itu meta framework. Jadi yang meta

1:04:19framework-nya adalah 10 stack start.

1:04:21Framework di atas framework.

1:04:23Framework di atas framework. Oke.

1:04:27Saya harus

1:04:29ini dulu.

1:04:31Ternyata ada GDI web

1:04:33perf meetup.

1:04:35Sudah mulai.

1:04:37Sudah mulai.

1:04:39Boleh, boleh, ntar gue kasihin.

1:04:41Oh iya, pernah ya.

1:04:43Nah, malam ini

1:04:45ya cuman silahkan coba satu-persatu

1:04:4710 stack library

1:04:49universe.

1:04:51Mungkin besok-besok kalau ada

1:04:53yang punya saran, pengen nyobain

1:04:5510 stack start atau apalah yang

1:04:57spesifik, ya kita bisa balik ke

1:04:59product 10 stack

1:05:01lagi. Kita langsung berdiskusi

1:05:03di github discussion. Teman-teman

1:05:05kita langsung kesana.

1:05:07Nanti kita lanjut

1:05:09lagi ngomongin

1:05:1110 stack start kita bisa bahas

1:05:13kemudian nitro juga kita bisa bahas.

1:05:15Kita bahas 10 stack start

1:05:17plus nitro aja sekali

1:05:19biar nyambung.

1:05:21Oke, boleh.

1:05:23Boleh, siap.

1:05:25Kita next-nya bahas bedah framework

1:05:27itu ya.

1:05:29Oke, untuk malam ini sekian dulu. Terima kasih banyak

1:05:31semuanya yang sudah hadir.

1:05:33Terima kasih juga buat yang

1:05:35sudah hadir di link-in

1:05:37malam hari ini. Nanti kemarin

1:05:39kita akan coba juga

1:05:41boleh kita banding-bandingin

1:05:43aja yang mana yang lebih bagus.

1:05:45Ini komennya.

1:05:47Produk kecel, iya

1:05:51produk kecel lagi mau di-boycott kan.

1:05:53Ya, bagus-bagus.

1:05:55Nanti bisa kita undang jeselin aja yuk.

1:05:57Mumpung dia sudah.

1:05:59Ya udah jadinya lagi kan berarti?

1:06:01Belum, tapi kan dia tetap

1:06:03ngerti anggular.

1:06:05Ya, kali kalau udah

1:06:07bukan gugular, jadinya lagi.

1:06:09Anggular tuh, ada

1:06:11yang minta anggular ya.

1:06:13Jarang nih kayaknya

1:06:17ngelihat lifetime pak.

1:06:19Padahal bagus lah sekarang.

1:06:21Bagus.

1:06:25Oke, cukup ya.

1:06:27Selamat malam.

1:06:29Sampai jumpa. Bye bye.