Ngobrolin TanStack
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin WEB membahas TanStack, kumpulan library front-end yang dibuat oleh Tanner Linsley. Awalnya dikenal dengan React Table dan React Query, TanStack kini telah berevolusi menjadi ekosistem yang framework-agnostik, mendukung React, Solid, Vue, Svelte, dan Angular. Diskusi mencakup sejarah evolusi dari library React-centric menjadi framework-agnostik, filosofi desain modular yang memungkinkan penggunaan library secara terpisah (ketengan) sesuai kebutuhan, serta pendekatan unik Tanner dalam membangun bisnis open source yang independen tanpa venture capital atau akuisisi. Episode juga menyinggung tentang sustainability model bisnis open source dan perbandingan dengan ekosistem lain seperti Vue (Anthony Fu/Evan You) dan React (Next.js/Remix).
Poin-poin Utama
- •TanStack adalah ekosistem library front-end yang awalnya React-centric (React Table, React Query) namun kini telah menjadi framework-agnostik, mendukung React, Solid, Vue, Svelte, dan Angular
- •Tanner Linsley, pencipta TanStack, sebelumnya dikenal dengan React Static (SSG framework) dan library React seperti React Table dan React Query yang menjadi standar industri
- •TanStack Query (sebelumnya React Query) muncul sebagai alternatif yang lebih sederhana daripada Redux + Apollo untuk manajemen state server, dengan API yang lebih straightforward dan caching yang cerdas
- •TanStack Router menawarkan pendekatan file-based routing mirip Next.js dengan fitur lengkap termasuk DevTools, type-safety, dan berbagai template untuk memulai project
- •Filosofi desain TanStack adalah modular - library dapat digunakan secara terpisah (ketengan) sesuai kebutuhan, berbeda dengan pendekatan 'batteries-included' seperti framework lain
- •TanStack dijalankan sebagai perusahaan swasta independen tanpa venture capital, akuisisi, atau investor luar, dengan model bisnis melalui sponsorship, merchandise, dan kursus
- •Diskusi tentang sustainability open source mencakup pentingnya entitas legal untuk menerima donasi/sponsorship dari perusahaan besar, dengan referensi ke Perkodi sebagai contoh yayasan open source di Indonesia
[Musik]
[Music]
Eh, udah live ya?
Hello, apa kabar?
Apa kabar semuanya?
Selamat malam.
Keberbaik-keberbaik, selamat malam.
Biasanya kalau sedang harga naik, selasa waktunya?
Selasa malam waktunya, om perluling web.
Ya, selamat malam buat teman-teman di YouTube.
Dan kita malam hari ini coba live juga di LinkedIn.
Ada LinkedIn yang nonton.
LinkedIn ada live-nya.
LinkedIn malam-malam, kalau ada yang nonton hebat ya.
Ada yang buka LinkedIn gitu ya.
Ada lah, ada-ada lah.
Masa? Gua kok belum liat sih?
Coba liat dulu lah, liat dulu lah.
Kita bisa multi-stream setara.
Ada sih, ada. Cuma maksudnya baru tau LinkedIn ada live-nya.
Ada.
LinkedIn itu akhir-akhir ini lagi fokus ke video dia.
Banyak promosiin video, banyak encourage, influencer untuk posting atau live juga di platformnya dia.
Kita bisa connect ke TikTok juga nggak sih?
Kayak motivasi gitu.
Nah, ke TikTok.
Ke TikTok kayaknya agak susah ya.
Karena kan vertikal.
Portrait ya, portrait.
Susah kalau begini.
Lihat transkrip lengkap (1826 segmen lagi)
Udah dua aja, LinkedIn atau Youtube aja.
Coba teman-teman nge-message, coba di-posting nonton dari mana.
Twitter, Twitter.
Kalau Twitter harus itu, harus premium.
Twitter-nya.
Twitter-nya harus premium ya?
Iya.
Nanti kita naikin aja Twitter Mas Riza ke premium.
Oh boleh.
Asyik.
Asyik, oh iya.
Gainnya banyak.
Oh iya, keren.
Logonya keren tuh.
Logonya.
Siapa dulu dong yang desain? Bukan gue.
Ya, kamu engineer doang.
Desainnya pakai prompting.
Itu namanya LM Generated.
Tapi sekarang kayaknya kalau Go Generated bisa lebih baik ya.
Lebih bagus lagi ya.
Kalau dulu Generated ini kan tahun lalu, satu setengah tahun lalu.
Generated ini.
Pas awal-awal baru bisa generasi pakai apa ya?
Kok lupa ya, pakai apa ya?
Masih pakai Bing.
Bing kan paling awal tuh yang bisa bikin image generation yang gratis.
Sedangkan kalau pakai Discord gue lupa, Mid Journey.
Mid Journey kelamakan.
Lama banget bikinnya jadi gini ya.
Dan hasilnya juga bagus.
Tetap lebih bagus.
Zaman itu lebih bagus Bing.
Satu setengah tahun yang lalu.
Oke.
Ya, jadi.
Kalian bikin komunitas di Twitter.
Banyak ya yang main Twitter ya?
Bisa ya.
Baru tahu Twitter komunitasnya.
Karena udah nggak Twitteran, nggak tahu.
Keren.
Itu keren lagi tuh Eka.
Lumayan menarik.
Kalau memang ramai di Twitter, bisa kita nanti bikin Twitter community ya.
Boleh, boleh.
Boleh dicoba Mas Fidi.
Terima kasih.
Jadi malam hari ini kita akan bahas, kita akan bedah.
Sebenernya.
Kalau bilang bedah framework, agak ini ya.
Agak misleading ya.
Agak kurang tepat karena.
Ini agak meluas.
Jadi supersetnya ya.
Supersetnya.
Jadi kalau di dunia front-end itu.
Ada universe-universe nya ternyata ya.
Kayak Marvel ya.
Iya.
Kayak Marvel kan bisa ada dunia sendiri.
Iya.
Awalnya kan, awalnya itu universe nya si apa?
Yvan Yu. Yvan Yu itu ada universe gak sih?
Ada kan. Sekarang jadi void zero itu kan ya.
Iya.
Ecosistem.
Akhir-akhir ini dia bikin.
Akhir-akhir ini ya.
Sebelumnya kan dia berkutat di Vue.
Masih-masih hilang.
Hilang?
Nggak. Masih di sini.
Berkutat di Vue.
Terus abis itu dia bikin VT kan.
Dan VTES.
Eh VTES sih bukan dia yang bikin ya.
Pokoknya ekosistemnya lah ya.
Nggak. Komunitas.
Terus kalau yang terkenal banget kan.
Kalau di Ecosystem Vue ada mas Antoni Fu.
Jadi ya ini universe-universe.
Istilah pecandaan kita aja.
Karena saking banyaknya.
Kayaknya bolak-balik kita mau dia lagi.
Di berbagai library pendukung.
Universe.
Universe.
Kita coba aja sih kalau si Mas Anfu ini.
Banyak.
Karena gue nggak pake Vue.
Ya nggak terlalu banyak yang dipake.
Yang gue pake slide dev.
Terus yang buat icon.
Oh VTES dia yang bikin.
Icones.
Itu yang buat kayak icon browser.
Icon.
Icones lah. Icones. Nggak tahu gimana bacanya.
Coba kita lihat ya.
Website pribadinya.
Oh kecil banget.
Creator of VTES ternyata dia creator of VTES.
Kita baru tahu dia.
Kirain si Evan Yu yang bikin.
Tapi kita bukan.
Uno itu punya dia yang bikin.
Uno CSS juga dia yang bikin.
Tuh kan dia tuh kayak punya.
Dia kayak punya alam semesta sendiri gitu kan.
Jadinya.
Terus juga.
Yang terkait sama Ecosystemnya Vue.
Core teamnya.
CSS ini yang apa namanya.
Meta frameworknya Vue ya.
Meta frameworknya Vue juga.
Dia ikut kontribusi.
Terus ada Siki.
Siki ini.
Keren juga nih. Saya pake ini.
Markdown highlighter.
Gue juga pake.
Untuk di kayak.
Untuk di block.
Block.
Block engine gitu.
Atau dimanapun sebenernya.
Iya.
Untuk dimanapun.
Banyak ini. Lengkap.
Bahasanya lengkap.
Jadi menarik.
Bahasa yang disupport.
Terus ada lagi.
Yang baru-baru.
Yang ini kan. Un.js.
Ada yang itu nggak un.js.
Yang ini juga kan.
Pernah ya.
Kita nggak bahas.
Nggak. Maksudnya episode ini kita nggak bahas.
Mereka ini cuma intro aja.
Intro.
Ini kan banyak ya.
Un.js.
Nanti.
Ada 60 giga loh.
Banyak sekali.
Dan universe yang mau kita bahas adalah.
Ini.
Malam hari ini.
Itu memang sengaja ya logonya.
Untuk.
Untuk tanning gitu ya.
Iya ya.
Ini AI Generated deh.
Kan tanning.
Tanning buat ini hitam itu.
Berjemur di pantai.
Berjemur ya.
Nah ternyata.
Si 10 stack ini.
Ini ekuivalennya kalau tadi.
Punyanya Anhu kan di view.
Nah.
Terus 10 stack kan.
Emang gambarnya.
Kirain buat tanning.
Ya mungkin apa.
Multi interpretasi.
Karena yang bikin namanya Tanner.
Oh namanya Tanner.
Sama kayak Anfu ya.
Tapi Anfu.
Nggak begitu.
Apa namanya nggak begitu.
Dia kan menyingkat namanya juga kan.
Anthony.
Apa namanya Anthony Fu.
Oh iya.
Ini yang kayaknya stacknya.
Stacknya Tanner.
Ini ya. Tanner Lindsey.
Tanner Lindsey.
Yang bikin.
Tapi nggak dia sendiri kan.
Maksudnya dia yang inisiat ya.
Nggak dia.
Dia yang inisiat.
Dan fun factnya ini.
Gue tahu nama ini.
Udah saya dari dulu banget.
Saya bekerja di web dev yang proper.
Yang.
Ya yang pakai JS Framework.
Itu dulu pakai.
Framework SSG React.
Bikinannya dia.
Namanya React Static.
Sekitar tahun 2017 tuh.
Dulu tuh kayak head to headnya sama Gatsby.
Dulu kan kalau SSR kayak.
Oh iya iya iya.
Nah cuma kalau Gatsby itu kan.
Dulu mainly SSG.
Tapi ribet banget kan.
Terus kayak apa sih.
Conventionnya ribet.
Nah kalau React Static.
Bikinannya si Tanner dulu itu.
Kayak ya simple banget straight forward.
Ambil data dari ya source apapun.
Ya udah langsung di render.
Jadi maksudnya sejarahnya.
Jadi dulu dia kerja normal gitu.
Maksudnya dulu dia developer.
Kerja di entah apalah.
Ya stanger lah.
Kayak creator apa.
Kayak toko open source lainnya.
Cuman kayaknya ya eventually setelah.
Makin banyak bikinannya dia.
Library nya dia yang dirilis.
Akhirnya itu dia kayak.
Bikin company sendiri.
10 stack itu.
Ya mungkin kalau sekarang sih.
Punya tim ya.
Cuma dulu awalnya.
Ya dia kayak developer individu.
Bikin macem-macem apa.
Bikin SSG framework.
Bikin library yang kayak React Table.
Dulu tuh namanya React Table.
Itu itu salah satu yang terkenal banget juga.
Maksudnya kalau.
Kalau pernah bikin rich table.
Yang pakai sort. Yang computer. Yang gitu gitu.
Akhirnya jadi ini ya.
Pasti pernah pakai punya dia.
Nah terus.
Makin lama makin berkembang.
Dia quit his job.
Dia berhenti kerja jadi developer.
Dia seriusin full time ini.
Terus kayak jadi yang tadinya semua react centric.
Sekarang mulai bergeser.
Ke framework agnostik.
Jadi kayak ada integrasi nya ya.
Macem-macem sih ada yang.
Masih fokus ke React.
Ada yang lebih agnostik.
Tergantung library nya kan.
Nggak semua langsung bisa dibikin.
Full framework agnostik.
Oke.
Banyak banget itu di kiri kan.
Iya.
Jadi ini awalnya dari React Table.
Terus 10 stack query juga.
Awalnya dari React query kan ya.
Iya banyak-banyak itu kayak
unrelated gitu.
Dulu dia React.
Dulu sih React query kayaknya sampai agak-agak
ini juga masih center ya.
Masih ada kan React query?
Nggak ya?
Ganti nama.
Tapi ini ya library nya
masih ada nggak?
Masih-masih.
Oh ya?
Masih.
Masih ada.
10 stack query.
Masih.
Oh ya masih ada.
Cuma.
Ini nih.
Kalau sampai versi yang 3.
Dia masih support sampai versi yang 3.
React query.
Tetapi untuk versi yang 4.
Nanti sudah berubah jadi.
10 stack query.
10 stack React query.
Jadi dia roba ini nya.
Nama library nya.
Organisasi nya.
Oh cuma?
Iya organisasi nya baru.
Dia satuin semua ke
10 stack.
Iya.
React query ini kan juga
salah satu yang oke ya.
Iya.
Masih pakai sampai sekarang.
Tapi gue nggak tahu kalau itu
ini.
Dari 10 stack.
Iya.
Ya karena dia belum branding.
Tidak.
Belum branding.
Namanya straightforward banget ya.
React static.
Jadi kalau bikin static stack generator ya React static.
Bikin library buatan ya
React table.
Buat query, React query.
Trus sekarang dia udah
printing.
Kayaknya nggak boleh pake kata react gitu lagi kali.
Mungkin dia kena copyright.
Nggak lah.
Dia mau jadiin satu semuanya.
Mau jadiin satu.
Biar jadiin satu.
Biar jadiin satu.
Biar jadiin satu.
Biar jadiin satu.
Atau dia lebih utama
karena pengen fremo agnostik.
Kalau dia pake kata react query.
Jadi nggak bisa.
Jadi nggak bisa yang lain.
Nah itu kan dari tagline nya
juga udah kelihatan kan.
Prioritas itu scroll ke atas deh.
Nah for TSJS,
React, Solid, View, Swelt, Angular.
Jadi kayak dibela-belain.
Semuanya dimasukin ke caption.
Jadi kayaknya rebranding aja.
Nggak cuma
React doang.
Nah ini, React query ini
salah satu yang
generasi setelah
Redux ya.
Redux kan sempet
populer banget gitu.
Jadi kayak de facto kan.
Tapi setelah itu kan mulai Google.
Karena setelah itu harus dipake ke pisah.
Pisah-pisah itunya kan.
Kayak reducernya itu.
Mau fetching aja susah banget.
Nah si React query ini kayaknya lebih
maksudnya keuntungan-keuntungannya kayak caching.
Kayak yang compare sama request sebelumnya
tetap ada.
Tapi kayak API nya, syntax nya.
Lebih straight forward kan.
Karena waktu
Redux itu diciptakan,
React nya
masih versi-versi
belum sedinam
saat React query
diciptakan.
Bukan juga secara
architecture lah ya.
Jadi waktu React query
sudah muncul,
secara keilmuan lah.
Secara kematangan frame
atau library-nya si React itu
sudah lebih maju. Sehingga dia
bisa lebih mudah implementasinya.
Lebih simpel.
Lebih simpel. Saat jamannya Redux.
Redux mau berubah
atau mau rewrite semua
juga nggak bisa. Karena sudah terlampau banyak
yang gunakan.
Kalau berubah caranya sudah susah.
Makanya...
Nanti banyak yang ngamuk.
Semua library atau punya
popular yang udah dipake banyak orang,
itu kayaknya backwards compatibility-nya
itu harus...
ada satu dilema.
Kalau dibangun sama jamannya
React 3,
4, itu kan ya sudah
nggak bisa diapapain lagi.
Memang begitulah architecture-nya.
Sama ini kan
waktu itu, seingat saya itu
abis Redux,
terus muncul kan GraphQL
bersama Apollo
yang buat
patching data sama state
management. Terus abis itu
tiba-tiba muncul
React Query yang katanya lebih simpel.
Jadi nggak perlu ada Redux,
nggak perlu ada Apollo.
Bisa jadi satu aja.
Terus buat
patching dan lain-lain.
Moving semua ya dari situ.
Redux pindah semua ke Redux Query.
Menarik, menarik, menarik.
Terus abis itu
mungkin dia mulai dari dua itu
Table, ini kayak
standar lah ya.
React Table,
Query, terus abis itu lebih
spesifik kan ke Router.
Kalau mau bikin yang tadinya ClientShot
rendering, mau ada
routing-nya, pilihannya
kalau dulu kan de facto-nya kan
React Router ya. Yang kemudian
jadi Remix, abis itu balik
lagi jadi React Router lagi kan.
Ternyata dia juga bikin ya.
Iya.
Itu udah lama, cuma
kayak rebranding-nya
baru sekarang.
Kenapa, Ivan?
Caranya gimana sih
React Router? Keren.
Bisa digituin.
Ada DevTools-nya ya.
Ini niat banget ya bikin
library langsung dibikin supaya
useful DevX-nya bagus.
Itu niat loh.
Desainnya juga udah biasa ya.
Itu dari dulu banget
jadi kayak apa, selalu
diiterate-iterate kayaknya dipercaya
lagi.
Cara apa, gimana tadi
pertanyaannya? Router, cara pake Router-nya.
Iya, cara pake gimana nih?
Ini fitur-fiturnya ya.
Sama, mirip lah.
Pilihin Router.
File-based ya, file-based
route generation.
Kayak Next.js.
Next.js jaman pages.
Iya, sebelum
sampai sekarang
juga selalu masih file-based ya.
Oh, jadi kalau misalkan kita mau mulai
pake, kita
pake React seperti biasa dulu
pake fit atau pake apa,
habis itu kita install kayak gini aja ya, langsung ya.
Iya, ini kan soalnya terpusak.
Apa ketengan, Router-nya doang.
Ya, ketengan-ketengan.
Wah, menarik nih yang ketengan-ketengan gini
jadi gak berat ya.
Kayaknya lebih bagus ketengan gini daripada
jamanya meteor gitu, kayak semuanya
everything sudah ada.
Iya.
Tergantung butuh apa.
Tergantung orangnya juga.
Kalau orangnya overthinking ya, mungkin
yang ketengan gini bingung ya, oh,
pilih yang mana nih ya, React Router apa?
Iya.
Atau ngak bisa compact gitu, misalnya
empat orang, semua punya cara mikir
sendiri-sendiri, mau pake
state management, berumpak ribut
dulu, seharian.
Alhasil,
udah pake Apollo Client,
udah pake Apollo state-nya,
terus ditambahin Redux, tuh.
Iya.
Sering ditambahin apa?
Jadi, nge-fetch-nya
dari GraphQL,
pake Apollo Client,
disimpan...
Ya, abis itu
disimpan di Redux.
Semua-semua disimpan di Redux ya.
Saya bikin begitu.
Oh, tapi bisa
tidak file-based juga berarti ini?
Ini ada kayak
fiturnya, kayak
flagging-nya kayaknya.
Ya, itu template
starter-nya aja.
Kan, itu tuh
penyatang itu create TS
router. Bisa
pake template custom.
Oh,
oke. Template-nya adalah file
router ya. Berarti ada template-template lainnya
berarti ya.
Kalau kita
nggak mau kakai
create TS router, kita harus
jalanin ini ya, harus install ini ya.
Kalau manual,
ya itu.
Terus konfigurasi
pt-nya.
Oke, terus baru
kita bikin ini ya,
folder routes, terus ada root
SS. Ini
link. Oh, dia pake link ini
juga ya.
Link yang dibungkus.
Tapi, link-nya dia punya.
Iya, dibungkus.
Iya, dia punya bumpunan link.
Iya, sama aja kayak
NSCS, coba kan.
NSCS.
Create
TS, apakah
masih digunakan?
Masih di-maintain kan ya.
C-R-A.
Coba lihat ya. Udah, cuma udah.
Aku nggak bisa pake versi React yang baru.
Oh, ya.
Sudah tidak direkomendasikan
di dokumentasi React-nya.
Iya, nggak didokumentasiin.
Lama nggak bisa pake versi React yang
paling baru.
Oh, udah berhenti berarti?
Sudah berhenti beroperasi.
Ya, di-maintain juga versi.
Nggak, nggak berhenti. Cuma ya, apa?
Dikunci di versi React-nya.
Apa ya?
Yang terakhir lah.
Sudah. Deprecated.
Oh, iya.
Sebaiknya jangan digunakan lagi.
Sebaiknya jangan digunakan lagi.
Maksudnya, if you are following a tutorial.
Paragraph kedua.
Misalnya ngikutin tutorial.
Ya udah, ngikutin aja dulu.
Maksudnya nggak bahaya, nggak gimana.
Cuma kalau misalnya
mau bikin baru, nggak perlu.
Udah nggak relevan lagi.
Kalau mau bikin
yang client-side only,
yang hanya client-side rendering,
bisa pake VT. VT Starter.
Ya.
Jadi gantinya itu.
Kalau mau yang full stack ya,
pake antara Next.js,
atau Remix, atau 10 stack tadi ya.
Salah satunya. 10 stack Starter.
Nah, yang baru itu
ada itu tuh
Create TS Router App lagi ngetrend.
Yang ini ya?
Create TS Router App.
Punyanya 10 stack tadi.
Oh, punya dia juga?
Oh.
Ini adalah?
Equivalent to
Create Rec App.
Jadi ini penggantinya ya?
Gak harus buat 10 stack router ya.
Bentar, di private chat.
Ini nih.
Coba buka di private chat.
Ini beda.
Oh, DCLI-nya.
Eh, mana kali?
Ini ya.
Salah satunya.
Nah.
Oh.
Bisa
buat
app macam-macam.
Oh, jadi dia bikin
kayak Create Rec App, tapi
dari 10 stack. Cuman
udah termasuk fitur
router-nya ya.
Ya, kalau mau
pakai,
kalau mau bikin single page app.
Cara pakenya gimana?
Oh, yang tadi ya?
Yang tadi, NPX
label-label.
Nah, itu tolong.
Coba aja, Mas.
Pake itu, apa?
Tools yang itu, bisa kan?
Pake tools, apa namanya?
Yang buat LiveJS
itu loh.
Langsung aja.
Eh, namanya My App.
Ya, udahlah. Yes.
Oh, RUNJS.
RUNJS.
Gimana caranya?
RUNJS.
Pernah kita bahas sekali ya?
RUNJS.
R-U-N-J-S.
Kayak JavaScript Playground gitu.
Emang bisa NPM?
Bisa?
Bukan JavaScript doang.
JavaScript Client.
Coba scroll, kalau nggak salah sih bisa.
Kalau nggak salah ya.
Apa?
Salah kali.
Itu install NPM package tuh.
Itu tunjuk lah seterus-terusannya.
Iya, tapi installnya ini nggak
NPM install blablabla.
Pake itu, apa namanya?
Pake tools-nya. Oh iya, bisa ya?
Tapi bisa jadi server.
Ini Lodas loh, dicontohinnya.
Nggak tahu juga sih.
Belum pernah coba sedalam itu.
Ntar gue coba.
Ada AI-nya juga.
Oh.
Nggak sebentar ya.
Seperti biasa.
Ini apa aja ya?
Nah sambil install, lihat ini deh.
Menarik sih, balik ke home-nya.
Coba.
Balik ke home, scroll ke bawah.
Bawah lagi.
Seriusan ya.
Banyak. Bawah lagi.
Bawah lagi.
Bawah lagi.
Terus.
Terus.
Nah, nah.
Terus.
Sponsor paling besar salah satunya, Boon.
Lucu.
Oh iya.
Boon, sanity.
Nah, bawah lagi.
Oh.
Oh, Boon punya duit sekarang ya.
Nah, bawah lagi.
Iya ya, dari mana ya?
Tapi ini Sponsor Project.
Mungkin ada Sponsor Project.
Ini juga Sponsor Project.
Nah, kebawah lagi yang tadi.
Masih kebawah lagi, Mas.
Kebawah lagi.
Bawah lagi.
Mas bisa, scroll, delay ya.
Kebawah lagi.
Terus.
Nah, bawah lagi.
Bawah lagi.
Bawahnya button yang hijau itu.
Bawahnya lagi, itu lucu deh.
And add on, ya.
Baca itu.
And add on an open source project.
Kayak dia nyengir gitu.
Apa sih nih? Kayak tahun 99 aja.
Terus.
Dia nggak mau ada iklan gitu ya.
Dia kayak.
Dia di Intense Tech tuh kayak misi
mulianya beneran sesuai idealismunya
dia gitu lah. 100%
privately owned, tanpa paid
product, tanpa venture capital,
tanpa
akwisisi, ya, liatnya.
Nggak tahu terkabul atau nggak. Terus.
Blablabla. Terus click itu, check out
our ethos.
How we plan, gimana dia
mencanain biar bisa sustainable.
Nah, ini jadi kayak
dia punya misi mulia untuk
open web, open standard.
Makanya dia juga pindah keser dari
React ke, apa,
framework atau library
agnostik.
Agnostik, ya.
Core values-nya tuh yang di, apa,
independently owned, blablabla.
Tanpa investor luar, blablabla.
Open web, open standard.
And freedom to compose and
deploy anything you want, anywhere
you please.
Ya, ini mulia banget sih. Cuma nggak
tahu. Maksudnya di depannya ya, semoga bisa
aware.
Mari kita lihat. Apakah
dia akan menjual cloud hosting?
Tapi dia jual
merch, tuh. Merch.
Dia jual merch, dia jual course,
maksudnya kursus, ya. Maksudnya, apa,
sponsorship. Dia jual course, ya.
But they take free sponsor. Cuma
maksudnya nggak
kayak yang Next.js dibawah
Carcel, gitu. Kalau itu kan emang disetir.
Apa, kalau ini.
Keren juga, nih.
Kualan tetap, terima sponsor tetap, tapi
kayak dia
fokus idealismunya dia.
Keren juga, nih.
T-shirt-nya.
Nah, ini menarik.
Ya, ada 10 stack-nya sih.
Tapi nggak kelihatan apa ya.
Ya, art aja udah.
Tapi kan branding-nya dia.
Cuma lucu aja desainnya menarik.
Iya, desainnya menarik.
Nah, itu no pressure,
bla-bla-bla, no corporate influence.
Oh, berarti
ini agak sedikit bertolak-belakang
dengan Void Zero, ya.
Void Zero itu
memang cepat. Void Zero kan
difunding.
Ya, tapi maksudnya kenapa bertolak-
belakang, ya. Bisa kan
kalau soal funding dan non-funding, oke
lah. Tetapi secara visi,
apakah Void Zero
benar-benar disetir?
Oh, nggak tahu. Kalau disetirnya nggak tahu. Yang jelas kan
visi funded kan. Maksud
yang saya sebutkan itu ya,
perbedaannya bertolak-belakang ya, dia nggak mau
atau belum mau.
Mungkin belum ada tawaran yang gede aja
kalau ada tawaran yang gede.
Pasti ada sih. Sebenernya pasti ada kalau udah
seukuran ini. Cuma ya dia,
idealismunya dia. Itu kan sebegini,
dia bikin, itu bikin
perusahaan
swasta kan tadi bilang private,
dia bikin kan untuk nyalurin cara
mikirnya dia. Nah, kalau udah gitu kan nggak ada
benar-benar salah.
By the way, kalau misalnya
teman-teman kayak kita
atau teman-teman yang penonton di sini
mau kayak bikin
seperti ini juga,
maksudnya bikin
open source project yang bisa
sustainable.
Terus kemudian, apakah
kalau secara hukum
kita perlu set up ini nggak sih?
Set up non-profit organization,
yayasan gitu nggak sih?
Karena terima
donasi kan?
Nah, kan
donasi juga kayak
apa itu yang dipakai astral, dipakai banyak
kan ada
tergantung-tergantung
kalau misalnya GitHub sponsor gitu kan.
Kan ada TNC-nya sendiri,
itu individu nggak apa-apa.
Tapi kalau yang aduh lupa namanya
open-open apa itu yang dipakai astro
yang dulu kita pernah bahas, terus dipakai
macem-macem library lain, yang kayak
ada poolingnya, orang bisa donasi,
terus kayak dipakai
buat maintain
open collective.
Nah, itu
atas nama individu
bisa atau nggak kan, pasti dia punya
legalitas sendiri.
Iya, maksudnya kan kalau secara di Indonesia nih
anggap aja boom
dari luar negeri atau
anggap aja
angular deh, angular
atau Google gitu mau
ngesponsorin
proyek karyana bangsa
kita gitu. Tetapi kan
pasti butuh entitas kan?
Karena dalam dari company besar yang
ngasih sumbangan itu kan
butuh entitas dan
terpajakan segala macem.
Kita perlu undang lawyer kali ya
satu saat di obrolan web ini ya.
Sepatutnya.
Cuma kalau yang
on-the-surface-nya ini begon-begonnya
dia ngasih
donannya, perusahaan besar kan
nggak mungkin tiba-tiba cuma transfer
minta rekening BCA
atau mandiri atau BNI, nggak mungkin gitu kan
pasti dia ada caranya
misalnya pakai perjanjian, kontrak.
Nah, itu kan kontraknya berarti
kontrak kan bisa macem-macem juga, kontrak
kan bisa sama individu, bisa sama
organisasi atau
perusahaan, apa, badan hukum.
Nah, kan itu tergantung banget
si apa? Si yang mau
ngasih duit itu, terms-nya kayak gimana?
Kerajanya di NGO nih.
Kalau di NGO-nya kan berarti ada entitas.
Entitasnya yang terima bisa
menampung
donation atau
government project yang
untuk non-profit kan
sebenarnya kan?
Iya, bisa. Nah, kalau kan
non-profit kayak ada TNC-nya sendiri
misalnya harus
bisa di-audit secara public
jadi kayak harus laporan keuangannya
itu harus tersedia untuk
di-audit, kayak itu masing-masing negara
juga kan ada TNC-nya sendiri.
Terus kayak misalnya
kalau di ranak non-profit sih
lebih ke misalnya apply funding
itu kan emang ada yang cuma
terbuka untuk jenis
non-profit, blablabla. Jadi
kalau balik ke topik ini, kita pengen bikin
library open source, kalau levelnya
masih di GitHub Sponsors
itu mah individu juga
masih nggak apa-apa kan. Itu individua
nggak terlupusin dengan
entitas ya.
Ya, misalnya
teknikali sih, kalau mau nyumbang
misalnya atau meta atau apa
kalau lewat platform GitHub
Sponsors, ya sah-sah aja.
Tapi kalau perusahaan besar, biasanya mau
lontorin dana besar, pasti kan
punya, ya itu tadi program sendiri
jenis kontraknya kayak gimana.
Kita pengen ya lucu deh coba di show.
Kenapa?
Eh, bisa lah siung.
Bisa, bisa sih.
Sudah jadi admin.
Nggak,
kalau ini mungkin
sama atau beda nggak tahu ya
minta pendapatnya juga.
Kalau di komunitas
waktu kita mau bikin conference
itu kan kalau mau terima sponsor
nggak bisa tuh pakai
pribadi. Makanya
waktu awal dulu
Ruby conference sama
Python conference mau bikin
itu teman-teman dari komunitas bikin
namanya Perkodi.
Jadi kalau teman-teman mau bikin perusahaan
apa, perusahaan
open source yang menerima donasi
bisa ikutan sini aja
daripada bikin sendiri.
Jadi daripada punya
apa namanya, bukakan nih
harus ada, ya
harus yayasan, harus ini, harus ngurus
kemana-mana, ikutan ini aja.
Tujuannya ya sebenarnya
cuman punya
rekening bersama sebenarnya.
Regber.
Regber, tapi versi ini ya.
Regber.
Yang 2017.
Kenal siapa ini ya?
Gio.
Gio.
Yang Gio sama Mas
Didik.
Didi Ucasono.
Didi ini kan yang Ruby kan?
Ruby-Ruby ya.
Jadi mereka kayak bikin yayasan untuk
supaya nggak perlu ngurus-ngurus lagi
kalau mau bikin conference atau ya tadi
kalau mau bikin entitas itu ikutan
sini aja.
Cookpad.
Cookpad.
Ada yang mau lihat-lihat, silahkan.
Oke.
Kita kembali ke topik ya.
Teknologi agnostik by default.
Saya cuman mendoakan supaya ada
karya anak bangsa sekelas ini nantinya
gitu, siapa tahu.
Terbuka.
Jadi temen-temen nggak usah
khawatir mikirin yang tadi ya.
Nggak perlu mikirin, wah gimana nih harus bikin
perusahaan blablabla. Udah.
Mulai aja dulu.
Wah, ini ada dari LinkedIn.
Ada nonton dari LinkedIn.
Kita baru pertama kali multistream
ke LinkedIn sama ke YouTube.
Jadi selamat datang.
Setahu saya kalau dapet grant atau kerja
sama dengan perusahaan, biasanya perhamputan.
Nah itu grant tadi kan.
Grant funding.
Itu harus ada badan hubungan.
Iya, kalau mau sponsor pun kadang-kadang
kalau perusahaan besar, pasti dia
mintanya entitas. Nggak mau dia
kayak...
Nggak usah harus perusahaan
besar, mas. Perusahaan yang
terdaftar.
Kalau atas nama perusahaan, harus ke
yang ada entitas yang nggak bisa ke pribadi.
Oke.
Nah, lagi-lagi tergantung platform
perjanjiannya kayak gimana kalau
dianggap sebagai apalah
ya nggak tahu ya, dianggap sebagai
pilihannya
antara kalau misalnya pribadi ke pribadi
berarti si pemilih perusahaan, ya udah
kalau gue nggak bisa pakai perusahaan, pakai
pakai nama gue pribadi ke orang
pribadi, itu bisa.
Kalau memang mau support doang.
Iya, mau support doang.
Kalau saya konsultasi
atau semacamnya, itu bisa
NPWP pribadi.
Oke.
Nah, tapi kan lagi-lagi
ini kan abstrak ya,
programnya kayak gimana, ini kan cuma
berandain-andain aja. Kalau misalnya kita
pengen bikin project open source
terus ada perusahaan besar yang
support. Nah, support itu kan
sebetulnya kalau yang di
ranah legal, supportnya itu apakah
sebagai grant, funding, apa
dianggap sebagai project CSR-nya
mereka, itu kan ada
kategorinya sendiri.
Pakai Saweria,
mana mau perusahaan-perusahaan besar
donasi lewat Saweria.
Ya, sih perusahaan besarnya nggak mau.
Nggak mau.
Ya, kalau yang donasi
sesama, apa, individu
ya aman. Tapi
kalau, apa,
kalau perusahaan besar mah nggak mau.
Kalau tiba-tiba yang donasinya
gede, nah, itu harus dicurikai.
Jangan-jangan.
Oke, back to topic.
Oke, kembali ke topic ya.
Jadi
menambah ide-ide aneh.
Udah mikirin duit aja, jadi bikin projectnya
aja boleh. Nah, akhirnya
selesai.
Akhirnya selesai.
NPM start.
Oh, tiga-tiga. Wih, langsung pakai VT.
By default. Iya.
By default. Keren.
Iya, emang VT kan berimigrasi dia semua.
Jadi CRA?
Itunya dia.
Oh, berarti dia
nyambungnya ke
VT ya, dia pakai
VT ya dari awal ya.
Jadi pakai 10-stack
start ya?
Enggak, ini belum start. Ini 10-stack aja.
Ini pakai router.
Enggak, nggak ada 10-stack
aja. 10-stack router.
Jadi kayak 10-stack itu kayak
umbrella term-nya. Cuma dia punya
macem-macem opsi yang tadi di halaman
awal itu yang kita lewatin, kita
control. Dia load
widget-nya loh tadi tuh.
Widget-nya dia bisa di-routing.
Routingnya jadi kayak...
Ada dev-nya, dev tools-nya.
Iya, dev tools-nya.
Ini nih dev tools-nya, jadi mana dia?
Router, eh bukan.
Ih, ada report
buat vitals loh. Langsung...
Iya, jadi kayak udah semua.
Jadi, kan tadi pertanyaannya buat
semacam...
Semacam nggak gantiin.
Orang-orang yang sekarang
udah kan itu tadi
Create React App udah
depiketit. Nah, terus kalau mau bikin
baru SBA, gimana kan?
Selama ini kita ngasih saran, ya udah pakai
VIT aja. Cuma kalau mentahan kayak cuma
VIT sama React, kan
belum banyak, belum ada fasilitas-fasilitas
builds and whistles kayak yang
dikasih sama Create React App kan.
Nah, ini kayak drop-in
replacement-nya adalah si Create
10-stack router app ini.
Tapi Create React App nggak ada
router juga, dia lebih
nambahin satu berarti.
Iya, satu fitur.
Cuma maksudnya buat apa? Yang kayak kita
bikin sesuatu yang agak mateng
lah. Kalau cuma VIT sama React luar, kan
cuma satu counter.
Singletis app doang, bener.
Testing library itu punya CanSeedle kan?
Ya, betul.
Testing library itu.
Testing library,
VITES,
WebFighter.
Standard lah ya. WebFighter.
Kalau WebFighter ini, DCRA juga
udah ada. Nggak usah kaget.
Coba gimana hasilnya kalau di dari ininya?
Buka console log-nya
tadi?
Ini?
Inspek elemen? Apa yang ini?
Kayaknya ini buat router doang.
Oh iya. Inspek elemen.
Iya, di console.
Console, console, console, console.
Console.
Iya.
Lo ngapain? Kalo di
reload?
Reload?
Ya reload.
Lo, kalo udah keluar.
Kalo udah keluar itu
hasil
WebFighter.
Di-enable nggak?
Nggak, mungkin belum nyalain.
Ini udah.
Ya itu console.log.
Dalemnya kasih
callback function
to.log.
Ya.
Oke, ya.
Block?
Block by client, karena localhost.
Bukan.
Oh gitu?
Gak tau.
Oke.
Nah itu submit
bug ke
kan ini open source semua.
Kita mau liat. Nah ini DevTools-nya
ada di sini.
Jadi kalo kita harus pake.
Yang dikiri tadi, kiri-bawah.
Nah, hilangkan kiri-bawah.
Kalo mau pake
DevTools, nah ini.
Komponen.
Komponen base dia.
Ini
routes-nya, terus ada index.
Kalo kita mau bikin
routes baru.
Oke, patch.
Ini ya di routes-nya.
Coba
.tsx
Udah dibikinin.
Kok bisa?
Kok bisa?
Coba ini deh.
Enggak.
Oke, ulang ya.
Ini .tsx, kita hapus.
Oke.
Bikinnya pake ini.
src
routes
.jsx
Yes.
.sx
Oke.
Oke.
Wow.
Dia gak detek
perubahan file.
Dia langsung inject.
Inject ya.
Nice.
Coba buka route-nya.
Coba.
Coba buka ya.
Eh, harus pake link ya?
Coba pake A aja ya.
Itu pake A kok itu?
Enggak.
Kan ada yang pake link.
Kalau
di dalam itu nanti SPA-nya gak jalan.
Ini?
Iya sih.
Ini gak pake SPA ya?
Coba aja.
Coba, coba.
Iya.
Tapi
internet-nya gak ya?
Cuman, gak SPA ya?
Tapi hapusnya kelihatan bukan itu.
Link.
Link ya?
Link.
Gak tahu bentar.
Eh, salah.
Link.
Link-nya sama ref.
Pake ref. Error.
Gimana kalau dicari
di Docs?
Bocan Docs.
Kebiasaan ya nyari-nyari sendiri.
Eh, mana dia? Ini.
Router.
Nah, search.
Control.K.
Link.
Control sama K.
Manual.
Gimana kalau search?
Control K.
Comment.
Nah, link.
Link.
Mana?
Itu link option.
Yang nomor 2.
Link option. Coba.
Oh gitu.
Link 2.
Ya, link itu.
2.
Mana 2?
Oh iya.
Tidak terbaca.
Tuh.
Ternyata di comment juga udah ada.
Disini juga ada kan?
Harusnya ya.
Property 2 is missing.
Kenapa kita gak baca disini ya?
Oke.
Karena tadi belum tau pake
turning link.
Baik.
Nah, coba tadi back.
Oke.
Ya, jadi SPA.
Berarti ini SPA ya?
Tep.
Oke.
Kok gak ini ya?
Masih keblok ya.
Oh, Webvital ini kali.
Lu pake ini kali ya? Apa namanya?
Mas Liza pake...
VPN?
Bukan.
Pake ad blocker gitu?
Enggak.
Nah, itu mungkin.
Itu gak ad blocker?
Itu content blocking.
Atas, atas, atas.
Block third party aja.
Block third party aja. Nah, dah.
Coba.
Nah.
Tadah.
Ya, wamsudah.
Keren.
Ya, wamsudah kelihatan FCP-nya apa.
Ya, gak ada apa-apa.
Ya, gak ada isinya, bang.
Pasti bagus.
Tapi kan
kalau sudah terintegrasi sama Webvital
wikini kan.
Ya, enak. Masaya tinggal
di depan mata.
Orang yang pake ini juga kan isinya bakal
diganti isinya dia sendiri kan.
Tapi kebantu banget.
Di depan mata.
Ini react router
tapi type safe. Ada
generate type. Ya.
Eh, emang react router gak ada ya?
Baru tahu sih.
React router
kayaknya lebih simple deh.
Kayak cuma bikin routing aja.
Karena dulu juga mereka mulainya
dari JavaScript sebelum
ada TypeScript ya.
Sebelum TypeScript seperti sekarang.
Pakai 2, pakai 2.
Ya, ya. Maaf ya.
Kita belum pernah
pakai. Ketanya LLM.
Oh, ada ya LLM
sd.txt. Ya, sayangnya belum ada.
Belum ada. Oh, belum ada.
Oh, belum ada.
Gue lagi menyoba kemarin. Karena
kemarin nih minggu lalu, kita kan nyoba LLM
sd.txt. Ya.
Sd.txt belum bikin.
Oke, menarik-menarik.
Dan, dan
tidak sulit ya. Karena udah
kayaknya udah umum ya.
Sudah terbiasa. Ya, kayak itu common
use case. Dan apa ya?
Sebenernya dia punya
keunggulan dari karena dia sama
mereka lama bikin di Ecosystem
React. Terus kayak orang
user developer tuh kayak
udah ketanam best practice-nya.
Nah, sekarang walaupun udah
framework agnostik. Maksudnya bisa
dipakai di macem-macem. Ya, kayak
sekarang udah familiar aja jadi.
Hmm.
Oh, sekarang React Router malah udah
kayak meta framework ya sekarang ya.
Malah ganti ya. Bukan.
Jadi sebenarnya agak ya
rancu sih. Jadi kalau 10-stacks
intinya mah 10-stacks start itu
yang
yang lebih SSR
friendly. Nah, cuma
kalau cuma pengen apa, ada routing-nya
aja. Jadi itu 10-stacks router
ini. Mereka sampai
nulis blog post. Buka deh
di private chat.
Jadi itu dia kayak
kata pengantarnya di dokumentasinya
10-stacks start.
Tuh kan, 10-stacks
start overview.
10-stacks start adalah bla-bla-bla
powered by React 10-stacks router.
Jadi emang ya kayak remix.
Kayak remix kan
powered by React router ya.
Nah, ini 10-stacks start
powered by 10-stacks router.
Jadi 10-stacks start
kayak
lebih dilengkapin aja.
Apa aja, oke.
Ada nested routing, ada
routing. Pokoknya semua routing lah ya.
Kemudian ada filebase
routing juga.
Kalau dynamic routing
nggak ada ya? Dynamic routing
kayak setelah
blog.
Harusnya ada lah ya. Masa nggak ada sih.
Iya.
Nah, itu.
Terus ke bawah. Itu kan tadi
yang ternyata 10-stacks router.
Nah, 10-stacks start itu
kayak lebih
lengkap aja based on
semua yang di 10-stacks router itu
plus to full SSR
streaming
for function.
Bisa SSR juga.
Bisa SSR, bisa
CSR.
Kalau kita perlu SSR,
kita mau pakai 10-stacks start, tapi kalau cuma
pure CSR
kayak single-touch cat gitu.
Itu tadi 10-stacks router udah cukup.
Iya, iya, iya.
Build from scratch.
Dia ngasih tahu
kalau mau
bikin, iya,
kalau mau set up project kosong
atau project yang sudah jalan mau
dirubah, ini ada caranya.
Daripada kalau yang...
Karena kalau pakai NPX
start gitu kan, kalau kayak...
Iya, itu harus dari awal, dari kosongan
pakai starter template.
Iya. Dan banyak konfigurasinya
sudah dihidang didalam
library-library itu.
Oh, dia
merekomendasikan Netlify.
Karena dia partnership
sudah, dia partnership.
Official
deployment partner.
Netlify kan sudah bisa server
back-end. Ya nggak sih?
Iya, bisa.
Function bukan?
Node ya? Node.js ya?
Kayaknya sudah node deh.
Karena sebenarnya dia cuma raper dari
AWS.
AWS.
AUS.
Mereka semua itu rapernya
AWS.
Iya.
Cuma
JavaScript developer friendly.
Kita nggak usah lihat
panel AWS yang bikin busnya.
Clerk.
Clerk.
Database.
Kayak Sentry pernah denger deh.
Sentry itu apa?
Sentry itu analytics.
Error analytics.
Oh iya, iya, iya.
Kayak New Relic gitu ya?
Kayak apa?
Kayak New Relic.
New Relic ya?
APM kan?
Ada browser,
browser-nya juga ada browser
site-nya.
Browser monitoring bahasanya.
Database-nya apa aja boleh
tapi
oh dia
kerjasamanya sama ini ya?
Satu-satu ya? Postgre.
Kalau untuk authentication, untuk deployment,
untuk database,
konvex ini apa ya?
Kayaknya database
as a service kali ya?
Back-end as a service ya?
Ya.
Apa sih maksudnya serverless
Postgre, serverless database
itu maksudnya gimana sih
serverless gitu.
Serverless itu pada dasarnya adalah
as a service pasti sebetulnya.
As a service.
Gampang ya kan?
Kalau serverless
function, gue ngerti nih
ceritanya. Karena sekali
misalnya kita info function,
jalanin, dia
selesai. Kita cuma bayar
per micro time yang
terpakai. Tapi kalau serverless
database itu
pasti
menangkep sih.
Itu gimik sih. Sebenarnya kalau dilihat
sekilas dari
deskripsinya sama
kemarin juga gue udah buka website-nya
satu-satu. Lihat depannya doang.
Hosted database as a
service.
Tapi bayarnya tetap
per storage atau
per month?
Harus kita cari
narasumber yang bisa kita
ajak ngobrol.
Serverless database.
Kayak hosted
database as a service.
Kalau serverless function
kita udah paham.
There is no such thing serverless.
Iya pasti.
Wireless earphone
juga dalamnya ada kabelnya pasti.
Cuma kita nggak lihat kabelnya aja.
Jangan salah. Serverless itu
bukan new server.
Tapi servernya sedikit.
Atau server yang kita maintain itu sedikit.
Sama bukan kita yang maintain
servernya.
Bukan kita yang ngobrol servernya. Kita bayar
untuk service-nya. Kita bayar untuk service
database-nya.
Orang banyak salah sangka, wah
ini serverless tapi kok masih ada server?
Ya namanya serverless, bukan no server kan.
Ya nggak bisa.
Ada yang free neon.
Ada yang free neon.
Ya neon ada freemiumnya ya. Benar-benar.
Kontongannya mungkin autoscaling
betul. Tapi RDS juga udah
autoscaling kan. Eh nggak ya.
RDS auto back up.
Tapi tidak autoscaling kan.
Bukan. RDS itu bisa
autoscale. Kan ada scaling
apa? Vertical atau horizontal.
Kalau RDS
itu bisa scaling
horizontal.
Kalau scaling verticalnya hanya
bisa one time.
Artinya kalau sudah naik nggak bisa turun.
Oh iya iya iya.
Anjay bahaya banget.
Ya iyalah.
Kalau storage-nya sudah dinaikin, nggak bisa
diturunkan lagi. Bisa data lost.
Data-nya abis, hilang loh.
Oh storage-nya ya?
Bukan
dekat machine run.
Semua-semuanya kan
kalau sekali naik kan memory naik,
CPU naik, data
storage-nya juga naik.
Storage-nya ikut di itu kan.
Bertambah.
Ada segudang
kompleksiti.
Mengkonfigur itu semua.
Pakainya serverless. Ya someone else yang
mengkonfigur itu semua.
Kan udah dikasih konfigurasinya kan.
Iya.
Termasuk juga
termasuk juga kartu credit kita.
Seperti diserahkan kepada orang lain.
Iya itu
mengerikan. Eh ada static
pre-renderingnya.
Nitoro.
Nitoro itu apa lagi?
Nanti kita mau bahas
ini.
Ini menarik
static pre-rendering
dulu. Ini isinya fit
dan nitro sama
ini menurutku
fenomena yang menarik sih.
Nitoro itu adalah
nitro itu
pokoknya
buat ngahendernya
target deployment.
Oh.
Ada blog post-nya dari
Tenstake, bentar. Si Tenor.
Ketauan robot nih.
Ketauan AI.
Mas Riza AI nih.
Kayak kita semua AI.
Saya
create web server.
Next Generation Server
Toolkit. Ini kayak Express bukan sih?
Pendatungnya Express bukan sih?
Noh ini belum ada sebelumnya.
Kayak menarik sih.
Deploy them wherever you prefer.
Posisinya dimana?
Jadi bikin server
memungkinkan suatu
library atau punya software JS
JavaScript based untuk
di deploy di macem-macem target.
Kayak misalnya aku lah di
Cloudware
Workers atau
di mana? Cloudware Pages tadi.
Cloudware Pages.
Di deploy nih.
Bisa dimana aja?
Framework untuk meng-handle
macem-macem target deployment.
Nah, yang udah
disediakan sama mereka adalah
zero-config provider.
Tapi kayak yang namanya framework.
Jadi kayak bisa di-customize. Jadi misalnya suatu hari
bakal ada provider jenis
lain yang
berbeda lagi.
Bakal bisa ada lagi.
GCP misalnya. Tadi nggak ada yang sebut GCP.
Nggak ada GCP.
Tak ada.
Tadi kita ngomongin AUS doang.
AUS sama AUS.
Azure Cloudware
Pages.
AUS.
AUS.
AUS.
Itu firebase app hosting kan udah keintegrate sama
Cloud.
Sekarang.
Itu udah zero-config.
Itu ada dua.
Ada HIO.
Firebase
app hosting.
Firebase.
Firebase ya.
Ini kayak
kalau di
Go itu ada namanya apa ya?
Numpah is namanya. Ada kayak Tulkit-tulkit juga
namanya.
Namanya tagline-nya juga mirip.
Coba ya.
Menarik sih dia
apa?
Gorilla sama nggak?
Gorilla.
Soalnya ini sama-sama Tulkit.
Nggak tahu nih sama apa nggak.
Soalnya dia ada
library-library yang lain juga.
Jadi ketengan juga.
Oh kalau Nitro.
Oh ini head-to-headnya Tenstake.
Kayaknya temen-temen yang pakai Go
yang lebih mengerti daripada kita
tolong dicerahkan.
Kalau Tenstake
kan front-end.
Kalau Nitro ini.
Sama Nitro.
Kayaknya beda deh.
Ini cuma buat
target deployment
untuk web server.
Server-nya juga ada.
Ini udah nggak apa-apa.
Ada QVStory.
Maksudnya semua yang
enforce dengan menjalankan photo server.
Mari kita simpan untuk
episode-episode berikutnya ya.
Ini enak nih dibahas Nitro.
Jadi intinya
adalah
kalau kita yang bikin
web-app itu kita kemungkinan
nggak langsung pakai Nitro-nya.
Nitro itu memfasilitasi pembuat
meta framework kayak Tenstake Star.
Terus kayak tadi yang dikomen
Nux.
Sebentar dulu juga Express
itu kan
SpellKit terus Nex
terus hampir semua meta framework
pakainya Express backend-nya kan.
Dulu ya nggak tahu sekarang.
Dulu ada pilihan tuh SpellKit.
Mau pakai Polka
atau pakai Express.
Apakah positioningnya
si Nitro itu seperti itu?
Ya nggak kayaknya deh.
Kalau dulu kan
semua by default semua
Node.js ya. Kita misalnya nggak punya
runtime lain mau pakai Express
mau pakai Polka. Perbedaannya
tipis karena semua
masih di bawah Node.js.
Nah sekarang kayak lebih macem-macem lagi
mungkin, dan sejujurnya
gue nggak terlalu ngerti intinya
perbedaan masing-masing runtime. Tapi maksudnya dengan
sekarang runtime-nya namun
macem-macem kan mungkin ada yang perlu
di adjust juga.
Mungkin dia jadi rapper atau jadi
itu ya. Jadi apa?
Jadi kayak polyfill
untuk berbagai
runtime kali ya.
Jadi kalau disini nggak ada, oh dia pakai
callback-nya kemana gitu ya.
Dia jadi middleware.
Yang
yang bikin Nux nggak usah
mikir beneran implementasi
detail-nya gimana buat ngejalanin
di
Deno, atau Node, atau
apapun, 10 stack start juga
kayak gitu. Jadi kayak
memfasilitasi macem-macem
meta framework.
Dan
Deno is block tuh, menarik tuh
si tanner-nya. Tadinya dia mau
pakai adapter. Maksudnya buat 10 stack start
dia yang manuali bikin adapter-nya
untuk Netlify, bikin
adapter buat Vercel,
dan lain-lain. Setiap kali Vercel
ada update
ya dia kayak harusnya soain.
Terus dia mikir, "Anjir, abis itu
gue nulis adapter, ya kalau cuma dua."
Terus dia liat,
dia ngebandingin remix. Jadi kayak
adapter-adapternya tuh kayak tipe-tipe gue udah 10
aja. Kayak makin lama makin banyak.
Dan itu kan dia harus memaintain
terus kan. Jadi kan nanti
pusing. Terus
dia nyari apa, pendekatan
lainnya.
Akhirnya malah pakai itu
10 stack start sama dengan
nitro, tambah fit, tambah
plus 10 stack roaster.
Iya, sama
berarti kayak express jaman dulu.
Kurang lebih ya.
Java Stack tool can to build
comfort state framework with your own opinion.
Oh, ada preset-presetnya.
Oke, oke.
Nah, presetnya yang tadi kita lihat itu, yang ada
Azure, AWS, firebase, uphosting,
dan lain-lain.
Berarti sudah kayak opinion
itu cara
nge-build aplikasi
back-end sama front-end
sekaligus ya 10 stack start itu ya?
Ya, 10 stack start ya.
Jadi dia
udah gabungin beberapa. Pertama
yang ini kan, router. Query masuk gak?
Enggak ya? Belum.
Maksudnya query ketengan kalau mau
pakai. Iya, kan dia hanya
untuk back-end-nya saja, membangun
back-end-nya. Terus front-end-nya
ya terserah lu sebenarnya mau
pakai query, 10 stack query
gue boleh aja gitu.
Tapi minimumnya
minimumnya 10 stack router.
Iya.
Untuk
transpiler-nya, bundler-nya
vt, nitro-nya back-end.
Kurang lebih gitu ya.
Dan sudah opinionated ya.
Sudah ada config-confignya dari dia.
Iya, sudah disiapkan.
Itu meta framework. Jadi yang meta
framework-nya adalah 10 stack start.
Framework di atas framework.
Framework di atas framework. Oke.
Saya harus
ini dulu.
Ternyata ada GDI web
perf meetup.
Sudah mulai.
Sudah mulai.
Boleh, boleh, ntar gue kasihin.
Oh iya, pernah ya.
Nah, malam ini
ya cuman silahkan coba satu-persatu
10 stack library
universe.
Mungkin besok-besok kalau ada
yang punya saran, pengen nyobain
10 stack start atau apalah yang
spesifik, ya kita bisa balik ke
product 10 stack
lagi. Kita langsung berdiskusi
di github discussion. Teman-teman
kita langsung kesana.
Nanti kita lanjut
lagi ngomongin
10 stack start kita bisa bahas
kemudian nitro juga kita bisa bahas.
Kita bahas 10 stack start
plus nitro aja sekali
biar nyambung.
Oke, boleh.
Boleh, siap.
Kita next-nya bahas bedah framework
itu ya.
Oke, untuk malam ini sekian dulu. Terima kasih banyak
semuanya yang sudah hadir.
Terima kasih juga buat yang
sudah hadir di link-in
malam hari ini. Nanti kemarin
kita akan coba juga
boleh kita banding-bandingin
aja yang mana yang lebih bagus.
Ini komennya.
Produk kecel, iya
produk kecel lagi mau di-boycott kan.
Ya, bagus-bagus.
Nanti bisa kita undang jeselin aja yuk.
Mumpung dia sudah.
Ya udah jadinya lagi kan berarti?
Belum, tapi kan dia tetap
ngerti anggular.
Ya, kali kalau udah
bukan gugular, jadinya lagi.
Anggular tuh, ada
yang minta anggular ya.
Jarang nih kayaknya
ngelihat lifetime pak.
Padahal bagus lah sekarang.
Bagus.
Oke, cukup ya.
Selamat malam.
Sampai jumpa. Bye bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
1 Feb 2023
Ngobrolin Storage
Melanjutkan episode cookie minggu sebelumnya, pembahasan bergeser ke tempat penyimpanan lain di browser — bukan basis da...
1 Apr 2026
Project Management Tools
Episode ini membahas tools project management, mulai dari yang klasik sampai yang lahir karena era coding agent. Diskusi...
26 Jul 2023
Ngobrolin Web bersama Thomas Steiner ep43
Episode ini kedatangan Thomas Steiner, Developer Relations Engineer di tim Chrome yang sudah 15 tahun di Google, dan obr...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .