Frontend Academy · Ders

Atomik Tasarım: Atomlar, Moleküller ve Organizmalar

Tasarım ve mühendislik arasında ortak bir sözlük oluşturmak için bileşenleri atomlar, moleküller, organizmalar, şablonlar ve sayfalar olarak sınıflandırmayı öğrenin.

Atomik Tasarım: Atomlar, Moleküller ve Organizmalar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Atomik Tasarım Nedir?

Atomik Tasarım (Brad Frost, 2013), kullanıcı arayüzü bileşenlerini beş karmaşıklık düzeyinde düzenlemek için kullanılan bir düşünsel modeldir: Atomlar, Moleküller, Organizmalar, Şablonlar ve Sayfalar. Tasarımcılarla mühendislerin ortak bir sözlük kullanmasını sağlar.

Atomlar — En Küçük Yapı Taşları

Daha fazla parçaya ayrılamayan, tek amaçlı bileşenlerdir. Düğmeler, girdi alanları, simgeler, etiketler ve renk örnekleri bunlara örnektir. Soyuttur ve her bağlamda yeniden kullanılabilir.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Moleküller — Basit Bileşen Grupları

Yararlı bir iş yapmak için atomları birleştirirler. Bir SearchBar, bir Girdi + Düğme + Simge bileşimidir. Bir FormField ise Etiket + Girdi + ErrorMessage bileşimidir. Hâlâ genel amaçlıdırlar.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organizmalar — Karmaşık Bölümler

Bir arayüzün belirgin bölümlerini oluşturan daha büyük bileşimlerdir: bir Üst Bilgi (logo + gezinme + arama çubuğu + kullanıcı menüsü), bir ProductCard (görsel + başlık + fiyat + düğme) ve bir SignupForm. Bağlama daha duyarlıdırlar.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Şablonlar — Sayfa İskeletleri

Organizmaları gerçek içerik olmadan düzenleyen tel kafes düzeyindeki yerleşimlerdir. Bir BlogTemplate, Üst Bilgi, Article yuvaları içeren bir Ana bölüm ve bir Kenar Çubuğundan oluşur.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Sayfalar — Gerçek İçerik

Gerçek içerik içeren şablonlardır. /blog/[slug] sayfası, gerçek gönderi, kenar çubuğu bileşenleri ve arayüz çerçevesiyle BlogTemplate'i oluşturur.

Klasör Yapısı

Birçok ekip bileşenleri düzeylerine göre düzenler.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Avantajlar

Tasarımcılar ve geliştiriciler arasında ortak bir sözlük sağlar. Kopyalamak yerine bileşim kullanımını teşvik eder. Tasarım sistemleri oluşturmayı kolaylaştırır. Önce yeniden kullanılabilir en küçük birimi düşünmeyi teşvik eder.

Eleştiri: Katı Sınıflandırma Zordur

Uygulamada molekül ile organizma arasındaki sınır belirsizdir. Birçok ekip, bir şeyin nereye ait olduğu konusunda tartışmaya başlar; bu da açıklık amacını boşa çıkarır.

Modern Alternatif: Özellik Tabanlı Yapı

Birçok büyük React/Vue kod tabanı, katı atomik düzeyler yerine özelliklere göre (auth/, checkout/, dashboard/) düzenlemeyi tercih eder. Atomik yaklaşım, ortak tasarım sistemi katmanı için hâlâ işe yarar.

Storybook'ta Atomik Tasarım

Storybook, atomik tasarıma iyi uyum sağlar; üst düzey Atomlar, Moleküller ve Organizmalar kategorileri bileşen kitaplığında gezinmeyi kolaylaştırır.

Atomik Tasarım Ne Zaman Kullanılmalı?

Şunlar için en uygunudur: birden fazla uygulama arasında paylaşılan tasarım sistemi kitaplıkları, ortak bir düşünsel modele ihtiyaç duyan büyük ekipler ve tasarımcıların etkin biçimde yer aldığı projeler. Şunlarda kullanmayın: küçük uygulamalar, prototipler ve birlikte konumlandırmanın daha önemli olduğu özellik ağırlıklı tek sayfalı uygulamalar.

Hızlı Kontrol

Atomik Tasarımda, Girdi + Düğme + Simge kullanılarak oluşturulan bir SearchBar ne tür bir bileşendir?

Özet: Atomik Tasarım

Beş düzey vardır: Atomlar (Düğme, Girdi, Simge), Moleküller (SearchBar, FormField), Organizmalar (Üst Bilgi, ProductCard), Şablonlar (yerleşimler) ve Sayfalar (gerçek içerik). Ortak sözlük ve bileşim öncelikli düşünme sağlar. Klasör yapısı katmanları yansıtır. Ortak tasarım sistemleri için uygundur; uygulama kodunda özellik tabanlı klasörler çoğu zaman atomik yapıdan daha iyi sonuç verir.

Sıkça Sorulan Sorular

“Atomik Tasarım: Atomlar, Moleküller ve Organizmalar” dersi ücretsiz mi?

Evet — “Atomik Tasarım: Atomlar, Moleküller ve Organizmalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Atomik Tasarım: Atomlar, Moleküller ve Organizmalar” dersinde ne öğreneceğim?

Tasarım ve mühendislik arasında ortak bir sözlük oluşturmak için bileşenleri atomlar, moleküller, organizmalar, şablonlar ve sayfalar olarak sınıflandırmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Atomik Tasarım: Atomlar, Moleküller ve Organizmalar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Atomik Tasarım: Atomlar, Moleküller ve Organizmalar
Turborepo ile Monorepo Kurulumu
Mikro Ön Uçlar: Module Federation
Özellik Tabanlı Klasör Yapısı

← Frontend Academy Sayfasına Dön