Ripple - Zarif bir TypeScript UI çerçevesi

• React·Solid·Svelte'in güçlü yanlarını bir araya getirerek JS/TS öncelikli tasarım ve kendi .ripple modül diliyle bileşenler oluşturan tip güvenli bir UI çerçevesi
• $ öneki kullanan reaktif değişkenler/özellikler, JSX benzeri şablonlar ve ince taneli render ile yüksek performans ve bellek verimliliğini hedefliyor
• VS Code eklentisi, Prettier ve TypeScript entegrasyonu sunuyor; ayrıca reaktif array·map·set, effect tabanlı yan etkiler ve dekoratörler (@use) gibi modern bir DX içeriyor
• Şu anda erken alfa aşamasında; SSR desteğinin olmaması ve eksik tip tanımları gibi sınırlamaları var, proje fikir denemeleri ve geri bildirim paylaşımı amacıyla açılmış durumda
• Svelte 5'in sinyal tabanlı runtime yaklaşımına benzer bir felsefeyle, JS/TS-first yaklaşımı ve LLM dostu sözdizimi denemesi üzerinden frontend çerçevelerinin evrim yönünü okumayı mümkün kılıyor

---

What is Ripple?

• Ripple, React·Solid·Svelte'den ilham alan TypeScript öncelikli bir UI çerçevesi olup kendi .ripple uzantısını kullanan bir üst küme dil üzerine kuruludur
  • JSX ile iyi uyum sağlayan bir sözdizimiyle, şablonları yalnızca bileşen gövdesi içinde kullanır ve dönüş ifadesi (JSX return) yerine statement tarzı şablonları benimser
  • Yazar, Inferno·React Hooks·Lexical·Svelte 5 gibi projelerdeki deneyimlerine dayanarak fikirleri deneysel bir biçimde hayata geçirmiştir
• Şu anda erken geliştirme aşamasında; çok sayıda hata ve TODO içeriyor, bu yüzden production kullanımı önerilmiyor
  • Amaç, fikir paylaşımı ve kuluçka süreci, ayrıca başka çerçevelere geri akabilecek olasılıkları araştırmak
  • JS/TS-first tasarımın hem insanlar hem de LLM'ler için iyi bir DX sunduğu hipotezini doğrulamaya yönelik bir girişim

Features

• Reactive State Management: $ önekiyle değişken ve nesne özelliklerinde reaktivite sağlar; türetilmiş değerler de doğal biçimde $ değişkenler olarak ifade edilir
• Component-Based Architecture: component anahtar sözcüğüyle açık bileşen tanımı, props/children desteği ve JSX benzeri şablonlar sunar
• Performance: İnce taneli (fine-grained) render ile sektörün en üst düzeyinde performans ve bellek verimliliğini hedefler
• Tooling: TypeScript entegrasyonu, VS Code IntelliSense/tanı/renklendirme ve Prettier biçimlendirme desteği sağlar
• DX iyileştirmesi: JS/TS-first felsefesi, LLM dostu sözdizimi ve varsayılan SPA yapısı sunar

Missing Features

• SSR yok: Şu anda yalnızca SPA odaklı, SSR üzerinde henüz çalışılmadı
• Eksik tipler: Kod tabanındaki tip tanımları sınırlı, ileride geliştirilecek

Getting Started / Try Ripple

• Temel şablon StackBlitz üzerinde açılabilir ya da degit ile klonlanıp Vite geliştirme sunucusu üzerinden çalıştırılabilir
  • Komut örneği: npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev akışı
• Çevrimiçi playground daha sonra eklenecek; şimdilik depodaki playground klasörü üzerinden yerelde deneme yapılabilir

VSCode Extension

• Ripple for VS Code eklentisi sunuluyor; .ripple dosyaları için syntax highlighting, gerçek zamanlı tanılama, TS entegrasyonu ve otomatik tamamlama (IntelliSense) desteği veriyor
• Marketplace sürümü ile elle kurulum için .vsix paketi bağlantıları sağlanıyor

Mounting your app

• Entry noktasında mount(App, { props, target }) biçimiyle kök bileşeni mount etme desteği sunar
  • target ile DOM düğümü belirleyen, props ile ilk özellikleri enjekte eden yalın bir API sağlar

Key Concepts

• Components
  • component anahtar sözcüğüyle, fonksiyon benzeri imzaya sahip bildirimsel bileşenler tanımlanır; JSX benzeri şablonlar doğrudan gövde içinde yazılır
  • Kısaltılmış prop yazımı ({onClick}) ve spread ({...props}) gibi alışıldık sözdizimleri desteklenir
• Reactive Variables
  • $ önekli değişkenler ve özellikler otomatik reaktiviteye sahiptir; artırma/atama işlemleri tek başına yeniden render tetikler
  • Türetilmiş durum, $double = $count * 2 gibi sezgisel bir gösterimle tanımlanır ve zincirleme türetme mümkündür
  • untrack ile başlatma anı gibi belirli bölümlerde reaktivite yayılımı engellenebilir
  • Global/modül üst düzeyinde reaktif değişken yasaktır; bunlar mutlaka etkin bileşen bağlamında oluşturulmalıdır
• Transporting Reactivity
  • Array ve nesne sarmalama ile reaktivite sınırların ötesine taşınabilir, böylece birleştirme ve birlikte yaşama mümkün olur
  • Factory fonksiyonlarının $ değer alıp içeride türetme/effect oluşturması ve tekrar $ değer döndürmesi önerilen bir kalıptır
• Reactive Arrays / Set / Map
  • RippleArray/Set/Map, standart koleksiyonları genişleten reaktif koleksiyonlardır; uzunluk/boyut değerlerine reaktif biçimde erişmek için $length/$size kullanılmalıdır
  • Metot sonuçları doğrudan kullanılabilir ya da $has gibi reaktif değişkenlere atanarak şablonlarda değerlendirilebilir
• Effects
  • effect(() => { ... }) ile, bağımlı olduğu $ değerler değiştiğinde çalışan yan etkiler tanımlanır; izleme otomatikleştirilir
• Control flow
  • Şablonlara yalnızca bileşen gövdesi içinde izin verilir; sıradan fonksiyonlar ya da değişken atamalarıyla JSX doğrudan döndürülmez
  • Şablon içinde değişken tanımı/fonksiyon çağrısı/debugger kullanılabilir; statement odaklı bir kontrol akışı sunulur
  • String literal'ler { "…" } biçiminde açıkça yazılarak koddan ayrıştırılır
• If / For / Try statements
  • if/else, şablon bloklarının içinde kullanılarak okunabilir kontrol akışı kurulur
  • for...of ile koleksiyon render etme sağlanır; key prop gerektirmeyen yalın yineleme desteklenir
  • try/catch bloklarıyla error boundary (fallback UI) oluşturulabilir; catch içinde loglama/raporlama sonrası yedek arayüz render edilebilir
• Props
  • Reaktif prop için $ öneki kullanılır; DOM özniteliklerinin de $class, $id gibi önek alması gerekir ki reaktif güncelleme çalışsın
• Children
  • Örtük bir $children bileşen slot'u sunulur; <$children /> ile kompozisyon yapılabilir
  • Açık slot bileşen tanımı da mümkündür; bu da okunabilirlik ve denetim sağlar
• Events
  • React benzeri event API'si (onClick, onKeyDown, …Capture) desteklenir; bazı event'ler delegate edilerek optimize edilir
• Decorators
  • Dekoratör sözdizimi {@use fn} ile gerçek DOM düğümü referansı alınabilir ve mount/unmount hook'ları döndürülebilir
  • Inline fonksiyon/factory üzerinden reaktif değer aktarma kalıpları ve birleşik bileşenlere aktarım desteklenir
• Styling
  • Bileşene yerel kapsamlı CSS, üst düzey <style> bloğunda yazılır; kapsüllenmiş stillendirme sağlar
• Context
  • createContext ile üst-alt ağaç arasında paylaşılan değerler kurulabilir; get/set işlemleri yalnızca bileşen içinde yapılabildiği için öngörülebilirlik korunur

Playground

• Repo klonlandıktan sonra pnpm i && cd playground && pnpm dev ile yerel playground çalıştırılabilir
  • Vite eklentisi kullanılarak playground/src içinde .ripple sözdizimi kolayca denenebilir

Why it matters

• JS/TS-first, statement tarzı şablonlar ve $ önekli reaktivite gibi unsurlar; LLM dostu kod yapısı ile okunabilirlik/statik analiz kolaylığını aynı anda arayan bir deney sunuyor
• İnce taneli render, koleksiyon reaktivitesi ve dekoratörlerle DOM hooking birleşimi; mikro optimizasyonlar ile DX'i birlikte hedefliyor
• Henüz alfa aşamasında olsa da, Svelte 5'in sinyal tabanlı akışı ile React ekosisteminin geliştirme deneyimini çapraz test ederek yeni nesil çerçeve tasarımına referans noktaları sunuyor

[aabb2467]

İyi gibi de görünüyor, değil gibi de.

[ng0301]

Bir şekilde güçlü biçimde Svelte havası veriyor gibi geliyor.
Dönüp dolaşıp sonunda ReactLike tarafına gitmez mi acaba haha

[click]

Yapay zekanın üzerinde eğitildiği içerik miktarı az olduğu için herkesin yeni framework’lerden çekinir hale geldiği yönünde bir eğilim oluşmuş gibi görünüyor.
Bence son treni Svelte yakaladı. Svelte’te bile prompt’u düzgün yazmazsan sürekli rune kullanmadan $ sözdizimiyle saldırıyor, bu da sıkıntı yaratıyor.