Widget Yapısı ile Component Yapısı Arasındaki Fark

011. Component Nedir?

UI'ın temel yapıtaşları

Component, kullanıcı arayüzünün belirli bir bölümünü temsil eden ve mümkün olduğunca bağımsız şekilde kullanılabilen bir UI yapıtaşıdır.

• Button

• Input

• Card

• Modal

• Select

İyi tasarlanmış bir component belirli bir sorumluluğa odaklanır ve farklı sayfalarda veya feature'larda tekrar kullanılabilir.

• Tek sorumluluk

• Reusable yapı

• Props ile özelleştirme

• Bağımsız UI davranışı

022. Widget Nedir?

Birden fazla component'in anlamlı bir UI bölümüne dönüşmesi

Widget, genellikle birden fazla componenti, veri kaynağını ve kullanıcı etkileşimini bir araya getirerek belirli bir işlevi yerine getiren daha üst seviye bir UI yapısıdır.

• Dashboard Statistics

• Task Overview

• Calendar Widget

• Recent Activities

• Analytics Widget

Widget yalnızca görsel bir component olmak zorunda değildir. Veri çekme, filtreleme, state yönetimi ve kullanıcı etkileşimi gibi davranışları da kapsayabilir.

• UI

• Server state

• Local state

• User interaction

• Business context

033. Component ve Widget Arasındaki Temel Fark

Seviye ve sorumluluk farkı

Component daha küçük ve tekrar kullanılabilir bir UI yapıtaşıyken widget daha büyük bir kullanıcı deneyimini veya belirli bir işlevi temsil eder.

• Component → UI yapıtaşı

• Widget → İşlevsel UI bölümü

• Component → Daha genel

• Widget → Daha spesifik

Örneğin bir Button componenti farklı feature'larda kullanılabilirken Task Overview widget'ı yalnızca dashboard içerisindeki task verilerini göstermek için tasarlanabilir.

• Button → Component

• TaskCard → Component

• TaskList → Component grubu

• TaskOverview → Widget

044. Bir Widget Nasıl Oluşur?

Küçük componentlerden daha anlamlı bir yapı oluşturmak

Widget genellikle birden fazla küçük componentin bir araya gelmesiyle oluşturulur.

• Heading

• Select

• Card

• List

• Button

Örneğin bir Task Overview widget'ı başlık, filtre, task listesi ve loading state gibi farklı componentleri bir araya getirebilir.

• TaskOverview

• TaskFilter

• TaskList

• TaskCard

• EmptyState

055. Component İçerisinde Business Logic Ne Kadar Olmalı?

UI ile iş mantığını ayırmak

Basit componentlerin mümkün olduğunca UI sorumluluğuna odaklanması kodun tekrar kullanılabilirliğini artırır.

• Button → UI

• Input → UI

• Card → UI

• Modal → UI

Widget seviyesinde ise ilgili feature'ın ihtiyacına göre veri yönetimi ve kullanıcı etkileşimleri daha fazla yer alabilir.

• Veri çekme

• Filtreleme

• Loading yönetimi

• Error yönetimi

• Kullanıcı etkileşimi

066. Widget ve Feature Aynı Şey Değildir

Kavramsal sınırları doğru belirlemek

Widget ve feature kavramları birbirine yakın görünse de aynı seviyeyi ifade etmez. Feature uygulamanın belirli bir iş alanını temsil ederken widget bu feature'ın kullanıcı arayüzündeki belirli bir bölümünü temsil edebilir.

• Feature → Task Management

• Widget → Task Overview

• Component → TaskCard

• Atom → Button

Bu nedenle widget'lar feature içerisinde konumlandırılabilir ve feature'a özel componentleri bir araya getirebilir.

• features/tasks/widgets

• features/tasks/components

• features/tasks/hooks

• features/tasks/repositories

077. Widget Yapısı Ne Zaman Kullanılmalı?

Her componenti widget yapmamak

Her UI parçası için widget oluşturmak gerekli değildir. Widget yapısı özellikle bir UI bölümünün birden fazla component ve davranışı bir araya getirdiği durumlarda anlamlı hale gelir.

• Dashboard bölümleri

• Analytics kartları

• Task özetleri

• Calendar bölümleri

• Activity panelleri

Basit bir Button veya Input için widget kavramını kullanmak gereksiz bir soyutlama oluşturabilir.

• Basit UI → Component

• Karmaşık UI bölümü → Widget

088. Widget Yapısının Avantajları

Büyük sayfaları anlamlı parçalara ayırmak

Widget yapısı özellikle dashboard gibi çok sayıda bağımsız bölüm içeren sayfaların daha anlaşılır hale gelmesini sağlar.

• Daha okunabilir sayfalar

• Daha küçük container'lar

• Feature bazlı organizasyon

• Daha kolay bakım

Bir widget kendi UI parçalarını ve ilgili davranışlarını kapsadığı için sayfa seviyesindeki karmaşıklık azaltılabilir.

• Dashboard → Widget'lar

• Widget → Component'ler

• Component → UI elementleri

099. Örnek Bir Mimari

Component ve widget'ların birlikte kullanılması

Örneğin bir dashboard sayfasında farklı widget'lar aşağıdaki gibi organize edilebilir.

• Dashboard

• ├── StatisticsWidget

• ├── TaskOverviewWidget

• ├── CalendarWidget

• └── AnalyticsWidget

TaskOverviewWidget kendi içerisinde daha küçük componentleri kullanabilir.

• TaskOverviewWidget

• ├── Heading

• ├── Select

• ├── TaskList

• └── TaskCard

Bu yapı sayesinde sayfa, widget ve component seviyelerinde farklı sorumluluklar oluşturulabilir.

• Page → Sayfanın kompozisyonu

• Widget → İşlevsel UI bölümü

• Component → Tekil UI parçası

1010. Sonuç

Doğru soyutlama seviyesini seçmek

Component ve widget arasında doğru ayrımı yapmak, özellikle büyük React ve Next.js projelerinde UI mimarisinin daha anlaşılır olmasını sağlar.

• Component → Küçük ve reusable UI

• Widget → Birden fazla component ve davranış

• Feature → İş alanı

• Page → Widget ve feature kompozisyonu

Buradaki amaç her şeyi component veya widget olarak sınıflandırmak değil, her yapıyı sorumluluğuna ve kullanım seviyesine göre konumlandırmaktır.

• Single Responsibility

• Separation of Concerns

• Reusability

• Maintainability

Özellikle dashboard, analytics ve yönetim paneli gibi karmaşık arayüzlerde widget yaklaşımı, büyük UI yapılarını daha küçük ve anlamlı bölümlere ayırmak için güçlü bir organizasyon yöntemi olabilir.

• Dashboard Architecture

• Feature-Based Architecture

• Component Architecture

• Scalable UI