Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
RxJS'te Observable'ı İçinden Anlamak: Contract, Lazy Çalışma, Teardown ve 40 Satırlık Kendi Observable'ın
Observable, subscribe edilene kadar hiçbir şey yapmayan ve her subscribe'da producer'ını baştan çalıştıran bir push fonksiyonudur; next, ardından en fazla bir error ya da complete gönderebilir. Contract'ı, senkron ve asenkron emission'ı, teardown'ı ve aynı HTTP Observable'ına iki subscribe'ın neden iki istek attığını gerçek sunucu loguyla gösteriyor, sonra 40 satırlık kendi Observable'ımızı yazıyoruz.
RxJS Creation Function'ları ve Cold vs Hot Observable: of, from, defer, timer, fromEvent ve iif
Cold Observable her subscriber için producer'ını yeniden başlatır, hot Observable ise subscriber'lardan bağımsız akan bir kaynağa bağlar; Promise döndüren işi Observable'a sararken from değil defer kullanmak gerekir. of, from, range, defer, iif, EMPTY, NEVER, throwError, timer, interval, fromEvent ve fromFetch'i gerçek sunucu loguyla karşılaştırıyor, from(promise) ile retry'ın neden yeni istek atmadığını gösteriyoruz.
Marble Diagram Okumak ve Temel Operator'ler: map, filter, scan, take, distinctUntilChanged
Marble diagram bir Observable'ın zaman içindeki değerlerini, complete'ini ve hatasını tek satırda gösterir; pipeable operator ise Observable alıp yeni bir Observable döndüren bir fonksiyondur. map, scan, reduce, pairwise, filter, takeWhile, skip, first, last ve distinctUntilChanged'i TestScheduler ile doğrulanmış marble'larla inceliyor; EmptyError ve object karşılaştırma tuzaklarını Bookstore sepeti ve katalog filtresiyle gösteriyoruz.
Higher-order Mapping: switchMap, mergeMap, concatMap ve exhaustMap Arasında Doğru Seçim
Arama gibi yalnız son değerin önemli olduğu okumalarda switchMap, sırası önemli yazmalarda concatMap, tekrarlanmaması gereken aksiyonlarda exhaustMap, bağımsız işlerde sınırlı mergeMap seçilir. Dört operator'ü aynı marble ile karşılaştırıyor, Bookstore'un arama kutusu, sepet adedi, çift tıklanan Siparişi Ver butonu ve 50 kapak indirmesiyle sanal zamanda çalıştırıyor, switchMap'in POST'ta neden tehlikeli olduğunu gösteriyoruz.
RxJS'te Stream'leri Birleştirmek: combineLatest, withLatestFrom, forkJoin, zip, merge ve concat
combineLatest hepsinin son değerini, withLatestFrom tetikleyici geldiğinde bağlamı, forkJoin hepsi tamamlanınca sonuçları, zip aynı sıradaki değerleri, merge gelen her değeri, concat kaynakları sırayla, race ilk yayanı verir. Bookstore'un katalog filtrelerini combineLatest ve startWith ile tek sorguya çeviriyor, sipariş detayını forkJoin ile paralel çekiyor; hiç yaymayan kaynak, tamamlanmayan akış ve boş array tuzaklarını sanal zamanda gösteriyoruz.
Zamanla Çalışan Operator'ler ve Scheduler'lar: debounceTime, throttleTime, auditTime, timeout ve Polling
debounceTime kaynak susunca son değeri, throttleTime pencerenin ilk değerini, auditTime pencerenin sonundaki son değeri verir; polling'de isteklerin üst üste binmemesi için mergeMap değil exhaustMap ya da repeat({ delay }) kullanılır. Bookstore'da yorum taslağını otomatik kaydediyor, timeout'u doğru yere koyuyor, sipariş durumunu sayfa gizliyken duran bir polling ile izliyor ve scheduler'ların event loop'taki yerini ölçüyoruz.
RxJS Subject Türleri: Subject, BehaviorSubject, ReplaySubject, AsyncSubject ve Ne Zaman Hiçbiri
Geç gelen subscriber'a Subject hiçbir şey, BehaviorSubject güncel değeri, ReplaySubject son N değeri, AsyncSubject ise complete'ten sonra son değeri verir; Angular 22'de state signal'da, event'ler private bir Subject'te tutulur. Dört türü gerçek çıktılarla karşılaştırıyor, ölü Subject'i, asObservable ile kapsüllemeyi ve global event bus sorununu gösteriyor, Bookstore'un sepetini signal ve toast'ını Subject ile kuruyoruz.
RxJS'te Multicasting: share, shareReplay, connectable ve HTTP İsteğini Paylaşmak
Angular'ın HttpClient'ı cold bir Observable döndürür; iki async pipe iki istek gönderir, tek isteği paylaşmak için Observable'ı bir field'da share ya da shareReplay ile saklamak gerekir. share'in tamamlanınca reset olmasını, shareReplay'in refCount ayarını, süreli cache'i, catchError ile cache'lenen yedek değeri ve connectable'ı gerçek ölçümlerle gösteriyor, Bookstore'un kategori listesini tek istekle paylaşıyoruz.
RxJS'te Error Handling: catchError, retry ile Backoff, finalize ve Stream'i Öldürmeden Hata Yakalamak
catchError hatayı yakalayıp devam etmez, akışın geri kalanını döndürdüğün Observable ile değiştirir; uzun yaşayan bir akışı yaşatmak için onu switchMap'in içine koymak, retry'ı da backoff ve jitter ile yalnız idempotent isteklerde ve 5xx/ağ hatalarında kullanmak gerekir. Çift siparişi, finalize'ı, Angular'da HttpErrorResponse, ASP.NET Core ProblemDetails ve interceptor ile component arasındaki iş bölümünü gerçek çalıştırmalarla gösteriyoruz.
Angular 22'de RxJS: HttpClient, Router ve Forms Observable'ları, Signal Interop ve Subscription Yönetimi
Zoneless ve varsayılan OnPush Angular 22'de bir Observable ekrana yalnız async pipe, toSignal ya da bir resource üzerinden ulaşır; zaman ve event akışı RxJS'te, ekranın gösterdiği state signal'da kalır. toSignal, toObservable, rxResource, httpResource ve outputFromObservable'ı gerçek ölçümlerle inceliyor, Bookstore'un arama kutusunu üç şekilde yazıyor, takeUntilDestroyed hatalarını ve sızan polling'i gösteriyoruz.
RxJS'te Custom Operator Yazmak ve Okunur Kalmak: pipe Kompozisyonu, Lint Kuralları ve Debug
Custom operator, Observable alıp Observable döndüren bir fonksiyondur; çoğu zaman mevcut operator'leri pipe() ile birleştirmek yeter, sıfırdan new Observable ile yazarken teardown'u döndürmek şarttır. Bookstore'un arama, backoff'lu retry ve loading state bloklarını settledTerm, retryWithBackoff ve loadingState operator'lerine çeviriyor, debugTap'i sıfırdan yazıyor ve eslint-plugin-rxjs-x ile iç içe subscribe gibi hataları otomatik yakalıyoruz.
RxJS'i Test Etmek: TestScheduler ile Marble Testing, Fake Timer'lar ve Angular Service'leri
RxJS'te zamanla çalışan kod, TestScheduler.run() içinde sanal zamanla ve marble diagram'larla, gerçek saat beklemeden ve her değerin frame'i kontrol edilerek test edilir. Bookstore'un arama akışını, backoff'lu retry'ını ve iptal edilen istekleri marble ile, aynı testleri Vitest fake timer'larıyla, Angular service'lerini HttpTestingController ile test ediyor; Promise ve run() dışı delay tuzaklarını gerçek çıktılarla gösteriyoruz.