Varlıkları (Assets) Yönetme

Varlıklar (assets), uygulamanızın kullandığı statik kaynaklardır. FSD’de varlıklar, kod ile aynı yerleştirme prensiplerini izler. Onları tiplerine göre değil, kullanım durumlarına göre gruplayın ve kullanan bileşenlere yakın tutun.

Dikkat

Tüm statik dosyalar için özel bir assets segmenti uygulamak yaygın bir pratik olsa da, bu model yüksek uyum (high cohesion) ve değişikliklerin yerelliği (locality of changes) şeklindeki FSD prensiplerini ihlal ettiği için genellikle önerilmez.

Daha detaylı bir açıklamayla ilgileniyorsanız, Bölümlendirmeyi Kaldırma (Desegmentation) ve Dilimler ve segmentler hakkındaki makalelere göz atabilirsiniz.

Dilim Özel Varlıklar

Bir varlık yalnızca tek bir sayfa, widget veya özellik tarafından kullanılıyorsa, onu o dilimin içinde tutun. Bu, kapsüllemeyi (encapsulation) korur ve varlığın nereye ait olduğunu netleştirir:

• Dizinpages/

  • Dizinhome/

    • Dizinui/

      • hero-image.jpg
      • HomePage.tsx
    • index.ts

Kullanıcı arayüzünüzde (UI) görseller gibi birçok statik varlık varsa, ui segmenti içinde bir alt klasör oluşturabilirsiniz:

• Dizinpages/

  • Dizinhome/

    • Dizinui/

      • Dizinpreviews/

        • cake.jpg
        • pizza.jpg
        • …
      • HomePage.tsx
    • index.ts

UI Dışı Varlıklar

Bazen bir varlık UI’ın bir parçası değildir ancak iş mantığının çok önemli bir parçasıdır. Şu örneği inceleyin:

• Dizinfeatures/

  • Dizinbilling/

    • Dizinmodel/

      • invoice-template.pdf
      • create-invoice.ts
    • index.ts

Burada invoice-template.pdf, create-invoice.ts içindeki iş mantığı ile sıkı bir şekilde eşleşmiştir (tightly coupled). Bu gibi durumlarda, yüksek uyumu korumak ve değişiklikleri yerelleştirmek için dosyayı model segmentine yerleştirmek tercih edilir.

Paylaşılan Varlıklar

Statik bir varlık birden çok kez kullanılıyorsa, onu uygulamanın diğer her bölümünden erişilebilir olması için shared/ui içine taşıyabilirsiniz.

• Dizinshared/

  • Dizinui/

    • Dizinplaceholders/

      • cake.jpg
      • pizza.jpg
      • …

Aynı yaklaşım, paylaşılan bileşenler tarafından kullanılan statik varlıklar için de uygulanabilir:

• Dizinshared/

  • Dizinui/

    • Dropdown.tsx
    • chevron.svg

Global Varlıklar

Global varlıklar, global stil dosyaları (örneğin bir CSS sıfırlaması/reset) ve yazı tipleri (fonts) gibi şeyleri içerir. app katmanı, yalnızca uygulamanın giriş noktası (entrypoint) tarafından kullanıldıkları için bu dosyalar için doğru yerdir.

• Dizinapp/

  • Dizinstyles/

    • reset.css
    • global.css
  • main.ts

Public Klasörü

Çoğu paketleyici (bundler) ve framework, projenizin kök dizininde bir public klasörü sağlar. Buradaki dosyalar hiçbir işleme tabi tutulmadan olduğu gibi sunulur.

Vite gibi bazı derleme araçları public klasörünün konumunun değiştirilmesine izin verirken, Astro gibi diğerlerinde bu seçenek yoktur. Derleme aracınız bu değişikliği desteklemiyorsa sorun değil. public klasörü FSD yapısının bir parçası değildir ve isimlendirme çakışmalarına (naming collisions) neden olmaz.

Özet

Varlık Tipi	Konum
Dilime özgü varlıklar	Dilimin içinde (örn. pages/home/ui/)
Yeniden kullanılabilir ikonlar ve görseller	shared/ui/
Global stiller	app/styles/
Yazı tipleri (Fonts)	app/fonts/, public/ veya app/public
Statik dosyalar, favicon	public/ veya app/public

FSD prensibini izleyin: varlıkları kullanıldıkları yere yerleştirin ve yalnızca dilimler arasında yeniden kullanılmaları gerektiğinde onları shared katmanına taşıyın.