FluentStack

Types and Content Boundaries

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 16: Frontend ArchitectureAdvanced55 menitBahasa Indonesia

Types and Content Boundaries

Menempatkan type dan static content dekat owner agar setiap import menjelaskan alasan file itu dipakai.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan feature type dari type lintas domain yang benar-benar shared
  • Menempatkan static content di dekat feature atau track yang memilikinya
  • Menghindari folder global yang menjadi tempat semua type dan constants
  • Menyusun public import yang tidak membocorkan detail internal tanpa alasan
TypeScriptStatic ContentOwnershipImports

Isi lesson

5 blok
  1. 1.
    Type dan content juga memiliki ownerBelum selesaiWajib
  2. 2.
    Course filter type dan copy dimiliki feature coursesBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Type dan content juga memiliki owner

Wajib

Folder types atau constants global mudah menjadi tempat pembuangan: CourseFilterState, ProfileFormValues, API mapper, warna feature, dan copy onboarding akhirnya hidup berdampingan tanpa hubungan. Mulai dari owner terdekat. Type yang hanya menjelaskan feature courses dapat tinggal di features/courses/types.ts. Static course copy dapat berada di features/courses/content.ts bila tidak dipakai oleh curriculum engine lain. Baru pindahkan ke shared ketika beberapa feature menggunakan contract yang sama dan owner-nya memang lintas feature. Boundary ini membuat import memberi context: ketika membaca type, engineer tahu product area yang bertanggung jawab atas perubahan berikutnya.

Bagian ini memengaruhi progres lesson.

Course filter type dan copy dimiliki feature courses

Wajib
ts
// src/features/courses/types.ts
export type CourseFilter = {
  level: "beginner" | "intermediate" | "advanced";
  query: string;
};

// src/features/courses/content.ts
export const courseEmptyCopy = {
  title: "Belum ada course yang sesuai",
  description: "Ubah filter atau coba kata kunci lain.",
};

// src/features/courses/components/CourseEmptyState.tsx
import { courseEmptyCopy } from "../content";
import type { CourseFilter } from "../types";

CourseFilter dan courseEmptyCopy ditempatkan bersama feature karena istilah serta perubahan mereka mengikuti product courses. Type AppUser atau component Button tidak dipindahkan ke sini bila beberapa feature memang memakai contract yang sama. Jangan membuat global types hanya karena file types.ts terlihat lebih kecil; yang penting adalah siapa yang memahami dan mengubah contract itu.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Place course types and content

Pindahkan type filter dan empty-state copy ke feature courses agar owner serta import boundary lebih jelas.

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.

7 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Tempat awal yang paling masuk akal untuk type CourseFilter yang hanya digunakan course listing adalah

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • Type dan content dimulai dekat feature yang memahami serta mengubahnya.
  • Folder global bukan tempat default untuk seluruh constant dan type aplikasi.
  • Shared extraction membutuhkan contract lintas feature yang nyata dan cukup stabil.
  • Import path yang dekat owner membuat reason for change lebih mudah dibaca.
  • Berikutnya, dependency boundaries memastikan feature tidak mengambil detail internal feature lain secara sembarangan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Type dan content juga memiliki owner.

Memuat progresReview module