Datastar - Etkileşimli web uygulamaları geliştirmek için hafif bir hipermedya çerçevesi

 (data-star.dev)
16 puan yazan GN⁺ 2025-10-12 | 1 yorum | WhatsApp'ta paylaş
  • Datastar, basit statik web sitelerinden gerçek zamanlı iş birliğine dayalı web uygulamalarına kadar her şeyi geliştirebileceğiniz hafif bir çerçevedir; başlamak için HTML'e yalnızca tek bir script etiketi eklemek yeterlidir
  • HTML'i genişleterek backend merkezli etkileşimli kullanıcı arayüzleri oluşturmayı mümkün kılan hipermedya öncelikli (hypermedia-first) bir yaklaşımı benimser
  • htmx gibi backend tarafı reaktivite sunarken, Alpine.js benzeri frontend reaktivitesini de destekler ve npm paketi ya da bağımlılık olmadan çalışır
  • Frontend tarafında standart data-* öznitelikleriyle reaktif davranışlar uygulanır; backend tarafında ise olaylarla DOM değişiklikleri ve durum güncellemeleri gerçekleştirilir
  • SSE(Server-Sent Events) tabanlı gerçek zamanlı güncellemeler ve çeşitli diller için SDK'lerle, backend güdümlü reaktif web uygulaması geliştirmeyi sadeleştirmeyi hedefler

Datastar'a genel bakış

  • Datastar, HTML'i genişleten hipermedya tabanlı bir çerçevedir; backend'den doğrudan DOM'u manipüle ederek gerçek zamanlı etkileşimli web uygulamaları geliştirmeyi sağlar
  • Tarayıcı tarafında yalnızca 10.7KB boyutunda bir script yüklemek tüm işlevleri etkinleştirir; build aracı ya da çerçeve kurulumu gerekmez
  • Hypermedia Systems ilkelerini devralarak, sunucunun UI durumunu yönlendirdiği ve istemcinin bunu reaktif biçimde yansıttığı bir model benimser
  • Veri güncelleme, durum değişikliği ve DOM patching işlemlerini backend olaylarıyla ele alarak frontend mantığını en aza indirir

Kurulum

  • En basit yöntem, CDN üzerinden aşağıdaki script'i eklemektir
  • Alternatif olarak dosyayı doğrudan indirebilir ya da Datastar bundler ile kendi bundle'ınızı oluşturabilirsiniz
  • npm kurulumu veya Node ortam yapılandırması hiç gerekmez

data-* öznitelikleri ve reaktivite

  • Temel fikir, HTML'in data-* öznitelikleri aracılığıyla davranışın deklaratif olarak tanımlanmasıdır
    • Örnek: data-on-click="alert('Hello!')"
  • data-on özniteliği, belirli bir olay gerçekleştiğinde çalıştırılacak Datastar ifadesini belirtir; burada normal JavaScript de kullanılabilir
  • Özel VSCode eklentisi ve IntelliJ eklentisi ile otomatik tamamlama ve sözdizimi desteği sunar

Backend güdümlü DOM patching

  • Datastar, sunucunun frontend'i yönlendirdiği bir modelle çalışır
    • Sunucu HTML parçacıkları gönderdiğinde Datastar bunları morphing stratejisiyle DOM'a birleştirir
    • Morphing, yalnızca değişen bölümleri güncelleyerek durumu korur ve performansı iyileştirir
  • Örnek: 
    <button data-on-click="@get('/endpoint')">Open the pod bay doors, HAL.</button>  
<div id="hal"></div>
    Sunucu HTML parçacığı olarak yanıt verdiğinde Datastar id="hal" öğesini otomatik olarak değiştirir

Server-Sent Events (SSE) tabanlı akış

  • Sunucu, datastar-patch-elements olayını göndererek DOM'u gerçek zamanlı olarak güncelleyebilir

  • Aşağıdaki örnek, HAL'in repliğini gösterdikten 1 saniye sonra tekrar sıfırlanmasını gösterir

    event: datastar-patch-elements  
data: elements <div id="hal">I’m sorry, Dave. I’m afraid I can’t do that.</div>  

event: datastar-patch-elements  
data: elements <div id="hal">Waiting for an order...</div>

  • Bunu desteklemek için Datastar çeşitli diller için SDK'ler sunar:

    • Clojure, C#, Go, Java, Kotlin, PHP, Python, Ruby, Rust, Node.js
    • Her SDK, PatchElements veya ServerSentEventGenerator sınıfları aracılığıyla DOM patching olayları yayınlar

Datastar Inspector ve araçlar

  • Tarayıcı geliştirici araçlarına ek olarak Datastar Inspector ile SSE olaylarını görsel olarak inceleyebilirsiniz
  • Resmî dokümantasyonun yanı sıra yapay zeka ile üretilmiş DeepWiki, LLM için kod örnekleri ve tek sayfalık dokümantasyon gibi zengin kaynaklar da sunar

Sonuç

  • Datastar, HTML merkezli hipermedya uygulaması geliştirmeyi sadeleştiren modern bir yaklaşımdır
  • Mevcut SPA çerçevelerinden daha hafiftir ve backend ile frontend arasında dengeli bir reaktif geliştirme deneyimi sunar
  • Gerçek zamanlı akış, sunucu merkezli UI kontrolü ve bağımlılıksız dağıtım gerektiren projeler için uygundur

İlgili okumalar

1 yorum

 
GN⁺ 2025-10-12
Hacker News yorumları

  • Datastar ekibi güçlü inançları ve net bir felsefesi olan, yeni gelenlere de cömertçe zaman ayıran harika insanlar. Pro sürümü etrafındaki tartışmalar arasında gözden kaçıyor ama bu kesinlikle bir gelir elde etme stratejisi değil; şirket kâr amacı gütmeyen olarak kayıtlı. Yalnızca az sayıda kişinin ihtiyaç duyduğu özellikleri Pro’ya ayırarak, bu özellikleri isteyen küçük grubun çoğunlukla destek talebi açmasıyla oluşan yükü verimli biçimde kontrol etmeye çalışıyorlar. Hatta bu yaklaşım yenilikçi ve adil bile sayılabilir: (a) dikkat edilmesi gereken "ayağa dolanan" özelliklere işaret ediyor, (b) en çok desteğe ihtiyaç duyan ya da Datastar’dan en fazla değeri alan kişilerin küçük bir ücret ödemesini sağlıyor, (c) tüm topluluğa daha fazla zaman ayrılabilmesine olumlu katkı yapıyor

    • Eğer data-animate, data-on-resize, data-scroll-into-view gibi özellikler "ayağa dolanan" türdense, o zaman düzgün tasarlanmamışlardır. Ayrıca bunların yalnızca küçük bir azınlığın ihtiyaç duyduğu özellikler olduğunu da düşünmüyorum. İstediklerini ücretli yapmalarına itirazım yok ama buna ille de bir bahane üretmeleri gerekmiyor diye düşünüyorum

    • copy-to-clipboard özelliğinin gerçekten bu kadar yüksek destek yükü doğurup doğurmadığını merak ediyorum. Datastar’ın seviyesi gerçekten bu kadar zayıfsa, en basit özelliklerin bile düzgün çalışması için yoğun destek gerekiyorsa buna katılmam zor

  • Datastar’ın gerçek zamanlı/işbirlikçi/çok oyunculu kullanım için yeterli olmadığını düşünüyorsanız ya da Pro özelliklerinin kesinlikle gerekli olduğuna inanıyorsanız, 5 dolarlık bir VPS üzerinde çalışan ve Pro özellikleri olmadan HN ana sayfasında ayakta kalmış şu 3 demoya bakın; Datastar’ın ne kadar etkileyici bir mühendislik işi olduğunu görürsünüz

  • Devam eden ilgili HN tartışma başlıkları hakkında not:

  • Topluluğun neden bu kadar saldırgan olduğunu pek anlayamıyorum. Datastar büyük ölçüde açık kaynak, her dilde çalışıyor ve geliştirme için fon bulma çabası da ilginç. Kendi projesini kendi istediği şekilde ilerletmesi bence gayet doğal. Bir ara golang ile kurcalamayı da düşünüyorum; emekleriniz için teşekkürler. Yalnız tek bir geri bildirimim var: benim ülkemde 299 dolar gerçekten çok büyük para ve bazı Pro özellikleri gerçekten gerekli olabilir, bu yüzden fiyat çok ağır geliyor. Steam gibi ülkeye göre dinamik fiyatlandırma ya da bağış benzeri bir destek modeli düşünülse güzel olur. Animasyon gibi şeyler sveltekit’te ücretsiz geliyor; mesele bedava istemek değil, gerçekten karşılayamamak. Şirketler için daha yüksek, tek başına çalışan geliştiriciler için daha düşük fiyat olsa keşke. Şimdiye kadar çevrimiçi topluluklara ya da projelere para vermiş biri değilim ama Datastar için 5-10 dolar civarında destek vermek isterdim. Solo katman fiyatı bir Switch oyunu (silksong) seviyesine inse harika olurdu. Gerçekten çok güzel bir proje olmasına rağmen topluluktan gelen tepkinin bu kadar eleştirel olması üzücü

    • Buraya kadarki tartışmalarda bana makul görünen tek eleştiri bu. 299 dolar gerçekten birçok kişi için erişilemez bir tutar. Öte yandan geliştiriciler yüksek hayat pahalılığı olan ülkelerde yaşıyorsa ve daha yüksek değer sunuyorsa, bu onlar açısından küçük bir miktar da olabilir. Ülkeye göre fiyatlandırma istemek iyi bir fikir ama bunun nasıl uygulanacağı karmaşık ve elde edilecek gerçek fayda sınırlı olabilir. Zaten ücretsiz açık kaynak özellikler değerin ve işlevselliğin %95’inden fazlasını sunuyor; bu yüzden Pro lisansa ihtiyacı olmayan çoğu kişi bence ücretsiz sürümü rahatça kullanmalı, öğrenmeli ve fayda sağlamalı

    • Benim eleştirim şu noktalardan çıkıyor

      • Ana sayfada Pro’dan hiç bahsedilmiyor; ancak dokümantasyonu karıştırınca öğreniyorsunuz. Bir tür yemleme gibi hissettiriyor
      • Pro, sadece destek ya da örnekleri değil, gerçek özellikleri de paketliyor
      • Pro özelliklerine bağımlı olursanız Datastar’a bağlanırsınız ve bakım yetkisi satıcıya kilitlenir
      • Pro olmadan site hiç çalışmıyorsa vendor lock-in daha da büyük bir sorun haline gelir
      • Pro’da tam olarak ne satın aldığınıza dair deneyebileceğiniz bir demo yok; Alpine.js ya da React Flow Pro’daki gibi tarayıcıda test edilebilen bir şey bulunmuyor
      • Kaynak kodunu alsanız bile yaptığınız iyileştirmeleri paylaşamıyorsunuz
      • Sorun fiyat değil; yapı ve değer meselesi. Birine ucuz gelen şey başka birine pahalı gelebilir
      • Referans alınabilecek fena olmayan Pro modelleri: Alpine.js Pro, React Flow Pro

    • Küçük şirketler de kendi desteklerini sağlamak zorunda; bu yüzden hayat pahalılığı yüksek ülkelerde 5 dolar, tek bir destek talebini bile karşılamaz

  • Birkaç aydır Datastar ile Go ve Templ tabanlı bir frontend geliştiriyorum. @actions özelliğinden ve yanıt doğrultusunda sayfanın güncellenme biçiminden çok memnunum. Ancak signals özelliği konusunda kararsızım. Tek bir alan ya da dropdown gibi şeylerde iyi çalışıyor ama benim backend’im Kubernetes tarzı bir API olduğu için JSON kaynaklarını signal içinde tutmaya çalıştığımda, Datastar’ın yapıyı alt signal’lara ayırarak parse etme yaklaşımı pek uymuyor. Özellikle Kubernetes’teki label yapılarında olduğu gibi anahtarların hostname öneki taşıdığı durumları hiç işleyemiyor ve signals karmakarışık oluyor. Veri bağlama basit anahtar yollarında iyi çalışıyor ama indeks ya da hostname anahtarı gerektiren yollarda çalışmıyor. Ayrıca HTML özniteliklerinin JS tarafında otomatik dönüştürülme kuralları (snake→camel vb.) ve modifier işleme mantığı da sık hata ürettiği için karmaşık geliyor. Yine de HTMX/Alpine işlevlerini tek bir yapıda birleştirip bunu hypermedia tarzında sunmasından memnunum. NodeJS ekosisteminden kaçınabilmek de hoşuma gidiyor. RC aşamasında wire format bir kez değişmişti; ben de Fiber kullandığım ve Go SDK yerine bunu doğrudan kendim uyguladığım için güncellemek zor olmuştu. Ama format değişikliğinin iyi yönde bir değişim olduğunu düşünüyorum. Ekip doğru yönde ilerliyor gibi görünüyor; umarım gelişmeye devam eder

  • Datastar’ın fikirleri bana çok güçlü göründüğü için bir ara kullanmayı düşünmüştüm. Ama açık kaynak sürümünün Pro ile özellik rekabetine girmemesi için kasıtlı olarak sınırlanması, hızlı bir hard fork yolunu da açabilir diye endişeliyim. Zaten çok büyük bir ekosistemi de yok; dolayısıyla geçiş yapmak için yeterli neden olduğunu düşünüyorum
    [edit: açık çekirdeğin bazı eklentilerini kapalı tutan model gayet makul olabilir; olmasa bile seçenek çok. Hem Datastar geliştiricilerinin hem de kullanıcılarının başarılı olmasını dilerim]

    • Eğer hard fork konusunda endişeniz varsa, pre-pro dönemindeki eklentileri fork edip bugünkü Datastar Pro sürümüne uyarlasanız herkese faydası olur. Zaten yaklaşık 50 satırlık küçük kod parçaları; oldukça kolay

    • "Sınırlanıyor" ifadesi fazla kaçıyor. Yalnızca Pro’da bulunan öznitelik ve event sayısı az ve bunlar temel özellikler değil. Hatta sunucudan biraz JS gönderseniz neredeyse hepsi ikame edilebilir. Ayrıntılı liste için: https://data-star.dev/reference/datastar_pro

    • Gerçekten fork yapılmasını tavsiye ederim; keşke biri yapsa

  • Sanırım React ekosistemine fazla alıştığım için, belli bir karmaşıklık seviyesinin üzerindeki işler bu yaklaşımla bana mantıksal olarak çok daha zor geliyor. Eğer anlatılanı yanlış anlamadıysam Datastar, backend’in HTML döndürdüğü bir backend-frontend modeli ve ben bunu geçmişte denedim; gerçekten tekrar yapmak isteyeceğim bir şey değil. Özellikle bağlantısı yavaş kullanıcılar için (hâlâ DSL, eski uydu bağlantıları, 2G vb. kullanan çok kişi var) bu yaklaşım, küçük miktarda JSON’u birkaç kez almak yerine büyük HTML parçalarını tekrar tekrar almak anlamına geldiğinden algılanan performansı ciddi biçimde düşürecektir

    • Benim deneyimimde 2G/3G’de react uygulamaları çoğu zaman zaten hiç açılmıyordu; buna karşılık HTML tek seferde gelince içerik genelde 1-2 saniye içinde görünüyordu. Mühendisler çoğu zaman yapay timeout’ları geri getiriyor; ilerleme algılamasını socket düzeyinde yapıyoruz ama uygulamanın kendisinde bu hissedilmiyor. Her şeyi ille de "cıvıl cıvıl" yapmaya çalışmasak keşke

    • "Backend HTML döndürüyor" modeli, 56k modem dönemindeki web sitelerinde de vardı; o zamanlar düzeni kurmak için onlarca katman table etiketi kullandığımızı hatırlıyorum

    • Frontend çok geniş bir alan. Kişisel blog ya da mağaza gibi ağırlıklı olarak statik içerik taşıyan, hızlı yükleme isteyen ve az etkileşimli sitelerde htmx türü araçlar iyi iş görebilir; ama Figma ya da Discord düzeyinde uygulamalar yapmak istiyorsanız bu yaklaşım yetersiz kalır. İşin en uç noktasında DOM sadece bir kafestir; insan ancak canvas ile GPU hesaplamasının birleşiminden tatmin olur

    • Tamamen çevrimdışı çalışmanız gerekiyorsa elbette başka çare yok. Ama sitelerin büyük çoğunluğunda kalıcı duruma gerçekten ihtiyaç yok; sayfa önbelleği ya da event durumu bile çoğu kullanım için yeterli olabilir. Datastar JS SDK’yı service worker içinde çalıştırıp gerekli durumu tarayıcı depolamasıyla senkronize ederseniz backend işlevi bile görebilir. Bağlantı yavaş olsa bile SSE akışında güçlü sıkıştırma uygulanırsa, tekrarlanan bilgi çok olduğundan sıkıştırma oranı %90’ın üstüne çıkabilir. Yavaş internet çoğu zaman yavaş cihazlarla da birlikte gelir; bu nedenle React, CSS-in-JS gibi ağır çözümler yerine Datastar çok daha hafif kalır. İşlevsellik açısından da neredeyse bir kayıp olmadan yapı aşırı sadeleşir

  • Bu özel olarak yeni bir örüntü değil. DHTML’den XHR’a geçiş döneminde bu yoldan bir kez geçilmişti ve çeşitli trade-off’lar yüzünden neredeyse terk edilmişti. DOM patching gibi yeni teknikler de sonuçta aynı sorunları taşıyor: sıkı bağlılık, kırılganlık, büyük veri yükü, gecikme problemleri. Datastar da daha çok küçük şirketlerin geliştirme maliyetini azaltmasına yarayan bir çözüm gibi; teknolojinin yeni sınırlarını zorlayan bir şey değil. Kötü değil ama tarihin tekerrür etmesi gibi hissettiriyor

    • Datastar’ın yazarı olarak söyleyeyim: yeni hiçbir şey olmaması zaten kasıtlı. jQuery döneminde sayfaya sadece hafifçe dokunulan o güzel zamanlardan, SPA’lerin her şeyi frontend’e taşımaya çalıştığı ve backend’in durumu elinde tuttuğu temel gerçeğin unutulduğu döneme geçilmesi bence talihsizdi. Benim yapmak istediğim şey inovasyon değil, normale dönüş

    • Acaba Astro bunu zaten çözmüş değil mi diye düşünüyorum

  • Sayfanın altındaki video/film o kadar hoşuma gitti ki sıradaki projemde kesin kullanmak istedim. Özellikle "The planet uncomplicanus" kısmı çok etkileyiciydi

  • https://www.zjax.dev/ ile elde edilen sonucu da beğendim