Patterns.dev

 (patterns.dev)
2 puan yazan GN⁺ 2025-12-12 | 1 yorum | WhatsApp'ta paylaş
  • Patterns.dev, JavaScript ve modern framework'lere odaklanan bir öğrenme içeriği sunan, web uygulaması tasarımı ve performans optimizasyonu desenlerini ele alan ücretsiz bir çevrimiçi kaynaktır.
  • Vanilla JavaScript, React, Vue için ayrı ayrı tasarlanmış tasarım desenleriyle render etme, yükleme ve performans iyileştirme tekniklerini sistematik olarak düzenler.
  • Kod yeniden kullanımı, durum yönetimi, render stratejileri, paketleme optimizasyonu gibi pratik örnekler ve CodeSandbox üzerinde çalışma ortamı desteklenir.
  • Tasarım desenleri birer kural değil, başvuru araçlarıdır; tekrarlayan sorun çözümünde ve kod ortaklıklarını anlamada yardımcı olacak şekilde sunulmuştur.
  • En yeni ES2017+ sözdizimi ve React Hooks tabanlı uygulamalar dahil olmak üzere, büyük ölçekli web uygulamalarının yapısal ölçeklenebilirliği ve performans artışına odaklanan materyaller bulunur.

Genel Bakış

  • Patterns.dev, web uygulaması mimarisini iyileştirmeye yönelik ücretsiz bir çevrimiçi kaynak olup tasarım, render etme ve performans desenleri etrafında yapılandırılmıştır.
  • Vanilla JavaScript, React, Vue.js ortamlarında örnek uygulamalarla birlikte her desenin amacı ve kullanım biçimi açıklanır.
  • eBook ya da PDF indirme ve çevrimiçi görüntüleme özelliği sunar.

JavaScript Desenleri

  • Temel JavaScript ve Node.js odaklı bir desen koleksiyonu sunar.
    • Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight, Factory gibi geleneksel tasarım desenlerini içerir.
  • Performans ve yükleme optimizasyonu desenleri de bolca yer alır.
    • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, Üçüncü taraf optimizasyonu vb.
  • View Transitions API ile sayfa geçiş animasyonları, liste sanallaştırma ve kod sıkıştırma gibi yeni tarayıcı özelliklerini kullanır.
Reklam

React Desenleri

  • React ve Next.js tabanlı yapısal desenler ile render stratejileri sunar.
    • Container/Presentational, HOC, Render Props, Hooks, Compound gibi yapı desenlerini içerir.
  • Render yöntemlerinin karşılaştırması
    • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR
  • React Server Components ve Next.js Core Web Vitals optimizasyonu ile ilgili rehber sağlar.
  • React Stack Patterns (2025/2026) belgesinde frameworkler, build araçları, routing, durum yönetimi ve yapay zeka entegrasyonu gibi güncel teknoloji yığınları ele alınır.

Vue Desenleri

  • Vue.js'e özel desenler ile bileşen yapısı ve durum yönetimine odaklanır.
    • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components
  • Composition API ve <script setup> sözdizimini kullanarak modern kod yapısı sunar.
    • Provide/Inject, Renderless Components, Render Functions
    • Modern Vue uygulamalar için Performans Desenleri.
    Reklam

Desen Uygulama Felsefesi

  • Patterns.dev, desenleri zorunlu kurallar değil, başvuru araçları olarak sunar.
    • Tekrarlayan sorunları çözmek için ortak çözümler sunsa da her duruma zorunlu olarak uygulanmaz.
  • Tasarım desenlerinin amacı, kod problemlerinin ortak yönlerini insan tarafından kolayca anlaşılır hale getirmektir.
  • Dil ve framework'e özel desenlerin önemini vurgulayarak, klasik GoF desenlerinin ötesine geçen modern bir bakış açısı sunar.

Öğrenme ve Uygulama Desteği

  • CodeSandbox pratik örnekleri ile her desenin gerçek dünyadaki uygulaması doğrulanabilir.
  • Görsel animasyonlu materyaller ile kavramların anlaşılması desteklenir.
  • Web performans desenleri aracılığıyla kod yükleme verimliliği ve kullanıcı deneyimini iyileştirme yöntemleri sunar.

Temel Özellik Özeti

  • ES2017+ sözdizimi tabanlı implementasyon ile en yeni JavaScript ortamlarına optimize edilmiştir.
  • React geliştiricileri odaklı optimizasyon ve web performans iyileştirmeye öncelik verilir.
  • Tasarım desenlerinin modern yorumuyla karmaşıklıktan çok kullanılabilirlik öne çıkar.
  • Büyük ölçekli web uygulamalarının ölçeklenebilirliği ve performansını artırmaya yönelik pratik bir kılavuz sunar.

İlgili okumalar

1 yorum

 
GN⁺ 2025-12-12
Hacker News yorumları

  • Önceki iş yerimde .NET kurumsal uygulamaları geliştirirken tasarım kalıpları gerçekten çok faydalıydı
    Birden fazla ekip aynı kalıpları kullandığı için kod tanıdıktı ve yeni projeler de tutarlı bir yapıya sahipti
    Ama şimdi 10 yılı aşkın bir JS uygulamasıyla uğraşıyorum ve Java EE tarzı getter/setter aşırı kullanımı ile karmaşık factory yapıları yüzünden bunun zararlı olduğunu görüyorum
    Kalıpları neden kullandığını anlamadan aşırıya kaçınca, sonuç basitçe okunabilir koddan çok daha kötü oluyor (YAGNI ilkesini hatırlatıyor)

    • Kalıpların ‘yaratılan’ değil, ‘keşfedilen’ şeyler olduğunu düşünüyorum
      Bir geliştirici er ya da geç Adapter, Builder, Iterator gibi yapıları doğal olarak aklına getirecektir
      Tasarım kalıplarının gerçek değeri, bu keşfedilmiş kalıplara ortak bir dil kazandırarak insanların kolay iletişim kurmasını sağlamasında yatıyor
    • Birçok kalıp yalnızca C# veya Java gibi kısıtları fazla olan dillerde anlamlıdır
      C, Go, JavaScript gibi daha sade dillerde bunlar çok daha basit çözülebilir
    • Kurumsal ortamlardan gelen geliştiricilerin JS'de de aynı OOP kalıplarını zorla uygulamaya çalıştığını sık görüyorum
      Bu, dilin felsefesiyle uyuşmuyor
    • Ben de geçmişte iyi niyetle kalıplar uygulayıp bir bakım kabusu yarattım
      Başta temiz görünüyor ama zamanla mantık dağılıyor ve yeni gereksinimler gelince kalıp kolayca bozuluyor
      Sonunda insan basit bir switch ifadesini özlüyor
    • Kalıpların işe yaramadığını söyleyen insanların bazılarının büyük ölçekli sistem deneyimi yok
      Bu, sadece küçük uygulamalar yapan biriyle gökdelen inşa eden birinin bakış açısı farkı gibi

  • Eskiden Yahoo Design Pattern Library vardı
    UX kalıpları odaklıydı ve kullanıcı davranışını yönlendiren (ör. puan verme) çeşitli örnekleri iyi derlemişti
    orijinal bağlantı / web arşivi

    • Benzer bir açık kaynak proje olarak The Component Gallery var
      90'dan fazla tasarım sisteminin UI bileşenlerini toplayan bir depo ve a11y/ARIA yönergelerini öğrenmek için de iyi
      component.gallery
    • “accordion”, “carousel” gibi terimler bu kütüphane sayesinde standartlaştı
      Ortak dil üretkenliği artırdı
    • Eski web'in ruhunu hissettirdiği için nostalji uyandırıyor
    • YUI de o dönemde çağının ilerisindeydi
    • Yahoo mühendisliği gerçekten harikaydı ama yönetim başarısızlığı yüzünden çökmesi üzücü

  • Güzel bir kaynak derlemesi, yer imlerime ekledim
    Benzer siteleri de paylaşıyorum

  • Deneyim arttıkça tasarım kalıplarına bağımlılık azalıyor
    Junior geliştiriciler kalıpları öğrenmenin kariyerde kestirme yol olduğunu sanıyor ama çoğu zaman karmaşıklığı artırıyor
    Gerçekten önemli olan şey problemin özünü ve veri yapılarını anlamak
    Örneğin iki dizinin ortak öğelerini bulurken HashMap kullanarak O(n) seviyesine inmek çok daha faydalı basit bir kalıp
    Bunun bir adı yok ama pratikte her gün kullanılan temel bir kalıp
    Sonuçta önemli olan ilke ve bağlam, ders kitabı biçimi değil

    • Kalıpların ortak dil olarak değeri var
      “Singleton yaptım” dendiğinde hemen ne olduğu anlaşılıyor
      Ama aracı kutsallaştırmak problemli
    • Yukarıda sözü edilen HashMap kullanımı veritabanı dünyasında hash join diye geçer
      Postgres sorgu planlayıcısında da görülebilir
    • “Factory” gibi terimleri kullanmak utanılacak bir şey değil
      Ama koda ad verirken açıklayıcı olmak daha iyi
    • HashMap ile yapılan optimizasyon, dinamik programlamanın bir türü olarak da görülebilir
      Leetcode çalışırken öğrenmek faydalı olur
    • Tasarım kalıplarının kendisinden çok, kalıpların nasıl uygulanacağına dair kalıplar daha önemli
      Teknik kalıpların yanında organizasyonel kalıpları da ele alan bir kitap olarak
      Organisational Patterns (James Coplien, Neil Harrison) öneriliyor
      özet bağlantısı

  • Üniversite yıllarında tesadüfen Ralph Johnson'ın bizzat verdiği bir kalıplar dersi almıştım,
    hayatımdaki en faydalı derslerden biriydi
    Ralph Johnson vikisi

  • “Design Patterns are a sign of missing language features” diye bir söz var
    Yani dil yeterince ifade gücüne sahip olsaydı belki de kalıplara ihtiyaç kalmazdı
    İlgili kaynaklar: C2 Wiki, Norvig makalesi, Medium yazısı

  • Bu site iyi düzenlenmiş bir eğitim derlemesi ama Christopher Alexander'ın 『A Pattern Language』 kitabındaki gibi
    kalıplar arasındaki hiyerarşik bağlantı yapısını göstermemesi biraz eksik kalıyor
    Aslında kalıplar üst-alt ilişkileri içinde anlam kazanır ama teknik kitaplarda bu bağlam eksik oluyor
    Her kalıbın hangi problemi çözdüğünün de daha açık gösterilmesi iyi olurdu

    • 『A Pattern Language』 örneklerine bakınca, her kalıbın diğer kalıplarla organik biçimde bağlantılı olduğu görülüyor
      Örneğin “Short Passages”, “Flow Through Rooms”, “Building Thoroughfare” gibi kalıplarla bağlantılı
      Kalıp dilinin gerçek gücü de bu yapıda yatıyor

  • Kalıplar aşırı kullanılırsa yavaş ve bakımı zor kod ortaya çıkar

    • Kalıplar, problem çözme sürecinde doğal olarak keşfedildiğinde en etkili olur
      Var olmayan problemleri önceden çözmeye çalışınca gereksiz karmaşıklık oluşur
    • Sonuçta yalnızca yerinde kullanıldığında parıldar

  • POSD(Principles of Software Design) açısından faydalı kalıplar şunlar

    • Module Pattern
    • Factory Pattern (factory functions)
    • Mediator/Middleware Pattern (function pipeline biçiminde)
    • Hooks Pattern
    • Container/Presentational Pattern
      Buna karşılık Singleton, Mixin, Observer gibi kalıplar karmaşıklık artışı veya global state bağımlılığı yaratabildiği için dikkatli kullanılmalı
    • POSD'nin ne olduğunu soran bir yorum da vardı

  • Bu site derinlikten çok genişliğe odaklandığı için 2017 hissi veriyor
    Asıl önemli olan immutable data ile çalışmanın temelini öğrenmek
    for döngüsü olmadan yalnızca array metodlarıyla kod yazma pratiği çok yardımcı oluyor

    • Geçmişte ClojureScript kullandım ve immutable data ile çalışmak için iyiydi
      JS'de Object.freeze ile bir yere kadar gidilebiliyor, ramdajs gibi yeni nesne döndüren yaklaşım daha gerçekçi
      JS'in modern söz dizimi sayesinde bugün ramdajs'in yalnızca bazı fonksiyonları hâlâ faydalı
    • Bu yazı bana kendi kalıp dokümantasyonumu yapmayı deneme fikri verdi