Ngobrolin Astro
Ringkasan Episode
Bantu KoreksiEpisode ini membahas tentang Astro, sebuah meta framework JavaScript yang semakin populer di kalangan developer. Pembahasan dimulai dengan pengenalan Astro sebagai framework yang awalnya fokus pada content-driven websites dan static site generation (SSG), namun kini telah berkembang mendukung SSG, SSR, dan hybrid rendering. Host menjelaskan filosofi Astro yang mengedepankan HTML-first, zero JavaScript by default, dan pendekatan island architecture untuk interaktivitas yang terkontrol. Episode ini juga membahas fitur unggulan Astro seperti zero-lock (mendukung berbagai UI framework seperti React, Vue, Svelte, Preact, dan Solid), performa yang optimal dengan hydration minimal, serta adopsi web API modern seperti requestIdleCallback. Dibahas juga evolusi Astro dari penggabungan Snowpack ke Vite, integrasi Astro DB, fitur experimental Server Islands, serta proyek terkait seperti Starlight untuk dokumentasi. Perbandingan dengan framework lain seperti Next.js dan Gatsby juga menjadi topik menarik, menyoroti keunggulan Astro dalam performa dan pendekatan yang lebih web standard.
Poin-poin Utama
- •Astro adalah meta framework JavaScript yang awalnya fokus pada content-driven websites dan SSG, namun kini mendukung SSG, SSR, dan hybrid rendering secara penuh.
- •Filosofi utama Astro adalah HTML-first, zero JavaScript by default, dan hanya mengirim JavaScript ke browser ketika benar-benar diperlukan (opt-in interactivity).
- •Fitur zero-lock Astro memungkinkan penggunaan berbagai UI framework (React, Vue, Svelte, Preact, Solid) dalam satu proyek, bahkan dapat menggabungkan beberapa framework sekaligus.
- •Island Architecture Astro memisahkan komponen statis dan interaktif, di mana komponen interaktif dihydrate on-demand untuk performa yang lebih optimal.
- •Astro mengadopsi web API modern seperti requestIdleCallback untuk mengoptimalkan timing rendering komponen interaktif saat main thread idle.
- •Astro DB adalah database service built-in berbasis SQLite yang terintegrasi langsung dengan framework, mendukung kolaborasi dan maintenance yang lebih mudah.
- •Proyek Starlight adalah dokumentasi framework berbasis Astro yang bersaing dengan Docusaurus, dengan performa lebih baik dan ukuran bundle lebih kecil.
- •Astro memiliki komunitas yang aktif dengan dokumentasi berkualitas tinggi, guide untuk kontributor, dan pendekatan yang developer-friendly.
- •Fitur experimental Server Islands memungkinkan lazy server-side rendering terpisah dari halaman utama, memberikan fleksibilitas rendering hibrida.
- •Perbandingan performa Astro menunjukkan keunggulan signifikan dibanding Next.js, terutama pada metrik seperti First Contentful Paint (FCP) dan Total Blocking Time (TBT).
- •Astro menargetkan posisi di tengah antara vanilla HTML/CSS/JavaScript dan framework interaktif seperti Next.js/Nuxt/SvelteKit, memberikan solusi yang balance untuk berbagai use case.
- •Meskipun relatif muda dan user base masih didominasi front-end developer, Astro memiliki potensi migrasi yang mudah dari framework lain karena dukungan komponen UI yang ada.
Hai, hai, hai. Halo.
Hai, insyaAllah. Apa kabar?
Selamat tidak berjumpa.
Kita terlalu lama libur ya, kayaknya.
Iya, libur-libur saya.
Lagi libur anak sekolah ya.
Ya, mudah-mudahan masih inget ya,
sama acara kita ini,
yang diadakan setiap
Selasa Malam.
Selasa Malam.
Biasanya kita Selasa Malam ngapain ya?
Ngapain apa ya?
Ya, cerita dulu dong kenapa kita,
kita terpaksa libur.
Terpaksa libur, karena
nanti ada videonya.
Nanti ada buku.
Minggu lalu kita mengikuti
sebuah event yang
sangat menarik.
Laporan dari eventnya itu ada videonya,
tapi nanti sabar.
Terus minggu depannya ya, masih, apa
minggu lalu, itu masih capek karena
habis dari event yang seru-seru.
Iya. Jadi kita balik,
saya dan
mas Riza kena
sakit tenggorokan.
Lihat transkrip lengkap (1873 segmen lagi)
Waktu masih
balik aja kemarin itu suara saya,
mungkin sekarang masih, suaranya belum
balik 100%
Event dari sana udah
udah nge-drop.
Pas lagi kesana aja udah nge-drop.
Nyampe,
ya itu gara-gara ah, nggak tau lah.
Terus nyampe.
Gue nggak tahu, kebanyakan makan leis,
rasa timun, sama makan
susu goreng, nggak tahu lah.
Gue juga sakit tenggorokan
gara-gara jajan aneh-aneh.
Untung langsung.
Susu goreng.
Itu yang kami bawain itu ya?
Waktu dimakan lambian itu ya?
Iya.
Iya.
Oke.
Suaranya belum balik, akhirnya
minggu lalu saya
meminta izin.
Israhatkan badan, israhatkan suara.
Saya dan istri saya nggak ngomong.
Nggak ngomong hanya.
Terpaksa nggak ngomong
pakai bahasa isyarat.
Oke, akhirnya kita bisa
live lagi, ya nggak live ya.
Kita bisa rekaman lagi karena
ya karena saya ada kelas juga,
kelas malam, jadinya nggak bisa.
Selasa malam itu ada kelas.
Jadi terpaksa rekaman
mungkin dalam 1-2 minggu ke depan.
Mudah-mudahan kita bisa latih lagi nanti
di minggu 3 ya.
Habis itu selasa depannya lagi,
murid-muridnya suruh nonton ini aja.
Extra credit nanti.
Siap, siap, siap.
Oke.
Kita mau ngomongin random atau ngomongin topic?
Tadi di random,
sekarang topic lah.
Topic sapalas.
Malam hari ini kita akan bahas
tentang salah satu framework yang bisa dibilang
yang cukup
menjadi kemenang ya
waktu di normal.
Oh iya, oh iya ya.
Seperti kemarin kan lumayan
selain usage-nya
lumayan banyak.
Cuma, sebenarnya usage-nya masih kalah banyak
dari beberapa framework lain ya.
Cuma sentimennya positif.
Jadi orang-orang yang pakai itu
senang, termasuk saya.
Kau punya 2 framework
favorit saya?
Satu, udah pernah dibahas ya RedBoot kayaknya waktu itu.
Yang kedua ini,
baru sekarang ngebahas.
Dan selama ini, kira-kira udah pernah.
Ternyata belum ya.
Dekup sering disinggung, tapi belum pernah dibahas
secara mendalam.
Ya.
Yaitu,
Astro.
Astro Boy.
Survey dulu. Disini, temen-temen
yang tau Astro Boy,
selain saya dan Irfan.
Oh itu indikasi,
itu jubahkan umur juga ya.
Jubahkan umur.
Astro Boy.
Dulu nonton
movie-nya atau
baca bukunya?
Ada comic-nya.
Kartun, kartun.
Ada comic-nya, ada kartun ya.
Saya baca comic-nya malah duluan.
Iya, emang ada comic-nya.
Sebelumnya ada comic-nya, abis itu ada kartunnya.
Terus kayaknya ada live-action-nya.
Ada,
ada yang animasinya 3D ya.
3D-nya ada.
Yang paling ingat saya, dia punya
senjata.
Profesor-nya gitu.
Ya itu reset kan.
Iya, kayak loncat atau apalah gitu.
Buat take over.
Ini jam sini
nonton, minum doang.
Apaan ini om-om?
Beras kartun aneh.
Namanya juga random.
Jadi Astro ini adalah salah satu
front-end, ya front-end,
meta framework.
JavaScript framework.
Ada apa, dia jalan di back-end
dan di front-end.
Tapi punya apa ya?
Punya keunikan.
Berbeda dengan, apa,
dengan beberapa framework.
Buka perkenalan homepics-nya.
Zoom in seperti biasa.
Oh, zoom in.
Baiklah.
Oke.
Ini
apa sih?
Sebenarnya Astro itu, ada yang bisa menjelaskan nggak
tentang Astro itu apa?
Astro itu meta framework.
Ya sebetulnya
framework, meta framework itu kan semi-buzzword ya.
Maksudnya bukan istilah teknikal
yang strik banget, tapi yang
sering disebut dengan meta framework
ya seperti ini.
Web meta framework
berbasis JavaScript.
Ya, gitu.
Intinya adalah meta framework.
Maksudnya, dia take care
routing, kayak routing
terus, apa, misalnya
handle, rendering mode,
data fetching, ya apa ya?
Templating,
hal-hal yang kita expect,
misalnya, setaranya
secara fungsi, itu
kinect.js,
shellkit, jadi, apa, nanti kita
bakal bahas soal UI framework-nya
sendiri, tapi kalau Astro sendiri
positioning-nya itu. Web
sekarang full stack meta
framework.
Ya, latar
belakangnya mungkin ya, sedikit latar
belakang, Astro ini dimulai dari
yang ini ya, content-based,
jadi kayak CMS.
Dia biasanya digunakan
untuk bikin block, ada
markdown-nya, terus
nanti dia akan otomatis, bisa
apa, static site generation
juga kan, SSG juga kan ya? Sekarang
udah bisa hybrid, nah, dulunya emang
pertama kali banget, baru static
doang.
Kayak Jackill dulu, pro jaman
dulu, Jackill. Kayak Jackill, kayak
Gatsby, betul.
Mas awal-awal banget.
Iya, terus abis itu berkembang,
sampai sekarang
kayaknya Astro sudah
sekarang udah SSG, SSR, hybrid
juga bisa, udah bisa semua.
Apapun yang di Next.js
bisa, Astro bisa.
Dia tetep mempertahankan
content-driven websites ya.
Kira ini bakal diganti gitu.
Enggak, entah
sebenernya kalau kenapanya, nggak tahu ya,
karena misalnya, ya
kok bukan bagian dari itunya mereka,
cuma lihat dari di Discord,
kadang kan suka ada apa,
pertanyaan,
content-driven, itu kan
lawan katanya yang ad
banget ya, jadi ada webpage, webpage itu
biasanya misalnya yang lebih ke content,
ada juga web app yang
lebih ke misalnya
interactive, dan banyak
line site interaction, ada yang
nanya, misalnya sering ada yang nanya apakah
Astro bisa dipakai buat
keperluan seperti itu.
Entah kenapa, marketing message-nya
adalah
Astro itu fokusnya untuk content-driven
yang butuh SEO, yang lebih banyak,
maksudnya walaupun ada interactivity-nya
kayak like, comment, atau semacamnya,
cuma lebih ke content-oriented,
tapi sebetulnya secara teknis
ya nggak ada hal yang
membatasi.
Jadi, misalnya
cuma load 3 component
yang isinya full
interactivity ya boleh-boleh aja sih,
cuma mungkin positioning ya
kalau dilihat sekilas.
- Oh.
Websitenya Netlify ya dibuat
pakai Astro ya?
- IDX.dev juga pakai Astro?
- Iya.
- Kayaknya sih Google tuh banyak yang
demen Astro deh, itu Firebase juga
marketing sama blocknya,
marketing site sama blocknya Firebase
juga di Astro tuh?
- Padahal kan
kontributor Google banyak
yang ngerjain Elevante, kenapa
dia nggak pakai Elevante?
- Bahkan beda orang kali.
Cuma itu nggak kenapa,
Astro itu kayaknya sekali coba,
terus jadi pengen pakai terus.
Ya nggak tahu, ini
observasi subjektif ya, cuma maksudnya
buktinya orang-orang itu yang punya
banyak off-sea line,
itu juga pada pakai Astro jadinya.
- Plus, kalau company segede
Google belum tentu loh, itu yang
ngerjain internal Google-nya
bisa jadi agensi.
- Bisa. - Karena
yang tim Google sendiri
kan misalnya urus
IDX ya, core timnya ya
taunya cuma urus IDX-nya.
Nggak bisa nyiasin.
Dan kalau misalnya mau bikin
tampilan depannya, mungkin ditanya
timnya, ada nggak yang bisa bikin
marketing site pada geleng
semua ya udah pasti, dia nggak bisa
ambil dari tim lain
untuk membuat, misalnya kayak tim
Elevante yang untuk membuat
site-nya nggak bisa, itu udah cross-team.
Kemungkinan besar mereka
pakai, mereka
pakai budget-nya untuk cari external
agensi.
- Misalnya differential-nya firebase, pasti
kan bikarnya kan buat bikin demo-demo
content firebase kan, maksudnya
kalau bloknya
sendiri dibikin pakai apa, ya udah
kayak prioritas
selanjutnya lah.
- Saya, saya tahu begitu
karena pernah jadi
pernah kerja untuk
agensi yang
mengerjakan projeknya Google, jadi ya
memang ada lebih itu
caranya.
- Jadi ASTRO kayaknya
- Kelihatannya salah satu itu deh
agensi itu, maksudnya salah satu target
audience-nya ASTRO
ini, kan mereka harus bikin
banyak apa
website yang content-orientated
serata kan, kalau agensi
langsung buat demo-demo
marketing kan
mudah
di-customize tuh, termasuk yang
di kanan tuh.
- Server-first, content-driven dan
customizable. Server-first
berarti server render ya
maksudnya ya.
- By default, ya by default
semuanya server render, kita bisa
opt-in untuk client render.
- Okay.
- Wow. - Nah, yang mungkin
sedikit berbeda adalah
arsitekturnya, mereka
kabarnya menggunakan
island-architektur ya.
- Salah satu dari, ya
mungkin udah, sekarang udah mulai
ada beberapa ya web framework
yang pakai island-architektur. - Apa itu island-architektur?
- Nah, boleh jelaskan. - Nah, kita dulu pernah bahas ya.
- Episod 1.
- Ya. - Episod 1.
- Episod 1.
- Ya, jadi
apa sih? Tempet.
Ada penjelasannya di block-nya harusnya.
Cuma, nanti aja.
- Di block?
- Iya, episode 1 kita
ngomong island-architektur.
- Cuma di astro,
di dokumentasi astronya juga ada
di somewhere.
- Ada di halaman depan.
Salah, salah.
Core concept di
documentation.
Di dokumentasinya.
Kita ga ada dokumentasi ya.
- Terus, itu core concept.
Astro island.
- Biar ada ilustrasinya deh.
- Ada gambarnya
dibawah. - With history.
- Pioneer and popularize
ya, mengklaim bahwa
mereka yang mempionir
dan mempopularkan
architektur front-end
yang disebut island.
Yang kita bahas dulu di episode
berapa? 0? 1?
- From Fondant Island was first coined
by Etsy front-end architect
at the Tyler Miller
in 2019.
General idea from island
architektur is deceptively simple.
Render HTML pages on server
and inject as holder
or slot around highly dynamic
regions.
It can then be hydrated on the client
into small self-contained widget
for reusing their server
and their initial HTML.
- Jadi dari server, kiri markup
HTML, kan sebetulnya
yang kita bahas sekilas tadi
sebagian besar halaman web
kan ga semua bagiannya
interaktif dan butuh
banyak JavaScript ya, terutama
kalau jenis-jenis kayak marketing, landing page,
blog, yang kayak
text-textnya, text, gambar
ya udah, itu kan bisa dirender
di server, dikirim semua sebagai
HTML markup.
Cuma ada bagian-bagian tertentu
yang butuh interaktivity, client-side
interaktivity, misalnya yang paling sering
kayak like button, load comment
buat nge-fetch comment,
atau buat kirim form yang kayak gitu-gitu
tuh, kayak ditandain
secara khusus. Nah, dikirim
masih berupa
placeholder sementara yang masih
disabled, baru di-hydrate
istilahnya di-hydrate atau
digontor dengan JavaScript client-side
pas udah di-browser.
Jadi apa, itu
bisa meng-improve performance kan
karena ga semua
diproses di-browser
dan lebih
apa, lebih ideal buat
SEO, user experience. Masalah utama
masalah utama SPA
kan hydration.
Iya, betul.
Nah, itu
kan satu ya, salah
satu apa namanya
keunikan dari
framework Nostro
keunikan berikutnya adalah
zero-login, artinya
temen-temen bisa menggunakan
front-end framework yang temen-temen
favoritkan. Misalnya
mau pake React, bisa pake
Vue, bisa React
sama-sama React, JSX juga
self-spelt, ada solid juga.
Dia menaungi, menaungi semua agama ya.
Iya.
Agama. Gak semua,
baru ini, baru ini.
Kan 5 besar, 5 besar.
Anggular ga ada, anggular.
Anggular ga ada.
Anggular digucilkan.
Nggak, apa, lagi-lagi ini marketing
ya, pokoknya sebetulnya ga zero
juga sih, kan soal routing,
soal apalah kayak
asyitektur yang globalnya ya,
kalau kita udah terenggur pake Astro
misalnya, kalau mau pindah
ke meta framework lain ya,
ga zero juga kan, tetep harus
ada effortnya, tapi dari segi
UI component, emang yang
fully agnostik.
Dia ga peduli, dia ga peduli componentnya apa
aja kan, template-nya kayak apa
terserah sih, dia bakal hanya
ngerender aja.
Tapi ini kan hanya sebatas
UI component kan,
fitur-fitur lain, enggak kan,
misalkan kayak use state gitu,
ada enggak? Bisa enggak?
Use state kan dari React, asal
dipanggilnya dari dalam React
component, itu jalan.
Jadi ya itu bisa.
Tapi fiturnya juga berarti ya?
Iya. Nah, cuma kalau yang udah
advanced kayak React server
component, itu keliatannya
di support-nya sebagian, enggak
full. Nah, exactly gimana, belum nyoba sih.
Cuma kalau ngomongin
secara umum, kayak React
ya dengan segala macem hooks-nya,
bisa asal didalam React
component. Begitu juga dengan swell.
Swell misalnya ada store ya,
store yang
pakai dollar sign itu,
bisa dipersiskan dollar misalkan.
Atau semacamnya apapun,
fitur swell, apapun,
jalan, asal dipanggil dari
component swell, dan misalnya
di satu astrosite,
entah gimana, kita pakai
lebih dari satu UI framework
nih, dicampur, itu bisa
cuma kalau yang pentingnya,
misalnya, tadi misalnya
React, ada context
atau swell, ada store,
itu ya cuma bisa disaling
baca ya di component
yang seagama,
yang satu jenis,
tapi bisa di kombinasi semua.
Itu contoh, island architecture-nya
tuh yang by button tuh, dikasih client
load tuh, jadi cuma
yang di hydrate itu cuma yang
button,
button itu aja, sisanya
servo side rendering.
Ini contoh syntax-nya ya,
jadi dia menggunakan, apa istilahnya
ini, front matter ya, pakai
tiga dash ya,
tiga tanda minus gitu,
itu artinya apa tuh?
Front matter.
Kalau istilah
itu syntax-nya
Astro.
Kalau dispel kan, biasanya
pakai script kan,
buka script, tutup,
terus disini kan template-nya.
Nah, kalau di Astro itu
ini bagian JavaScript-nya,
ini bagian
JSX-nya, template-nya.
Iya.
Jadi, kalau misalkan ini kan
ada product nih, product-nya disini
kita define, dia bisa dapat disini.
Nah, related
sama component, buka deh
link yang dicat soalnya, apa?
Masih setema
sama ini.
Nah,
jadi ini introduction
soal, mereka
pakai termanya framework
components, UI framework
integration.
Nah, jadi yang disupport secara resmi
itu tuh, yang di screen.
React, swell,
view, solid, alpin,
lid. Nah, cuma mereka
membuka semacam API,
plugin, kalau mau bikin
unofficial integration boleh,
jadi kalau ada yang mau
bikin integrasi angular, mungkin ya
nggak tahu bisa atau nggak.
Ya, itu dibuka untuk
community plugins.
Sama
balik ke framework component tadi deh.
Nah, apa?
Scroll down ke bawah.
Oh, bisa.
Nah, ini, using framework
component. Nah, ini cara import-nya.
Sama,
kalau misalnya kita cuma
masukin, apa,
render component-nya as is,
kayak si My React component tuh yang
di highlight, itu akan
SSG.
Jadi, dirender di server.
SSG?
Static Site United?
SSR.
Jadi, tadi makanya di
marketing, di landing page-nya,
tulisannya server
site by default, ya.
Jadi, ini
by default akan dirender
dari server si My React
component-nya.
Karena emang, apa,
filosofinya gitu. Kadang kan,
kalau orang belum tahu kan, bingung
jadinya.
Jadi, selain UI
framework yang apa,
UI framework yang bisa dipakai itu
bermacam-macam, mulai dari
React file dan lain-lain, Astro juga
sendiri kan, ya.
Kalau temen-temen masih belum punya preferensi,
pakai .Astro.
Itu kita pakai syntax HTML
polosan, bisa vanilla HTML.
Jadi, kita kopas dari HTML
mana pun, atau kita nge-tick HTML
manual, bebas.
Nah, itu stage pertama. Tapi gimana
kalau kita butuh client-side interactivity?
Itu opt-in. Nah, itu di section
dibawahnya tuh.
Oh, client-side.
Nah, itu
misalnya kita butuh. Jadi, apa,
itu kayak filosofinya
Astro sih. Kayak
yang, tau kan, yang HTML purist
gitu loh, yang apa,
yang mindset
web yang
pure, yang HTML, CSS, vanilla
by default. Ya, kalau bisa pakai
HTML, nggak usah HTML dan CSS,
nggak usah JavaScript client-side,
ya udah, pakai aja
HTML, CSS. Makanya dia bisa zero
JavaScript by default, ya. Jadi, bisa aja
kalau web.
Ya, kalau web kita nggak membutuhkan JavaScript
sama sekali, nggak ada interaksi,
nggak ada di, cuman
landing page aja, nggak ada
font bahkan. Ya, dia
hanya HTML, CSS aja berarti.
Nah, jadi opt-in
kalau kita butuh, misalnya button yang
client-side interactivity, like button
atau whatever lah. Nah, itu
itu contohnya kan bisa
import mouse weld lah,
JSX.
Ya.
Pernah-pernah.
Oke,
seperti contohnya, smelt ya.
Media co-edit.
Pertama, dia pakai web API lain lagi
yang namanya request idle
callback. Mungkin kalau yang
kalau kita ngulik
performance tuh mungkin pernah ketemu
API itu deh.
Jadi, itu tuh event yang
ngefire waktu main thread-nya
udah bebas. Main thread kan
memproses macem-macem lah di awal.
Begitu dia bebas,
ngefire
ada punya request idle callback gitu.
Jadi, itu pure web
API. Jadi, Astro ini web
API-minded banget sih sebetulnya.
Web standar ya web standar.
Contoh, contoh
barang yang pernah
saya pakai request idle callback ini untuk
ngerender burger menu.
Burger menu yang
diatas itu kan
ada transition,
ada apa,
di dalam burger menu itu kan ada
komponen yang harus dirender secara
client-side.
Maka, dan itu gak butuh-butuh
amat di page load. Dan gak butuh-butuh
amat saat
kalau pakai intersection on server gak bisa juga
karena dia muncul di atas.
Awal. Jadi, gak bisa.
Jadi, paling cocok adalah
request idle callback. Jadi,
nunggu aja sampe semuanya kelar.
Begitu ada tenaga dan waktu
luang ya sempatnya.
Sesempatnya.
Kan jarang juga ya user
begitu page load
langsung berubur-ubur pencet burger menu.
Ya, saatnya dia
pencet ya dia
yaudahlah, nunggu aja sabar kenapa sih.
Kali ini cuma
1-2 user yang langsung pencet.
Nah, benar.
Maksudnya, ini kan
ini keliatannya sih selama ini
orang awam bahkan developer
awam yang gak terlalu ngulik
web API atau performance kan
relatif jarang yang keliatannya.
Nah, senang sih
liat Astro mempopulerkan
web API yang begini-gini maksudnya
jadi kepake. Cuma
di sisi lain jadi malah mungkin
belum tentu semuanya mempelajarin
juga sih apa yang ada dibalik
fiturnya Astro. Cuma maksudnya
senang aja. Jadi, salah satu faktor
yang bikin tambah senang sama
Astro karena mereka emang
mendalami fitur-fitur web API banget
dan diadopsi untuk
memperkayasi meta framework
mereka. Jadi, fitur itu tetap
kepake.
Ya, web API yang
juga dipopulerkan baru-baru
ini ya itu ya apa?
Transition.
View Transition mereka yang pertama
mereka yang pertama
integrate fitur
View Transition.
Bukan Next ya?
Bukan Next malah
kayaknya sampai sekarang belum ada
official support deh. Cuma ya
sudah. Eh, SpellKit ya.
SpellKit sudah.
Tapi yang paling pertama itu Astro.
Astro. Ya, ini kan
View Transition. Katanya Next itu kan
Bleeding Age.
The Next Thing. Kok nggak?
Nggak duluan sih.
Next Thing of React.
Oh, Next Thing of React.
Kalau Astro,
Next Thing-nya Web API.
Dan, ya
selebihnya sih hampir-hampir sama ya.
Kayaknya, beberapa framework
juga sudah menyediakan. Udah ada DevTool
baru juga yang cukup membantu.
Jadi, bisa diklik untuk
ini ya.
Apa? Untuk
audit, untuk setting, untuk
apa lagi?
Isinya apa aja sih?
Ada opsinya
Accessibility lah. Cuma
Next.JS itu
ada plugin-nya juga.
Atau nggak, nggak tahu. Intinya sih buat
kayak Inspek, routing-nya,
path-nya, parameter-parameternya.
Next.JS itu malah nggak ada ya.
DevToolbar yang sedetail itu.
Next.JS nggak ada.
Tapi Nux kayaknya ada.
Nux lebih lengkap kayaknya.
Kalau lihat
toolbar-nya Astro, malah jadi
ingat punya-nya Laravel.
Yang debug mode-nya
itu kan di bawahnya ada
semacam kayak gitu sih.
Nah, terus ngomong-ngomong early adopter, ini
menariknya Astro sejarahnya tuh
salah satu creator-nya
itu dia yang bikin
snowpack atau gimana?
Itu snowpack bukan dia?
Itu yang?
Yang awal.
Paling kiri,
paling kiri.
Yang kecamata dekat
Astro docks, terus kemudian
ada kacamata.
Itu bukan surma ya?
Kira surma.
Dia membekukan project snowpack.
Terus dia ngadopsi.
Dia salah satu early adopter hit juga
untuk meta framework.
Salah kasih nama sih kayaknya.
Gara-gara kasih nama snow
jadi beku.
Beku, dibekukan.
Tapi maksudnya dia dengan sukarela
membekukan projectnya sendiri gitu loh.
Karena dia lihat, oh, bit ini
release width baru ini pokoknya
udah memenuhi dan kelihatan ya
udah to the future, ke depannya
ngikutin ini aja.
Dia merasa inferior
kali ngeliat,
wah udah capek-capek bikin gini doang.
Ternyata fit lebih hebat, lebih bagus gitu.
Jauh. Ya udah deh,
pake aja deh.
Nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nuh, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih, nih
Buka blog postnya yang mengingat bahwa
mereka apa?
Mereka ngerjain, misalnya ngerjain bikin snowpack,
bagi kita itu bagus.
Terus kita bikin metaframe work yang
pake snowpack.
Terus ya kan mungkin orang lain bakal
punya ego atau apalah,
berat buat pindah.
Kalau ini idealisme ya, idealisme.
Ini praktikal banget
bahwa setelah dilihat-lihat,
we ran some early experiments,
blah-blah-blah,
apa, pokoknya, wah ini bagus ya,
udah, pindah aja.
Enggak.
Enggak.
Memang ingin
merging ini aja.
Dari pada dia setengah mati bikin snowpack juga,
orang fit juga,
setengah mati bikin fit juga,
toh, itunya sama.
Kenapa
orang ladybird bisa bikin
terus ya? Meskipun ada
3 browser lain, dia bikin sendiri.
Anyway, udah, out of topic.
Browser baru ya?
Oh iya, itu pasakan browser
feature topic aja.
Nah, cuma, masing-masing guys,
si mas snowpack ini, yang lulus blog post
ini, itu jadi fokus di Astro.
Jadi, maksudnya,
in the end,
bagi developer biasa, kayak kita,
yang ngerti pakai aja, ya,
ini outcome yang bagus banget sih.
Fitnya tetap jalan, dan bagus,
teaming dengan baik, terus kita dapet
meta framework yang bagus.
Astro.
Jadi, dia bisa lebih fokus
ngerjain produk, bukan ngerjain
tools ya?
Ini juga menarik ya,
ternyata dia pakai web assembly
untuk melakukan kompilasi.
Compilernya ditulis di Go.
Dan bisa jalan di browser.
Semua teknologi baru,
terutama yang berurusan sama web,
dia adopsi,
mereka adopsi.
Wow.
Oke.
Itu 2021 ya?
Kalau nggak salah, si
masperate ini, ada di Twitter nggak ya?
Kalau nggak salah, dia
CEO of
HTML, kalau nggak salah, dia
nyebut dirinya itu.
Nah, itu, apa, kayaknya, Astro
emang positioning-nya yang HTML
banget, walaupun tetap bisa bawa
UI framework lain.
Oh,
Astro tuh ada tweet yang lucu,
kok, bentar.
Jadi, mereka sering ditanya
kenapa nggak
bikin blink element.
Terus, ponenya, jawabannya adalah
kan udah ada element
A, A element,
anchor element, nggak butuh.
Nggak perlu blink element lagi.
Tapi kalau emang pengen, kalau emang butuh,
ya bikin aja di UI
framework favorit masing-masing.
Nah ini,
CEO of HTML.
Beneran, emang nggak ada?
Nggak lah.
Terus dia nge-fans banget sama HTML
gitu.
CEO of
HTML.
Oh, ini.
To the haters asking where our blink
component is.
Let no import, lighthouse will approve.
Link. Ini menyerang
Next.js nggak sih?
Nggak sih, cuma
pada minta, kenapa nggak
bikin blink
element. Karena mungkin ekspektasi
developer lain kan kayak Next.js
atau apa, ngasih blink element, link
component, dan disangka itu
keharusan ya. Padahal kan nggak
udah ada anchor element.
Iya.
Tapi ini,
ini juga
jebakan umur juga nggak sih?
Kalau developer yang
Gen Z atau Gen Alpha, tau nggak sih
referensi world art yang modelnya
kayak gini?
Microsoft World
1998.
Microsoft World,
world art ya.
Bagi generasi tersebut, lo lihat ini
kan langsung ketahuan, langsung inget
world art aslinya.
Jadi penasaran
yang framework-framework
yang menggunakan konsep seperti
link ini selain Next.js, apalagi?
Apa ya? Kayaknya...
React?
React? Nggak.
Oh,
React Router.
Ada.
Iya, React Router, iya.
Berarti,
berarti kalau React Router,
iya, berarti
remix juga dong?
Iya, mungkin lihat.
Coba aja, remix,
link, component.
Iya, remix ada tuh.
Tapi lebih ke dunia React sebetulnya ya.
Ecosistem React, maksudnya
yang ada ekspektasi,
ada link, component.
Iya.
Justru sebenarnya,
iya.
Gimana lanjut-lanjut?
Astro sebetulnya provide
client-side routing juga sih.
Cuma yang nggak usah pakai link, component, ya dia
hijack aja anchor
element semua A yang
ke Integ Router,
ya dihijack buat client-side routing, udah gitu
doang, selar kan.
Jadi tetap nggak perlu link, component.
Tapi kayaknya yang pertama kali
yang mempopulerkan, ya walaupun
nggak dibikin memes, yang pertama kali
mempopulerkan, nggak usah pakai link
kayak gini, kayaknya Svelte awalnya.
Awalnya ya.
Mungkin sebelum Astro ada.
Karena dia nggak perlu ini juga, kan.
Sempat disebut-sebut juga,
tapi nggak sempat jadi memes.
Iya, karena nggak
jadi memes, jadi nggak.
Kurang keci.
Oke, terus
apa lagi yang menarik?
Dari Astro. Nah, ini ada
update terbaru ya dari Astro
di 17 Agustus
2 hari yang lalu.
Iya, udah versi 4 aja.
Terakhir pakai
fasi berapa, Mas?
Terakhir,
4.0 kayaknya, 4.0 sekian.
Belum 4.14.
Dia kalau upgrade, upgrade
dependensi, upgrade ini gampang nggak sih?
Atau susah?
Kalau minor gampang.
Kalau major nggak tahu ya.
Cuma major
belum ada code mode-nya.
Belum ada ya.
Oke, yang 4.14
khusus yang update 4.14 itu
dia ada content layer API.
Ada IntelliSense
content files.
Ini apa IntelliSense?
Baru lihat
sekilas di blog post ini tadi
barusan banget. Jadi di markdown
markdown
parameter-nya bisa di
IntelliSense.
Jadi ada
apa? Jadi ada
sintaksan lighting.
Keliatannya cuma
harus bentuk
bentuk datanya kayak gimana.
Ada
oke, ada linternya
gitu ya kira-kira ya.
Nah ini juga menarik nih
secara performance. Maksudnya
dia membandingkan dengan dirinya sendiri
yang sebelumnya, versi sebelumnya, bukan
membandingkan dengan framework lain. Ya, di depan
ada sih, bandingin sama framework lain sih.
Ya ini ya.
Cuma ini menarik ya.
Baru pernah lihat sih yang bandingin sama
diri sendiri.
Jadi dia bandingin sama versi
sebelumnya. Jauh lebih cepat
dengan versi sendiri. Jadi
dia tidak apa ya, nggak
cari musuh lah gitu ya.
Oh, karena
dia ngecompar
untuk satu fitur. Maksudnya cuma
fitur. Fitur khusus
EDIA doang ya.
Iya, iya, iya.
Ini
versi 4.14, update-nya segini.
Oke, ini yang terbaru ya.
Kalau versi
sebelumnya, versi 4.13
ada apa?
Request rewriting, content collection,
JSON schema, logging improvement.
Terus,
apa nih, what new in Astro
in July, server island.
Oh dia, island
accelerator itu berarti di client ya?
Yang selama ini udah aja kan
di client. Terus mereka nyoba
di server.
Belum, nggak tahu, belum nyoba sih.
Ya, kita baca sama-sama, yuk.
Ini?
Emang bisa ya? Gimana caranya?
Configure
on-demand server rendering
output mode
with an adapter.
Belum coba sih,
cuma, nggak bayang
juga. Hybrid or server
adapter node.js
experimental server island.
Adaptor-nya tuh,
maksudnya hosting target sih,
kita bisa pilih node.js,
Excel, Netify,
dan lain-lain. Ya, nggak mungkin kita pilih
Rust atau Go, gitu ya.
Nggak ada ya.
Ini runtime-nya, runtime-nya.
Avatar server
devr.
Outer page tetap berhendar.
Island content omitted.
Terus, cuma script
avatar-nya digatakan script tag.
Setelah
halaman-nya di loading,
script tag-nya bakal bikin
server-side request.
Wow.
Jadi, kayak
ini ya,
model kayak lazy loading,
gitu ya, berarti ya?
Kayak SSR, tapi lazy.
Susulan gitu. SSR-nya,
SSR terpisah, gitu ya.
Ya, kayaknya.
Masih belum ngerti, loh, konsepnya, loh.
Ini jadi minta tanya,
gimana ya?
Server island
fullback content.
Nanti coba aja
cek ada demo-nya atau nggak.
SVG slot fullback.
Oh, pakai slot ya, slot fullback.
Class generic
avatar.
Ada RFC-nya.
Ini masih eksperimental,
berarti ya?
Oke.
Nggak ngerti sih, belum ngerti cara kerjanya
gimana, belum kebayang.
Harus dicobain sih ya.
Ada demo-nya nggak tuh?
Discussion-nya.
Oh, discussion.
Ya, sample.
Coba.
Ah, harus jarang nih.
Ya, belum ada
itunya ya.
Live demo-nya di StackBlitz
atau semacamnya.
Belum.
Oke, menarik-menarik.
Tapi
apa tujuannya?
Mempercepat server side
render gitu?
Udah buka blog post-nya,
belum kelihatannya lebih dijelasin dengan
lebih apa?
Lebih dengan
kata-kata yang lebih keci deh.
Ini kan tadinya
emang di sini kan? Eh, emang
di blog post nih.
Bukan, ada yang blog post
ini, ya.
Personal content, personalized.
Masing-masing user isinya beda.
Currently you must
choose one caching strategy
untuk semua jenis content itu.
Kalau user login
personalized berarti nggak bisa ada caching.
Tapi kalau pakai server island
bisa.
Oh, karena ada cookies
atau semacamnya apa ya?
Server island digunakan untuk
content yang paling dinamis.
Misalnya personalized user,
aka card, shopping card,
product review.
Oh, terus jadi
page shell-nya bisa
pakai caching strategy yang berbeda dengan
si server island itu.
Oh, gitu.
Users, entah login atau
tidak, bisa melihat
bagian-bagian page yang paling
penting bisa langsung karena di
caching.
Pullback content akan muncul
sasaat, tapi dynamic
server side island-nya
di fetching
tersendiri,
independent from the rest.
Menarik.
Jadi bisa,
ini bisa solve masalah
ini banget ini untuk e-commerce.
Iya, kan masih shell-nya
terus menu
navigation,
fitur-fitur standarnya
di caching.
Iya, kan sama buat semua orang.
Ini namanya partial
cache dulu.
Kalau saya ngakalinnya
dulu, dia pakai partial cache.
Jadi yang di cache itu cuma
per template,
template-template.
Shell.
Jadi, ya, shell-nya
waktu dikirim itu,
gimana dulu itu ya?
Susah sih waktu itu.
Jadi,
contohnya,
situsnya membership.
Ya, kan? Situsnya membership untuk
bisa baca content
itu harus login.
Ya, kan? Nah.
Tentunya, kalau
misalnya login itu kan mengakibatkan
itu kan menjadi
kontennya nggak bisa di-cache
by default.
Karena lain-lain, masing-masing user.
Masing-masing user beda.
Shipping card-nya lain.
Jadi, sebenarnya Astro ini
solve masalah itu.
Menarik.
Nanti gue mau baca, ah, tuh, blognya
gimana cara mereka solusi.
Bawahnya dong. Itu kayaknya
menarik deh benchmarking-nya.
Yang bagian
performance.
Mereka bikin server
dash-islands.com buat
ngedemo-in. Terinspirasi
demo partial pre-rendering-nya
Next.js.
Nah, dia bikin benchmark
dan
ini ya Astro ini.
Next.js.
Ini ya.
Yang ini Astro.
Oke.
Mungkin bakal kelihatan
Seatless.
Seperti Safari, nggak bisa.
Ya udah, kapan-kapan coba
nanti abis ini coba
sendiri, masing-masing.
Soalnya tadi
buka pakai Chrome
restart terus, jadi
maksa harus pakai Safari.
Oke. Menarik ya.
Perform Consistently.
FCP-nya lebih cepet ya.
FCP-nya juga lebih cepet. Semua lebih cepet.
Wow.
Yang paling signifikan ini yang bawah ini.
Jauh sekali.
Bukan.
Dia hanya melod.
Iya. Minimal
minimal hydration.
Bukan.
Pre-rendering.
Mungkin, nggak tahu itu
meminimalisir,
mengimprove total blocking time juga
atau nggak ya?
Jadi cocok buat e-commerce
tapi kurang cocok untuk social media.
Iya, karena social media banyak.
Karena social media semua dinamik ya.
Lebih banyak dinamiknya.
Tapi kalau e-commerce
cocok banget.
Memang khusus untuk ini dia kan.
Dia udah bilang untuk konten.
Konten, generate.
Berarti sekarang udah full support ya?
Udah nggak eksperimen lagi ya?
Eh, nggak tahu masih eksperimental
atau nggak tadi tulisannya.
Kayaknya masih eksperimental deh.
Maksudnya biar user kalau mau
ya harus opt-in. Tadi ada flag-nya
kan kayaknya tadi yang didox itu.
Eksperimental kan di 4/12.
4/14 belum ya?
Nggak tahu.
Oh iya, masih itu sih.
Tadi didokumentasinya masih iya.
Gimana caranya dia bikin begini
apa teknisnya?
Bisa nggak kita
kita...
Ulit?
Kita porting ke
PHP plus JS.
Tapi harus ada
connector
yang nyambungin
ke server-side?
Anggap aja JS
yang di server-side-nya diganti PHP.
JS yang di lokalnya tetap JS.
Gitu kan.
Gue jadi pengen ngulik.
Karena kalau bisa gue pengen...
Kan open source semua. Cari aja pomodnya.
Pengen nge-solusiin.
Nge-solusiin ini.
Iya.
Nge-solusiin ini ke PHP-base.
Whatever.
Nggak penting mau WordPress atau whatever.
Jadi akustik ya?
Iya.
Nah ngomong-ngomong akustik.
Ini si server island-nya
Astro juga itu kok. Apa?
Nggak
login ke service apapun.
Jadi bisa mau pakai Fersel.
Mau pakai Node.js ya terserah.
Coba ah.
Belanja dah.
Menarik.
Menarik, menarik.
Partial pre-rendering.
Diskusi di RFC-nya.
Mereka punya satu repo khusus.
Isinya diskusi doang.
Dokumentasi dengan baik ya.
Mereka tuh niat banget
ngulis detail-detailnya.
Biasa... Bukan biasanya sih.
Stereotipticly kan.
Kalau programmer, developer, males kan
ngulis bahasa manusia panjang-panjang.
Algo langsung moding aja. Cuma
kalau mereka ini kayak effort banget buat
communicate dengan detail.
Apa lagi yang bisa di-highlight dari
Astro?
Ecosistemnya.
Ecosistemnya ya.
Salah satunya adalah
database ya.
Yang baru juga di launching ya.
Sepertinya mereka itu
mindset.
Bukan mindset sih.
Kestrateginya tuh mendekati
Laravel sih.
Laravel ya.
Banyak produk turunannya
yang optional.
Sebagian besar open source.
Optional juga.
Kalau cuma mau pakai core-nya
juga nggak apa-apa.
Cuma banyak produk-produk tambahan.
Nah, kelihatannya
serahnya agak kesana deh.
Salah satunya yang indikatif
banget ya itu si layanan database-nya.
Tapi kita bisa
lihat, apa namanya, kayak
produk-produknya dia itu dimana.
Soalnya tadi saya kesulitan mencari
AstroDB itu harus googling dulu.
Nggak ada di website sininya
dimana gitu. Bukan nggak ada.
Integration, AstroDB.
Integration kali ya?
Enggak?
Oh bukan kan?
Apakah dia tidak
mencantumkan database-nya?
Apa karena early preview jadi nggak ada?
Atau gimana tuh?
Nggak ketemu? Harus googling
dulu baru dapat nih AstroDB.
Padahal
astro.builds.sdb
Belum, karena
belum ini ya, masih early preview ya.
Mungkin ya.
AstroDB ini
pakai apa dia?
SQLite.
Karena
SQLite sudah itu ya?
Eh, bukan itu redis sih.
Kenapa
diganti dari
SQLite?
Di ganti?
Maksudnya lib SQL ini
sama dengan SQLite nggak sih?
Beda?
Nggak tahu, belum pakai.
Kayaknya iya, sama. Maksudnya
ini
driver-nya.
Driver-nya si SQLite.
Karena ini dipakai juga di Tursow.
Oh.
Oh, atau mungkin berhubungan
sama apasih SQLite itu kan
project open source.
Tapi nggak terima kontribusi kan, kalau nggak salah.
Ya, betul.
Berarti kan nggak bisa difork sesuai kebutuhan
produk-produk
atau library yang pakai kan.
Nah, terus kayaknya ada yang bikin
fork-nya.
Kalau nggak salah, Tursow yang bikin namanya lib SQL.
Mungkin digunakan juga
oleh si Astro.
Oh ya, itu betul lib SQL.
Ada penjelasannya. Benar kan?
Mana dia
ada tulisannya tadi?
Udah lewat ya?
Ini, lib SQL.
Open contribution
fork of SQLite.
Memang itu fork-nya
SQLite yang open untuk
contribution dipakai oleh
Tursow, cuma karena open source ya
boleh-boleh aja dipakai sama
library lain. Malah senang kan
si Tursow-nya karena ada yang
bantu mungkin
bentenance juga.
Oh, ini bayar tapi ya.
Ini service-nya.
Ada free tier-nya.
Ada free tier-nya. Ya, ada berbayarnya.
Jadi emang
service-nya yang
bayar.
Storage-nya 1GB.
Included per month.
Included per month.
Featurnya apa?
Everything you need.
Featurnya.
Ya, semua yang SQLite
bisa.
ORM.
Zero login.
Visual data viewer.
Global distribution.
Pricing-nya.
PSUGO.
Oh, sekarang sih Astro udah punya
comment sendiri untuk
nambahinnya.
Udah lama ini.
Dari Astro 2.
Jadi, kita
nambah kayak integrasi
swell, triac, maksudnya UI framework,
itu juga pakai itu.
Kita mau tahu
plugin-pluginnya dia itu dari mana ya?
Dari NPM aja cari gitu.
Astro something gitu.
Atau apa gitu.
Dari integrasi tadi kan?
Integrasi kan banyak.
Ini ya.
Tadi ada filter-nya tuh di atas tuh.
Coba kategoris.
DB.
Gak ada DB ya.
Webfighters.
Itu kategoris tuh.
Itu button-nya kenapa sih?
Karena
di zoom.
Zoom in.
Harus liat.
Nah, kalau official
integration, ada centangnya ya.
Kalau community.
Oh, gitu.
Starlight ini
buat dokumentasi.
View.
Astro SST.
Auto import.
Seru kayaknya ya.
Fun fact. Kayaknya
pernah cerita sih. Cuma pamar lagi aja
dulu banget. Astro bikin
hepaton. Buat bikin
integrasi. Karena dulu banget itu
pas awal banget masih lagi promote.
Terus gue ikut bikin integrasi
buat
ngerender data dari Notion.
Cuma bisa dikustom
drag and drop gitu.
Astro Notion. Terus
menang setengah hadiah.
Jadi ada
yang bikin plugin juga.
Buat integrasi data dari Notion
juga. Cuma pakai
perspektif yang beda kalau yang satunya
itu. Kayak buat
masukin data dari seluruh
isi Notion site.
Dibuat jadi CMS.
Kalau yang gue bikin kayak
lebih fleksibel sih. Cuma jadi
kepingan aja. Page page-nya dimasukin.
Jadi use case-nya buat kalau misalnya
landing page-nya. Nggak perlu
dari Notion. Cuma misalnya blog post
atau apa. Perlu ngambil data dari
Notion. Karena si juri
para jurinya mutusin
itu dua hal yang
mirip sama, tapi dengan perspektif
yang beda.
Kami berdua menang setengah-
setengah.
Setengah-setengah gimana.
Aduh ya.
Astro zaman
jadi dulu Astro itu
ada aneh.
Kalau misalnya
tadi script import
segala macam di pisahinnya pakai
front matter dash 3 kali.
Kalau misalnya
di dalam bagian script,
walaupun misalnya di komen nih
double slash,
terus ada text
apapun string lainnya, ada
dash 3 dimanapun itu,
itu langsung nge-throw error.
Dulu pokoknya masih ada bok-bok
aneh lah. Kalo sekarang
udah nggak kan? Sekarang udah
bener. As longnya
susah dipakai, konya dulu masih.
Dulu itu pas transisi dari 1
ke 2.
Apa dari 0 ke 1 ya.
Konya pas baru transisi ke
satu major version
terbaru. Masih banyak bok-bok aneh.
Itu seru sih.
Terus, apalagi ya,
mereka tuh di komunitasnya
sekarang gue udah nggak aktif sih.
Nggak banyak liat.
Cuma discordnya
itu banget sih, hidup banget.
Terus kalau misalnya
kan mereka punya
dana dari open, apa itu
yang, open collective.
Nah, open collective
yang apa, project
open source, menerima funding
atau donasi atau sponsorship
dari mana pun. Terus kayak dikelola
on public yang bisa di audit. Nah,
mereka itu punya dana yang
kayak gitu. Itu setiap
bulan random
anggota komunitas yang
dianggap aktif, misalnya sering ngebantuin
atau ngejawab pertanyaan
di discord dengan apa, dengan
konstruktif, membantu,
itu bisa tiba-tiba dapet duit,
dapet uang. Cuma ya random
gue pernah dapet sekali.
Ya, mereka maintain
banget sama komunitasnya.
Iya, dulu Gatsby
juga begitu.
Cuma Gatsby
nasibnya
begitu juga.
Gatsby kayaknya teknologinya
ditinggalkan ya
karena inisiatif
teknologi lain mengalahkan
yang dulu
yang si Gatsby
gemborkan itu udah ditinggalkan
gitu ya.
Karena
Gatsby itu bergantung ke SSG
banget, tapi sebetulnya kan
ada kebutuhan yang valid akan SSR.
Akhirnya Gatsby super SSR,
tapi telat, udah pada pindah
sebagian pindah ke Next.js.
Terus dulu kan kaku banget data
engine-nya tuh kayak harus dari
grab Qtl-nya, bawaannya dia.
Padahal cuma pengen fetch
API aja, udah itu kan
use case yang simple banget ya.
Akhirnya support juga, tapi telat.
Liat ya, gitu sih.
Ya monetize-nya di Gatsby Cloud juga
sebetulnya, cuma kalau gak ada yang
pake Gatsby-nya, Gatsby Cloud-nya
gak lari.
Nggak lari, sulit ya.
Semoga Astro,
Astro mungkin ya, internally
mereka pasti ngerti kan, maksudnya
Gatsby nasibnya gimana, mungkin ya mereka
berusaha
punya produk database
gini.
- Mereka jualan Cloud juga gak sih? - Nggak.
- Posting? - Nggak.
Astro.
Itu tadi Db?
Posting-nya enggak ya.
Dia terbuka untuk
Cloudflare, tadi kelihatan untuk Cloudflare
ada, Vercel ada.
Siapapun, Cloudflare, Vercel,
Netlify, Node.js, Polosan, maksudnya
kita punya on-prem server gitu
atau digital ocean.
Ya, pakai VM gitu ya.
Deploy.
Standard.
Ya.
Oke, ada lagi?
Yang mau dibahas?
Apa ya, dokumentasinya bagus sih.
Maksudnya setara lah sama
Next.js kalau
bisa disandingkan ya
dengan
Next.js.
Dan ini juga penulisan
dokumentasinya.
Jadi bukan cuma kodingnya,
sisi teknisnya, tapi
dokumentasinya tuh kayak diperhatiin
banget di discord-nya. Jadi kayak
ada
guide-nya, kayak how-to.
Jadi maksudnya kalau yang pengen jadi
kontributor, nah ada yang kayak gitu-gitunya tuh
itu dibiskaskan.
Jadi misalnya kita belum terlalu jago
banget buat kontribusi, atau
nggak terlalu tertarik buat kontribusi
ke Astro dalam bentuk plugin, atau
dalam bentuk pull request kode,
itu emang di-encourage banget.
Coba kamu pakai Astro,
terus sesuai use casemu, terus
apa mungkin ada nggak di docs yang
bisa di-improve? Kayak orang yang
belum biasa nulis docs pun
kayak di guide buat
kontribusi ke docs, termasuk
kayak ada guideline cara nulisnya gimana,
terus kalimatnya gimana.
Sama ini
bikin komponen-komponen
yang kayak gini, ini dibiskaskan semua
di discord-nya. Seru sih.
Kayaknya dulu yang mempopulerkan
tracker-tracker model kayak gini tuh dari
Next.js awalnya ya. Iya, tutorialnya Next.js ya.
Menarik, menarik. Ada nggak sih
open source-nya kayak gini bikin itu?
Tutorial tracker itu?
Kalau trackernya nggak tahu,
tapi si Astro itu
sangking docsite-nya
bagus, enak
dipakai, kan dia bikin starlight itu
akhirnya di open source-in.
Cuma nggak tahu ada trackernya built-in
atau nggak.
Seru ya.
Jadi ada checklist-nya.
Ini kalau kita
mengikuti tutorial-nya,
kita akan bikin block
kumpulan artikel gitu ya
dengan menggunakan Astro
di guide step-by-step-nya.
Jadi,
kalau mau tutorial-nya, silahkan ke
dokumentasinya, di situ ada block-nya.
Ini bukan ya, starlight.astro.build.
Saya bisa bikin saingannya
Hartifit dong yang dipakai.
Tutorial-tutorial sudah ada.
Bisa bikin
saingannya Hartifit nih.
Dengan tutorial-tutorial sudah ada.
Kalau Hartifit, selling point-nya kan
bukan tutorial-nya
aja.
Nah, itu starlight ini
head-to-head-nya, docusaurus
dan teman-teman. Docusaurus, ya.
Kalau docusaurus kan react ya.
Kalau ini
part-way-astro.
Itu kan text format-nya
MDX, kalau ini
Komponen, dia pakai apa?
Komponen, dia pakai apa?
MDX.
Komponen, dia pakai apa?
MDX.
Ini.
Ini.
"Bring your own UI components.
Starlight, framework,
agnostic, complete dots.
Extend with react, view,
swell, solid, and more."
Iya, sama dia yang ikutin juga.
Ini kan cuma kayak template-nya
aja kan.
Astrocyte ya, intinya.
Sebenarnya astro kan, template-nya starlight.
Nice.
Jadi kalau mau bikin dokumentasi, bisa
pakai starlight.
Oke.
Wah, kayaknya patut
dicoba ini ya.
Di-explore ya.
Buat alternatif.
Apa kita bikin?
Kita punya ini ya.
Kita punya dokumentasi yang
tak jadi-jadi.
Iya, kita mau bikin website-nya
ngobrol-ngobrol, nggak jadi-jadi.
Jangan-jangan kita bikin pakai astro aja.
Kebanyakan opsi framework
setiap kita mulai.
Menarik, menarik.
Kita mau framework lain,
kayaknya lucu pakai ini.
Benar.
Oke, kalau gitu.
Untuk diskusi
malam ini tentang astro, mungkin sekian
kalau temen-temen punya
pengalaman.
Iya, punya pengalaman menggunakan astro,
pengalaman menarik atau pengalaman
buruk mungkin, boleh
komen-komen aja.
Kita pengen coba, tapi
pengen tahu juga pendapat temen-temen
gimana dalam menggunakan
astro. Sejauh ini sih
saya coba-coba lumayan sih.
Developer experience-nya berasa beda ya.
Load-nya cepat,
kemudian straightforward,
terus dokumentasinya juga
bagus.
Integrasinya banyak, kayak UI framework-nya
bebas, sesuai selera,
KSS mau vanilla, mau tailwind,
mau apa, bebas,
performance bagus, yay, hidup astro.
Cuman untuk
dibandingkan dengan metaframe
of client yang lebih matang, mungkin
ekosistemnya belum terlalu terbentuk ya.
Dia baru punya beberapa
beberapa, apa namanya,
beberapa fitur tambahan seperti
baru database itu juga baru early
preview, kemudian
apa,
alternative hosting, kayaknya
udah banyak sih ya kalau alternative hosting.
Terus integrasinya juga mungkin
kalau misalkan contohnya, kemarin kan
kita ketemu sama Mas Adam
kan, pengen pakai open props.
Nah, ini belum ada integrasinya ya.
Ecosistemnya belum,
karena memang tergolong baru,
ekosistemnya belum ada, tapi itu adalah peluang.
Kalau temen-temen pakai open props, terus pakai astro,
bikin aja integrasinya.
Cuma kalau misalnya, jadi
behavior astro, salah satu yang utama
dia bisa pakai
nge-load script tag di head,
script atau style tag di head.
Jadi kalau ada dari CDN, misalnya kan
kalau open props kan saking kecilnya,
apa, saking kecil base CSS-nya,
loading dari
CDN pun, apa,
cepet ya, karena dia pakai
primitive yang, apa,
variable-nya, CSS variable-nya, nggak
sampai, font-nya nggak sampai berkera 3 MB.
Jadi ya, kalau
apa, kukurannya kecil bisa drag,
bisa langsung di-drop.
Plug-in-nya udah banyak, jadi ya itu betul sih,
kalau belum di-support, tinggal bikin aja.
Cuma kalau, mungkin kalau
untuk di tempat kerja yang
ya, profesional gitu, yang corporate
atau organisasi besar,
masih ragu-ragu untuk adopsi
astro sih, karena, apa ya, namanya
belum se
trustworthy JS nggak sih,
kayak, ini kan,
ini kan niche banget ya,
maksudnya yang, yang
pakai dan senang
menggunakan astro tuh masih
kayak front-end dev,
front-end web dev banget.
Kalau umurnya juga relatif muda,
kalau buat production site
di organisasi
atau corporate yang bukan
agency ya, bukan apa,
bukan creative agency,
mungkin perlu effort dikit
buat convince bahwa ini produk
yang bakal tetap ada sekian
tahun ke depan, nggak tiba-tiba
itu sih.
Tapi ada kelebihannya dia
dibandingkan framework yang lain,
maksudnya, dia bisa
mengakomodir
kode, misalkan kita udah punya nih
komponen React, ya kan
kita bisa pakai React komponen di sini.
Migrate puan-puan, jadi kayak
lebih straightforward, kan,
dibandingkan dari React ke
Spell gitu.
Mungkin itu kali ini
targetnya dia, dibangun middleware
nya, untuk
bisa orang
pelan-pelan migrate-nya ke Astro
semua nanti.
Ujung-ujungnya nanti pakai komponen Astro
sih, gitu ya. Tapi awalnya
buat kemudahan
adaptasi supaya orang mau mengadopsi
dulu, ya mereka buka
buat semua UI framework
ya.
Cuma nggak sih kayak Astro itu buat
yang emang pures banget, jadi
buat Astro itu
agak ribet buat
client-side interactivity, ya bisa
pakai JavaScript mentahan
Vanilla, ya buat orang yang gitu.
Tapi, maksudnya, kita ke depannya tetap pakai
React pun, ya emang itu open banget.
Itu dimaintain secara aktif, integrasi
React, Sweat, dan lain-lainnya.
Jadi, ke depan kita tetap
untuk interaktif komponennya, terutama
tetap pakai
React atau Sweat atau apapun itu encourage.
Nah, cuma shell luarnya kan
pakai dotastore.
Oh, iya, iya, ngerti, ngerti. Jadi, ini
positioning, dia memposisikan
dirinya di antara, jadi
ada yang tipikal orang yang
semuanya Vanilla, JavaScript, HTML
sesuai Vanilla. Nah, di atasnya
sedikit itu Astro. Di atasnya
sedikit lagi baru
SpellKit atau Next atau Nux
dan lain-lain kali ya. Ya, dia di tengah-tengah.
Jadi, aman buat semua.
Oke, oke.
Ya. Jadi, mungkin
untuk malam ini sekian dulu
ngobrol-ngobrol tentang
Astro-nya.
Dari tadi dia pahit, kagak kelar-kelar.
Terlalu suka ngobrolin Astro.
Jangan lupa ditunggu juga
apa,
komen-komennya.
Ya, kalau teman-teman punya
pengalaman, silahkan.
Kalau ada yang mau sumbang topik, boleh juga
kesana.in/ngobrolinweb.
Kita pamit dulu.
Ketemu lagi
di hari dan jam yang sama.
Selamat malam.
Selamat istirahat. Sampai jumpa. Bye-bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://sawer 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...
1 Apr 2025
Ngobrolin Lebaran
Episode ini adalah ucapan Selamat Idul Fitri dari tim Ngobrolin WEB. Eka, Ivan, dan Rizah memberikan salam Lebaran denga...
1 Feb 2023
Ngobrolin Storage
Melanjutkan episode cookie minggu sebelumnya, pembahasan bergeser ke tempat penyimpanan lain di browser — bukan basis da...
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 .