Frontend Academy · Pelajaran

Struktur Folder Berbasis Fitur

Atur kode berdasarkan domain fitur, bukan berdasarkan jenis, tempatkan test, style, dan komponen terkait secara berdekatan, lalu tegakkan batas dengan eslint-plugin-boundaries.

Struktur Folder Berbasis Fitur adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Dua Cara Mengatur Kode

Anda dapat mengelompokkan kode berdasarkan jenis (components/, hooks/, services/, types/) atau berdasarkan fitur (auth/, checkout/, dashboard/ — masing-masing berisi komponen, kait, dan sebagainya). Pendekatan berbasis fitur lebih unggul untuk aplikasi menengah hingga besar.

Berbasis Jenis — Jebakan Bawaan

Struktur tutorial React klasik mengelompokkan semuanya berdasarkan jenis. Struktur ini sulit dikembangkan: setiap perubahan berkas menyentuh beberapa folder yang tidak berkaitan, dan 'temukan semua kode checkout' berarti melakukan pencarian grep di seluruh pohon.

// Type-based (avoid for large apps):
src/
  components/
    Button.tsx
    LoginForm.tsx
    CartItem.tsx
  hooks/
    useAuth.ts
    useCart.ts
  services/
    auth.ts
    cart.ts
  types/
    User.ts
    CartItem.ts

Struktur Berbasis Fitur

Kelompokkan semua hal yang berkaitan dengan suatu fitur dalam satu folder. Mudah ditemukan, mudah dihapus, dan mudah dipahami.

src/
  features/
    auth/
      LoginForm.tsx
      SignupForm.tsx
      useAuth.ts
      auth.service.ts
      auth.types.ts
      auth.test.tsx
    cart/
      CartItem.tsx
      CartSummary.tsx
      useCart.ts
      cart.service.ts
      cart.types.ts
  shared/
    components/
      Button.tsx
    hooks/
      useDebounce.ts

Penempatan Bersama di Dalam Fitur

Sebuah folder fitur berisi: komponen, kait, layanan, tipe, dan pengujian — semua kode yang diperlukan untuk domain tersebut. Pengembang baru ingin memahami auth? Buka auth/. Ingin menghapus auth? Hapus foldernya.

Bersama dan Fitur

Kode yang digunakan oleh 2 fitur atau lebih dipindahkan ke shared/ (atau lib/). Kode yang digunakan oleh satu fitur tetap berada di dalamnya. Hindari anggapan 'mungkin dapat digunakan kembali nanti' — tunggu penggunaan kedua sebelum mengekstraknya.

Aturan Batas Fitur

Fitur tidak boleh mengimpor satu sama lain secara langsung. Jika dua fitur perlu berbagi kode, bagian yang dibagikan dipindahkan ke shared/. Jika keduanya perlu berkoordinasi, gunakan peristiwa atau penyimpanan bersama di tingkat aplikasi.

Menerapkan Batas dengan ESLint

Gunakan eslint-plugin-boundaries atau eslint-plugin-import untuk menerapkan aturan: fitur boleh mengimpor dari shared, tetapi tidak dari fitur lain.

// .eslintrc.json
{
  "plugins": ["boundaries"],
  "settings": {
    "boundaries/elements": [
      { "type": "feature", "pattern": "src/features/*" },
      { "type": "shared",  "pattern": "src/shared/*" }
    ]
  },
  "rules": {
    "boundaries/element-types": ["error", {
      "default": "disallow",
      "rules": [
        { "from": "feature", "allow": ["shared"] },
        { "from": "shared",  "allow": ["shared"] }
      ]
    }]
  }
}

API Publik untuk Setiap Fitur

Setiap fitur mengekspor API publik melalui features/auth/index.ts. Kode lain mengimpor dari '@/features/auth', bukan dari jalur yang lebih dalam. Dengan begitu, Anda dapat mengubah struktur internal tanpa merusak penggunaannya.

// features/auth/index.ts
export { LoginForm } from './LoginForm';
export { useAuth } from './useAuth';
export type { User, AuthState } from './auth.types';

// Consumers:
import { LoginForm, useAuth } from '@/features/auth';
// NOT: import { LoginForm } from '@/features/auth/LoginForm';

Subfitur Bertingkat

Fitur besar dapat memiliki subfolder: dashboard/widgets/, dashboard/charts/. Hindari penyarangan lebih dari 2–3 tingkat — pencarian menjadi menyulitkan.

Tempat Rute Berada

Halaman/rute dapat berada dalam folder tingkat teratas pages/ atau routes/. Keduanya tipis — mengambil komponen dan kait dari fitur lalu menyusunnya.

src/
  pages/
    Dashboard.page.tsx   // composes Dashboard widgets from features/dashboard/
    Cart.page.tsx        // composes from features/cart/
  features/
  shared/

Memigrasikan Aplikasi yang Sudah Ada

Mulailah hanya dengan fitur baru — letakkan kode baru di features/. Jangan memfaktorkan ulang semuanya sekaligus. Saat menyentuh berkas lama, pindahkan secara bertahap. Aturan batas ESLint mencegah kemunduran dalam struktur baru.

Kapan Berbasis Jenis Tetap Berfungsi

Untuk aplikasi yang sangat kecil (kurang dari 30 komponen) atau pustaka, pendekatan berbasis jenis sudah memadai. Gunakan pendekatan berbasis fitur segera setelah Anda memiliki domain bisnis yang berbeda (auth, checkout, billing, settings).

Pemeriksaan Singkat

Apa manfaat utama mengelompokkan kode berdasarkan fitur, bukan berdasarkan jenis berkas?

Ringkasan: Struktur Berbasis Fitur

features/ berisi kode khusus domain; shared/ berisi utilitas lintas fitur. Setiap fitur mengekspor index.ts publik. Fitur tidak saling mengimpor — hanya mengimpor dari shared. Terapkan aturan ini dengan eslint-plugin-boundaries. Halaman/rute menyusun fitur. Lakukan migrasi secara bertahap. Pendekatan berbasis jenis sudah memadai untuk aplikasi kecil.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur Folder Berbasis Fitur” gratis?

Ya — teks lengkap “Struktur Folder Berbasis Fitur” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Struktur Folder Berbasis Fitur”?

Atur kode berdasarkan domain fitur, bukan berdasarkan jenis, tempatkan test, style, dan komponen terkait secara berdekatan, lalu tegakkan batas dengan eslint-plugin-boundaries. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Struktur Folder Berbasis Fitur” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy