Ngobrolin RedwoodJS
Ringkasan Episode
Bantu KoreksiRedwood dibahas sebagai contoh framework yang berani memilih ceruk yang sangat sempit. Kalau kebanyakan perkakas berusaha netral dan menyerahkan banyak keputusan pada kita, Redwood justru menyediakan segalanya sekaligus dalam satu paket: React untuk antarmuka, GraphQL untuk lapisan data, Prisma sebagai ORM, TypeScript, Jest untuk pengujian, sampai Storybook yang terkenal jelimet kalau disiapkan sendiri. Perbandingannya dengan Next.js dipakai untuk menunjukkan bedanya — Next.js pun disebut belum selengkap ini karena belum membawa ORM. Basis datanya SQLite secara bawaan untuk tutorial, dengan Postgres sebagai pilihan lain, dan ada pembuat kode otomatis untuk bagian-bagian yang berulang. Sasarannya jelas dan diakui terbatas: orang yang membangun produk sendiri atau tim yang isinya satu sampai tiga orang, dan hackathon 24 jam di mana waktu memasang Jest lalu menambal Babel dan TS config adalah waktu yang terbuang. Konsekuensinya juga jujur disebut — ia dirancang untuk proyek yang benar-benar dimulai dari nol, padahal di tempat kerja kita jarang benar-benar memulai dari nol. Pengalaman pahit dengan Gatsby dibawa sebagai pembanding: salah pilih di awal berujung menulis ulang. Halangan lain yang dibahas lebih membumi: seberapa banyak orang di sekitar kita yang mengenalnya. Di tempat kerja sering ada kesepakatan tak tertulis untuk tidak memakai perkakas yang tidak umum, karena pekerjaannya bisa berpindah tangan ke pihak lain. Karena itu jalannya biasanya panjang — mulai dari proyek pribadi, dikuasai dulu, baru diusulkan ke kantor ketika ada proyek baru yang cocok. Menariknya, di balik framework ini ada pula program lomba berhadiah dan pendanaan pribadi untuk produk bermisi lingkungan. Ditutup dengan pengamatan yang berguna: menonton rekaman presentasi produk-produk itu bukan untuk melihat produknya, melainkan belajar menyampaikan sesuatu dalam tiga sampai lima menit.
Poin-poin Utama
- •Redwood memilih ceruk sempit dengan membundel React, GraphQL, Prisma, TypeScript, Jest dan Storybook sekaligus — termasuk Storybook yang terkenal jelimet kalau dipasang sendiri
- •Pembandingnya Next.js, yang disebut belum selengkap ini karena belum membawa ORM; basis data bawaannya SQLite, dengan Postgres sebagai pilihan lain
- •Sasarannya orang yang membangun produk sendiri, tim satu sampai tiga orang, dan hackathon 24 jam — waktu memasang Jest lalu menambal Babel dan TS config adalah waktu terbuang
- •Konsekuensinya jujur: ia dirancang untuk proyek yang dimulai dari nol, padahal di tempat kerja kita jarang benar-benar memulai dari nol
- •Pengalaman pahit dengan Gatsby jadi pembanding — salah pilih perkakas di awal berujung menulis ulang
- •Halangan lain adalah ketidakumumannya: banyak tempat kerja punya kesepakatan tak tertulis memakai perkakas yang lazim, karena pekerjaannya bisa berpindah tangan
- •Di balik Redwood ada program lomba berhadiah dan pendanaan untuk produk bermisi lingkungan; menonton rekaman presentasinya berguna untuk belajar menyampaikan sesuatu dalam tiga sampai lima menit
Halo-halo-halo selamat malam semuanya selamat berjumpa lagi bersama ngobrolin gue malam hari ini.
Gimana? Nggak sesuai clue seperti biasa.
Biasanya ada yang itu ada yang ikutan halo-halo juga kan terus tiba-tiba dia nya belum muncul nih.
Terima kuat-kuatnya lagi kurang lengkap.
Iya biasa bertiga sekarang masih berdua mungkin sebentar lagi nyusul.
Mungkin nanti muncul.
Iya selamat datang di acara yang selalu ditunggu-tunggu setiap hari selasam malam jam 8.
Yaitu ngobrolin. Ngobrolin web.
Malam hari ini kita mau ngomongin apa ya.
Emang yakin ditunggu emang nggak ada yang tunggu.
Oh ada dong tuh ada komennya tuh.
Oh iya.
Itu daily spirit halo ada Triad Moko ada Maulana kita tinggal menunggu satu orang lagi.
Dan temen-temen yang lain ya yang dikomentar.
Sebentar saya mesej dulu.
Oke ada Bahyu juga halo semuanya.
Nah malam hari ini kita mau ngobrolin salah satu framework yang minggu lalu sempat dibocorin sama Eka ternyata salah satu framework.
Ini topik impulsif ya. Ini topik ini episode paling impulsif yang pernah ada.
Kenapa? Kenapa?
Ya itu kan ide nya gara-gara kita lagi bahas apa yang lain kan minggu lalu.
Yang bahas reput terus gue yang kaya deh rel reput padahal bukan.
Oh gara-gara itu ada yang komen lagi nyobain reput kan.
Iya ada yang komen.
Iya ada yang komen.
Cuma sebenarnya ini sebenarnya bukan tentang itu.
Iya.
Gak tau hubungannya ada.
Ayo siapa yang malam ini hadir boleh ngaku.
Terima kasih loh ide nya.
Halo Audi.
Lihat transkrip lengkap (2155 segmen lagi)
Nah terus tadi siang yaudah kita yang kaya ngobrolin reput aja.
Terus karena kayaknya seru gitu ya.
Saya udah ngikutin reput udah cukup lama sebenarnya tapi mau nyoba belum ada kesempatan.
Dan ada keunikan sendirian si reput ini yang menyebabkan kita agak susah mengadaptasi framework ini ke pekerjaan.
Karena biasanya pekerjaan kan udah ada.
Yang pertama biasanya pekerjaannya melanjutkan.
Jadi udah ada framework sebelumnya.
Terus yang kedua.
Apa itu namanya ada istilahnya gak sih kalau yang project apa kita mulai dari awal Greenfield ya.
Eh.
Green itu merek susu.
Eh bentar ada istilahnya mirip-mirip kayak gitu.
Iya iya iya.
Green apa ya?
Green apa Green.
Green Spring.
Eh Greenfield betul.
Oh bener.
Kenapa sih?
Bener tuh coba buka ini buka ini.
Kayaknya ada yang aneh.
Kerasanya aneh ya gak saya aneh.
Cuma ada green-greennya bener kan.
Iya greennya bener.
Coba coba.
Lihat belakangnya itu.
Greenfield project adalah project yang dimulai dari awal ya.
Itu kan.
Oh istilahnya dari real estate.
Oh ngerti ngerti.
Mulai baru ya.
Mulai dari awal gitu ya.
Bukan melanjutkan.
Berarti maksudnya beneran masih tanah kosong, masih kebun lah.
Masih kebun.
Baru di bikin jadi jalan, dikasih pundasi jadi rumah.
Iya.
Nah hubungannya sama Redwood tadi yaitu sulit buat.
Apa ini didesain buat Greenfield project ya.
Iya.
Apa?
Sementara di tempat kerja kita seberapa sering sih kita beneran apa?
Harus bikin sesuatu dari awal.
Itu yang pertama.
Terus kedua halangan lainnya.
Ya jujur mau kita ini kita yang bikin acara ini dan yang nonton acara ini kan.
Apa?
Emang aktif banget memiliki trend terbaru lah ibaratnya di dunia web ya.
Tapi kalau ditanya ke orang di luaran random lah terutama di Indonesia.
Berapa banyak yang tahu Redwood sih.
Betul.
Nah jadi maksudnya kalau misalnya.
Kecuali apa?
Kecuali kalau teman kita juga.
Iya.
Ya selingkungan.
Kebetulan.
Apa ya?
Suka juga sama Redwood atau pengambil keputusannya misalkan VP Engineering atau CTO.
Itu memutuskan ayo kita pakai Redwood.
Nah itu mungkin bisa.
Tapi kalau dari kitanya sendiri ya belum tentu.
Sama kayak kalau misalnya gue kerja di tempat yang tergolong kecil.
Anggota timnya sedikit.
Dan ada kondisi bahwa kalau misalnya bikin suatu project.
Ada kemungkinan suatu saat mungkin harus bisa.
Maksudnya harus cukup versatile untuk di hand over ke pihak eksternal lah.
Freelancer atau siapa lah.
Atau kadang misalnya ada project yang berpartner.
Ada mitra, mitra lain yang mereka juga punya programmer in house.
Itu harus punya cukup versatile kayak gitu.
Jadi kayak emang ada kesepakatan kalau buat kerjaan jangan aneh-aneh.
Sudah create-create.
Yang umum ya.
Next.js.
Atau bahkan ya sebisa mungkin kalau cuma kalau bisa client side malah rata-rata pada nggak apa-apa sih.
Mau literally index HTML terus ngetik JavaScript randila.
Malah kalau emang cuma satu dua halaman.
Misalnya cuma buat capture atau buat apa.
Jadi kayak ada kesepakatan bersama nggak boleh pakai stack yang aneh-aneh.
Nggak tahu mungkin teman-teman punya constraint kayak gitu juga atau nggak.
Cuma mungkin itu cukup umum juga ya.
Jarang sih ada framework baru terus di adaptasi langsung masuk ke kantor ya.
Biasanya itu kita mulainya dari project pribadi.
Bikin blog gitu kan.
Atau bikin produk iseng-iseng gitu kan.
Atau produk serius juga bisa.
Begitu nanti di projectnya udah kita udah lumayan familiar.
Mungkin kita bisa introduce ke teman-teman kantor.
Ya kita propose aja.
Saya ketemu nih misalkan framework ini bisa bikin kita lebih produktif 10x misalkan.
Iming-imingnya 10x developer.
Dibuktikan dengan apa gitu kan.
Bisa aja kan pengambil keputusan di kantor yang berusaha dengan teknologi.
Coba bikin, kebetulan ada project baru yang mulai dari awal.
Silakan bikin pakai Redwood misalkan atau framework lain.
Ya kalau berhasil ya di adaptasi.
Memang agak panjang prosesnya, nggak bisa langsung kan.
Tapi dimulai dari kita yang tertarik belajar, yang ngulik gitu kan.
Yang coba-coba.
Nah, jadi apa itu Redwood.js?
Redwood.js adalah meta framework.
Kita biasanya nyebutnya meta framework ya.
Framework di atas framework.
Padahal React nggak mau disebut framework.
React maunya menganggap mereka UI library.
Udah terserah lah.
Intinya si Redwood ini framework yang menggunakan teknologi-teknologi itu tuh.
Zoom in, zoom in.
Oh zoom in.
Biar besar.
Nah, ada React, ada GraphQL, Prisma TypeScript.
Lengkap kan, jazz, storybook.
Jadi mungkin pembeda mereka dari framework lainnya sejenis.
Itu beneran udah lengkap ya.
Kayak Next.js pun nggak selengkap ini kan.
Nggak selengkap ini, betul.
Belum ada ORM, iya kan.
Untuk apa?
Service, api backend. Si Next.js kan nggak punya opini sama sekali kan.
Terserah kita, urusan kita.
Oke, testing.
Untuk UI workbench lah.
Kayak design system gitu.
Ya, Next.js nggak urusin.
Sementara kalau Redwood tuh kayak semua udah dicemplungin.
Nah, sebenernya yang menarik itu tuh scroll ke atas deh.
Paling atas.
Nah.
Fokus on building your startup.
Tadi mungkin pas kita ngobrolin di awal tuh kayak ada yang miss dikit.
Karena kita mikirnya.
Misalnya cuma dari sudut pandang kita kerja di...
Maksudnya di kantor atau tempat kerja lah pokoknya.
Cuma ini tuh keliatannya emang niche-nya tuh orang yang...
Misalnya kita individu punya ide bikin startup.
Yang masih beneran tahap awal banget.
Yang belum ada birokrasi.
Maksudnya belum.
Kalaupun ada tim ya, misalnya mungkin cuma 1-2 orang lah.
Solo atau ada satu temen kita.
Nah, itu kan gedaknya lebih bebas ya.
Oh, temen kita yang ini bukan?
Oh ya.
Sorry.
Saya ketahan di jalan.
Tadi pulang macet banget.
Tidak, pulang macet banget.
Keren ketahan kerjaan.
Terus buru-buru pulang.
Pantes.
Kan kalau nyetir, nggak boleh.
Cetan kan.
Ya, jadi santai rumah cepat-cepetan.
Jangan.
Maaf, maaf, maaf.
Santai, santai.
Kita udah sempat ngomong ya.
Salah satu target marketnya si Redwood adalah...
Orang-orang yang...
Ya, itu side project tadi ya.
Side project, project kita sendiri.
Kita nggak minta approval boss kita atau siapa ya.
Kita emang pengen ini.
Kita pengen bikin usaha, iseng-iseng, siapa tahu bisa berhasil.
Side project, project-projek iseng, hobi, atau mau coba-coba.
Atau yang lebih serius kan.
Kayak indy-hacker ya.
Orang, individu satu orang atau dua.
Ya, pokoknya tim kecil lah ya.
Dari satu sampai tiga orang mungkin.
Bikin satu produk yang spesifik ke niche tertentu.
Apakah itu software as a service atau yang lain gitu kan.
Bisa pakai salah satu target marketnya si Redwood ini.
Karena dia udah lengkap banget.
Untuk hackathon.
Untuk hackathon mungkin jadi kayak satu malam.
Jadi cuma kerjain 24 jam jadi sesuatu gitu.
Jadi kita nggak perlu mikir.
Harus bikin A, B, C, T segala macam.
Biasa pakai udah jazz, install jazz.
Jazznya nggak bisa baca type script, install babel.
Terus TS confignya lain.
Bikin TS config baru.
Itu tuh paling meraka banget.
Di sini udah ada ORM-nya.
Connect ke GraphQL juga.
Semuanya udah di set up.
Bahkan sampai storybook yang terkenal dengan set up-nya yang jelimet.
Susah, susah.
Susah ya, udah ngalamin kan.
Jadi sebenernya tinggal, berarti kalau kayak hackathon.
Bikin idlenya.
Fokus bikin produk.
Langsung aja fokus bikin bisnis modelnya aja.
Bises proses.
Bikin prosesnya, terus bikin data modelnya.
Terus kalau yang seneng round-end ya bikin aja dulu UI-nya.
Nggak usah mikir data dulu kan.
Bikin aja di storybook.
Pastiin semua aksesibel, blablabla.
Terus abis itu yang pure function-nya bikin satu persatu.
Sambil di tes.
Abis itu apa, connectin data.
Abis itu sambung-sambungin.
Itu tutorial-nya.
Video, kalau temen-temen nanti abis nonton ini, acara ini.
Kalau tertarik ya, buka tutorial-nya.
Ada videonya YouTube.
Dan videonya ini adalah salah satu auternya.
Yang ikutan bikin ya salah satu timnya.
Dan dia ini lucu.
Jadi videonya... / Oh mereka tiap bikin video itu lucu semua sih.
Iya lucu-lucu.
Jadi ada kayak dia pakai apa ini ceritanya bajak laut.
Bukan bajak laut ya, pelaut lah gitu ya.
Bukan detektif, eh enggak ya.
Orang kaya. / Orang kaya. / Bisa kayak bangsawan-bangsawan gitu.
Bangsawan Inggris jam dulu. / Iya pokoknya lucu lah gitu.
Maksudnya ada temanya dan ya enggak standar screencast lah gitu ya.
Nggak standar screencast.
Jadi menarik sekali ini.
Nah kelihatannya mereka juga...
Maksudnya tim Redwood ini punya pengalaman yang lumayan banyak di dunia start-up kali ya.
Kan si salah satu pendirinya tuh yang bikin GitHub tuh.
Ya. / Apa?
Ya terus dijual.
Ya kan maksudnya dia udah sukses.
Jadi mungkin dari marketing-nya pun mereka kepikiran.
Maksudnya mikir mempresentasikan produk mereka kayak gimana.
Iya, salah satu founder-nya yang bikin GitHub.
Ya salah satu founder GitHub.
Terus abis itu dia exit.
Dia bikin ini.
Si Redwood ini. / Ini sebenarnya project hobby.
Makanya berurus. / Iya.
Udah gitu kan dia exit tuh.
Duitnya banyak kan.
Dia jadi angel investor gitu.
Nih, jadi ada program yang mereka buat secara berkala namanya build competition.
Kalau dulu kalau gak salah namanya incubator.
Jadi kalau temen-temen punya ide start-up atau ide produk lah.
Jangan startup ya terlalu berat ya.
Ide produk mau bikin-bikin sesuatu gitu kan.
Bisa ikut.
Nanti ada hadiah. / Yang tahun ini udah tutup tapinya.
Ya cuma maksudnya tahun depan bakal ada lagi.
Jadi bisa registrasi ini online kok. Registrasi terus ada heketonnya nih.
Dari jam berapa sampai jam berapa.
Tanggal berapa sampai tanggal berapa.
Terus submit.
Abis itu dia presentasikan.
Kalau berhasil bisa dapat uang tuh.
5 juta dolar, 2 juta dolar, 1 juta dolar.
5 ribu.
5 ribu dolar.
5 ribu. / Maaf.
5 ribu lumayan itu.
5 ribu gede.
70 juta ya.
Tapi harus pakai Redwood pastinya.
Biasanya boleh 3 orang.
Sekarang sampai 3 orang.
Ini bener-bener heketon beneran.
Jadi kalau ada temen-temen yang tertarik bisa ikutan.
Ada beberapa portfolio mereka disini tuh.
Apa sih contohnya yang cukup-cukup?
Belum dikenal sih, belum dikenal.
Tapi ini apa tapi?
Ini kan namanya Startup.
Itu tape itu tuh screen.
Kayak screenshot, screencast.
Kirain itu testing library namanya tape juga ada.
Hah, ada? / Ada, tape CS.
Nah sama ini kayaknya si mas Tom itu.
Dia tuh concern sama lingkungan.
Dia tuh punya topik-topik environment.
Jadi kayaknya di luar yang tadi tuh heketon atau apalah.
Inkubator tahunan.
Jadi dia punya duit.
Duitnya dia, literally duitnya dia.
Dia mau invest ke sekian startup atau produk.
Yang emang punya misi membantu masalah lingkungan hidup.
Kayak misalnya apalah.
Kayak sampah buat daur gulang atau apa.
Yang emang punya ada potensi punya real world impact.
Tapi kan harusnya sebagai yang bikin aplikasi ini,
ya kalau belum banyak duitnya kan belum bisa berbuat banyak ya.
Nah sama kalau dia anggap potensi yang lama dia,
itu kayaknya secara rutin lah setiap tahun atau setiap portal atau setiap apa.
Dia emang bagi-bagi duit aja.
Ke produk yang dia anggap memenuhi kriteria.
Dan ya pakai redwood juga.
Ini mungkin temen-temen mikir, wah ini gak ada yang dikenal.
Ini kan yang tadi timnya satu sampai tiga orang.
Indie hacker gitu ya.
Ya bikin proyek-proyek yang sederhana.
Yang mau mecahkan masalah tertentu gak buat semua orang.
Dan bukan startup yang model unicorn gitu-gitu.
Belum nyampe sih kesana.
Yang snapchat lucu deh, bukan deh.
Maksudnya ide apa, ide nya simpel.
Simpel banget tapi ya bisa dibikin produk.
Buat mempopulate isi data, isi database.
Oh ini kayak veker.js bukan?
Iya tapi kalau veker.js kan masih objek doang.
Nah kalau ini.
Udah langsung ya ada dam datanya ya.
Lucu banget lagi ilustrasinya.
Kok ini ya, bisa ya mereka mikir-mikir kayak gini ya.
Kok kepikiran gitu ya, dijadiin produk ya.
Apa aja dijadiin produk ya?
Luar biasa ya.
Lucu-lucu ya.
Use case nya gimana? Coba lihat.
Coba use case nya.
Itu tadi scroll ke bawah coba.
Oh itu ada link nya ya?
Use cases di atas.
Yang paling atas.
Yang paling atas, use case.
Oh yes, ini.
Oh itu.
Ya mau sukses atau engga, engga tau.
Yang penting usahakan dulu.
Tapi ini kan bikin website nya ini doang kan ya.
Kalau tools nya kayaknya bukan pake redwood deh.
Kan tadi ada login sama sign up.
Mungkin buat dashboard.
Ya dashboard kali ya.
Gatau belum coba sih.
Pricing.
0 dolar, oh abis itu kan ini.
Nah kalau temen-temen penasaran gitu ya.
Kayak gimana sih orang-orang demo nya.
Ini ada di channel youtube nya itu.
Ada demo day nya.
Jadi kita bisa lihat.
Produk yang dibikin pakai redwood.
Kemudian dipresentasikan.
Kalau lihat video gini tuh.
Gue sering gitu juga sih.
Kayak malah engga merhatiin isi produk nya.
Merhatiin cara mereka presentasi apa aja.
Maksudnya dengan waktu, itu kan cuma 5 menit tuh.
Atau cuma beberapa menit lah.
Maksudnya waktunya kan terbatas ya.
Terbatas.
Malah ada yang cuma 3 menitan.
Kita kan apa ya, engga semua.
Cuma rata-rata developer kan sulit komunikasi dengan baik.
Buat orang diluar circle kita.
Coba kita present product mungkin semua ditunjukin.
Gimana caranya di ringkas dalam 3-5 menit biar bisa nampilin apa yang penting.
Nah itu tuh seru banget sih.
Seru ngeliat contoh gimana sih developer lain ngelakuin hal itu.
Nah ini ada snaplet nih.
Nanti nonton aja.
Kalau penasaran bentuknya kayak gimana.
Pasti didemoin kan cara pakai nya kan.
Oke, sekarang kita balik lagi kesini ya.
Nah, sekarang kita udah pitch deck nih.
Udah kasih tau ke temen-temen yang coba pake apa.
Kita kayak jualan ya.
Iya makanya udah kayak devrelnya redwood.
Padahal kita belum ada yang pernah pake redwood di product run.
Gue juga kemarin sembarang ngomong favorit.
Favorit tuh maksudnya dalam arti ngeliatin dari jauh lah.
Cuma bisa memandang.
Gak bisa pakai beneran di production kan.
Lihatin dari jauh kan makin lama makin penasaran.
Gak sempet banget.
Ya episode ini disponsori oleh Redwood Jazz.
Semoga beneran tercapai.
Oke, nah sekarang langsung aja kalau gitu.
Coba demoin deh.
Coba deh tutorialnya aja.
Tutorialnya kan seru tuh.
Tutorialnya ini salah satu tutorial yang sangat bagus.
Menarik sih.
Menarik.
Intuitif.
Dan benar-benar well crafted ya istilahnya apa ya.
Benar-benar dipikirin.
Ya kayak dipikirin banget lah.
Ada tujuannya, iya.
Karena ada beberapa yang pernah.
Pasusannya.
Kenapa?
Pasusannya Redwood pake Redwood Jazz juga kayaknya.
Ya iyalah.
Ternyata dibuka ada apa underscore underscore next.
Oh ini, ini apa namanya?
Dokumentasinya ya.
Dokumentasinya jangan-jangan pakai dokusaurus.
Itu apa dokusaurus yang kita bahas kemarin, enggak?
Kita bisa lihat enggak, ini dokusaurus bener.
Oh iya dokusaurus.
Oh iya kan underscore underscore dokusaurus.
Kalau dokumentasi sih udah umum sih ya.
Eh kapan-kapan kita bahas itu yuk, documentation sites.
Boleh.
Live code, live code.
Ayo live code.
Siapa yang live code?
Eka.
Ya gue deh.
Karena penasaran daripada ngeliatin dari jauh doang.
Iya.
Baik.
Tutorial ini menarik sekali karena ada chapter-chapternya kayak buku.
Dan di sini kita belajar bikin standar lah ya, bikin blog ya.
Tapi bener-bener dipikirin gitu.
Mulai dari awal sampai CSS-nya udah disiapin.
Kalau misalkan kita nggak mau pakai CSS-nya dia, kita bisa bikin sendiri.
Tapi dari dia udah disiapin jadi hasilnya bagus.
Dan apa ya, ini kan si Redwood ini kan sebetulnya overwhelming banget.
Kalau apa, ya maksudnya ini kan meta framework yang beneran segala ada ya.
Apa?
Dari testing, storybook segala macem.
Coba kalau misalnya mereka mempresentasiinnya kurang baik.
Pasti orang kayak pusing duluan kan.
Anjir, ribet banget.
Apaan sih nih, males.
Kan pasti kayak gitu tuh.
Tapi mereka apa?
Ya menurut gue ini salah satu contoh yang bagus ya.
Dalam hal dokumentasi dan ini kayaknya sih kayak udah diluar scope.
Bahkan diluar scope kode.
Kalau kode kan ya udah sebetulnya kan ini semua open source.
Kasar-kasarannya mah, gampangnya maksudnya.
Ya lu baca aja source code-nya dikira-kira sendiri.
Atau lihat contoh website yang udah pakai Redwood.
Cuma kan ini mengkomunikasikan gimana caranya pakai dengan cara yang se-friendly mungkin.
Nah itu tuh kayak harus punya insight.
Punya cara mikir yang lebih luas dari sekadar teknis kode.
Betul.
Ya mungkin karena ada latar belakang dari apa?
Foundernya yang sudah bikin cara yang berhasil.
Jadi mereka sangat memikirkan ini ya.
Apa?
Keberlangsungan si produk ini mereka jualannya bukan cuma fitur dan performance.
Tapi lebih ke produk secara umumnya.
Ini loh kayak hal sekecil ini situs dokumentasinya kan besar ya banyak.
Karena maksudnya fiturnya banyak ya otomatis dokumentasinya banyak.
Organized, how these dogs are organized aja dijelasin.
Kayak oh ada ini, ada ini, ada ini.
Terus bahkan urutannya juga nggak sembarangan loh.
Kayak se-oh.
Kirain ya cuma ya udah enak aja dilihatnya urutannya gitu.
Ternyata enggak, urutannya pun udah dipikirin.
Pertama kita ngikutin tutorial.
Habis itu kita mungkin liat kalau tutorial jelas ya.
Tadi ada ini di format pakai bab chapter keskripsi deh.
Nah terus reference berdasarkan topic atau tema.
Kita pengen tahu accessibility bisa langsung klik.
Itu urut sesuai object loh itu reference-nya.
Biar gampang kalau non-scrolling.
Terus kalau how to isinya apa nih?
How to isinya adalah oh kalau how to apa?
Common use case kali ya, common user story.
Developer story bukan user story.
Well we expect you.
Developer experience-nya bagus nih framework-nya.
Nah kalau tutorial harus diikuti penuh.
Maksudnya ekspektasinya kita ngikutin penuh.
Tapi kalau misalnya reference dan how to ya nggak bisa dibaca satu persatu juga.
Cuma misalnya tiba-tiba kita perlu, kita pengen tahu tentang router ya buka aja router.
Dan seterusnya.
Code sandbox apa sih yang bisa code container yang langsung di browser?
Nah kita quick start aja nih 18 year.
Ada nggak ya?
Coba aja pakai stack bridge atau code sandbox bisa nggak sih ada container-nya?
Ada kayaknya.
Bentar caranya gimana nih?
Biar bisa itu ya, moding bareng gitu ya?
Bisa rame-rame.
Ada nggak stack bridge? Kayaknya nggak ada deh.
Stack bridge, redwood.
Belum ada, adanya quick wassar, webcontainer, remix.
Ah udah, hear dulu aja.
Coba, bentar ngobrolin redwood.
Ada pakai warp ya?
Iya dong teamwork.
Yoi.
Eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh.
Salah lagi namanya.
Redwood, time script.
Iya.
Nah, ini tuh sebenernya redwood yang menarik itu command line-nya lengkap.
Oke.
Lu kayaknya pernah punya contekannya tapi lupa di mana.
Do you wanna? No.
Apa nih? Dia nyuruh apa?
Do you want to run your install? Yes.
Di Trepo.
Dipost aja ke git, nanti buka di Codespace.
Bisa bareng-bareng nggak bisa ya? Nggak bisa, nggak bisa.
Nggak bisa, bisa kolaborasi.
Eh, bisa nggak sih? Invite ya?
Bisa.
Lama.
Itu aja, apa, di VS Code, di share, apa, share apa namanya, live share ya.
Oh iya, itunya live share ya.
Nah, mending gitu.
Biar berat.
Laptopnya.
Cuma streaming.
Cuma streaming lagi.
Gobrolin, redwood.
Gedein dong, gedein dong, di zoom, di zoom.
Terminalnya.
Terminal cuma sebentar ya, nggak apa-apa, nggak usah, nggak usah.
Nggak apa-apa, biar kelihatan juga, nanti kan ada domen-domennya.
Banyak soalnya.
Banyak, art, artik union, internet gue jelek.
Hei, lupa.
Hei, awas ya, aku close.
Postgres ya?
Databis, defaultnya postgres ya?
Bisa pakai SQLite, kayaknya kalau buat tutorial, SQLite deh kalau nggak salah.
Tapi settingnya dimana?
Kirain langsung dari CLI nggak ya?
Kira-kira ada deh, somewhere, nanti kita lihat.
Nah, iya ampun, ini beneran keskripsi, coba ada kata pengantarnya.
Oh iya, for what?
Ini tutorialnya ada kata pengantar.
In this tutorial, we're gonna build a block engine.
Cuma, maksudnya sampai ada disclaimer-nya gitu, walaupun tutorialnya buat bikin block.
Tapi dalam penyataannya ya, Redwood bukan untuk kurang cocok untuk bikin block.
Block, kurang cocok ya? Kenapa?
Terlalu sederhana.
Iya kan, block articles can be stored in a CMS.
Ya udah, nggak usah serumit, nggak usah can roll authentication.
Bikin block, ngapain pakai GraphQL segala ya?
Iya, makanya.
Saya pernah mengalami gara-gara Gatsby.
Gatsby.
Capeh-capeh.
Mau ngeditnya, mau ubah-ubahnya, ribet, ya.
Jadi deh, balik lagi, rewrite lagi.
Tapi jadi belajar sih.
Oh iya, pasti.
Ya, kenapa sih?
Makanya pakai PNPM.
Loh, disuruhnya Yarn, kita nge-team.
Oh Yarn ya, dia tim Yarn ya.
Makanya pakai Boon.
Oh iya.
Nih, call-outs.
You'll find some call-outs throughout the text to draw your attention.
Ada tiga macem tip, caution, danger.
Ada info.
Ya, oke lanjut.
Ya ampun.
Masih lagi.
Masa selama ini, nggak mungkin deh.
Hello Brolin Redwood.
Yarn install.
Coba sambil kita lihat-lihat ya, isinya apa.
Blah-blah, ini yang penting.
ENV, standar lah ya.
This file should not be checked.
NVMRC apa, NVMRC?
Versi note yang dibutuhkan?
Apa?
Oh nggak, bukan.
LTS.
Oh iya, yang LTS doang ya.
Ada konfigurasinya, GraphQL.
Dia udah pakai DB.
Data base-nya gimana nih?
SQLite local kayaknya tadi, ada deh.
SQLite, ya SQLite local tuh.
SQLite.
SQLite.
Default-nya itu ya, SQLite ya berarti ya.
Itu error?
Running install.
Tadi kenapa error?
Nggak bisa pakai singkatan "i" ya kalau yarn kayaknya.
Oh iya ya.
Tapi maksudnya pesan error-nya nggak gitu sih.
Tapi begitu di jalanin yarn install muncul ini.
Tadi kan nggak muncul ini kan?
Nggak.
Ya, suka aneh.
Harusnya kan pesan error-nya, ini bukan npm.
Jangan singkat-singkat.
Yang minimal kan apa command not found atau apa?
Ya command not found ya.
Coba lihat package toh Jason-nya apa aja sih.
Packagenya apa aja sih?
Dependency-nya.
Package Jason.
Dibungkus, udah dibungkus kayaknya.
Iya, ini, ya ini.
Dia punya IS lane sendiri.
Prisma itu apa sih?
Oh Prisma itu.
ORM.
ORM database yang itu banget lah, JavaScript banget.
TypeScript banget.
Yang TypeScript banget.
Ah, nggak suka.
Nggak suka.
Nggak suka apa?
Nggak suka single code.
Oh, single code.
Team double code.
Welcome to my tool.
Kan dia opinionated.
Opinionated.
Iya kan opinionated.
Opini boleh write sesuai ke selera.
Yang TypeScript help.
Prisma in the database.
TypeScript wouldn't be a full-stack framework without a database.
Oh, dia pakai Fastify ya.
Mana sih?
Nggak, lagi ngecek NPM.
Ini ada config-graphql, udah dikasih.
Config.js, udah deh.
Kalau nggak perlu ngeliatin beginian, bagus lah, syukurlah.
Ya.
Apalagi struktur folder-nya gimana?
Oh, nanti ada penulisannya ya.
Hadusnya nanti ya.
Ini tommelnya, kok ada tommel lagi sih?
Ada yaml, ada tommel, banyak banget.
Nah, tommel itu bahasa bikinannya sih, mas Tom itu juga yang bikin.
Makanya namanya tommel.
Iya.
Maksudnya ada pakai yaml, itu LC yaml, ada.
Kenapa nggak tommel semua gitu ya?
Ya, gitu loh maksudnya.
Ya, gimana lagi?
Obvious Minimal Injits.
Karena dia yang bikin ini, apa config-nya nggak pakai yaml?
Wah, ini dia sangat idealisme sekali ya.
Lagi bikin apa sih ini, Darwin NPL.
Jangan-jangan itunya, apa namanya, SAS.
Yarm-nya SAS.
SAS?
Iya itu.
Lagi ngobil, ya.
React Hot Toast.
Coba.
Bentar.
Wah, ini 30 menit sendiri nih.
Wah, ketauan.
Eka lagi di cold and brew, lantai satu.
Iya.
Lambat ini, jan-jan gara-gara ketauan lagi live stream, jan-jan di troto.
Jangan-jangan ini provider-nya rumah indie.
Eka pindah koneksi itu.
Provider-nya rumah indie.
Eka-nya mati.
Eka-nya mati.
Koneksinya maksudnya.
Dia pindah koneksi.
Pindah koneksi, nge-freeze dulu.
Nah, jangan-jangan ini provider-nya rumah indie, kita bisa pake NPM registry.
Masa sih?
Iya.
Masa?
Di block.
Apa?
Atau di trotal, gak tahu sekarang ya.
Apa?
Coba, coba.
Ada yang pemakai rumah indie, coba bisa kasih opini.
Katanya gitu.
Entah ada di trotal atau di block ya.
Udah lah, harusnya rumah indie provider-nya itu tadi apa yang kita bahas di awal?
Indie Hacker.
Nah, kita sambil baca ini aja lah.
Yang lama banget pusing.
What is Redwood?
Nah, ini dia definisinya.
Preact Framework with lots of pre-installed packages and configuration.
Nah, bla-bla-bla.
Nah, ini nih kan terakhir nyoba tutorialnya tahun lalu itu masih versi 4 atau 5 gitu.
Nah, itu tuh belum pake fit.
Belum ada fitnya.
Kalau gak salah mulai versi 6, udah say goodbye to webpack pake fit.
Bla-bla-bla.
Oh, sekarang udah react server component ya?
Udah.
Udah ada sih sebenarnya.
More on those later.
More on those later, okay.
Getting data from the backend should be simple, bla-bla-bla.
Create convention.
Redwood app actually 2 apps, a frontend and a backend.
Jadi ada 2 ya, ada 2 app ya.
Redwood ini setara, dia meta framework ya?
Setara Next.
Iya.
Tapi malah lebih preskriptif, malah lebih mirip old school framework gak sih?
Kayak Laravel, Ruby on Rails.
Ya, yang full stack.
Kalau Next itu kan masih cukup minimal ya.
Frontend, ada backend, udah gitu kan.
Gak ada RM.
Masih terlalu banyak kebebasan ya.
Kayak apa? Masih terlalu banyak yang kita harus mikir dan ngerancang sendiri.
Kalau ini nih, ini kan apa?
Actually 2 apps, udah kita dikasih frontend sama backend.
Technically Monorepo.
Nah ini API, jadi masing-masing ternyata ada package JSON-nya sendiri.
Menarik ya.
Ini API nih.
Oke, sama GraphQL Server.
Kan ini web, ini frontend.
Nah ini coba punya 2 monitor, enak ya.
Jadi tergoda beli monitor ini.
Tuh, kata Audi, kemarin Google Doc sama Versa kena blockir. Iya tuh, heboh tuh ya.
Aneh-aneh aja yang di blockir.
Another JSON, kita lagi window shopping.
Lihat-lihat framework baru.
Nah ini nih yang API, dia punya package JSON sendiri.
Benar sih, tutorialnya itu tadi yang paling atas ini.
Yang paling atas ini kayak cuma meregister aja.
Package JSON-nya ini, API dengan web.
Nah terus ini API, dependencies-nya ini.
Kalau ini yang frontend-nya web.
Bisa ditiru nih ya, arsitekturnya ya.
Ya semua ini bisa ditiru, cuma ini kan kelebihan kita nggak usah mikir...
Konfigurasinya.
Kayaknya udah selesai deh tuh.
Coba lihat terminalnya.
Kan selesai kan?
Selesai.
Di throttle tadi.
Di throttle dari cafe-nya kayaknya.
Biar nggak semua orang streaming.
Enggak, banyak yang itu, banyak indie hacker di situ, banyak pake npm install.
Di throttle.
Wow.
Generating Pisma Client, oke.
Wih.
Tadah, cepet ya pake pip.
Cepet.
Wait, grafika endpoint-nya di 8.9.1.1.
Oh bisa buka back-end-nya database-nya ya?
Back-end-nya ya, 8.9.1.
8.9.10 sama 8.9.11.
Nice, oke.
Apa?
Kamu bisa forwarded port lu.
Bisa loh.
Dari PS Code.
Gimana caranya?
Comment-nya apa?
Comment P, forward a port.
Coba klik.
Forward a port.
8.9.10 berarti ya?
8.9.10, iya.
Ya.
Olah.
Nanti tunnel dulu dia ke...
Ke punya-nya si...
Ya, lewat GitHub dan Microsoft.
Udah.
Asik juga ini.
Ya.
Sekalian kayak acara yang C.
Siapa tau kalian mau...
Jadi buat temen-temen misalnya...
Lagi bikin sesuatu akses.
Lalu gitu.
Itu klik aja itu.
Klik aja itu yang tanda...
Copy.
Siapa tau kalian punya klien...
Mau ngedemo-in tapi ngedemo-in...
Pakai komputer lokal.
Kayak NG Rock lah gitu ya kira-kira ya.
Tapi sudah bawa-annya si...
Sudah bawa-annya si...
Duh, belum.
Kok pakai user-nya Microsoft?
Ya, dia harus ini...
Apa namanya?
Oh, bisa dibikin.
Bentar, Eka bisa...
Eka bisa ke sini.
Eka...
Itu ke screen-nya Eka yang...
Forwarded port.
Klik karena itu visibility kan private.
Bikin jadi public.
Port visibility public.
Dah, continue.
Allow dulu.
Sudah, nah baru...
Kunjungin lagi tadi link yang tadi.
Klik aja tadi forwarded port yang link ya.
Tadaa.
Wow, sudah bisa dibuka.
Iya, continue.
Dan...
Sudah kelihatan.
Tadah.
Welcome to forwarded port.
Ayo, silahkan.
Wow!
Asik.
Asik deh.
Yang mau DDoS.
Yang gak ada komanya begini bang.
Gimana cara DDoS-nya?
Dah, bikin, bikin, bikin.
Ayo.
Terlalu.
Reaction decision.
Custom declarative.
Nah, ini salah spelling nih.
Nanti submit PR.
Yes.
Sudah lewat.
Gak apa-apa.
Lumayan.
Ini routing-nya.
Temburu swag.
Temburu swag.
Routes.
Oh gitu.
Ini kan.
Home page.
Jadi home page.
Oh, coba kita lihat note found-nya kayak gimana.
Oh.
Eh.
Pre-render.
If you have content on that page.
Ya.
Oh, bisa.
Kalau kita perlu static, bisa nih.
Sudah ada pre-render.
Kalau perlu.
Ini.
Reboot version of SSG.
Kalau mungkin kayak home.
Eh, static saja.
Eh, static saja.
Ini private buat login ya.
Buat login ya.
Buat protected route.
Private itu ya protected.
Wow.
You can also use your own.
Include integration to many
popular third-party out-house.
As well the option.
The home page is accessible.
Tuh, maluannya
pake DevTunnel juga.
Sekarang pake DevTunnel.
DevTunnel ini punya yang Microsoft berarti ya.
Iya, tadi kan itunya.
Microsoft.
Sudah bawaan.
Ada extension dari PS Code.
Tapi itu udah kayak core.
Bawaannya, otomatis
terinstall.
Apollo Client, jadi GraphQL.
Di front-end pake Apollo Client.
Terus ada hooks-nya.
But if you could have
a component.
Oh, Cratebook punya
konsep sendiri namanya
cell.
Cell, bukan cell yang
di Dragon Ball.
Cells.
A cell is still
just a react component.
It just
happens to follow
a couple convention. Jadi ini
sebenarnya komponen biasa. Cuma mereka
punya kayak standar convention
tertentu.
Namanya doang, nama.
Ada export.
File can optionally export.
You can probably guess
what those are for. Nah, ini nih
yang bener-bener Redwood tuh kayak
apa. Udah disiapin
semuanya ya. Ini kan sebenarnya kita bisa bikin sendiri.
Maksudnya kalo cuman nge-export function
mah kayaknya semua orang yang udah bisa react banget ngerti.
Cuma dia udah bikin
standar yang tinggal diikutin aja.
Query, success, loading,
failure, empty. Kayaknya keterlaluan
kalo gak, gak paham ini
buat apa ya. Maksudnya apa ya.
Tapi itu seni sendiri loh. Maksudnya kita
kalo kita yang bikin, kita gak ada panduan
gini, mungkin kita pake istilahnya belibet lah.
Maksudnya kurang, gak sejelas
ini. Tapi mereka
tuh kayaknya ngedesign
demikian rupa yang sampe
relatif,
gampang, mudah dipake dan
mudah dimengerti.
Tapi ini tuh kayak penjelasannya ya.
Ah, langsung, pengen yang langsung loading lah.
Langsung aja langsung.
Captor 2, Captor 2. Eh, Captor 3
kalo gak salah.
Installation kan udah, lah kan udah
install kan.
Itu, Redwood file structure aja.
Redwood file structure.
Udah nih, udah semua.
Nah, ini kan
udah muncul kayak gini nih.
Ada tipsnya, oke.
Oh, kenapa 8, 9, 10 tuh karena
supaya gampang dilihat.
Iya, itu tadi 8, 9, 10.
API-nya 8, 9, 11.
Karena habis 10, 11.
Ya.
Postgre kan 5, 4, 3, 2.
5, 4, 3, 2.
Ya, mundur.
Type script.
DB ada scheme-nya.
Gak tau, gak paham.
3, 3, 0, 6.
3, 3, 0, 6.
Hari main workplace itu ya.
Naval. Type script.
Schema.
Wah, iya.
Udah ada.
Tuduh.
Tetabisnya udah ada default ininya apa?
Tuduh. Oh, bukan.
Usar ya? Usar?
Belum ada. Belum ada.
Oh, belum ada. Ini contohnya.
Please remove the following example.
Ya, ini cuma biar
ada bayangan aja bentuknya kayak gimana.
Ada sheet-nya juga
kalau mau tambahin data.
Terus apa lagi?
SRC.
Component layout pages.
Standard lah ya.
Standard ya.
Tadi kita udah lihat.
Inredwood.
Ini.
Oke.
Kita kan mau bikin block nih.
Pakai mark.
Ini untuk markdown ya.
Cuma ini lucu deh.
Dia kan lagi ngejelasin.
Ini kan mono repo.
Ada 2 bagian.
Kalau istilahnya yarn,
yarn workspaces.
Kalau bahasanya reboot,
mereka menyebutnya sites.
Jadi ada 2 sites ya. Web dan API.
Terus,
kalau misalnya kita mau install, caranya gimana?
Nah, ini.
Ya, standard lah.
Kalau pakean workspaces pasti
udah tau kan.
Oh, makanya dia pake yarn.
Karena dia mono repo.
Terus lucu gitu.
Ada warningnya jangan dijalani.
Ini contoh doang.
Oke.
Nah, terus ada.
Karena yarn workspaces.
Contoh cara install.
Sesuatu dependensi.
Nah, terus
kalau utility yang dipake
kedua nya, scripts.
Mana ada nggak ya?
Oh, nice.
Ada sheet buat masukin data.
Data dummy.
Ya, terus kita
kalau punya utility apapun
yang dipake kedua
package, kedua
site, bisa kita taruh di scripts.
Directory.
Ada 4 directory
di API.
Rafke nanya, Microsoft SQL
berapa? Gatau.
Tanya sama anak dotnet.
Directives.
Functions. GraphQL.
Saya pake soket.
Oh iya, gak pake gitu ya.
Eh, gak pake port ya.
Untungnya belum pernah pake.
Required out. Nah, ini apa?
Nanti kita...
Oke, next dulu.
Services itu apa?
Services buat itu ya?
Apa namanya?
Ya, service.
Business logic.
Business model.
Business logic.
Ngecek kalau user
level 1.
Dikasih privilege apa aja.
Bahkan ini kan belum ada isinya.
Karena ini kan cuma kayak template starter.
Tapi udah dikasih folder-nya.
Ya, kayaknya dibutuhkan dari belakang banget.
Web Directory.
Lanjut.
Itu buat front-end-nya.
Lanjut.
Public. Contains. Asset.
Asset. Standard ya.
S-R-C, component layout.
Standard ya, udah pada tau ya.
Component layout, pages.
App ini entry point-nya ya.
Semacam entry point buat
aplikasi rate app-nya.
Terus dia masuk ke provider.
Apollo provider
sama router.
Ya kan?
Dari routes
baru masuk ke halaman.
Our first...
Entry? Entry ini apa?
Entry point yang
render app.
Ini yang render app.
Ini yang render app.
Oh, yang biasanya main ya.
Main.tsx gitu ya biasanya ya.
Oke, oke.
Terus...
Kayaknya kalau di Next.js, ini namanya
app.tsx ya gitu.
Coba our first page aja langsung.
Ya. Oh, ini ada
generator-nya ya?
Iya, semua generator base.
Oh.
Kita meng-generate
page yang namanya home.
Yang berarti...
Laravel.
Jenggo.
Artisan.
Yes.
Apa yang dibikin?
Nguju aja sih.
Masa semuanya.
Generating page files suksesfully.
Right?
Ini.
Oh, home page.
Oke.
Jadi namanya home page.
Mana sambil dibuka.
Di web, web, web.
Sarsi, pages,
home page.
Ada storage-nya.
Ada test-nya.
Ada home page-nya dulu.
Ada.
Home page.
Coba lihat test.
Pake apa dia test-nya?
React library nggak?
Jazz.
Testing library. Oh, jazz ya.
Bukan. Tapi nggak pake testing library.
Kayaknya nggak nih.
Nggak ada di dependency.
Punya sendiri?
Punya sendiri?
Gak. Eh, iya...
Miss itu kan runner kan?
Wih, udah berubah nih.
Mungkin dibandel di dia.
Udah berubah. Mana-mana? Belum lihat.
Di halaman.
Langsung berubah ya.
Nggak, nggak direfresh dari tadi.
Pas di...
Autoreal load kan, V.
Secepat cahaya.
Ya.
Ya, kirain di lokal host doang.
Ini kan, oh ya, port forwarding ya.
Langsung dia ya. Bisa dia...
Ya kan, re-forward. Apapun yang di port ini.
Dia ter-upload.
Storybook.
Storybook jalan gimana ya?
Satu, dua, tiga.
Kayaknya harus jalanin...
Jalanin ini deh.
Kalau storybooknya...
Sudah harus...
Ada portnya sendiri.
Nanti coba... Pasti ada babnya sendiri sih.
Nanti sabar.
Chapter 5 tuh.
Coba-coba.
Cukup aja.
Klik aja.
Oh, ya udah sesimple itu ya.
Coba ya.
Bener.
Testingnya dependensi kepada...
React testing library.
Punyanya cancidot.
Makanya ada render tadi.
Bener, bener, bener.
Sudah dicek. Lanjut, lanjut, lanjut.
Ini apa nih?
Storybook, storybook.
Oh, storybooknya jalanin.
Oh, langsung di jalanin ya.
Enak sekali ya. Kita susah payah loh.
Konfigurasi.
Ada yang CSS-nya nggak keload lah.
Perlu geset uploader sendiri.
Ada yang typescriptnya nggak kebaca.
Nah, sambil nunggu storybook install.
Kita lanjut tutorial yang tadi ya.
Oh, kita tambahin juga...
Ke apa?
Routes ini.
Nah, jadi apa?
Oh, yang tadi, yang di generate tadi ya.
Iya.
Ya, otomatis nggak override.
Itu...
Keren, keren, keren.
Ada homepage, otomatis.
Oh, iya ya.
Masa?
Otomatis.
Kita nggak mengimport homepage ini dari mana?
Nah, diimpor...
Magic.
Magic.
Ini kalau nggak dibaca, ini bingung sendiri nih.
Iya.
Bisa bikin anak...
Apa namanya?
Anak yang belajar
framework.
Jadi bingung, ini kemana?
Kalau nggak, ini bahaya sih.
Sudah biasa pake redwood,
pindah ke framework lain, bingung.
Nggak diimpor.
Oh, tapi mungkin banget tuh, misalnya pindah ke...
Next.js kan mirip ya.
Maksudnya itu juga
abstraction kan, meta framework, abstraction.
Mungkin kalau orang yang nggak biasa
pikir, oh iya, paling udah diimportin,
paling udah diurusin sama Next.
Ya, paling nggak kan error kan
udah tahu, oh ini nggak diimport, berarti harus manual.
Gitu kan.
Kalau alikannya baru...
Ini nggak di garis...
Itu kan dia pernah ISL-in sendiri ya tadi.
Nggak, nggak error.
Gak apa-apa.
Tanda ke JSL.
Si VS Code-nya nggak
otomatis importnya.
VS Code-nya nggak otomatis import.
Biasanya kan kalau belum diimport, dia bisa
nawarin mau otomatis import nggak.
Ini nggak ada ya.
Dia paham, dia ngerti.
Tenang si Redwood.
Redwood-nya, maksudnya dibalik
layar nih.
Dia auto-generate types
includes.
Jadi setiap kita jalanin, kita bikin
ini nih tadi di generator.
Ya, ditambahin lagi ya
lagi ini ya.
Coba lah kita eksperimen gitu.
Eh bentar, si storybook-nya udah
7, 9, 10.
Oh, ada ini ya.
Ada scaffold-nya juga.
Back-end dan front-end.
Sesimple ini sih.
Udah gini doang.
Mantap.
Nah bentar, kita cek lagi nih.
Misalnya tadi, apa sih?
Buat generate
page tadi, apa tuh?
Ya, add.
Enter way, generate
page.
Eka.
Gini ya.
Tadi katanya bisa crude, coba bikin
crude, back-end, front-end.
Bentar, sabar.
Route dulu, pengen nyoba.
Wah.
Kita cek.
Canggih ya.
Tadah.
Wah.
Nah, sekarang kita cek
tadi, routes.
Tadah.
Terus type definition-nya.
Muncul juga.
Nah.
Masih banget.
Oh, ya
dimatiin.
Airway storybook.
Nikmat sekali ya.
So simple itu ya.
Sampai apa? Type definition-nya
juga udah ditulisin ya.
Wah, ini Redwood
memanjakan sekali.
Begitu dia
hire, suruh ngertiin next.js.
Ramek dia.
"Sial, harus nambahin ini."
Lah, makanya kan
ada disclaimer-nya si
Redwood buat orang
yang pengen bikin produk.
Perkara unity kerja bingung
sendiri, bukan urusan
buat Redwood.
Ya, kita lanjut ke tutorial.
Berarti udah aman ya.
Ini.
Routes-nya juga tadi kita udah
lihat. Yang penting
route-nya ada
part-nya ini.
Simple styles.
Nah, dia udah scoping
siapa?
Dia udah nyampein ini.
Dan CSS style-nya kita bisa
nulis, jadi gausah
ribet-ribet kayak gimana.
Gausah pake CSS module ya.
Gausah pake CSS module ya.
Nah, pake CSS module
atau nggak, nggak tahu. Kayaknya nggak deh.
Kayaknya loh. Web.
Jangan-jangan sebenarnya
pake CSS module tapi import-nya
disembunyikan.
Jangan-jangan dia urusin ini under the hood juga.
Sama nggak tahu
dimana. Mungkin ini tutorial cuman
pake CSS biasa ya.
Tapi sebetulnya, kalau nggak salah, install
nailwind juga cuma satu komen doang.
Oh, oke.
Mari kita cek.
Coba ya.
Oh, ini udah.
Ini udah. Bagus ya.
Coba deh.
Framework Glide.
Framework Glide.
Comic Sans
MS.
Weee!
Si Comic Sans.
Comic Sans.
Green.
Ah, bikin ini.
Geocities.
Rebecca.
Nah.
Oke. Kita lanjut.
Second page link.
About.
Oke. Udah lah ya.
Ini bisa lewatin aja nih.
Nggak, kan biar bisa
billing. Biar bisa billing.
Tadi kan udah bikin
EKA kan? Oh, iya.
Maksudnya billingnya kayak EKA page nggak enak.
Ya, biar bisa kok pasti.
Home page TSX.
Oh, iya, iya.
Ini meta text-nya juga
udah dikasih component sendiri.
Oh, ini ya react helmet ya?
Helmet.
Helmet.
Helmet kan bahasa Inggrisnya.
Redwood loves
function components.
Oke.
Oh, ini.
Linknya.
Dia juga punya router sendiri.
Pasti.
Wah, linknya harus pakai
linknya dia ya.
Itu dikirimakan jadi apa?
Yang mau pakai ahref biasa,
boleh aja. Tapi kan kita jadi
nggak bisa pakai fitur-fiturnya dia.
Ini routing library ini dia pakai apa?
Router apa?
Kayaknya dia hand roll sendiri deh.
Redwood.
Router.
Nah, coba.
Jadi penasaran.
Like a page.
Ini gimana?
Autocomplete nggak?
Wee.
Kan sudah ada type-nya tadi.
Iya, udah ada type ya.
Oh,
link2-nya nggak pakai
string ya.
Coba ya kita.
Mantap, mantap, mantap.
Kita lihat.
Wee.
Ah, ahref biasa.
Ih, link biasa.
Coba kita please.
Gak ada isinya.
Gak ada isinya?
Kok nggak muncul?
Tapi buat muncul?
Ini bisa.
Eka harusnya tadi hahaha.
Iya.
Iya.
Kenapa ya? Ada yang salah.
Itu ada error nggak?
Errornya banyak, 10.
Error apa ini?
Kayaknya extension.
Enggak, kosong.
Oh, cuma emang nggak keluar. Kenapa ya?
Ti heart reload pun nggak muncul.
Eh, bisa.
Itu bisa?
Loh.
Ada yang...
Ya, dipikir nanti.
Kita lanjut tutorialnya.
Back home.
So,
oh, about page change.
Iya, ini about.
Supaya bisa
forward dan back.
Setelah kita data.
Nah.
Nah, ini roads-nya home.
Ke home.
Nice.
Iya, ini intinya.
Soft navigation itu apaan sih?
Soft navigation-nya dia.
Hah?
Ya, maksudnya apa?
Client-side navigation kayaknya deh.
Di-hijack.
Jadi, event kan ada, apa, netif.
Maksudnya, ada dot-in-gap API kan. Event on-navigate.
Atau apalah semacamnya.
Pokoknya yang, kalau kita nge-click
men-anchor, akan ada yang fire.
Nah, routing library kan
semacam nge-hijack itu.
Keliatannya sekarang tuh.
A-hard-nya sendiri gimana?
Kalau A-hard-nya sendiri, dia bakal
nge-hijack nggak?
Kayaknya hard reload deh, cobainya.
Eh, bentar.
Di ini aja, di...
Nggak, ga usah dibandingin aja.
Oh, ya. Terserah deh.
About page
page.
Ini ya?
Refresh.
Refresh, refresh.
Request response, kalau yang itu
client. Kecuali kalau JavaScript-nya
dimatiin kali.
Ada interrupt ya?
Interrupt, ya.
Ketik-hijack event.
Ya, hijack.
Nah,
as a world-class developer,
you probably saw that.
Copy pasted header and gasped in
discuss. Yang lucu, tutorialnya
tuh kayak semi-bercanda gitu.
Maksudnya tetap serius, tetap helpful.
Maksudnya technical details-nya tetap
lengkap, tapi dia kadang bercanda.
Tapi kalau bercanda terus so asik, itu kan nyebelin juga.
Jadi, dia apa?
Ngelucunya ya dikit-dikit lah.
That's why Red Hood has
ada, kan tadi kita udah
generator page ya.
Generator page, routing,
sekarang layout.
Oke.
Blah, blah, blah.
Blah, blah, blah. Okay.
Nah, yang dicari.
Ini buat layout.
Okay. Layout.
Tadi belum pakai
layout berarti ya?
Belum.
Apa yang terjadi?
Yang
terjadi adalah
folder-nya udah.
Cuma ada ini. Oh, udah. Block layout-nya.
Blok layout-nya.
Terus header-nya.
Header-nya dipindahin ke...
Lengkap semua. Jadi, apa?
Ini meng-encourage
ngajep kita biar
best practices. Perkara kita
ngikutin atau enggak, kan ya.
Yang kasus ya.
Yang test-nya ijo semua, sih.
Yang test ijo semua, ya.
Nanti aja.
Nah, kan cuma yang penting
ini doang. Standard-nya.
Mutidanya udah di-setup.
Jadi, kita tinggal tulis kan.
Tinggal tulis tes kesini aja.
Di-setup, dipermudah, udah tinggal buka, tinggal
masukin, tinggal bikin...
Kalau muti-didi enak, nih.
Jadi, tinggal buka
test-nya, terus kita expect apa.
Alamannya ada H1,
ada paragraph, dan lain-lain.
Udah, tinggal tulis tes-nya.
Link-nya,
terus, ya.
Block layout,
main children.
Oh, ini buat
layout, oke.
Jadi, nanti ada navigation-nya di atas, ya.
Yang lain, dihapus.
Yang lain, dihapus.
Dihapusnya. About page.
Nah, ini nge-wrap-nya
dimana?
Cut the header.
Oh.
Oh, ya, ya, ya.
Cuma disuruh.
Ya, header-nya dihapus.
Yang lainnya udah otomatis.
Jadi, children dia.
Ya.
Semua yang di-wrap pake
main, akan di-range bagi children.
Ya.
In block layout,
children is where
the magic happens.
To actually render.
Block layout.
Set.
Unlike pages, we do...
Nah, kalau layout, harus kita import.
Import, ya.
Coba kita lihat.
Oh, itunya nge-define-nya
di halaman routes, ya.
Kita import.
Ya.
Block layout.
Pake set, wrap, block layout.
Oh, ada set-nya.
Ya.
Oh.
Wah, lucu.
Set ini buat apa?
Ya, itu buat nge-wrap pake layout.
Oh.
Source.
Notice the import statement.
Bahkan aliasing-nya aja udah dibikinin, loh.
Kita gak usah pake relative path yang kayak gini.
Ya, ya, ya.
Kita tulis aja source.
Ya, boleh.
Oh, wow.
Why are things named
the way they are?
Kan, penamaannya juga
udah dipikirin.
Apa?
Pages.
Udah ada di dalam directory namanya
pages, tapi tetap ada nama
page-nya. Layout.
Jadi kayak homepage, about page,
ada kan di dalam directory
pages. Layout juga
udah berada
di dalam directory layouts,
tapi isinya tetap block layout.
Ya, namanya block layout.
Nah, itu tuh udah dipikirin.
Di default sama kalau misalnya
Kita mengingungkan antara block page
atau block layout. Kita gak bingung lagi
ganti namanya.
Dan kalau misalnya
kita mau navigasi
gini juga lebih
gampang dilihat.
Okay. Nah.
Header.
Block layout tadi udah kan?
Ya, ditambahin.
Pake dirapin aja.
Okay.
Ininya gak usah.
Sudah.
Oh, gitu.
Refresh maksudnya.
Wow.
Like.
Oh, ya.
Gak percaya gitu kalau
belum di...
Tadi udah ketemu page layout
throughout. Sekarang kita ketemu
sini tadi.
Apa? Sales.
Oh, belum. Database. Nah, asik.
Create database
schema.
Nah, ini kayak becandanya
juga becanda tipis-tipis lah.
Gak terlalu so asik. Cuma sebenarnya lucu.
Ini yang bikin
tim khusus ini ya. Gak kayak
framework yang isinya
berapa orang ini.
Ini udah jadi kayak perusahaan ya.
Perusahaan yang is like...
Ya, tapi mereka...
Kayak ada tim UX writer
gitu.
Kayak ada tim UX writer yang
bener-bener ngulis ya copywriternya nih.
Itu udah dipikirin.
Oh, tapi kita...
Atau
kalau pun developer, tapi ya kayak
di edit, ada
konsultannya lah.
Yang ngulis draftnya
developer, abis itu di...
Iya.
Oh, ini kita bikin pause ya untuk
database ya.
Ini mas standar Prisma ini.
Kalau temen belum pernah
pake, ini dia
framework agnostic kok bisa dipake sama
Next.js atau apapunlah.
Remix, Next.js,
Astro.
Ini dia langsung koannya ke database ya
berarti ya.
Ada migrationnya juga.
Oh, jadi kalau
ada perubahan di...
Di schema, ada perubahan
di schema, kita harus jalanin migrate-nya.
Buat ngel-write lagi.
Ada database-nya
disesuaikan dengan
schema ya?
Ya.
Okay.
Create migration, create course.
Oh.
Without the course, of course.
It's just...
You'll see
a...
Subdilatory under API DB migration.
Ada migration SQL-nya.
Oh, ini SQL-nya ya.
Ini, ini yang baru saya...
Enak sekali.
Ini SQL kan.
Kita gak, misalnya kursinya ORM kan
biar kita gak usah nulis SQL sendiri.
Sebenernya migrate
comment itu ini ya, dia jalanin ini kan
sebenernya kan ya? Iya.
Under the hood dia ngejalanin ini.
Jadi kalau misalnya
kita punya di local udah selesai
dan mau di...
Di deploy kita...
Migrate dulu.
Kita migrate juga, jadi sekali
bisa tetap sing.
Database-nya. Database schema-nya.
Nah, ini salah satu fitur
favorit terutama sebagai
developer yang
gak terlalu, ya gue pikir...
Eh, HP Maya admin.
Prisma studio.
Prisma provides a tool called
studio.
Buat
ini ya, ngedit database ya.
Oke.
Udah, ya belum ada isinya.
Disuruh isi data kali?
Belum.
Belum.
You'll see an empty database table.
Let's have our app
start putting some post in there.
Oh, ini scaffold ya. Ini berarti
back and front end dibikin ini ya.
Ini cerutnya nih.
Cerutnya, cerut. Iya.
Ta-da-da.
Action some post.
Dia tuh punya generator
untuk apa aja coba tadi.
Apa? Page, play out.
Page, play out.
Now, pasti ada.
Ya, route kan, pas kita bikin
page, routingnya kan udah
dibikinin juga.
Page, play out, sekarang, scaffold,
post.
Tapi apa, G itu apa ya?
Generate. Generate.
Dari Ruby on Rails
biasanya.
Jadi bisa, Rails generate,
bisa Rails G.
Cuma G doang.
Shortcut.
Successfully
route. Jadi
dengan kita ngejalanin
satu command ini,
dia bikin
filenya, edit,
edit post cell,
post, post cell,
post form,
posts, pakai S berarti ini kan list ya,
list of post index.
Post cell,
new post, post SDL,
buset, service post,
post scenarios,
apaan, place files,
CSS, dao.
Nah, kita liat
ini fungsinya
apa.
Eh, apa tadi?
Post ya.
Wow.
Itu. Sebenernya ada.
Where to load?
Mana?
Coba ya buka
di lokal dulu.
Wow, kalau di lokal,
lucu. New post, new post.
New post. No post yet.
Create one, new post.
Ntar, kita coba
new post.
Error, database-nya apa?
Kok ada flash error-nya ya?
Eh, lho.
Kita pakai Lorem Ipsum dulu.
Kok bisa?
Berhasil.
Hei.
Hei.
Udah script-nya jadi.
Coba yang show, show tadi ada.
Itu ada apa?
Show.
Udah jadi. Oh, untuk ininya.
Udah jadi.
Kalau di
PHP yang setara bikin itu
yi framework
yi framework.
Ya, sudah ada cerutnya segala macem
generator. Generator juga?
Makanya generator juga ya? Jadi kalau
bikin kayak business process,
itu tidak bikin skema-nya, bikin
generator-nya langsung kayak
tampilan untuk
CRUD-nya segala macem
udah selesai.
Laravel juga gitu kan?
Laravel lebih
lebih
dinamis kan? Lebih kita bisa
mu-customize seperti apa untuk generator?
Kalau Laravel, kayaknya
kan belum ada. UI-nya belum ada.
Oh, UI-nya belum ada ya.
Lagian nggak bisa.
Lagian masih generate.
Maksudnya bikin model bisa,
model controller
heal bisa. Cuma maksudnya nggak
beneran dikasih sampai jadi beneran
kayak gini sih.
Dia kan full stack untuk back-end kan.
Gak ada front-end ya.
Maksudnya ya kita bikin
blade file-nya kosong gitu ya
kita bikin sendiri. Kalau ini kan beneran
back-end front-end dikasih
semua. Kalau yi juga ada
front-end-nya juga.
Ada front-end-nya. Sudah langsung jadi.
Oh, nice.
Ada yang masukin ya?
Iya kan, sekarang kan
belum di protect.
Coba tadi liat.
Coba diauthenticate.
Ya, gimana? Cukup demonya untuk malam ini?
Demonya cukup kali ya.
Oke, cukup kali ya.
Hosen satu lalaman ini.
Nanggung, satu lalaman ini.
Nanggung. Oke, lanjut.
Filament tuh, katanya ada
filament THP. Wah, saya bertahu
filament. Eh, nggak, apa?
Testing-nya aja ya.
Testing, testing, testing.
Atau storybook lah, nanggung tadi udah
bikin. Oh, filament itu
admin ya admin. Jadi
ada tambahan ya, harus diinstall
tambahannya. Kalau ini kan langsung ya semua ya.
Ian, tes lah.
Iya, kita ikutin dulu. Kan
passing semua ini.
Ya pasti. Skill issue
nggak bisa pernah enter to 2P.
Part 2, wah
banyak yang minta nambah nih ya.
Part 2.
Boleh, boleh. Ditampung ide-nya ya.
Solusi, solusi.
Test passing semua.
29.
Wah, iya.
Ya, harus ditulis ya.
Apa? Test case-nya nggak bisa otomatis
ya. Pakai copilot
kalau mau.
Our first test. Coba ya.
Ini sudah ngapain?
Enggak tahu ini.
Nanti kasih. We've got a
great document all about
testing. Ya, nanti.
Tests testing.
Males banget.
Iya, ini udah kelihatan kan
React testing library kan ada screen, ada render.
Oh ya, ini
render, screen.
Dia bikin package-nya
sendiri, jadi kita nggak usah jepang
install-install satu per satu.
Tapi dependence-nya tadi udah ngeliat.
Ya, memang React testing library sih.
Benar.
Oke.
Oke.
Render yang atas dia
push-nya.
Oh, ada mock.
Artikel ini.
Tadi bukannya post ya?
Kok jadi artikel?
Ya, kita kan, kita ngeloncatin.
Kita loncatin, kita loncatin.
Kita ngetes yang post dulu
aja, test.
Kalau post ini yang backend.
Oh, ini service-nya.
Ya, backend, backend.
Om page-nya aja yang ditest.
Check ada header sama check ada
navigasi.
Describe renders.
Empty.
It.
Content.
Aset tool.
Back.
To, to content ya?
To content apa sih?
Kayaknya, kayaknya
bukan gini deh, emang ya?
Bukan gini, bukan.
Judulnya, isi text-nya, isi
text-nya, khas satunya apa?
Home.
Oh, kan nah.
Kalau nggak, itu role.
Ya.
Is a text like.
Ya.
Kalau nggak, harus pake itu kan, pake role.
Role header, text-nya
khas satunya, eh, text-nya ini.
This is something, something.
Nah, ini.
To content, khas satunya.
Kita suruh AI aja.
Test to
check by
role.
To check apa ya?
Khas satunya
should content.
Kita tunggu.
Wah, ada yang lupa
hari ini hari Selasa.
Wah, gimana ya?
Gawar biasa.
Get by text ya, get by text.
Expect.
Expect
khas satu to be in document.
Get by text.
Get by text, bentar. Ya, get by text, benar.
Atau, get by
role.
Nggak ada role-nya.
Oh iya, kita nggak bikin ya. Header nggak masuk
khas satu ya?
Test lagi.
Kita tunggu dulu, testing atau nggak.
Yes, yes, yes.
Semangat, yes. Fail.
Fail.
Batuk-batuk, yes.
Bentar, expect-nya tuh dihapus tadi.
Oh, diatas emang dihapus ya, oke.
Gak bisa dapat role main.
Oh, kok main sih?
Header, header.
Header level 1.
Header, bukan?
Roll-nya heading.
Header, header. Heading apa header lah.
Yang salah satu.
Nah, tuh berhasil nggak error-nya.
Enggak, error. Ya, kita coba aja
satu persatu.
Udah pernafal sih.
Oh iya, get by element-nya.
Get by element.
Setelah pakai free test, yes,
berasa lambat ya.
Bentar.
React, testing, library.
Get as a tool.
By role, tapi...
Roll-nya apa?
Heading, heading level 1.
Bukan?
Oh, iya, iya, iya.
Tadi tuh karena nggak
pake, nggak pake object.
Ini ya?
Komah, level titik 2.1.
Nah.
Wow.
Oke, kita tunggu.
Kalau gagal lagi...
Kok masih fail?
Yang fail-nya apa?
Content...
Oh jangan-jangan dia nggak...
Render-nya udah.
Read in.
Oh iya, belum dirender.
Render-nya mana?
Nah, ini
harusnya di sini ya?
Render-nya di...
Render-nya ditampung ke variable nggak?
Gimana sih?
Kayaknya screen sama dengan...
Get by text, kan?
Read in itu apa?
Ini kayaknya AI-nya tadi ngarang deh.
Read in itu apa?
Gak tahu, bentar.
Kita tanya ini.
Gak ada.
Di React Testing Library-nya ini,
kalau mau cari.
Itu aja langsung, render-nya.
Jadi, expect-nya itu hilangin.
Render-nya langsung udah.
Render-nya langsung udah.
Terus bawah.
Coba.
Tuh kan, pasing kan?
Live terus sampe berhasil.
Karena penasaran.
Wah, ini juga seru sih.
Ini padahal kita cuma, apa ya?
Kita tadi baru sampe...
Berapa sih? Baru sampe ini kan ya?
2.
2 dan ini masih halaman pertama, kan?
Kita...
Itu aja udah lumayan banget ya.
Kebayang nggak sih kalau, apa?
Hackathon tuh,
ini helpful banget kan?
Kayak dalam 5 menit, 10 menit udah dapet krewt.
Ntar, stop sharing dulu.
Nah, jadi kesimpulannya,
ya tadi kita udah sempet bahas ya.
Sayangnya nggak semua tempat mau experiment,
kebaru. Betul.
Dan emang bukan di desain buat itu juga sih.
Maksudnya kayaknya mereka sadar diri juga.
Nggak mungkin se-extreme itu.
Terutama kalau kita di tempat kerja yang established ya.
Tiba-tiba diganti,
diganti semua dengan framework yang
opinionated ini.
Ini lebih sekel, kita
inside project, kita punya ide,
kita pengen apa?
Ngewujudin ide kita dengan cepet lah.
Betul.
Jadi, ya memang
bukan target marketnya, bukan tujuan mereka
bikin, dan mereka juga nggak mau, kayaknya
nggak mau berkompetisi dengan next
dan temen-temen, gitu kan?
Mereka punya niche sendiri.
Dan yang menariknya itu,
mereka encourage kita untuk bikin sesuatu
dan bisa difunding juga
kalau kita mau ikutan, gitu.
Jadi, ini sesuatu yang menarik,
tapi juga harus apa ya?
Ini boleh
dipakai, tapi harus ingat bahwa
ada komponen-komponennya, seperti tadi ada jazz,
ada prisma,
ada grafial, dan lain-lain.
Yang kalau error, kita harus
deep dive ke dalamnya. Oh, ternyata
si testingnya ternyata
pakai React Testing Library.
Kalau error tadi kan kita bingung. Mau cari redwood,
error testing belum tentu dapat, kan?
Karena redwood itu nggak wrapping doang.
Itu kan memudahkan kita
biar nggak usah install segamber
yang satu persatu, mengkonfigurasi
satu-satu. Terus ini sih
kayak segampang-gampangnya,
seenak apapun tadi,
kan ini bukan pengganti fundamental.
Kayak misalnya, apalah, kalau dari
front-end, misalnya
event, atau
event handling, atau apalah, sincronus-asincronus,
kita harus tetap paham.
Karena ini kan nggak ngegantiin itu.
Soal database, misalnya Prisma, ya minimal
kita harus tahu cara
apa, cara kerja migrasi.
Misalnya kalau misalnya kita nggak ngerti
konsepnya, kita ngeganti
apa, file tadi, file skema-nya,
terus kita bingung nungguin
kok datanya nggak berubah ya?
Kayak nggak di-migrate, nggak mungkin berubah.
Terus kayak testing tadi,
apa, yang
apa, kan komponennya tetap harus
di-render. Maksudnya kita tetap harus punya
jangan itu, walaupun kagok ya,
misalnya apa, nggak terlalu inget,
nggak hafal syntax-nya, nggak
hafal metode-metode-nya tadi
harus nyontek dokumentasi
React Testing Library dulu, ya nggak masalah.
Tapi kan kita harus paham. Minimal kita
tahu. Ya, kita tahu
carinya gimana. Testing itu merendah komponen itu,
terus kita cari, kita
cari apa yang mau target,
apa yang mau dicocokin,
dimatching. Kalau tadi kan juga simple,
H1 harus ada content string,
sekian-sekian-sekian, baru passing.
Nah, itu tetap harus kita pelajarin
di luar Redwood.
Oke, kalau begitu.
Intinya, tetap harus butuh
fundamental sebelum bisa pakai
Redwood sih, menurut saya.
Iya,
dan tidak. Karena, kayaknya ya,
si Redwood ini kan targetnya
builder ya,
indie hacker dan lain-lain. Mereka mungkin
belum begitu paham dengan fundamental,
yang penting cepat jadi, gitu.
Jadi, banyak dia otomatis.
Sambil dibenerin. Sambil dibenerin di tengah-tengah.
Tahu pakai storybook,
tahu pakai react testing library,
tahu pakai
react.
Ya, itu minimal sih.
Minimal banget.
Atau malah jadi belajar,
sambil belajar, ya, maksudnya.
Karena penasaran.
Betul, betul, betul.
Oke, ada lagi mungkin? Terakhir?
Menutup?
Iya, sih. Seru juga ya.
Teru ya, ternyata ya.
Oke, kalau gitu.
Para penonton bikin sesuatu yang keren
to submit ke Redwood.
Oh, udah tutup, udah tutup.
Tahun depan, tahun depan.
Kita belajar-belajar dulu, belajar bikin dulu.
Bikin aja dulu dari sekarang.
Nanti, apa?
Kasih tau ke kita minggu depan.
Oh, saya buat ini nih. Nanti kita cek.
Iya, kalau bikin open-source,
kita undang
kita bisa kolaborasi sama-sama.
Buat showcase.
Kalau gak ada yang mau disampaikan lagi,
terima kasih buat semuanya.
Kita udahan dulu. Udah satu setengah jam kita
melihat Eka ngoding
dan bingung.
Tapi luar biasa ya. Maksudnya
ini opsi yang
bisa lah.
Kalau misalkan kita timnya sendiri,
itu kan gak mau repot-repot untuk
konfigurasi, bisa.
Dan ini speed sih, kecepatan dan
kepraktisan.
Itu kemululannya.
Kalau diringkas, cepet dan
praktis.
Cuman,
kita belum cek ke arah
performance dan lain-lain ya.
Kita belum tahu
gimana.
Tapi udah kebayang sih.
Kayaknya gak terlalu berbeda jauh
sama yang lain ya.
Tergantung aplikasinya juga.
Kita ketemu lagi minggu depan dengan
aplikasi yang berbeda.
Selamat malam. Sampai jumpa minggu depan.
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
3 Jul 2024
Ngobrolin Elixir
Episode ini membahas tentang Elixir, bahasa pemrograman fungsional yang berjalan di BEAM (Erlang Virtual Machine), bersa...
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
8 Nov 2023
Ngobrolin Code Review
Sebelum masuk topik, mereka membahas RedwoodJS — meta framework yang menyediakan segalanya sekaligus, dari Prisma untuk ...
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 .