Advanced · Level 16: Frontend ArchitectureAdvanced60 menitBahasa Indonesia

Dependency Boundaries

Menjaga feature tidak bergantung pada implementation detail feature lain tanpa contract yang jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali import lintas feature yang membuat perubahan kecil menjadi berisiko
Memilih shared primitive atau public contract saat reuse memang dibutuhkan
Menghindari circular dependency dan deep import implementation detail
Menjelaskan arah dependency sederhana untuk project frontend yang berkembang

DependenciesImportsFeature BoundariesMaintainability

Isi lesson

6 blok

1.
Reuse tidak boleh membuat feature saling mengunciBelum selesaiWajib
2.
Pindahkan reuse ke owner shared, bukan ke feature lainBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Reuse tidak boleh membuat feature saling mengunci

Wajib

Course feature boleh memakai Avatar shared, tetapi CourseCard tidak seharusnya mengimpor ProfileHeader atau helper internal profile hanya karena saat ini tampak berguna. Deep import ke implementation detail membuat refactor profile dapat mematahkan courses tanpa tanda bahwa contract itu dipakai lintas feature. Saat dua feature benar-benar membutuhkan primitive atau type yang sama, pindahkan contract kecil itu ke shared owner atau expose public entry yang sengaja dirawat. Hindari dependency dua arah: courses mengimpor profile internals lalu profile mengimpor course internals. Arah import yang sederhana membuat impact perubahan dapat diperkirakan tanpa tool graph yang rumit.

Bagian ini memengaruhi progres lesson.

Pindahkan reuse ke owner shared, bukan ke feature lain

Wajib

tsx

// Hindari: courses mengambil implementation detail profile
import { Avatar } from "@/features/profile/components/ProfileAvatar";

// Pilih: Avatar generic dimiliki shared UI
import { Avatar } from "@/components/ui/Avatar";

// Course component tetap membawa vocabulary course
export function CourseInstructor({ name, imageUrl }: { name: string; imageUrl: string }) {
  return (
    <section>
      <Avatar src={imageUrl} alt={name} />
      <p>Instruktur: {name}</p>
    </section>
  );
}

ProfileAvatar mungkin memiliki profile menu, fallback copy, analytics, atau styling khusus profile. Avatar generic hanya memerlukan image source dan alt, sehingga courses dapat memakainya tanpa bergantung pada detail profile. Jangan memindahkan component ke shared hanya untuk menghilangkan satu import; pastikan primitive yang diekstrak memiliki scope kecil serta contract yang dapat dipakai banyak feature.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fix course feature dependency

Ganti deep import ProfileAvatar internal dengan Avatar shared agar courses tidak bergantung pada implementation detail profile.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis implementation note untuk satu import lintas feature yang ingin kamu perbaiki. Sebutkan feature consumer dan owner, detail internal yang sedang diambil, dampak jika owner di-refactor, contract shared atau public entry yang kamu pilih, serta cara kamu memeriksa bahwa dependency baru tidak menciptakan arah import balik.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/550 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut feature consumer serta owner saat ini.
Menjelaskan implementation detail atau risiko refactor yang diambil consumer.
Menentukan shared primitive atau public contract yang kecil.
Menyebut cara mengecek arah import tidak berbalik atau melingkar.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa perbaikan yang paling aman saat courses membutuhkan gambar avatar tetapi sekarang mengimpor ProfileAvatar internal?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Feature sebaiknya tidak deep import implementation detail feature lain.
Reuse lintas feature membutuhkan shared primitive atau public contract yang sengaja dirawat.
Arah dependency sederhana mengurangi risiko circular import dan refactor tak terduga.
Shared layer tidak boleh mengimpor kembali detail dari feature consumer.
Uji Kompetensi berikutnya menggabungkan folder, shared UI, service, type/content owner, dan dependency direction dalam satu refactor case.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Reuse tidak boleh membuat feature saling mengunci.

Memuat progres Review module