Belajar Astro - Architecture & Patterns

#Pendahuluan

Project yang baru mulai selalu terasa rapi — masalah muncul ketika project tumbuh: ratusan halaman, puluhan komponen, dan banyak anggota tim. Episode 17 ini membahas arsitektur dan pola yang membuat project Astro tetap mudah dipahami seiring pertumbuhan.

Kalian akan belajar cara mengorganisasi file secara scalable, merancang pola komponen reusable dan arsitektur konten, mengkomposisikan halaman statis dengan island dinamis, serta menerapkan pola yang membuat kolaborasi tim lebih mudah.

Arsitektur yang baik bukan tentang banyaknya aturan, melainkan tentang konsistensi yang membuat keputusan menjadi otomatis.

#File Organization dan Scalable Project Structure

#Struktur yang Bertumbuh

Mulailah dari struktur default dan tambah lapisan seiring kebutuhan:

src/
├── components/
│   ├── ui/          # tombol, input, badge
│   ├── layout/      # navbar, footer, sidebar
│   └── feature/     # komponen per fitur
├── layouts/
├── pages/
├── lib/             # fungsi dan utilities
├── content/
└── styles/

Pemisahan ui, layout, dan feature memberi tempat yang jelas untuk setiap jenis komponen. Folder lib menampung logika murni yang diuji terpisah.

#Aturan Penamaan yang Konsisten

Pilih satu konvensi dan patuhi: komponen dengan PascalCase (Navbar.astro), util dengan camelCase (formatTanggal.ts), dan halaman dengan kebab-case untuk URL. Konsistensi membuat pencarian file cepat dan kolaborasi tanpa gesekan.

#Reusable UI Patterns dan Content Architecture

#Komponen dengan Props yang Jelas

Komponen reusable yang baik punya props minimal dan perilaku yang dapat diprediksi. Ikuti pola komposisi: komponen kecil melakukan satu hal, lalu dirangkai menjadi komponen lebih besar.

Pola komposisi komponen

---
import Tombol from "./ui/Tombol.astro";
---
 
<Tombol variant="primary" size="lg" onClick="..." label="Daftar" />

Komponen Tombol di atas menyembunyikan kompleksitas styling di balik props variant dan size — pemakaiannya konsisten di seluruh situs.

#Content Architecture yang Kuat

Desain arsitektur konten sebelum kontennya ada: skema collection yang jelas, taksonomi tag yang terbatas, dan hierarki halaman yang masuk akal. Content architecture yang baik membuat penulis tahu ke mana harus menaruh konten dan pembaca tahu di mana menemukannya.

#Composition of Static Pages dan Dynamic Islands

#Pisahkan Statis dan Dinamis

Halaman Astro sebaiknya sebagian besar statis, dengan island kecil untuk bagian yang benar-benar interaktif. Pola yang direkomendasikan:

Halaman statis dengan island

---
import Base from "../layouts/Base.astro";
import Pencarian from "../components/Pencarian.tsx";
---
 
<Base title="Beranda">
  <h1>Selamat datang</h1>
  <p>Konten statis yang cepat dan tanpa JavaScript.</p>
  <Pencarian client:visible />
</Base>

Layout Base membungkus konten, konten utama tetap statis, dan hanya Pencarian yang menjadi pulau interaktif. Pola ini menjaga keseluruhan halaman tetap ringan.

#Batasi Jumlah Island per Halaman

Aturan praktis arsitektur: maksimal beberapa pulau per halaman. Semakin banyak pulau, semakin banyak JavaScript dan kompleksitas. Jika sebuah halaman butuh banyak interaksi, tanyakan ulang apakah framework lain lebih cocok.

#Maintainable Project Patterns untuk Tim

#Pattern: Feature Folder

Organisasi berdasarkan fitur membuat anggota tim bekerja pada domain yang jelas. Setiap fitur memiliki komponen, util, dan test-nya sendiri. Untuk project besar, pertimbangkan pemisahan menjadi workspace monorepo (Astro Mono).

#Pattern: Shared Utils dan Constants

Pusatkan logika yang dipakai lintas fitur di src/lib: fungsi format tanggal, helper slug, konstanta navigasi, dan pemetaan kategori. Satu sumber kebenaran mengurangi duplikasi dan inkonsistensi.

Util bersama di src/lib

export function formatTanggal(t: Date): string {
  return new Intl.DateTimeFormat("id-ID", {
    dateStyle: "long",
  }).format(t);
}
 
export const KATEGORI = ["tutorial", "opini", "berita"] as const;

formatTanggal dan konstanta KATEGORI dipakai dari banyak komponen. Dengan memusatkannya, perubahan format cukup dilakukan satu kali.

#Pattern: Dokumentasi dan ADR

Catat keputusan arsitektur penting (Architecture Decision Records) — seperti pilihan adapter, pola konten, atau konvensi penamaan. Dokumentasi singkat menyelamatkan tim dari diskusi ulang yang tidak perlu.

#Penutup

Episode 17 membekali kalian arsitektur dan pola untuk project yang bertumbuh: organisasi file dengan pemisahan ui, layout, dan feature, komponen reusable dengan props jelas, arsitektur konten yang dirancang lebih dulu, komposisi halaman statis dengan island terbatas, serta pola untuk kolaborasi tim.

Inti yang harus dibawa pulang:

• Struktur folder yang jelas membuat project tetap mudah dipahami.
• Konsistensi penamaan mempercepat pencarian dan kolaborasi.
• Komponen reusable menyembunyikan kompleksitas di balik props.
• Halaman statis besar dengan island kecil menjaga performa.
• Batasi jumlah pulau interaktif per halaman.
• Pusatkan util dan konstanta di src/lib.

Di episode 18 selanjutnya kita akan membahas extensibility dan custom integrations: integrasi kustom dan plugin untuk Astro, pemakaian library dan framework pihak ketiga, perluasan build pipeline dengan script kustom, serta interoperabilitas lintas ekosistem frontend. Kreativitas kalian akan melampaui batas bawaan Astro.