Belajar Nuxt - Architecture & Modularization

#Pendahuluan

Aplikasi kecil mudah dirawat; aplikasi besar yang strukturnya berantakan menjadi mimpi buruk. Episode 18 membahas arsitektur dan modularisasi Nuxt: bagaimana mengorganisasi kode agar mudah dipahami, diuji, dan dikembangkan tim.

Pertanyaannya bukan lagi "apakah kodenya jalan", tapi "apakah kode ini mudah dirawat enam bulan lagi". Episode ini memberi kalian prinsip dan pola: struktur berbasis fitur, composables yang reusable, pemisahan tanggung jawab, dan kebiasaan yang mencegah codebase membusuk.

#Feature-Based Project Structure

#Mengorganisasi per Fitur

Daripada mengelompokkan file per tipe secara global, kelompokkan per fitur. Bandingkan dua pendekatan ini:

app/
  features/
    checkout/
      components/FormAlamat.vue
      composables/useCheckout.ts
      utils/hitungOngkir.ts
    produk/
      components/KartuProduk.vue
      composables/useProduk.ts

Struktur per fitur menempatkan semua yang berkaitan dengan checkout di satu tempat. Saat fitur berubah, kalian hanya menyentuh satu folder — bukan memburu file di lima folder berbeda.

#Kapan Memakai Struktur Ini

Struktur per fitur bersinar di aplikasi menengah ke atas dengan banyak domain. Untuk aplikasi kecil, struktur Nuxt standar sudah cukup. Jangan paksakan — adopsi saat rasa sakit cross-cutting mulai terasa.

#Module Development dan Composable Utilities

#Composables sebagai Unit Logika

Composable adalah fungsi yang membungkus stateful logic agar bisa dipakai ulang. Ini unit utama modularisasi di Nuxt:

Composable hitung keranjang

export function useKeranjangCount() {
  const keranjang = useKeranjangStore()
  const jumlah = computed(() => keranjang.items.length)
 
  return { jumlah }
}

useKeranjangCount() membungkus logika menghitung isi keranjang. Karena ter-auto-import, komponen mana pun bisa memanggilnya tanpa import — dan logika tetap di satu tempat.

#Aturan Composables yang Baik

Beberapa pedoman: nama selalu berawalan use, satu composable satu tanggung jawab, dan kembalikan nilai reaktif yang siap dipakai. Composables yang baik membuat komponen tipis dan logika mudah diuji.

#Module Nuxt

Untuk kode yang dipakai lintas project, bangun module Nuxt. Module adalah paket yang bisa dikonfigurasi dan ditambahkan ke daftar modules. Ini tahap lanjutan — mulai dari composables internal dulu, lalu ekstrak ke module saat benar-benar dibutuhkan.

#Separation of Concerns: UI, Data, Logika

#Tiga Lapisan yang Jelas

Pisahkan tiga hal yang sering tercampur dalam satu komponen:

• UI: template, styling, dan interaksi murni.
• Data: pengambilan dan penyimpanan, misalnya di composables atau server routes.
• Logika: aturan bisnis, validasi, dan perhitungan.

Komponen seharusnya menampilkan data dan menangani interaksi, bukan berisi aturan bisnis:

Komponen tanpa logika bisnis

<script setup lang="ts">
const { produk, pending } = await useProduk()
</script>
 
<template>
  <div v-if="pending">Memuat...</div>
  <div v-else>
    <KartuProduk v-for="item in produk" :key="item.id" v-bind="item" />
  </div>
</template>

Komponen di atas hanya menghubungkan UI dengan data dari useProduk(). Aturan seperti perhitungan diskon atau validasi alamat hidup di utils dan server — mudah diuji dan diganti.

#Manfaat Pemisahan

Dengan pemisahan yang baik: UI bisa diganti tanpa menyentuh logika, logika bisa diuji tanpa browser, dan tim bisa bekerja di lapisan berbeda tanpa konflik besar.

#Menjaga Codebase Nuxt yang Skalabel

#Kebiasaan yang Menjaga Skalabilitas

Beberapa praktik yang mencegah codebase membusuk:

• Naming yang konsisten: satu istilah untuk satu konsep di seluruh codebase.
• Lint dan typecheck aktif: aturan dijalankan otomatis, bukan sukarela.
• Komponen kecil: komponen di atas beberapa ratus baris sebaiknya dipecah.
• Dokumentasi singkat: tulis alasan di balik keputusan non-trivial.

#Refactoring Berkelanjutan

Skalabilitas bukan hasil sekali jadi, tapi kebiasaan. Sisihkan waktu rutin untuk refactoring: hapus kode mati, pecah komponen besar, dan seragamkan pola. Codebase yang bersih membuat fitur baru jauh lebih cepat dikerjakan.

#Penutup

Episode 18 memberi kalian cetak biru codebase yang sehat: struktur berbasis fitur untuk skala besar, composables sebagai unit logika yang reusable, pemisahan tegas antara UI, data, dan logika, serta kebiasaan refactoring yang menjaga kode tetap terawat.

Inti yang harus dibawa pulang:

• Struktur per fitur menempatkan seluruh kode satu fitur di satu folder.
• Composables membungkus stateful logic agar reusable dan teruji.
• Pisahkan UI, data, dan logika agar mudah diganti dan diuji.
• Komponen sebaiknya tipis — delegasikan logika ke composables dan utils.
• Naming konsisten dan lint aktif mencegah pembusukan codebase.
• Refactoring berkelanjutan adalah kunci skalabilitas jangka panjang.

Di episode 19 selanjutnya kita akan membahas tooling modern dan build automation — memakai Nuxt CLI dan Vite secara efektif, integrasi TypeScript yang ketat, pipeline CI/CD untuk aplikasi Nuxt, serta linting, formatting, dan pre-commit hooks yang otomatis.