Reaktif Programlama Nedir?

Reaktif programlama, veri akışları ve değişim yayılımına odaklanan bir programlama paradigmasıdır. Veriyi adım adım açıkça alıp işleyen kod yazmak yerine, verinin zaman içinde nasıl akması ve dönüşmesi gerektiğini tanımlarsınız. Değerler değiştiğinde, güncellemeler otomatik olarak uygulamanız içinde yayılır. Bunu bir elektronik tablo gibi düşünün: A1 hücresini güncellediğinizde, A1'i referans alan tüm hücreler otomatik olarak yeniden hesaplanır. Bu yaklaşım, kullanıcı etkileşimleri, HTTP yanıtları, WebSocket mesajları ve zamanlayıcılar gibi eşzamansız olayları yönetmede mükemmeldir.

RxJS Nasıl Çalışır?

RxJS (Reactive Extensions for JavaScript), Observables—zaman içinde değerler yayan nesneler—üzerinden reaktif programlamayı uygular. Temel kavramlar şunlardır:

  1. Observable: Değerler yayan bir veri kaynağı (örneğin tıklama olayları akışı veya API yanıtları)
  2. Observer: Yayınlanan değerlere geri çağrılar (next, error, complete) aracılığıyla tepki veren bir tüketici
  3. Subscription: Observable ile Observer arasındaki bağlantı
  4. Operators: Veri akışlarını dönüştüren, süzen, birleştiren veya manipüle eden fonksiyonlar
  5. Subjects: Hem veri kaynağı hem de tüketici olarak çalışan özel Observable'lar; çoklu yayın (multicasting) sağlar

pipe() metodu ile operatörleri zincirleyerek veri boru hatları oluşturur, ham akışları uygulamanızın tam olarak ihtiyaç duyduğu veri şekline dönüştürürsünüz.

Araç Açıklaması

RxJS Playground, RxJS reaktif programlama kavramlarıyla deney yapmanız için tarayıcı tabanlı etkileşimli bir sandbox ortamıdır. RxJS kütüphanesine ve tüm operatörlere tam erişimle, kodu doğrudan editörde yazar ve çalıştırırsınız. Playground, kodunuzu (debounce ile) otomatik olarak çalıştırır ve konsol çıktısını terminal tarzı bir panelde gösterir. RxJS kavramlarını öğrenmek, veri dönüşümlerini prototiplemek, Observable boru hatlarını hata ayıklamak ve operatör kombinasyonlarını test etmek için geliştirme ortamı kurmaya gerek kalmadan idealdir.

Özellikler

  • Tam RxJS Kütüphane Erişimi: Tüm oluşturma fonksiyonları (of, from, interval, fromEvent vb.) ve operatörler mevcut
  • Gerçek Zamanlı Çalıştırma: Kod, yazdıkça 500 ms gecikme (debounce) ile otomatik olarak çalışır
  • Terminal Çıktısı: Konsol logları, hatalar ve uyarılar stilize bir terminalde gösterilir
  • Sözdizimi Vurgulama: JavaScript kod editörü uygun sözdizimi vurgulamasıyla
  • Dönüş Değeri Görüntüleme: Son ifade değerleri ok işareti notasyonu ile otomatik olarak loglanır
  • Hata Yönetimi: Sözdizimi ve çalışma zamanı sorunları için net hata mesajları
  • Operatörler Modülü: rxjs/operators'a doğrudan erişim, pipe tabanlı dönüşümler için

Örnekler

Temel Observable Oluşturma:

const { of, from, interval } = rxjs;

// Bireysel değerleri yay
of(1, 2, 3).subscribe((x) => console.log(x));

// Diziyi Observable'a dönüştür
from([10, 20, 30]).subscribe((x) => console.log(x));

Operatör Kullanımı:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Çıktı: 20, 40

Akışları Birleştirme:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Çoklu Yayın İçin Subject'ler:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Dönüşüm Boru Hattı:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

Mevcut Modüller

rxjs (ana modül):

  • Oluşturma: of, from, interval, timer, range, generate, defer, iif
  • Birleştirme: merge, concat, combineLatest, forkJoin, zip, race
  • Subject'ler: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Yardımcılar: firstValueFrom, lastValueFrom, isObservable

operators (pipeable operatörler):

  • Dönüşüm: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtreleme: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Birleştirme: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Hata Yönetimi: catchError, retry, retryWhen
  • Yardımcı: tap, delay, timeout, toArray, share, shareReplay

Kullanım Alanları

  • RxJS Öğrenme: Observable kavramlarını uygulamalı deneyimle anlayın
  • Veri Akışlarını Prototipleme: Gerçekleştirmeden önce reaktif veri boru hatlarını tasarlayın ve test edin
  • Operatör Hata Ayıklama: Operatör davranışını basitleştirilmiş örneklerle izole edip doğrulayın
  • Mülakat Hazırlığı: Reaktif programlama desenleri ve yaygın problemler üzerinde pratik yapın
  • Eğitim Gösterileri: Canlı, etkileşimli örneklerle reaktif kavramları sergileyin