Ngobrolin Astro - Ngobrolin WEB

0:00Dapatkan hanya di Domain Asia

0:03Selamat malam

0:14Mana?

0:16Yang lain lah, ini kayak...

0:21Ini kalau bingung ya

0:23Eh, next time

0:25Bikin pakai itu aja random

0:27Pakai scene ID, scene ID nya si itu

0:31Si Google sebenernya

0:33Oh, si Google ya. Sekarang nyobain ya, bikin

0:35Bikin soundboard

0:39Iya, jadi kita masukin aja prom nya

0:41Kalau kita tuh lagi mau ngomongin tentang

0:43Astro, contohnya malam ini

0:45Hari ini, hari apa

0:47Kondisi hati seperti apa

0:49Terus

0:51Terus suar dia play aja

0:53Pakai scene ID

0:55Bikin soundboard

0:57Gadakan

0:59Soundboard, kita kan isinya

1:01Cuma buat kelompok, lawak, jaringnya

1:03Jangan potong

1:05Justru itu, jadi

1:07Apa, kita bikin otomatis

1:09Gitu ya

1:11Bisa nggak ya? Gak usah otomatis, manual aja dulu

1:13Oke, manual aja

1:15Oh, tema ya, thematik ya

1:17Jadi begitu mulai, langsung mulai

1:19Soundnya

1:21Emang udah dapet akses ya?

1:23Udah dapet akses ya?

1:25Oh belum

1:27Kira ini udah dapet

1:31Eh pesan sponsor dulu, pesan sponsor

1:33Oh pesan sponsor

1:35Siapa yang bacain?

1:37Saya saja deh

1:41Oke, episode ini

1:43Disponsori

1:45Ya bukan sponsori ya

1:47Hasil kolaborasi dengan Domenicia

1:49Nah

1:51Kalau temen-temen yang mau

1:53Yang tertarik mau beli layanan Domenicia

1:55Terutama

1:57Ini ya, apa namanya

1:59Jasa hosting ya

2:01Hosting, bisa pakai

2:03Promo code nya ngobrolin

2:05WebDN, nanti dapet diskon

2:0710% untuk semua paket

2:09Web hosting

2:11Berlaku untuk siklus 1 atau 2 tahun

2:13Di pembelian pertama

2:15Jadi kalau mau langsung 2 tahun, ya dapet

2:17Diskon 10%

2:19Kemarin nyobain beli domain

2:21Host Node.js juga

2:23Oh iya, bisa Host Node.js

2:25Rust, Go

2:27Dan berbagai platform

2:29Moderan lainnya

2:31Kemarin saya cobain, beli domain

2:33Tapi gak dapet, gak dapet 10%

2:35Diskon nya gak, gak diskon

2:37Gak diskon

2:39Bukan hosting Nessia ya

2:41Domenicia, tapi

2:43Diskon nya, diskon hosting

2:45Domain dan hosting Nessia

2:47Mungkin dimulainya dari domain dulu

2:49Jalan domain

2:51Nanti kita undang

2:53Nanti kita undang CTO

2:55Kenapa namanya Domensia ya

2:57Uy, CTO nya, kenal ya

2:59Kenal

3:01Samparin aja langsung ke kantor nya

3:03Saya ketemu waktu di Jogja

3:05Saya ketemu waktu di

3:07Manila

3:09Oke, ya terima kasih ya

3:11Buat Domensia, buat sponsor

3:13Episode kali ini

3:15Oke, malam ini kita akan membahas

3:17Kembali tentang Astro

3:19Untuk yang keberapa kali ya

3:21Untuk yang 3 kali ya

3:23Kedua

3:25Kedua

3:27Kali yang pertama kan cuma

3:29Astro in general

3:31Astro in general, oh iya

3:33Yang kedua baru What's New in Astro kan

3:35Sebenarnya kan, yang baru-baru

3:37Dari versi 4

3:39Ke versi 5, 4

3:41Doang Astro, emang ada lagi

3:45Yang

3:47Enggak ada ya

3:49Cuma satu ya, baru satu ya

3:51Oh iya

3:53Astro update itu

3:55Enggak ada ya, yang baru di Astro 4

3:57Oh iya, yang baru di Astro 5

3:59Enggak ada ya, oh enggak ada

4:01Berarti baru satu ya

4:03Jadi dulu kita pernah bahas Astro

4:05Saat bahas

4:07Island architecture

4:09Ya itu juga masuk, jadi ini

4:11Menyempil ya

4:13Terus pas kita bahas, apalah misalnya

4:15Bahas tentang feed, apa feedcon

4:17Terus service-surveillance

4:19State of JS, kan pastinya banyak

4:21Topik Astro juga ya

4:23CSS Rap juga pakai Astro kan

4:25Oh iya bener

4:27Makanya kita nanya

4:29Tapi kita kebahas Astronya

4:31Pasti itu kan

4:33Terus

4:35CSS Rap

4:37Terus apa, coding agen

4:39AI coding agennya Google

4:41Jules

4:43Pakai Astro

4:45Oh, menurut teman-teman

4:47Kenapa Astro bisa populer ya

4:49Kenapa Astro bisa populer ya

4:53Cantumkan di kolom komentar

4:55Ya coba, coba

4:57Ada yang udah pakai atau ada yang

4:59Udah nyoba, terus pengalamannya

5:01Dimana, terus

5:03Kira-kira dibandingkan dengan framework lain

5:05Apa yang membuat Astro

5:07Apa ya, kayak jadi

5:09Favorit akhir-akhir ini ya

5:11Jadi favorit

5:13Karena bosan dengan teyak

5:15Nggak sih, sebenarnya kalau populer

5:19Bisa dong

5:21Semua UI library bisa

5:23Nggak, cuma tiga kan, nggak semua

5:25Ya, tiga sama

5:27Astro diangkat

5:29Agak relatif ya

5:31Sebetulnya kalau buat kerja

5:33Konteks kerja, ya kalau menurut gue sih

5:35Masih

5:37Belum menyamai Next.js

5:39Misalnya

5:41Gampangnya kalau di kantor

5:43Yang pendeknya

5:45Establish lah, bukan agensi

5:47Kalau agensi mungkin projeknya karena banyak

5:49Dan kota ganti bisa nyoba lebih

5:51Relatif, lebih bisa nyoba hal baru ya

5:53Cuma kalau misalnya bukan

5:55Di agensi

5:57Pakai Astro, buy-in-nya mungkin

5:59Belum sekuat

6:01Next.js kecuali emang

6:03Yang perusahaan yang

6:05Teknologi orientif ya, kayak kalau

6:07Kerja di Google gitu

6:09Ya mungkin buy-in-nya lebih gampang ya

6:11Karena produknya juga kan banyak

6:13Misalnya di Google itu

6:15Yang pakai Astro kan

6:17Jules, terus

6:19Firebase kalau nggak salah, dokumentasinya

6:21Atau punya block page-nya

6:23Firebase

6:25Itu kan kayak produk yang terpisah kecil-kecil

6:27Jadi mungkin dapetin buy-in-nya relatif

6:29Lebih gampang ya

6:31Dan di tempat kerja

6:33Para developer-nya up-to-date

6:35Sama trend, nah tapi kan

6:37In reality, dalam kehidupan nyata

6:39Nggak semua tempat kerja

6:41Orang-orangnya kayak kita lah

6:43Kesaranya yang emang

6:45Tertarik coba

6:47Teknologi-teknologi

6:49Baru terus, jadi sebenarnya ya

6:51Kalau soal kebularitas itu

6:53Astro sudah nyediain lho

6:55Migrate from Next.js

6:57Migrate from many thing itu ada tuh

6:59Migrate from Eleventy

7:01Migrate from Gatsby

7:03Iya iya iya iya iya iya

7:05Boleh boleh boleh

7:07Dari kantor

7:09Kalau apa?

7:11Di apa?

7:13Di kiri, di kiri

7:15Menurut kiri

7:17Nah tuh banyak tuh

7:19Migrate dari Eleventy, Gatsby

7:21Pelikan? Pelikan ini?

7:23Oh Python

7:25Pelikan, Spellkit

7:27Migrate dari Fort WordPress saja ada tuh

7:29Oh iya benar

7:31Kan

7:33Apa? Eka juga

7:35Salah satu yang ngikutin Spellkit

7:37Dan Spellkit ikutin nggak Spellkit?

7:39Sempet kan ya

7:41Ngikutin cuma nggak intensi banget

7:43Nggak intensi ya? Terus kenapa tiba-tiba

7:45Berubah jadi favoritnya jadi ke

7:47Astro, bukan ke Spellkit lagi sekarang

7:49Alasannya apa sih?

7:51Ya karena versatile, sangat versatile

7:53Nah apa?

7:55Nah kita kan kalau yang episode ini

7:57Kesempatan nya apa? Kebahas soal server

7:59Site-nya ya, jadi

8:01Ya, sisi server-nya

8:03Framework group kan makin lama makin

8:05Apa ya? Makin luas kayak runtime

8:07Nambah banyak

8:09Di sisi server-nya

8:11Terus di sisi

8:13Frontend-nya juga jelas

8:15UI Library dan UI Framework

8:17Bukan tampak banyak

8:19Nah Astro itu termasuk yang

8:21Relative bisa

8:23Versatile banget, kayak bisa

8:25Adaptasi ke

8:27Macam-macam kebutuhan itu

8:29Itu yang belum ditemuin, ya Relative

8:31Belum ditemuin di berbagai framework

8:33Meta framework lainnya sih

8:35Jadi kayak contoh gampangnya tadi

8:37Misalnya kalau migrate dari

8:39Next.js UI komponennya kan

8:41Udah pake React semua tuh

8:43Nggak usah kalau

8:45Utip sisi Frontend-nya

8:47Relative nggak perlu banyak perubahan

8:49Nah, terus

8:51Kalau yang server-side-nya

8:53Nanti kita bahas lebih detail kan

8:55Apa sih yang teori bisa jadi

8:57Express-nya versi jaman sekarang

8:59Cuma kalau dari Frontend

9:01Ya itu, mau dari swell kit

9:03Dari swell kit kan berarti otomatis

9:05Semua komponennya pake swell

9:07Nah, itu nggak perlu ada pekerjaan ekstra

9:09Bahkan mau nyampur

9:11Mau nyampur berbagai

9:13Komponen, misalnya ada satu tim yang

9:15Somehow ngerjain pake React

9:17Ada tim lainnya

9:19Bikin komponennya pake swell

9:21Nah, itu semua harus digabung dalam satu proyek

9:23Astro bisa

9:25Itu lumayan menunjukkan

9:27Ya, jadi nggak

9:29Kalau menurut itu sih memuaskan

9:31Bikin semua macem-macem

9:33Genis developer, ya itu

9:35Developer, swell, terus mau pake

9:37Apalah, mau pake, ya dengan segala

9:39Ecosystem-nya ya, mau pake tailwind

9:41Boleh, orang performance yang

9:43Apa, peduli banget sama performance

9:45Bisa pake yang cuma .Astro

9:47Yang by default

9:49Tanpa pake inside Java Strip sama sekali

9:51Jadi kayak bisa bikin

9:53Banyak pihak sih

9:55Oke, oke

9:57Tapi menarik juga ya, maksudnya

9:59Waktu beberapa episode yang lalu

10:01Kan kita sempat

10:03Interview tim Google

10:05Yang bikin CSS rap kan

10:07Mas Adam

10:09Sama

10:11Bramus

10:13Bramus

10:15Vandem

10:17Terus

10:19Sebenarnya ini pertanyaan telat sih

10:21Harusnya ditanyakan ke mereka ya

10:23Kenapa mereka lebih memilih Astro dibandingkan

10:25Kalau dulu ingat nggak

10:27Ada loh dia jawab

10:29Ada ya

10:31Kita tanya ya

10:33Ada, dia jawab

10:35Kita bahas

10:37Kita bahas ya

10:39Oh nggak inget ya alasannya kenapa

10:41Itu tadi

10:43Yang mereka bisa lulis dengan

10:45Routingnya

10:47Routing dan lain-lain

10:49Mereka bisa lulis simple CSS

10:51Jadi maksudnya

10:53Tak perlu di

10:55Mereka pakai .Astro

10:57Astro Komponen

10:59Yaudah Java Strip aja

11:01CSS nya Vanilla CSS

11:03Tapi semua otomatis

11:05Ya maksudnya diolah

11:07Pake teknologi ya

11:09Standard default ya

11:11Karena mereka dari perspektif mereka

11:13Sebagai orang yang root-end banget kan

11:15Tapi dengan

11:17Kenyamanan kemudian meta framework modern

11:19Jadi ya itu tadi

11:21Maksudnya bisa mengakomodasi

11:23Memfasilitasi berlalu macam-macam jenis developer sih

11:25Flexibel ya

11:27Flexibel ya

11:29CSS berarti itu kan minimal

11:31Java Strip banget nggak ada

11:33Bahkan katanya Java Strip itu hanya untuk

11:35Kalau nggak salah hanya

11:37Vector fitur yang minor

11:39Dan semuanya CSS

11:41Ya sekaligus

11:43Showcase bahwa CSS sekarang udah bisa

11:45Melakukan banyak hal gitu

11:47Yang dulu butuh Java Strip untuk

11:49Animasi ini untuk

11:51State itu tapi sekarang sudah bisa

11:53Dihandle sama CSS kan ya

11:55Salah satunya yang kita bahas minggu lalu

11:57Kayak bikin karussel aja udah bisa full

11:59Semuanya CSS Vanilla gitu kan

12:01Yang kalau dulu harus pakai library

12:03Atau harus pakai Java Strip

12:05Mungkin itu juga ya alasannya ya

12:07Karena kan

12:09Maksudnya nulis CSSnya jadi gampang

12:11Kayak mereka tuh beneran nulis CSS

12:13Beneran

12:15Di import, di scope

12:17Pohnya diolah sama Astro

12:19Cuma maksudnya nggak harus

12:21Apalah install-install apa

12:23Udah beneran function

12:25Iya yang paling make sense sih

12:27Kalau dipaksain pakai

12:29Angular

12:31Dungkir balik kali mereka ya

12:33Ya kalau Angular kan

12:35Biar bisa import misalnya

12:37Import file CSS

12:39Harus install loader misalnya atau

12:41Angular nggak bisa cuma nulis

12:43Style tag apa

12:45Di dalam komponenya sendiri bikin

12:47Style literally style tag

12:49Terus dalamnya vanilla CSS

12:51Ya nggak bisa kan, harus ya ada caranya

12:53Atau harus cari-cari dulu

12:55Loader atau apalah

12:57Betul, betul, betul, oke, oke

12:59Iya

13:01Ini apa namanya

13:03Teman-teman yang menonton

13:05Udah ada yang pakai Astro

13:07Belum sih, kalau kita

13:09Kayaknya baru mengagumi dari jauh ya

13:11Belum pernah bener-bener pakai buat

13:13Production, buat produk

13:15Mainan di lokal saja

13:17Hanya sekadar tahu

13:19Sekadar tahu

13:21Jadi kalau ditanya sama

13:23Teman-teman di DevFest tentang Astro

13:25Minimal bisa ngejelasin

13:27Konsep dan pola pikir

13:29Astro-nya

13:31Ya, yang saya alami adalah

13:33Kok pernah

13:35Di production

13:37Di production, tapi di suatu

13:39Project yang kecil banget

13:41Jadi kayak itu nggak mengingatkan suatu

13:43Project pake Naxx atau apa

13:45Tapi Naxx vertil apa, terus kita

13:47Semua nggak dengar

13:49Tapi komponennya kan view semua

13:51Ya udah, pokoknya akhirnya nggak pakai Astro

13:53Cuma maksudnya itu kayak

13:55Itu project juga

13:57Kita cuma kayak memaintain

13:59Tapi nggak bakal nambah fitur lagi

14:01Cukup jadi wanti-wanti sih

14:03Pas dapet lagi itu pokoknya ke project yang kita harus

14:05Maksudnya tim gue harus

14:07Ngerjain secara aktif

14:09Nambah fitur dan lain-lain

14:11Itu nggak boleh pakai

14:13Teknologi baru yang

14:15Masih, maksudnya apa

14:17Harus disepakati dulu ya

14:19Harus disepakati ya

14:21Bisa lakukan

14:23Tapi kalau khusus untuk kasus itu

14:25Itu kasusnya

14:27Sebuah waktu project deadline

14:29Dan emang actualated

14:31Gak akan diapapain lagi, jadi nggak apa-apa

14:33Dan itu juga

14:35Setelah 2 atau 3

14:37Dan itu nggak pernah di update lagi

14:39Sebuah udah dikunci aja versinya

14:41Mau nya itu jalan, udah fix

14:43Ya nanti suatu hari kalau

14:45Note-nya berubah ya udah

14:47Kekusingan gue

14:49Tapi kalau buat sekarang nggak pernah diapapain lagi sih

14:51Jadi kalau apa

14:53Di professional pernah

14:55Terus kalau buat voids

14:57Pernah juga dulu banget, tapi

14:59Pas masih, ya itu jaman astro 2

15:01Astro 2 sama yang pataton

15:03Terus gue menang 1 price

15:05Tapi barengan sama peserta lain

15:07Jadi kayak ada 1 posisi

15:09Dikasih buat 2 orang

15:11Jadi setengah

15:13Setengah

15:15Oh kalau dapat swag, berarti swagnya dibagi 2 gitu ya

15:17Digunting

15:19Gak dapat swag

15:21Gak dapat swag

15:23Ya berarti sama ya

15:25Mas Rehan juga nyoba-nyoba ngulik aja ya

15:27Kita juga baru nyoba-nyoba ngulik

15:29Pengen migrasi blog

15:31Males ya, migrasi melulu

15:33Enggak bikin artikel

15:35Enggak bikin website teribadi gitu

15:37Lebih memilih

15:39Bikin apa, pakai yang udah ada

15:41Tapi lebih produktif untuk

15:43Nulis aja, daripada harus ganti lagi

15:45Males banget

15:47Dan teknologinya pakai, apalah, Nexus, Gatsby

15:51Stack management-nya, apa

15:53Stack atau apalah

15:55Stack

15:57Tapi isinya cuma 1 blog

15:59Fellowworld

16:01Oh dulu pernah pakai Gatsby

16:03Lebih sibuk

16:05Bungkar pasang

16:07Web site

16:09Banding isi website-nya sendiri

16:11Betul, dulu pakai Gatsby

16:13Pernah, dan kemudian menyesal

16:15Bahwa harus GraphQL

16:17Aduh males balik deh

16:19Cari yang lebih simpel

16:21Tapi ingat gak sih jaman dulu itu

16:23Kalo misalnya udah pakai

16:25Udah bisa pakai

16:27React, Gatsby

16:29GraphQL, Apollo

16:31React Helmet

16:35Segala macam itu

16:37Hydration

16:43Itu kayak pakai semua

16:45Kekompleksitas itu

16:47Sampai puyeng pakainya itu

16:49Merasa keren

16:51Jadi rockstar gitu ya

16:53Dabu banget gue ya

16:55Javascriptnya jadi 6 mega

16:57Keren lho

16:596 mega

17:03Itu semua, tapi karena baru belajar

17:07Bukan ngerasa keren sih

17:11Sebenernya gak bisa

17:13Jadi bisa kayak checklistnya nambah panjang

17:15Kayak ngerasa seneng karena checklistnya

17:17Jadi panjang aja sih

17:19Kan pertama kalinya belum kerasa

17:23Itu tadi yang jadi 6 mega

17:25Tidak punya trade-off-nya

17:27Atau kekurangannya, semua kan baru kerasa kan

17:29Lama-lama baru kerasa

17:31Maksudnya pas nyentang checklist itu seneng

17:33Terus cuma pas udah jalan

17:35Pas nambah fitur

17:39Yang besar baru kerasa

17:41Belum lagi mau

17:43Install GTM aja harus pakai

17:45Dangerously set inner HTML

17:47Dangerously set HTML

17:49Dangerously

17:51Oke kita kembali ke Astro ya

17:55Jadi yang saya alami

17:57Sebenernya bukan

17:59Penggunaan Astro, tapi lebih ke

18:01Beberapa tahun yang lalu

18:03Ketika Express Stagnan

18:07Nggak ada update

18:09Baru update baru-baru ini kan

18:11Beberapa bulan terakhir kan

18:13Ngeluarin versi 5

18:15Yang mungkin dari versi 4-nya udah 2-3 tahun

18:17Kayak Stagnan

18:19Akhirnya kan kita penasaran

18:21Ini Express masih di maintain gak sih

18:23Kalau di maintain sih masih

18:25Maksudnya ini aktif gak sih projectnya

18:27Kita mau cari deh alternatifnya

18:29Buat web server gitu

18:31Untuk Node.js

18:33Munculah alternatif kayak Hono

18:35Saya udah pernah coba Hono

18:37Terus apa lagi ya

18:39Ada banyak sih sebenernya

18:41Kalau mau lari ke Dino juga bisa

18:43Pakai Boon juga bisa, ada banyak kan

18:45Cuman yang

18:47Kemaren-kemaren

18:49Saya perhatikan ternyata

18:51Astro juga bisa dijadikan

18:53Web server aja

18:55Hanya untuk API gitu

18:57Hanya untuk API

18:59Jadi cuma dipakai untuk routing-nya

19:01Saja, sementara

19:03Dengan yang gak dipakai

19:05Itu

19:07Itu membazir gak sih

19:09Efektif gak sih

19:11Maksudnya dia kan udah include sama front-end kan

19:13Tapi kalau kita cuma pakai

19:15Back-end-nya doang itu

19:17Sama aja sih Node.js juga begitu ya

19:19Kita bisa juga pakai buat back-end-nya doang ya

19:21Node.js memang buat

19:25Node.js memang buat back-end

19:27Next.js

19:29Kita pakai Next

19:31Untuk back-end aja

19:33Pake array-nya gitu

19:35Maksudnya yang dipakai kan lebih utamanya untuk routing-nya kan

19:37Iya routing-nya

19:39Routing-nya doang kan

19:41Gak masalah

19:43Gak masalah ya

19:45Ketimbang maintain sendiri

19:47Ketimbang maintain sendiri

19:51Kenapa gak sih

19:57Gue mikirnya kenapa dulu

19:59Kenapa cuma buat API

20:01Kenapa

20:03Kan pasti ada

20:05Lesenya kan

20:07Misalnya yang teorinya adalah

20:09Javascript developer

20:11Ya kan

20:13Kalau orang yang bikin API itu

20:15Bolang atau RAS atau

20:17Blah-blah-blah developer gak mau nyentuk

20:19Rondak ekosistem Javascript sama sekali kan

20:21Tapi in this case kan

20:23Berarti

20:25Harus pakai Javascript atau TypeScript

20:27Karena front-end-nya

20:29Bagian depannya

20:31Hanya mau pakai Next.js

20:33Jadi back-end-nya pakai Astro

20:35Back-end-nya pakai Astro

20:37Kok jadi Astro

20:39Siapa tangguh

20:41Eh banyak loh yang begitu

20:45Masa

20:47Banyak loh

20:49Jadi banyak yang menganggap Next.js itu adalah

20:51Front-end framework

20:53Kita butuh server lagi untuk

20:55Serve API

20:57Serius-serius

20:59Serius

21:01Jadi Next.js itu dianggap

21:09Sebagai front-end

21:11Jadi kita butuh

21:13Entah itu Laravel, entah itu Astro

21:15Atau Express

21:17Untuk jadi back-end

21:19Menyediakan API

21:21Jadi si Next.js itu baca

21:23API dari si server ini

21:25Serius

21:29Nah itu developer yang bakal digantiin sama

21:31AI

21:33Kalau AI kan tinggal nge-crawling dokumentasi

21:35Bener kan

21:37Aku tak bisa ber-work

21:43Ada kontek gini

21:45Tersusnya karena penajur adek

21:47Kayak masalah gak sih

21:49Yang udah ada

21:51Sebenernya back-end dari

21:53Express itu gak boleh

21:55Diutang-atik dari cara mendehunya

21:57Udah mendeh, udah pergi semua itu

21:59Bikin, nah terus

22:01Butuh front-end yang modern

22:03Banyak client side-chain

22:05yang kompleks lah

22:07Yang pusing kalau bikin express, bikin baru

22:09Kalian bisanya apa? Nanya ke

22:11Orang yang sekarang disini kan

22:13Next.js

22:15Kalau karena konstrain yang itu kan

22:17Lebih ke apa ya

22:19Bukan perkara teknis

22:21Tapi, perkara circumstances kan

22:23Perkara keadaan, cuma kalau misalnya

22:25Ada developer yang bikin project baru

22:27Yang gak tau misalnya

22:29Next.js atau astro

22:31Bisa buat API endpoint ya

22:33Itu beda kan system

22:35Itu digantiin

22:37AI aja lah

22:39Mungkin ada faktor ini

22:41Kan di website-nya Rie

22:43Kan sekarang create track app udah gak ada

22:45Digantikan dengan Next kan

22:47Mungkin orang-orang yang

22:49Teman-teman yang baru belajar React

22:51Oh kalau mau pake React

22:53Pake Next.js aja

22:55Buat supaya untuk bundling

22:57Untuk routing dan lain-lain

22:59Gak perlu install-install lagi, udah jadi satu paket

23:01Seperti create track app

23:03Gitu, padahal sebenernya ada pilihan lain

23:05Kayak pake fit lah

23:07Fit ya

23:09Lebih simple

23:11Tapi kan di website-nya sekarang ada gak sih

23:13React itu

23:15Dia merekomendasikan apa?

23:17Kayaknya ada gak

23:19Jadi yang direkomendasikan secara prominent banget

23:21Sebagai replacementnya React.js

23:23Emang

23:25Next.js

23:27Tapi kayak kalau scrolling

23:29Bawa sepenyembelin film

23:31Sebenernya bisa lo pake fit

23:33Pake fit dan React aja

23:35Ada dua yang dia

23:37Direkomendasikan, Next.js sama Remix

23:39Remix satu lagi

23:41Oh Remix masuk

23:43Yang direkomendasikan adalah

23:45Full Step framework kan

23:47Sama Remix

23:49Itu kan setelah type juga kan

23:51Maksudnya apa?

23:53Bentar lagi berubah dong

23:55Remix gak mau pake React lagi

23:57Bentar lagi kan, mau ganti dia kan

23:59Dia mau

24:01Move away dari React ya

24:03Jadi yang

24:05Remix sekarang jadi

24:11Remix sekarang jadi

24:13React Router

24:15Yang Remix yang

24:17Yang sebelumnya itu

24:19Nanti bertransformasi jadi framework lain

24:21Begitulah

24:27Kadang-kadang kan ada juga teman-teman

24:29Yang baru belajar React

24:31Langsung ke Next.js gitu kan

24:33Jadi mungkin ya memang

24:35Mindsetnya ya gitu, oh kalau mau pake React

24:37Pakailah frameworknya Next.js gitu

24:39Jadi kepikiran itu front-end

24:41Tapi komunikasiinnya ya

24:43Dari dokumentasinya

24:45Kayak apa

24:47Tapi sebenernya ini bukan fenomena baru ya

24:49Dari dulu sih

24:51Itu pertama kali banget belajar

24:53React juga Gatsby

24:55Gatsby

24:57Mana yang fitur Gatsby

24:59Sebagai meta framework

25:01Mana yang fitur React

25:03Mana yang fitur JavaScript

25:05Javascript dalam hal ECMAScript

25:07Mana yang fitur Web API

25:09JavaScript ya implementasi

25:11Browser ke-4 ini

25:13Apa? Karena maksudnya

25:15Yang lebih menarik kan

25:17Ngulik dari starter site

25:19Dari contoh-contoh

25:21Contoh itu kan ya nggak apa

25:23Orang yang bikin starter

25:25Starter site dan bikin

25:27Contoh-contoh module itu

25:29Mereka udah paham perbedaan itu semua

25:31Tapi kalau yang baru belajar kan nggak bererti

25:33Bedainya jadi kayak harus ya pelan-pelan

25:35Sama lama dengan ngulik

25:37Ngerti ngebedainya

25:39Cuma di awal pasti ada kerancuan

25:41Kayak gitu sih

25:43Hmm

25:45Ini ada pertanyaan bagus nih

25:47Astro support markdown

25:49Apakah highlight code-nya juga

25:51Include?

25:53Ada dong pakai Shiki bisa

25:55Oh harus insta lagi kan

25:57Maksudnya di

26:01Kalau SSG ya build time

26:03Kalau SSR ya pokoknya di server

26:05Pokoknya nggak dipersing

26:07Di client yang tau kan

26:09Highlighting yang

26:11Warna-warninya itu kalau di client site kan

26:13Suka bikin apa ya

26:15Itu ya

26:17Copy and paste kan pokoknya bikin core website

26:19Lagi lag nah ini nggak aman

26:21Aman ya

26:23Ada

26:25Ada official integrationnya

26:27Namanya markdown

26:31Mana linknya

26:33Oh itu format

26:35Kayak

26:37Format kayak MDX

26:39Gitu deh ternyata

26:41Oh

26:43Ini buildnya dia ya

26:45Markdown dia

26:47Markdown

26:49Ada MDX juga bisa

26:51Juga ada

26:53Bisa ngerender

26:55Astro component ya

26:57Iya

26:59Kalau markdown kita ya kayak MDX

27:01MDXnya juga aja

27:03Kayak MDX ya

27:05Menarik

27:07Oke

27:09Nah

27:13Mas Rehan saya penasaran nih

27:15Action-nya Astro sama kayak

27:17Solid start kayaknya nggak bakal

27:19Solid start itu

27:21Action-nya kenapa

27:23Apa yang bikin bagus? Saya penasaran

27:27Apakah ada framework yang fitur

27:29Policy include seperti

27:31Laravel

27:33Policy include itu

27:35Apa ya kita nggak tahu

27:37Laravel

27:39Policy

27:41Include

27:43Apa

27:45RBC

27:47Control access

27:49Access control

27:53Control access

27:55Nggak ada sih kalau

27:57Astro ya nggak ada sih

27:59Nggak ada

28:01Kalau yang mau sampai sekompleks

28:03Laravel pakai Phoenix kan

28:05Kemarin kita bahas Phoenix

28:07Phoenix

28:09Kalau JavaScript

28:11Ada nggak ya yang seperti

28:13Meteor

28:15Kompleks kan itu

28:17Ya udah angular

28:19Angular dah jelas dah

28:21Emang ada? Oh ya ada kali ya

28:23Ya

28:25Angular kan satu ekosistem sendiri

28:27Iya

28:29Termasuk juga ORM-nya

28:31ORM-nya pilih sendiri terserah

28:33Kalau di Astro itu biasanya milihnya

28:35Drizzle

28:37Pake Drizzle bisa Prisma bisa

28:39Prisma

28:41Bebas

28:43Tapi dia ada data base-nya nggak?

28:45Ada ada

28:47Astro ada data base

28:49Connection-nya

28:51Connection-nya aja

28:53Bukan ORM-nya kan

28:55Bukan

28:57Adapter-nya

28:59AstroDB

29:01Ya

29:03Data base

29:05Oh ada

29:07Data base

29:09Itu

29:11Official integrations

29:13Tadi yang di official integrations

29:15Di doc-nya pergi ke doc-nya tadi

29:17Oh ini

29:19Integrations

29:21Sorry integrations

29:23Ke bawah

29:25Lagi DB

29:27Ini

29:29AstroJSDB

29:31Installation

29:33Kemudian add DB

29:35Integration DB

29:37Astro ini-nya loh

29:39Astro

29:41Fully managed SQL

29:43Data base salah ini service-nya dia

29:47Ini apa? Ini guide

29:49Service-nya dia kayaknya

29:53Bukan

29:55Mereka nggak nyadikan hosted service

29:57Bukan

29:59Jadi sebelumnya

30:01Dia dulu nyadikan hosted service

30:03Sekarang udah nggak kita bisa connect

30:05Udah nggak ada ya

30:07Apapun

30:09Mereka udah sunset yang hosted di

30:11Mereka

30:13Nah ini enak sih cuma ininya

30:15Tetep ada jadi kayak

30:17Ya nggak full ORM

30:19Cuma untuk connect data base

30:21Apa? Nanti dijelasin kok

30:23Scroll aja ke bawah

30:25Tapi tetep

30:27Kita butuh ORM ya

30:29Kalau mau ya

30:31Kalau mau pakai ORM, kalau nggak langsung query di sini

30:33Oh ini udah

30:35Semacam ORM

30:37Define table

30:39Define column

30:41Ini udah jadi ORM malah ya

30:43Iya

30:45Cuma kalau nggak mau pakai itu

30:47Udah mau

30:49Apa, mau pakai Prisma atau

30:51Lain-lainnya derisulsi bebas-bebas

30:53Oh

30:55Berarti ini termasuk ORM ya berarti ya

30:57Nah tuh scroll ke bawah sih

30:59Ya ORM

31:01Simple kali ya

31:03Nah to libsql

31:05AstroDB can connect to any

31:07Local libsql database

31:09Or to any server that

31:11Is libsql remote protocol

31:13Jadi kalau yang gampang dan gratis

31:15Mau bikin aja di kursor

31:17Udah copy aja copy URL database

31:19Sama copy token yang di environment variable

31:21Udah beres tuan

31:23Libsql ini

31:25Spinoffnya

31:27Sqlite ya

31:29Yang dulu kita pernah bahas itu loh

31:31Jadi ini Sqlite

31:33Itu kan open source

31:35Tapi nggak menerima

31:37Isu atau request feature

31:39Open sama sekali

31:41Open source dalam arti

31:43Source code-nya

31:45Tidak terlalu gitu

31:47Tapi nggak terima masukan apapun

31:49Jadi kalau buat apa

31:51Jadi si

31:53Ini sih orang-orang dari TURSO

31:55Sama maintainer lainnya sih dari public

31:57Bikin yang namanya libsql

31:59Portnya Sqlite

32:01Hmm

32:03Oke

32:05Nah kita

32:07Nggak melencin mana-mana nih

32:09Tapi database

32:11Masih ada hubungan sih

32:13Ya kan server side

32:15Server side

32:17Nah ngomongin server side

32:19Berarti ada beberapa hal kan ya

32:21Yang bisa kita bahas ya

32:23Yang pertama adalah routing sistemnya

32:25Kalau kita mau pakai astro

32:27Artinya kita harus menggunakan

32:29Routing system

32:31Dengan gaya

32:33Filebase ya

32:35Filebase routing sistem

32:37File structure ya

32:39Ya jadi mengikuti folder ya

32:41Ya ada

32:43Mengikuti server foldernya

32:45Jadi apapun yang ada

32:47Di src/pages

32:49Dia akan menjadi halaman tersendiri

32:51Misalkan about

32:53Dia akan

32:55About.ts ya

32:57Maka dia akan jadi

32:59Tss ya

33:01Atau astro.astro

33:03Halaman kan

33:05Bisa txx bisa

33:07MD

33:09Markdown juga bisa ya

33:11Kalau kita mau

33:13Return JSON

33:15Bisa ada API route

33:21Ada ininya

33:23Wait namanya

33:25API route

33:27Oh bisa dynamic route juga

33:29Kalau misalkan kita mau

33:31Pakai by id

33:33Tapi model

33:35Bentukannya kaya gini nih

33:37Kalau yang udah

33:39Pernah pakai gates b

33:41Atau nxt ya

33:43Pasti udah

33:45Familiar lah ya

33:47Dan by default

33:49Belunya ini astro ini ssg only

33:51Static only

33:53Jadi tetap beraku sih

33:55Itu apapun yang di

33:57Folder pages

33:59Atau gotastro.txt

34:01Dengan atau tanpa

34:03Dynamic routing

34:05Itu ya built time

34:07Jadi html css biasa

34:09Itu

34:11Itu by default kaya gitu

34:13Cuma belakangnya

34:15Mereka ada

34:17Mengadopt si ssr juga

34:19Jadi ya itu

34:21Kalau ssr bisa bikin API endpoint

34:23Terus ya itu

34:25Ada kaya istimewanya

34:27Ada filter editor ya

34:29Cuma bisa di ssr

34:31Tadi ada res api

34:35Mas Riza

34:37Terus cara buat

34:41Ini namanya

34:43Bukan

34:45Parameter

34:47Maksudnya kita return json

34:51Saya mau bikin

34:53Satu route

34:55Yang writtennya json

34:57Misalkan ini ya

34:59src/pages/post

35:01Tapi posnya itu

35:05Isinya adalah

35:07Json list of

35:09Article

35:11Endpoints

35:15Ini ada-ada

35:17Topos

35:19Link ini gitu

35:21Bicet

35:25Ini ya

35:27Endpoints

35:29.json.ts

35:39Jadi

35:41/pages

35:43/nama file

35:45.json.ts

35:47Berarti nanti kita manggilnya data .json

35:49Ini ya

35:51Data .json

35:53Oke

35:55Nah ini kan penting ya buat server ya

35:57Kalau misalkan kita cuman

35:59Mau return

36:01Dalam bentuk json berarti

36:03Memungkinkan sekali

36:05Untuk menggunakan astro ya

36:07Tuh

36:09Gayu lebih jago daripada kita

36:11Tapi endpoint juga bisa

36:15Bisa berlaku buat

36:17Static ssg

36:19Bisa buat ssr

36:21Apa?

36:23Kalau static ya gak pernah berubah

36:25Json nya dibuild ya udah jadi json

36:27Ya file json

36:29Tapi ini bisa jalan di ini kan

36:33Bisa jalan di server side kan

36:35Oh iya pasti jalan di server side dong

36:37Bisa tapi open

36:41Jadi kalau pernah pakai swellkit

36:43Pasti familiar sama itunya deh

36:45Jadi export cons

36:47Export cons pre-render

36:49Sama dengan false

36:51Oh harus dikasih tahu dulu

36:53Jadi bisa hybrid

36:55Atau bisa dari astro config

36:57Jadi kalau mau misalnya

36:59Ssr semua

37:01Ya lupa lah berutnya apa

37:03Ya pokoknya

37:05Kalau config ya berarti sama semua

37:07Tapi kalau misalnya mau apa

37:09Customize by page by round

37:11Ya itu di round nya

37:13Export cons pre-render sama dengan

37:15True atau false

37:17Okay

37:19Menarik menarik

37:21Berikutnya lagi

37:25Kalau ngomongin server pasti ada

37:27Middleware ya

37:29Kaya request sama response kan

37:31Ini ternyata

37:33Udah pasti lah ya karena server render pasti ada

37:35Request ya dan bisa

37:37Return response

37:39Response nya ini juga menggunakan web

37:41Standard ya

37:43Standard gak dimanggil patch sendiri

37:45Ya seneng lah

37:47Tidak ada extra

37:49Komponen

37:51Jadi nih

37:55Murni menggunakan javascript

37:57Vanilla ya, response ini

37:59Adalah objek dari javascript ya

38:01Jadi gak perlu install

38:03Apapun, jadi gak ada dependency

38:05Server endpoint

38:09Udah point nya kita bagus disitu kayak status code nya

38:11Customize status code

38:13Atau timeline nya ya

38:15Semuanya disitu

38:19Itu tadi mas Riza

38:21Scroll sedikit ke atas

38:23Lagi lagi

38:25Lagi lagi lagi

38:27Nah itu export cons pre-render

38:29False

38:31Jadi gak bisa di pre-render ya

38:33Ya

38:35Jadi gak di cash

38:37Nah ini

38:39Kita kalau mau bikin CRUD

38:41Delete yang model nya kayak gini ya

38:43Jadi ini

38:45Hanya untuk CRUD aja

38:47Yang berdasarkan ID

38:49Yang diberikan

38:51Misalkan 0123

38:53Terus dia akan masuk ke params

38:55Params.id

38:57Get product dari database

38:59Entah apapun itu

39:01Kemudian dia akan return

39:03Kalau gak ada 404

39:05Kalau ada dia akan return 200 beserta

39:07Datanya

39:09Tapi gak ada schema

39:11Harusnya ada schema lagi

39:13Iya

39:15Kalau schema kalau kayak mau bikin

39:17Oh biar type same

39:21Ada fiturnya

39:23Zot

39:25Namanya Astro actions

39:27Hmm

39:29Namanya Astro actions

39:31Ya nanti selesai ini dulu

39:33Kalau pos gimana ini?

39:35Ini kan jack doang

39:37Function pose gitu

39:39Oh gitu ya

39:41Ada contohnya?

39:43Ada

39:45Ini HTTP methods

39:47Metode apapun lah

39:49Ya apapun yang nilai

39:51Get host, delete, put

39:53Ya standar lah

39:55Kalau yang udah pernah pake socket, next.js

39:57Pasti udah kurang lebih

39:59Udah familiar ya

40:01Naham bentuknya

40:03Oh

40:07Oke juga nih

40:09Jadi mau bikin

40:11Back end-nya pake ini mas

40:13Iya, mendingan kesini aja ya

40:15Iya, STS jadi port-end doang

40:17Terus, apa, masih

40:23Buat skrper and points ini

40:25Enaknya tuh

40:27Astro punya helper buat cookies

40:29Itu helpful banget

40:31Helper buat cookies

40:33Gimana tuh?

40:35Gimana tuh?

40:37Bentar nyari dulu ya

40:39Helomannya yang mana

40:41Ya intinya memudahkan buat set, delete, get

40:43Pull piece

40:45Cookie kan strict ya

40:47Cape itu nge-parsing-parsingnya

40:49Mau nya nge-set service-nya

40:51Mat-nya kayak gimana

40:53Karena string ya gak bisa

40:55Pake IntelliSense yang

40:57Otomatis ngisi

40:59Nah, bentar

41:01Pull piece

41:03Ya intinya ada semacam

41:05Astro cookies

41:07Di private chat

41:09Astro cookies dot

41:13Blah-blah-blah

41:15Oh

41:19Enak sekali

41:23Nah, apa

41:25Scroll aja terus ke bawah

41:27Yaitu contoh penggunaannya

41:29Nah, atas lagi dikit

41:31Untuk lebih detail

41:33Astro dot cookies

41:35Linknya diklik aja

41:37Nah, itu ada cookies dot get

41:41Set

41:43Set itu kayak yang

41:45Ada option

41:47Nah, ada cookie features-nya

41:49Itu MaxH, HTTP only

41:51Enak banget, auto-fill kan

41:53Tinggal kontrol

41:55Pas-pasi, langsung muncul semua

41:57Karena ada typescript

41:59Oh, iya, iya

42:01Wah, seru nih

42:03Boleh, boleh, boleh

42:07Oke, yang juga

42:09Yang ini bisa dipakai dari

42:11Astro page component juga

42:13Jadi misalnya pages slash

42:15About dot astro atau apapun

42:17Apapunnya routing component

42:19Tinggal baca aja

42:21Astro dot cookies misalnya kita mau apa

42:23Apalah nge-check

42:25Settingan dirt node

42:27Nge-check apalah login atau apa

42:29Ya, bisa dibaca dari

42:31server-side component dot astro

42:33Tapi nggak bisa dari UI

42:35Component ya, nggak bisa dari

42:37React atau Svelte

42:39Atau lain-lainnya langsung

42:41Ya, kalau mau dioper harus dari dot astro

42:43I see

42:47Oh, bisa ini juga, bisa integrasi

42:49Sama back-end lain, kayak Hono atau Elysia

42:51Kalau itu belum pernah

42:55Belum tahu

42:57Nah, berikutnya

43:03Tadi kan udah, kita udah dapet

43:05Routing-nya, mau pakai

43:07Mau bikin API juga bisa

43:09Mau main-main cookies juga bisa

43:13Data fetching

43:15Data fetching-nya pakai apa disini?

43:17Itu ada, tuh, tuh

43:19Tuh, tuh, tuh

43:23Ini nggak diakal-akalin sama

43:26Astro

43:28Kalau NSJS

43:30Kalau NSJS kan dia ada kitchen

43:32sistemnya kan, ya

43:34Di fetching-nya kan

43:36Ini adalah

43:38KTM L2-nya

43:40KTM L2-nya

43:42Webstandard, webstandard ya

43:44Ya, bawaan runtime

43:46Kalau di server-side

43:48Ya, kan sekarang udah ada

43:50Ya, satu bun, udah punya fetch juga

43:53Ya, ya

43:55Relatif dikit hal baru yang perlu

43:57Di pelajarin ya, selain tadi

43:59Apa, selain struktur routing ya

44:01Selain file-nya namanya apa, ditaro mana

44:03Isi kodingannya

44:05Relatif dikit yang harus dipelajarin kan

44:07Kalau kita lihat, misalnya kita developer yang

44:09Udah pernah pakai framework lain

44:11Oh, langsung bisa

44:13Yang gue suka, cara konsep

44:15Menulis kodenya tuh

44:17Kayak ada dash-dash-dash itu

44:19Di batas, ini lho

44:21Area business logic, dan di bawah itu

44:23Ini lho area UI

44:25Gue suka itu

44:27Iya, mau CSS juga bisa ditambahkan

44:31Di sini langsung ya

44:33Di bawahnya, style

44:35Bikin style text

44:37Kan kalau kayak React kan

44:39Acakadu semua

44:41Jadi satu semua ya

44:43Kan React itu kan harus dari

44:45Function, return apa, komponennya itu

44:47Return, return komponennya

44:49Iya, mau

44:51Mau apa, namanya

44:53Mau di looping, harus menggunakan

44:55Harus ada return-nya, jadi harus pakai map

44:57Gitu kan

44:59Jadi banyak

45:01Banyak indentasi

45:03Si astro-komponen ini

45:05Kemisahannya adalah

45:07Kayak yang dibahas mas Dan Abramov

45:09Di blogpost-nya kemarin

45:11Yang kita bahas, jadi yang di front-letter itu

45:13Yang ada dash-dash-dash 3 kali itu

45:15Di atas itu dunia server

45:17Itu gak masuk ke client

45:19Sama sekali

45:21Jadi apapun yang terjadi di atas itu

45:23Terjadi di server

45:25Persis kayak PHP

45:27Persis kayak PHP

45:29Kalau kita yang gak

45:31Sadar, maksudnya

45:33Gak nyadar tentang

45:35Bedain itu

45:37Kan di atas itu

45:39Ada await response.json

45:41Kalau ada await sesuatu

45:43Di process yang lama

45:45Berarti ya kosong

45:47Belum render apa-apa, itu kan

45:49Terjadi di server

45:51Implikasinya kalau orang

45:53Memakain kopas-kopas tanpa

45:55Perjalanan kerjanya

45:57Si astro itu

45:59Gadgeteer-nya, caveat-nya

46:01Kayak gitu, kalau misalnya ada

46:03Process yang berat, patching yang lama

46:05Data yang berat, async

46:07Semua gak akan ketunda

46:09Ketundanya di server, gak ngirim apa-apa

46:13Oke

46:15Oke, berarti

46:17Untuk data patching

46:19Semuanya terjadi di sisi server

46:21Di client bisa gak?

46:23Iya boleh di server, bisa dong

46:25Bisa dan enak banget

46:27Jadi kalau di atas

46:29Itu kan kayak di contoh patch

46:31Di atas, berarti itu di server

46:33Tapi kalau misalnya di HTML-nya

46:35Di area bawah

46:37Kita lulus script, apa

46:39Script tag biasa

46:41Oh, script javascript

46:43Itu dia akan jadi client-side

46:45Oh

46:47Oke, oke

46:49Dan bisa pakai

46:51Type script juga otomatis

46:53Ditransfile atau

46:55Dibuild jadi javascript biasa

46:57Cuma kalau di bawah, pokoknya jalannya

46:59Di client-side, jadi kalau misalnya

47:01Itu gimana kita ngaturnya aja, apa yang

47:03Harus terjadi di server, apa yang

47:05Harus terjadi di client dan semua bisa

47:07Dijalanin di

47:09Satu komponen dengan

47:11Syntax yang familiar

47:13Yang standar

47:15Client load itu artinya

47:17Client-side rendering ya?

47:19Jadi

47:23Client-side javascriptnya itu

47:25Opt-in by default itu semua

47:27Gak pakai

47:29Client-side javascript, even

47:31Bahkan kita mau ngerender

47:33Komponen reaksual segala macem

47:35Ya di render HTML biasa

47:37Tapi kita opt-in-nya pakai

47:39Directive client

47:41Bisa macem-macem

47:43Ada setting yang client.load gitu

47:45Dehydrate-nya di loading-nya

47:47Pas

47:49Load

47:51Terus bisa pas idle

47:53Jadi sebenernya di belakang layar itu pakai

47:55On idle itu

47:57Ya pokoknya

47:59Web API yang ngedetek pas

48:01Main thread-nya

48:0312.000 baru di loading

48:05Ada juga

48:07Client.visible

48:09Kalau ga salah, ya lupa namanya apapunnya

48:11Semacam itu, itu

48:13Dibalik layar pakai intersection

48:15Jadi kalau yang pixel

48:17Udah mau masuk layar

48:19Ya itu yang ini kan

48:21Island architecture kan

48:23Berarti kan

48:25Yang dia

48:27Benar mirip PHP

48:33Iya

48:35Kan kalau

48:37Teman-teman ngikutin

48:39Syntax FM

48:41Podcastnya Syntax FM

48:43Si Wes Bosz sama

48:45Scott Olinski

48:47Itu mereka punya pendapat

48:49Bahwa Node.js itu

48:51Meniru

48:53Arahnya itu menuju ke PHP

48:55Sebenernya

48:57Iya ngeliat apa namanya

48:59Pergerakannya, roadmap-nya gitu

49:01Itu kayak

49:03Emulasi apa yang dilakukan PHP

49:05Berapa tahun yang lalu, termasuk juga React

49:07Kalau teman-teman

49:09Ngikutin video awal-awal

49:11React, itu banyak

49:13Dicontohin kode PHP karena

49:15Di Facebook menggunakan PHP

49:17Jadi mereka familiar dengan PHP

49:19Makanya mereka mencoba

49:21Membangun framework

49:23Frontend framework yang

49:25Mereka familiar

49:27Itu PHP, jadi modelnya itu mirip

49:29Sebenernya

49:31Cuma ada kelebihan

49:33Kalau ekosistem JavaScript

49:35Bisa mundur mandir client, server

49:37client, server, kayak astro itu kan

49:39Tadi ada server

49:41Ya pun lah React juga

49:43Kalau PHP server ya server

49:45Iya

49:47Jadi kayak PHP tapi versi

49:49New and improved

49:51Iya itu dia

49:53Yang penting kan itu

49:55Nyontek boleh tapi harus lebih bagus ya, jangan sama

49:57Atau lebih jelek

49:59Itu sama, kalau PHP aja

50:01Betul

50:05Tadi kan ngomongin server

50:07Server island

50:09Island architecture

50:11Dan kalau nggak salah

50:13Di video kita sebelumnya yang tentang astro itu

50:15Mereka lagi

50:17Experiment dengan istilahnya

50:19Server island, jadi island

50:21Architektur tapi di sisi server

50:23Dan sekarang kayaknya udah ya, udah diimplementasi ya

50:25Server island

50:27On demand render

50:29Dynamic or personalized island

50:31Individually without sacrificing

50:33The performance of rest

50:35Of the page

50:37Ya kayak island architecture

50:41Tapi si island

50:43Sebelumnya kan

50:45Pemahaman island kita itu di hydrate

50:47Di client side kan, misalnya

50:49Satu halaman static

50:51Tapi mesti ada misalnya

50:53Comment section atau like button

50:55Yang di hydrate

50:57Karena butuh client side interactivity

50:59Nah ini mindset

51:01Apa cara mikir kayak gitu

51:03Tapi dipindahin ke server, buat apa

51:05Buat kayak hal-hal yang perlu

51:07Kukis atau authentication

51:09Atau mungkin sering berubah

51:11Dan lain-lain

51:13Jadi yang tadi Eka sempat

51:17Ceritain kalau ada await

51:19Kemudian di bawahnya ini

51:21Akan jadi halaman putih

51:23Blank, berarti bisa

51:25Diakalin pakai ini gitu

51:27Betul, itu solusinya

51:29Jadi ada press holder dulu

51:33Ada skeleton dulu ya, muncul skeleton dulu ya

51:35Dia pake common

51:37Press holder sih dia bahasanya

51:39Press holder ya

51:41Jadi ada fallback

51:43Press holder nya dulu

51:45Yang kayak skeleton apa gitu kan

51:47Yang kayak lagi loading nih, lagi loading gitu kan

51:49Habis itu baru dia

51:51Menggantikan, oh pakai server

51:53Titik 2 Diver aja gitu ya

51:55With an adapter install

51:57Oh dia pakai adapter

51:59To perform delay rendering

52:01Kayaknya ujung-ujungnya

52:03Ujung-ujungnya htmx nih

52:05Over the wire aja gini

52:07Mungkin

52:11Kalo itu yang filosofinya htmx ya

52:13Itu ya

52:15On demand

52:17Rendering

52:19Mana sih

52:21Server adapter

52:23Server adapter di bawah tadi

52:25Dibawah ya

52:27Enggak tau

52:29Server endpoint

52:31Jadi itu server endpoint

52:33Soalnya IPR out

52:35Ya bener, jadi

52:37Rasa rasanya jadi kayak ngambil

52:39Kayak pakai

52:41Over the wire lagi

52:43Antara htmx atau

52:45Request response

52:47Ya ya ya, request response ya

52:49Nah intinya yang menarik sih itu

52:55Fallback kontennya

52:57T-Render sebagai html biasa

52:59Masak biasa

53:01Itu fallback nya

53:03Ya

53:05Jadi ya tadi itu ngatasin

53:07Misalnya sebenernya nunggu

53:09Process fetching avatar

53:11Atau semacamnya ada generic avatarnya

53:13Cuma

53:15Tapi kita bikin sendiri

53:17Kita bikin sendiri sih

53:19Ya kan itu

53:21Gimana kita nentuinnya

53:23Kalau avatar ya

53:25Bentuk buletan abu-abu doang

53:27Ya, tapi ini terjadi

53:29Di CC server gitu

53:31Avatar warna biru

53:33Ini ngomongin avatar yang mana nih

53:37Ngerti ngerti

53:41Back sound dong

53:43Back sound

53:45Oke

53:51Terus dia tau

54:01Ketika ada data nya

54:03Udah siap itu dari mana ya

54:05Ini resolve nya abu-abu

54:09Cara yang sama kayak react server

54:11Komponen kelihatannya sih

54:13Sebetulnya ada kayak indikatornya

54:15Mana yang direplace kan

54:17Sebenernya

54:19Itu dia chip track

54:21Element nya

54:23Detail nya sih gak tau

54:25Cara kerja yang sama sama react server

54:27Komponen juga gitu kan

54:29Itu kata Reyhan, coba buka block nya

54:31Ini, block nya ini bukan

54:33Iya

54:35Ada contohnya gak

54:39Performance

54:41Personalization

54:43Ya, ide nya kan ini tadi kan

54:47Cuma maksudnya gimana bisa tau

54:51Berarti kan dia semacam ngasih

54:53Dia kan bikin idea

54:55Avahtar tadi tuh

54:57Ada mapping nya

54:59Avahtar ya

55:01Tuh kanan-kanan atas

55:03Server defer itu loh

55:07Makanya tadi kan

55:09Ada server routing tadi

55:11Jadi semuanya pakai

55:13Waktu setelah

55:15Di render page load

55:17Dia gak request lagi ke user button

55:19Oh, request lagi

55:21Bukan push dari server

55:23Ke client ya, bukan ya

55:25Request lagi

55:27Oke, oke, oke

55:29Ini dia ya

55:37The best of both worlds

55:39Jadi ini static HTML

55:41Server personal content

55:43Semua static

55:45Bisa di caching

55:47Bisa di caching

55:49Jadi ingat itu loh, konsep apa ya

55:51Pernah Google yang sistemnya itu

55:53Yang kayak kerangka

55:55Apa namanya ya

55:57Kayak header, footer

55:59Segala macem itu kan static ya

56:01Apshel, apshel

56:03Jadi ingat konsep jaman itu

56:05Apshel jadi semua static

56:07Dan yang perlu direfresh

56:09Itu aja yang di request

56:11Tapi itu client side

56:13Client side rendering kan

56:15Betul

56:17Kalau sekarang server

56:19Semuanya di server ya

56:21Wah seru ya

56:23Ternyata

56:25Oke, apalagi nih yang

56:31Berhubungan dengan server

56:33Kalau exactly gimana

56:35Dia nggak ngejelasin

56:37Cuma kan kemungkinan bakal semacam ada map kan

56:39Di server mereka punya map

56:41Biar tahu pas udah nyampe client

56:43Mana yang di replace

56:45Mana yang di hydrate

56:47Nah ini actions mantap ini

56:49Bentar, bentar

56:51Tunggu, macam Laravel Vault

56:53Laravel Vault itu kayak gimana

56:55Laravel banyak banget ya

57:01Produknya ya

57:03Komunitasnya besar

57:05Elegantly craft

57:07Functional API for

57:09Live wire that support

57:11Single file component

57:13Oh

57:17Kayak Riek

57:19Kayak Riek

57:21Yang sama

57:23Oh maksudnya tadi

57:25Mungkin membahas tentang

57:27Yang apa

57:29Ternyata tadi mirip

57:31Jadi Astro kayak Jontek ini

57:33Karena

57:35Gayanya mirip ya

57:37Dibatasi oleh

57:39Saling menginspirasi lah ya

57:41Saling Jontek

57:43Tapi ini pakai live wire mas

57:47Iya

57:49Ini pasangannya live wire

57:51Ya vendor

57:53Ini maksudnya

57:55Khusus buat ekosistem

57:57Html over

57:59The wire ya

58:01Kirim htmlnya lewat

58:03Websocket ya

58:05Tergantung

58:07Antara Websocket

58:09Atau API

58:11Ini berarti

58:13Jalannya di server di client

58:15Semuanya itu jalan di server

58:19Semuanya itu jalan di server

58:21Setelah di client

58:23Setelah di client wire click itu

58:25Jalannya di

58:27Jalannya di client

58:29Kirim ke

58:37Server, nanti server replace

58:39Iya

58:41Ya kan live wire

58:43Jadi semuanya terjadi di server

58:45Cuman perubahannya dikirimkan

58:49Lewat

58:51Websocket entah itu Websocket atau

58:53Http ya

58:55Volt malas buat komponen kelas

59:03Langsung logicnya di band

59:05Gak usah buat kelas baru

59:07Buat yang malas

59:11Gak usah bikin di controller

59:13Gak usah bikin di controller jadi langsung ya

59:15Oke

59:17Action

59:19Action

59:21Gimana nih Eka, bingung saya

59:23Seru banget

59:25Pertanyaannya, cuma jawabannya seru banget

59:27Bukan ngejawab ya

59:29Baru senyumnya soalnya kemarin

59:31Action

59:33Kalau tadi kan kita bikin API

59:37Involve, harus bikin satu per satunya

59:39Get, post, terus apa

59:41Boiler white code-nya

59:43Gak banyak

59:45Terus gak ada type safety-nya

59:47Data yang dibalikin dari situ

59:49Misalnya kita punya bikin

59:51Data JSON

59:53Terus kita mengambil dari

59:55Komponen lain, misalnya entah page

59:57Komponen ASTRO, atau UI Komponen ASTRO

59:59Atau React P ASTRO

1:00:01Swell dan lain-lain

1:00:03Yaudah kita gak otomatis ada technique-nya

1:00:05Terus kita gak bisa mastiin

1:00:07Standard semua trade-off-nya

1:00:09API JavaScript

1:00:11Inputnya

1:00:13Solidus Input kita reshandle

1:00:15sendiri

1:00:17Sebuah hiatasi

1:00:19Sama ASTRO Action

1:00:21Jadi itu definisi

1:00:23Di kalimat pertama cukup

1:00:25Deskriptif sih

1:00:27Mendefinisikan dan call

1:00:29Then end function

1:00:31Type safety

1:00:33Apa pun yang bisa kita lakukan

1:00:35Di API Android

1:00:37Yang tadi kita lihat

1:00:39Bisa di lakukan Action

1:00:41Tapi dengannya

1:00:43Dengan bikin features

1:00:45Type safety, jadi kita bisa

1:00:47Validasi inputnya pakai Swell

1:00:49Konteksnya juga tersedia

1:00:51Jadi kalau mau pakai

1:00:53Cookies dan lain-lain, termasuk si

1:00:55Helper ASTRO Cookies tadi juga bisa

1:00:57Terus kita

1:00:59Ngereturn net-nya

1:01:01Nanti di call dari mana pun si Action itu

1:01:03Bakal udah ada type

1:01:05Apa? Typing-nya

1:01:07Data type-nya

1:01:09Type hints, ya

1:01:13Type hints, error pun

1:01:15Errornya tuh entah

1:01:17Kan error bisa dari validasi input ya

1:01:19Atau bisa error dari

1:01:21Action-nya, misalnya kita

1:01:23Apalah, manggil data dari

1:01:25Post yang butuh token

1:01:27Tapi token-nya salah atau

1:01:29Unauthorized dan lain-lain

1:01:31Atau server error, itu udah

1:01:33Bisa dibedakan juga, jadi gampang banget

1:01:35Buat render, apa?

1:01:37Balikin error-nya

1:01:39Memproses error-nya di UI

1:01:43Nah

1:01:45Jadi kayak Action itu

1:01:47My Action bisa dipanggil dari

1:01:49Mana pun, itu kan contohnya

1:01:51Page index ASTRO

1:01:53Mau dipanggil dari UI

1:01:55Component juga bisa

1:01:57Dari software

1:01:59Data sama error-nya

1:02:01Itu type

1:02:03Oh, ini berarti mirip

1:02:07Kayak RPC bukan? Remote Procedure Call

1:02:11Gak tahu, belum rambut

1:02:13Kayaknya sih, mirip ya

1:02:15Mirip kan, maksudnya kita bisa

1:02:17Pandit fungsi di yang lain kan

1:02:19Di bagian lain dari service kita

1:02:21Di komponen lain

1:02:23Di komponen lain, betul

1:02:25Nah, itu Distance Depth-nya itu

1:02:31Itu sebetulnya

1:02:33Cuma udah

1:02:35Under the hood

1:02:37Udah di-input ASTRO

1:02:41Nah, scroll lagi ke bawah

1:02:43Iya, kayak RPC

1:02:45Nah, itu

1:02:47GetGreeting itu terserah

1:02:49Namanya apa terserah kita

1:02:51Ini contohnya GetGreeting

1:02:53Ini dipanggil fungsi

1:02:55Dari sini

1:02:57Inputnya apa

1:02:59Bentuknya objek

1:03:01Di dalam objek itu ada nama

1:03:03Bentuknya string

1:03:05Terus handler

1:03:07Bisa dibuat opsional, apapun bisa

1:03:09Nah, handler gitu

1:03:11Yang di-execusi

1:03:13I see

1:03:15Oke, oke, oke

1:03:17Jadi, di dalam handler ini

1:03:19In real life, misalnya kita nge-fetch

1:03:21Dari API external

1:03:23Atau kita manggil ke database

1:03:25Atau apapun

1:03:27Aktifitas apapun yang umum dilakukan

1:03:29Di server terserah di situ

1:03:31Electro error juga bisa di situ

1:03:33Oke

1:03:37Nah, daten di belakang itu otomatis

1:03:39Sudah ada typo

1:03:41Nah, itu

1:03:43Ini contoh

1:03:45Client side

1:03:47Oke, ini client side ya

1:03:49Yang karena di luar ini ya

1:03:51Terus, kalau buttonnya

1:03:53Diklip

1:03:55Kalau diklik, nanti

1:03:57Nah, kita import aja

1:03:59Oke, di import

1:04:01Terus

1:04:03Langsung action GetGreeting

1:04:05Bener

1:04:07Kayak RPC

1:04:09Ini

1:04:11Kayak TRPC, salah satunya

1:04:13Tuh

1:04:15Kan, di server

1:04:17Ada namanya

1:04:19Greetings

1:04:21Dot query

1:04:23Greetings dot query

1:04:25Ya kan? Dia manggilnya begini kan

1:04:27Remote procedure call, berarti kan?

1:04:31Iya, mirip lah

1:04:33Mirip lah ya

1:04:35Gak tau benerannya, gimana ya

1:04:37Bagaimana konsepnya di belakang

1:04:39Terus, gitu tuh GetGreeting

1:04:41Kalau misalnya kita mengisi

1:04:43Argumennya salah

1:04:45Ya otomatis langsung dimerah-merah

1:04:47Type script

1:04:49Karena

1:04:51Dia ada type

1:04:53Definitionnya disini ya

1:04:55Misalnya kita cuma GetGreeting

1:04:57Tapi gak ada objeknya

1:04:59Atau objeknya fieldnya bukan name

1:05:01Namanya 123

1:05:03Angka gitu, integer

1:05:05Nah, itu pasti dimerahin sama type script

1:05:07Mirip TRPC, iya

1:05:13Maksudnya lebih, kita ngomongnya bukan

1:05:15TRPC-nya sih, remote procedure call-nya

1:05:17Yang basicnya ya, TRPC salah satu implementasinya

1:05:19Iya ya, besar juga

1:05:23Baru kebayang nih

1:05:25Ya ditambahkan kesini

1:05:29Berarti kan ini memang useful ya

1:05:31Untuk mempermudah

1:05:33Untuk mengurangi learning curve

1:05:35Antara server-side dan client-side

1:05:37Client-side, betul

1:05:39Karena

1:05:43Kalau kita tadinya tanpa ini

1:05:45Imagine

1:05:47Berarti kan kita harus bikin

1:05:49Raise API endpoint-nya

1:05:51Terus bikin

1:05:53Komponennya di client

1:05:55Terus kita fetch, post

1:05:57Dan response lagi

1:05:59Kalau ini kan jadinya

1:06:01Sangat dipermudah

1:06:03Yang membantu banget tuh validation

1:06:05Sama type

1:06:07Type type declaration

1:06:09Generation

1:06:11Full full banget

1:06:13Berarti ini akan

1:06:17Sangat berguna

1:06:19Kalau menggunakan type script, kalau pakai javascript

1:06:21Siapa yang pakai javascript?

1:06:25Cuma orang yang pakai astro

1:06:27Itu kemungkinan ya

1:06:29Bukannya

1:06:31Ada fitur itu

1:06:33Di VS Code muncul nggak sih

1:06:35Kalau anggaplah ini TS kita ganti

1:06:37Dias gitu, tetap muncul nggak sih

1:06:39Coba ini kadang kodenya kan

1:06:41Kodenya sendiri

1:06:43Bukan

1:06:45Type script kan ini

1:06:47Bukan kan

1:06:49Ini valid javascript kan

1:06:51Iya

1:06:53Dia pakai zod kan

1:06:55Validasinya

1:06:57Validasinya kan

1:06:59Cuma yang nggak bisa sebaliknya

1:07:01Iya, ini tergantung fitur

1:07:05Dari si VS Code-nya

1:07:07Dari editor-nya

1:07:09Dia bisa nampilin atau nggak

1:07:11Ini javascript banget semuanya

1:07:13Nggak ada type-type-nya sama sekali

1:07:21Terus scroll lagi

1:07:23Scroll ke bawah lagi

1:07:25Masih banyak fitur

1:07:27Serunya

1:07:29Organizing ini nggak seru sih

1:07:31Cuma buat grouping

1:07:33Bisa di file aja

1:07:35Ini nggak seru lagi

1:07:37Inlink return data yang tadi

1:07:39Bisa data, bisa error

1:07:41Nah, ini error yang

1:07:43Scroll ke bawah lagi

1:07:49Kalau misalnya nggak mau ngecek error

1:07:51Bisa or throw

1:07:53Ini kurang penting

1:07:55Nah, ini yang menarik nih

1:07:57Handling back-end error

1:07:59Jadi ada yang namanya action error

1:08:01Itu kayak class

1:08:03Class yang extend

1:08:05Error class biasa

1:08:07Cuma ada action error

1:08:09Jadi buat mengindikasi

1:08:11Ini error dari, bukan error dari

1:08:13Serigasi input-nya

1:08:15Error dari action-nya

1:08:19Untuk contohnya

1:08:21Contoh aja

1:08:25Kupis

1:08:27Apa cek nggak ada session-nya

1:08:29Berarti unauthorized, tapi in real life

1:08:31Misalnya kita pakai API external

1:08:33Kita nge-fetch pose

1:08:35Kita try-catch pastikan

1:08:37Itu pas di-catch-nya

1:08:39Kita throw action error

1:08:41Berdasarkan kode yang dibalikin dari

1:08:43External service-nya misalnya

1:08:47Menarik

1:08:49Nah, balik lagi ke component-nya

1:08:53Ini juga kayak apa

1:08:55Udah langsung aja bisa mencek

1:08:57Jenis error-nya apa

1:08:59Ya pokoknya kayak

1:09:01Dx sih, wilayah Dx

1:09:03Apa, Dx-nya jadi enak banget

1:09:05Buat ngerjain front-end-nya

1:09:07Oh, ini

1:09:13JSX sih ya

1:09:15Berarti ini React ya

1:09:17Iya sih, ini

1:09:21Nah, itu apa

1:09:29Kalo di client-side kita bisa navigate

1:09:31Misalnya harus redirect

1:09:33Redirect ya

1:09:43Nah, terus ini ada

1:09:45Iya, di client

1:09:47Tapi kalo di server juga bisa

1:09:49Astro dot redirect

1:09:51Ada itunya sendiri

1:09:53Ada helper-nya sendiri

1:09:55Jadi action-nya sendiri

1:09:59Jalan di back-end, jalan di server

1:10:01Tapi bisa dipanggil

1:10:03Isomorphic, bisa dipanggil

1:10:05Ya, standar lah, bisa dipanggil dari client-side

1:10:07Bisa dipanggil dari

1:10:09Server-side component

1:10:13Nah, ini nih yang seru banget

1:10:15Ini bisa accept dot form

1:10:17Accept value-nya form

1:10:19Nah, itu di front-end-nya

1:10:21Tinggal bikin component form

1:10:23Ini sih agak mirip

1:10:25React server component kali ya

1:10:27Atau mirip apa sih yang

1:10:29Di remix, ya itu pokoknya bikin

1:10:31Form aja, jadi gausah

1:10:33Kalo ga mau nulis JavaScript, gausah

1:10:35Bikin JavaScript sama sekali

1:10:37Oh, di handling-nya di sisi server

1:10:41Validasi-nya juga di sisi server

1:10:43Iya, semua juga gitu, cuma ini

1:10:47Pakai form aja, jadi pure HTML

1:10:49Only bisa jalan

1:10:51Misalnya email sama terms

1:10:55Jadi bikin aja

1:10:57Value actions-nya

1:11:01Diisi pake nama

1:11:03Action itu tadi

1:11:05Validasi input error-nya gimana?

1:11:11Itu. Nah, scroll terus ke bawah

1:11:13Ke bawah ya? Ini ya?

1:11:15Iya, lanjut-lanjutkan

1:11:17Ada step-by-step-nya dong

1:11:19Nah, email sama terms

1:11:23Itu tadi dari nama input yang

1:11:25Di dalam form kan

1:11:27Ini handler

1:11:29Handler-nya terserah diapain? Itu sih

1:11:33Maksudnya server-side

1:11:35Kayaknya handler-nya ini

1:11:37Setelah validation

1:11:39Selesai deh

1:11:41Baru dia akan jalani handler

1:11:43Udah validation-nya

1:11:45Iya

1:11:47Kalau validation-nya gagal, langsung

1:11:49Balikin, dan bahkan ada type-nya

1:11:51sendiri, bisa dicek namanya input error

1:11:53Lanjut

1:11:59Nah, ini

1:12:02Tapi bisa dari server-side

1:12:04Ini kan dari client-side

1:12:10Nah, ke atas sedikit

1:12:12Ke atas sedikit

1:12:16Scroll atas lagi

1:12:18Scroll atas lagi

1:12:20Nah, ini

1:12:26Kita kebalinya kan si call-action

1:12:28From an HTML form action

1:12:30Or alternatively

1:12:32Jadi kalau ini, kalau contohin kan

1:12:34Dari JavaScript client-side

1:12:36Tapi kalau bukanan nggak mau nulis

1:12:38Dari JavaScript sama sekali

1:12:40Cuma pakai form itu

1:12:42Cuma pakai form element HTML juga bisa

1:12:44Ini

1:12:46Luh, mana dia

1:12:48Kayaknya belum ditulis dia

1:12:50Ini call-action from HTML server

1:12:52Ini kali

1:12:54Becari dulu

1:12:56Ini bukan

1:12:58Call-action from HTML

1:13:02Nggak ada form-nya di sini

1:13:06Ya, betul-betul

1:13:08Lockout button

1:13:10Scroll ke bawah

1:13:12Ke bawah?

1:13:14Mana?

1:13:16Bentar

1:13:18Link-nya sih udah betul

1:13:20Coba deh, find lockout button

1:13:22Lockout

1:13:28Lockout button-nya

1:13:30Itu dia, bentar

1:13:32Eh, nggak

1:13:34Bukan deh, cari lagi

1:13:36Ini

1:13:42Nah, ya betul

1:13:44Nah itu, kalau nggak

1:13:46Kalau tadi kan contoh pakai client-side

1:13:48JavaScript ya

1:13:50Dupingan query selektor, form

1:13:52Form-nya kalau disubmit, prevent default

1:13:54Terus await action

1:13:56Nah, ini kalau nggak mau nulis

1:13:58JavaScript sama sekali, ini jalan

1:14:02Jadinya

1:14:04Sama dengan actions.lockout

1:14:06Kayak remix

1:14:10Kayak remix ya

1:14:12Nah, itu bawahnya

1:14:18Ini contoh yang lebih

1:14:20Kalau pakai upload file

1:14:22Terus pakai encoding type

1:14:24Tetapi upload

1:14:26Kita harus define action dulu kan

1:14:28Define action

1:14:30Ada action-nya

1:14:32Itu telah file-nya didapat ke mana

1:14:34Ada handler-nya, iya

1:14:38Terus input-nya apa aja, loop field-nya

1:14:40Di dalam form-nya

1:14:42Ada yang namenya sesuai

1:14:44Sama namenya sesuai

1:14:46Kayak misalnya, itu kan namenya sama dengan file

1:14:48Type-nya apa, file

1:14:50File-nya harus DC gitu ya

1:14:56Nggak boleh kosong

1:14:58Atau tadi misalnya name

1:15:00Atau apapun string

1:15:02Ya, di dalam form-nya

1:15:04Harus ada input name sama dengan

1:15:06Apa, email

1:15:08Oh, ini kalau mau redirect setelah

1:15:16Form-nya disubmit ya

1:15:18Iya, itu dari server side

1:15:20Kalau yang tadi itu

1:15:22Yang dibawah, kalau dari client side

1:15:28Mesej validasi input error

1:15:32Nampil gimana pada form

1:15:34Dibawah input warna merahnya gitu

1:15:36Oh, ini kan tinggal styling aja kan

1:15:38Tinggal pakai if aja

1:15:40Kalau error, nampilin error

1:15:42Mesejnya gitu kan ya

1:15:44Dan

1:15:46Ada helper-nya

1:15:48Buat ngecek itu input error

1:15:50Atau bukan, jadi buat ditaruh di bawah

1:15:52Misalnya email, coba deh

1:15:54Find is input error

1:15:58Is input error

1:16:00Is input error

1:16:02For more complex input validation

1:16:16On the back-end, you can

1:16:18Use provided is input error

1:16:20Utility function

1:16:22To retrieve input error, use

1:16:24Is input error

1:16:28Kita ambil dari actions

1:16:30Ini kita perlu tulis

1:16:32Enggak kan, ini udah built-in ya

1:16:34Ya built-in, tapi kita harus import

1:16:38Kita import

1:16:40Terus habis itu, kalau ada

1:16:42Error-nya dikumpulkan dari action ini

1:16:44Maka dia akan

1:16:48Itu kan tadi, itu compose data

1:16:50Data comma error dari hasil

1:16:52White actions.newsetter

1:16:54Nah, error-nya itu bisa kita cek

1:16:56Maka is input error, apakah dia input error

1:16:58Kalau input error

1:17:00Udah otomatis itu udah

1:17:02Type save semua juga

1:17:04Error dot books dot email

1:17:06Nah, atau dot email

1:17:08Atau dot apa, itu tergantung

1:17:10Input fields yang kita

1:17:12Definisio ini

1:17:14Di action-nya tadi

1:17:16Iya, iya, iya

1:17:18Kebayang, kebayang

1:17:20Jadi, ya udah kan

1:17:22Misalnya ada error dot books dot email, tinggal direner

1:17:24Di balah, dot input email

1:17:26Seru ya

1:17:40Apa lagi yang mau kita bahas

1:17:46Yang berkaitan dengan server

1:17:48Session, session terakhir

1:17:50Session?

1:17:54Ini belum pakai sih

1:17:56Cuma, ini di Laraftel

1:17:58Kalau gak salah juga ada

1:18:00Apapunnya, ya itu

1:18:02Share data between request

1:18:04Kalau request kan biasanya cuma

1:18:06Dikit ya

1:18:08Kalau pengen persisting

1:18:10Pengen nyimpan suatu data yang

1:18:12Setiap request ada

1:18:14Nah, ini

1:18:16Ada innovation

1:18:18Nah, ini menarik sih

1:18:20Belum nyoba, cuma menarik

1:18:22Bisa pakai provider, jadi

1:18:24Ini kan tergantung servernya apa ya

1:18:26Jadi, kalau gak salah, kalau pakai Netlify

1:18:28Atau Vercel Adapter

1:18:30Dia udah otomatis

1:18:32Tapi kita bisa

1:18:34Define sendiri

1:18:36Jadi kita punya radius ya, pakai radius

1:18:38Untuk nyimpan session-nya ya?

1:18:42Ya

1:18:44Semacam key value

1:18:46Key value storage ya

1:18:48Storage-nya disimpan dimana, kalau tadi

1:18:50Kalau tadi kan dia, ini

1:18:52Contohnya di Redis

1:18:54Kalau kita pakai Cloudflare

1:18:56Bisa di Cloudflare Session

1:18:58Ya

1:19:00Di CDN berarti

1:19:02Kalau gak salah, ini kalau kita pakai Netlify

1:19:04Atau Vercel kan mereka punya product

1:19:06Ya, apalah namanya, gak tahu namanya

1:19:08Apanya semacam kayak gitu

1:19:10Key value storage juga, itu udah input

1:19:12Ya

1:19:14Berarti session-nya disimpan di database ya

1:19:16Tapi database yang berbeda

1:19:18Yang key value storage kayak Redis

1:19:20Atau

1:19:22Di database service

1:19:24Apa service hosting yang kita pakai ya

1:19:26Kalau di PHP

1:19:28Di Memory

1:19:30Memory

1:19:32Di File

1:19:34Di File juga bisa ya

1:19:36Bisa

1:19:38API endpoint

1:19:46Oke

1:19:48Menarik

1:19:50Middleware

1:19:54Tadi udah dibahas ya

1:19:56Bisa masukin ke dalam konteks

1:19:58Standard ya

1:20:00Kalau ya, kayak bookie

1:20:08Helper-nya tadi, itu juga berlaku

1:20:10Di middleware, jadi pokoknya

1:20:12Di seluruh

1:20:14Astro, kan ada konteks

1:20:16Sebenernya kalau

1:20:18Yang pernah pakai Express dan semacamnya

1:20:20Pasti udah familiar

1:20:22Di konteks ya, ada

1:20:24Conteks.bookies

1:20:26Itu bisa diproses pakai

1:20:28Itunya Astro juga

1:20:30Oke, ya middleware-nya ya

1:20:32Oke

1:20:36Ada lagi yang mau dibahas

1:20:38Nanggung, ada lagi, satu lagi nih

1:20:40Adapter

1:20:42Ecosystem

1:20:44Jadi tadi kan kita

1:20:46Kita udah liat

1:20:48Adapter yang offisial ya

1:20:50Tadi cuma ada

1:20:52Note, Cloudflare

1:20:54Versel, sama Netlify

1:20:56Tapi ini

1:20:58Astro ini kayak filosofinya tuh kayak

1:21:00Ya bisa dibilang, bertentangan lah

1:21:02Kebalikannya Next.js, kalau Next.js kan

1:21:04Ya walaupun

1:21:06Lock-in

1:21:08Bisa mungkin lock-in ke Versel

1:21:10Yang dibikin

1:21:12Ya mungkin bukan dibikin sih, cuma maksudnya

1:21:14Ada behavior khusus yang

1:21:16Bikin sulit

1:21:18Bisa

1:21:20Langsung kita

1:21:22Deploy di null

1:21:24Atau di environment lain kan

1:21:26Harus banyak adaptasinya kan

1:21:28Dan itu harus ya

1:21:30Developer sendiri yang figure out gimana caranya

1:21:32Untuk deploy Next.js

1:21:34Macam-macam environment lain

1:21:36Tanpa breaking fitur-fiturnya

1:21:38Nah kalau Astro itu sebaliknya

1:21:40Malah kayak di-encourage

1:21:42Mereka punya yang offisial

1:21:44Tapi kalau misalnya

1:21:46Siapa pun yang mau bikin

1:21:48Adapter custom buat runtime

1:21:50Entah apa

1:21:52Itu dikasih dokumentasinya

1:21:54Dikasih cara dikitin

1:21:56Berarti bisa jalan di Cloudflare

1:21:58Cloudflare Edge juga kan ya

1:22:00Ada Cloudflare Worker

1:22:02Maybe

1:22:04Worker

1:22:06Ada adaptornya

1:22:08Udah ada ya

1:22:10Itu yang offisial

1:22:12Nah kalau misalkan

1:22:14Sebetulnya ke depannya service

1:22:16Bukan cuma Node

1:22:18Node.js, Cloudflare

1:22:20Webcell, Hama, Netlify

1:22:22Kalau misalnya mau bikin

1:22:24Adapter buat deploy

1:22:26Astro dengan mudah

1:22:28Coba

1:22:30Ke third party service

1:22:32Ke third party service coba

1:22:34Third party service

1:22:36Ke atas

1:22:38Third party services

1:22:40Deployment guide

1:22:42Itu

1:22:44Udah ada semua ya

1:22:46Bisa ke pages

1:22:48Tapi kalau itu SSR ya

1:22:50Ya SSR

1:22:52Sorry SSG

1:22:54Ya static type generation

1:22:56Oh mungkin

1:22:58Ada yang mau bikinin adapter untuk

1:23:00Bisa ke hosting

1:23:02Domensia boleh ya

1:23:04Hosting

1:23:06Node.js

1:23:08Ya Node.js

1:23:10Oh iya benar juga

1:23:12Langsung Node.js ya

1:23:14Benar benar benar

1:23:20Bisa ke Firebase juga

1:23:24Firebase

1:23:26Hosting kan

1:23:28Coba Cloudflare, saya pengen tahu

1:23:30Cloudflare gimana sih

1:23:32Bisa ya langsung ke

1:23:34Ke

1:23:36Worker ya

1:23:38Worker

1:23:40Wah boleh nih

1:23:42Itu kan tadi udah di address semua

1:23:44Di adapternya maksudnya apa

1:23:46Kalau buat nge build static

1:23:48Gimana kalau buat

1:23:50Build yang server side

1:23:52Yang SSR, kayak gimana

1:23:58Oke

1:24:00Dan kalau nggak ada

1:24:02Bisa udah disediakan

1:24:04API untuk membangun

1:24:06Adapter ini ya

1:24:08Bikin sendiri atau minta ke service yang kita

1:24:10Pakai, tolong bikin dong

1:24:12Banyak juga ya

1:24:14Flick itu apa

1:24:18Coba dono, flick, flight control

1:24:20Kayak produk-produk yang

1:24:22Dengar aja

1:24:24Fliver, body, apa

1:24:26Apa itu

1:24:28Kinsta

1:24:30Kalau Kinsta tahu

1:24:32Oh tahu, apa tuh

1:24:34Ini juga

1:24:36Hosting

1:24:38Hosting ya

1:24:40Fliver itu produk

1:24:44VPS

1:24:46VPS

1:24:48Oke

1:24:50Independence injection

1:24:52Astro pakai apa

1:24:56Saya nggak tahu

1:24:58Butuhnya buat apa

1:25:00Butuhnya buat apa

1:25:02Dan kenapa harus pakai apa

1:25:04Pakai JavaScript aja nggak bisa ya

1:25:06Dependency injection

1:25:08Yang gue tahu sih ada namanya

1:25:12Integration

1:25:14Integration itu kayak plugin yang bisa

1:25:16Akses macam-macam lifecycle-nya

1:25:18Lifecycle-nya Astro, nggak terus bisa

1:25:20Install dependency juga

1:25:22Jadi kalau buat kayak mem-package yang

1:25:24Kita harus install-install

1:25:26Daripada user yang mau pakai library

1:25:28Itu harus install dependency

1:25:30Banyak ribut ya namanya

1:25:32Integration

1:25:34Nggak tahu itu ngejawab atau nggak sih

1:25:36Pertanyaannya itu atau bukan nggak tahu sih

1:25:38Integration

1:25:44Ke

1:25:46Framework ini

1:25:48Kalau yang unofficial ya kita bisa

1:25:50Bikin apapun

1:25:54Hmm

1:25:56Nah itu bisa nge-access lifecycle-nya

1:25:58Kayak apa lah deh

1:26:00Jadi kayak ada hooks-hooks-nya

1:26:02Cuma belum pernah bikin beneran sih

1:26:04Cuma ngeliat punya skills

1:26:06Kalau barusan nge-search ini

1:26:08Ada kayak Inversify JS

1:26:10Injection JS

1:26:14Sama T-Series

1:26:16Oh Microsoft

1:26:18Ada Microsoft

1:26:20T-Series

1:26:24Hmm

1:26:26Sama

1:26:40T-Series

1:26:42Tapi belum pernah pakai

1:26:46Barusan Google

1:26:48Soalnya

1:26:50Sama belum pernah pakai

1:26:54Tapi kan tadi malah buat install dependency

1:26:56Salah ya

1:26:58Ini salah satu teknik

1:27:00Dalam loading

1:27:02Pattern

1:27:04Kayaknya vanilla juga bisa

1:27:12Bisa bisa

1:27:14Pakai vanilla

1:27:16Maksudnya

1:27:18JavaScript biasa aja bisa

1:27:20JavaScript biasa aja harusnya bisa

1:27:22Karena itu

1:27:24JavaScript kan

1:27:26Funksional kan

1:27:28Jadi memungkinkan

1:27:30Menyerimkan

1:27:32Berbagai data atau fungsi

1:27:34Sebagai parameter dari

1:27:36Algumen dari fungsi yang lain

1:27:38Jadi harusnya dengan JavaScript aja

1:27:40Sebenernya bisa

1:27:42Berarti ini Inject-nya itu

1:27:44Pas runtime

1:27:46Setiap jalan

1:27:48Atau pas build-time aja

1:27:50Saat runtime

1:27:52Runtime ya

1:27:54Pas di kode kan

1:27:56Kode-nya kan

1:27:58Kita mau nge-inject

1:28:00Value apa ke

1:28:02Komponen lain

1:28:04Ini sebagai

1:28:10Alternatif aja ya

1:28:12Tapi kita belum pernah pakai ya

1:28:14Baru googling

1:28:16Bahkan belum pernah nge-jalanin

1:28:18Depensi Injection sih

1:28:20Bisa kerja

1:28:22Seperti beberapa tahun

1:28:24Tanpa paper

1:28:26Tapi bagus nih hal-hal kayak gini nih

1:28:28Yang tiba-tiba ditanya ini

1:28:30Tiba-tiba nggak ngerti

1:28:32Benar-benar

1:28:34Ini lumayan populer

1:28:36Di angular ya

1:28:38Lumayan populer di angular

1:28:40Angular pakai Depensi Injection

1:28:42Kalau butuh

1:28:44Dashboard bisa kombin dengan Strapi

1:28:48Strapi itu CMS bukan?

1:28:50LMS

1:28:52Iya CMS ya

1:28:54CMS

1:28:56Bisa pakai apapun sih

1:28:58Headless

1:29:00Service apapun

1:29:02Komponen UI apapun

1:29:04Dan bisa

1:29:08Create markdown

1:29:10Sebagai content source

1:29:12Oh jadi

1:29:14Backoffice-nya ya

1:29:16Ya

1:29:18Oke oke oke

1:29:26Mungkin untuk Astro

1:29:30Cukup sekitu ya

1:29:32Terima kasih buat diskusinya

1:29:34Kita perlu bahas

1:29:36Topik buat Minggu depan

1:29:38Minggu depan belum ya

1:29:40133

1:29:42Oke episode 133

1:29:44Kita mau bahas apa?

1:29:46Enggak

1:29:48Saya ganti

1:29:50Depensi Injection apa?

1:29:52Serius

1:29:54Emang bisa?

1:29:56Yakin apa mau baca dulu

1:29:58Iya mau belajar

1:30:00Oh jadi orang yang tahu

1:30:02Siapa ya

1:30:04Siapa ya

1:30:06Ini kemarin

1:30:08Kita punya tamu nggak sih

1:30:10Kita punya featuring

1:30:12Minggu depannya lagi ya

1:30:14Minggu depannya lagi

1:30:16Bahas tentang database itu

1:30:18Kita di tanggal 17

1:30:20Ini

1:30:24Depensi Injection

1:30:26Ini fundamental ya

1:30:28Iya pattern

1:30:30Okay

1:30:32Ini kita

1:30:34Mendapatkan

1:30:36Banyak ide dari

1:30:38Mas Irfan nih

1:30:40Minggu lalu

1:30:42Dia submit banyak topic

1:30:44AI

1:30:46Assistant

1:30:48Kemudian storybook

1:30:50Shopify front-end

1:30:52Relative component

1:30:54Dan games

1:30:56Storybook kita belum pernah

1:30:58Bahas specifically

1:31:00Ya belum

1:31:02Terus motion

1:31:04Ada banyak

1:31:06Bisa kita ambil

1:31:08Huh?

1:31:10Ya kita mau voting kan ya

1:31:12Flutter

1:31:14Saya itu

1:31:16Mending kayak

1:31:18Tailwind

1:31:20Ada kan tailwind tadi

1:31:22Ada tailwind ya

1:31:24Tailwind

1:31:26Dokumentasi sama storybook deh

1:31:28Oke sebentar

1:31:30Ada satu yang mau saya

1:31:32Suggest

1:31:34Beda situs

1:31:36Ada yang sudah submit soalnya

1:31:38Nantap

1:31:40Takutnya kalau mandi

1:31:44Oh ya udah

1:31:46Gapapa

1:31:48Ya boleh

1:31:50Mumpung ada yang submit

1:31:52Cuma bentar

1:31:56Ini kan project client

1:31:58Ini maksudnya apa

1:32:00Sisi kayak atasnya

1:32:02Ini gapapa nih

1:32:04Bentar bentar bentar

1:32:06Oh udah gak bisa

1:32:08Eh bentar

1:32:10Amazing ticket

1:32:12Yang pentingnya maksudnya

1:32:14Ini gapapa berarti

1:32:16Kita si client yang

1:32:18Punya amazing ticket ini

1:32:20Kalau gak masalah

1:32:22Udah mati

1:32:24Githubnya juga

1:32:26Oh bukan belum

1:32:28Kok gak bisa back

1:32:32Ayo

1:32:34Iseng submit

1:32:36Mau submit website yang dibuat kantor

1:32:38Tapi takut clientnya gak bersedia

1:32:40Jadi paling ini ada satu website bantuin temen

1:32:42Oh ini bukan

1:32:44Oh dia bikin sendiri

1:32:46Oke oke

1:32:48Tadi belum baca sisa kalimatnya

1:32:50Ya udah aman

1:32:52Kita bahas minggu depan ini

1:32:56Deal

1:32:58Sama inilah

1:33:00Apa namanya

1:33:02Website-nya danantara

1:33:04Website-nya danantara

1:33:08Kenapa mau dibahas

1:33:10Atau website yang lain

1:33:14Oh boleh

1:33:16Tapi minggu depan

1:33:18Saya absen dulu

1:33:20Ngeri

1:33:24Tapi gak apa-apa

1:33:26Kalau ada yang submit

1:33:28Salah satu timnya yang submit

1:33:30Gak apa-apa kita terima dengan senang hati

1:33:32Tapi kalau orang yang submit

1:33:34Yang punya atau yang bikin

1:33:38Perwakilan yang bikin

1:33:40Saya bikin mohon

1:33:42Nah itu boleh

1:33:44Website posongan

1:33:46Storybook bagus buat

1:33:48Dokumentasi, ya storybook bagus

1:33:50Query container telwin sudah dibahas

1:33:52Telwin aja belum

1:33:56Ya nanti kita masukin

1:33:58Oh telwin juga bisa dipecah ya

1:34:00Jadi macam-macam, jadi 2 episode minimal tuh

1:34:02Telwin in general, telwin hidden gem

1:34:04Ya atau telwin versus

1:34:08Vanilla

1:34:10Ya biar-biar

1:34:12Kita pernah bahas itu kan

1:34:14Maksudnya kayak perang ya ada yang suka

1:34:16Dengan class name yang panjang

1:34:18Begitu atau ada yang

1:34:20Lebih prefer gaya

1:34:22Gaya bootstrap

1:34:24Dia nyediain satu

1:34:26Class name yang

1:34:28Meliput beberapa

1:34:30Class name nya si telwin kan

1:34:32Jadi lebih clean aja

1:34:34Menarik sih kalau telwin itu banyak misconceptionnya

1:34:36Soalnya jadi kayak

1:34:38Kayak bootstrap, oh kalau pakai telwin

1:34:40Berarti bakal kelihatan sama semua

1:34:42Ya padahal

1:34:44Telwin kan gimana nyediain

1:34:46Item-itemnya doang, gimana you decide-nya

1:34:48Aja kan, kalau misalnya yang

1:34:50Bikin ya kayak kita, maksudnya

1:34:52Bahkan gue sebagai front-end dev yang

1:34:54Mungkin

1:34:56Kalau buat yang estetik dasar

1:34:58Kayak contrast dan lain-lain kan

1:35:00Telwin udah ngebantu banget kan

1:35:02Ada token namanya design token

1:35:04XS, SM,

1:35:06LG, large yang ukuran-ukuran

1:35:08Gitu kan ada wirarkinya, H1 paling gede

1:35:10H2 lebih kecil

1:35:12H3 lebih kecil lagi, maksudnya

1:35:14Kalau dari segi gitu

1:35:16Ya kalau kita pakai defaultnya

1:35:18Ya emang gitu-gitu aja, tapi

1:35:20Kalau saya pengen kreativitas yang lebih estetis

1:35:22Atau indah, atau punya karakter

1:35:24Branding sendiri, ya you hire

1:35:26Visual designer lah

1:35:28Buat bikin jadi macam-macam

1:35:30Atau pakai yang kayak DCUI,

1:35:32Telwin UI, dan lain-lain

1:35:34Iya, kalau misalkan

1:35:36Mirip-mirip ya karena

1:35:38Basically kita copy paste

1:35:40Dari contoh atau dari Telwin UI

1:35:42Dari UI component

1:35:44Yang berdasarkan Telwin

1:35:46Jadi mirip-mirip semua

1:35:48Itu sebenarnya customizable kan

1:35:50Tokennya itu bisa dikustom

1:35:52Kayak misalnya kombinasi warnanya bisa dikustom

1:35:54Terus maksudnya style-style bordernya

1:35:56Varian, kan ada variance juga

1:35:58Misalnya varian-varian kartnya

1:36:00Warna primary, secondary

1:36:02Kombinasinya kayak gimana

1:36:04Itu beneran semua configurable kan

1:36:06Telwin itu cuma nyediain sistemnya

1:36:08Dan reasonable default

1:36:10Ya kalau misalnya kita semua pakai reasonable default

1:36:12Terus hasilnya sama semua ya

1:36:14Aneh juga kalau Telwinnya misalnya

1:36:16Sama Telwin

1:36:18Itu dia teaser untuk episode Telwin

1:36:20Yang gak tau kapan

1:36:22Kita tubuh aja

1:36:24Biasanya gini kelas Telwin

1:36:26Padahal episode Astro

1:36:28Satu lagi episodenya

1:36:32Why you don't need

1:36:34Vanilla CSS, use Telwin

1:36:36Why

1:36:38Itu baru-baru ya

1:36:40Orang penuh marah-marah nih

1:36:42Episode minggu keberapa, why you need

1:36:44Telwin, abis itu why you don't need

1:36:46Telwin gitu ya

1:36:48Telwin versus

1:36:50Vanilla aja udah

1:36:52Terus thumbnail-nya

1:36:54Telwin is in good step

1:36:56Orang yang terpaksa emosi gitu

1:36:58Padahal pas show

1:37:00Gak

1:37:02Kita dahulu kan yang

1:37:04Itu ya bedah situs dulu ya

1:37:06Coating-nya mungkin buat 2 minggu lagi

1:37:08Karena minggu depannya ada mas Donny yang makan

1:37:10Jakuri versus Vanilla

1:37:12Jakuri versus Vanilla

1:37:14Oke

1:37:16Mungkin untuk malam ini

1:37:18Udah hand dulu, terima kasih banyak

1:37:20Buat diskusinya teman-teman semua

1:37:22Kita ketemu lagi minggu depan

1:37:24Dengan topik bedah situs

1:37:26Dari teman kita

1:37:28Sampai jumpa lagi, selamat malam

1:37:30Selamat istirahat, terima kasih banyak

1:37:32Buat domain Nesia, jangan lupa

1:37:34Buat

1:37:36Yang mau hosting

1:37:38Kode-kode ngobrolin web DN

1:37:40DN itu Domain Nesia

1:37:42Jadi ngobrolin web DN

1:37:44Oke

1:37:46Itu yang pilih

1:37:48Kode promo itu mas Niza itu

1:37:50Jadi mujarat

1:37:52Bisa mas Niza kan yang bikin itu

1:37:58Kodenya

1:38:00Nggak, itu dikasih

1:38:02Kita terima-terima aja

1:38:04Dikasih sesuai nama

1:38:06Referral

1:38:08Jadi

1:38:10Kita ketemu lagi minggu depan

1:38:12Dengan topik yang berbeda

1:38:14Selamat malam, selamat istirahat

1:38:16Sampai jumpa, bye-bye

1:38:38[musik]