RxJS’e Merhaba Deyin
Son dönemlerde RxJS
kelimesini sıkça duyduğunuzu ve “Nedir bu RxJS?” dediğinizi tahmin edebiliyorum. Bu yazı ile RxJS konsepti hakkında bilmeniz gereken temel kavramlar hakkında bilgi vermeye çalışacağım.
Stream(Akış)
Verilerin bütün olarak değilde küçük parçalar halinde transfer etmeyi sağlayan bir yapıdır.
Observable Nedir?
Observable: zaman içerisinde gelebilecek bir veri akışını veya kaynağını temsil eder. Neredeyse her şeyden Observable yaratabilirsiniz. RxJs’te Observable
lar genellikle olaylardan (butona veya sayfaya tıklama, arama kutusuna değer yazma veya uygulama sayfasının değişmesi vb.) oluşturulur. Observable
yaratmanın en kolay yolu; RxJS’te bulunan built-in observable
yaratma fonksiyonları kullanmaktır. Örneğin; sayfada mousenin tıklama olaylarından observabe yaratmak için yardımcı fonksiyon olan fromEvent
kullanılabilir.
Observable
için bir kaç karakteristik özelliklere sahip fonksiyon diyebiliriz. İçinde next
,error
, complate
metotlarına sahip bir nesne olan bir observer
alır ve iptal mantığını döndürür.
Bir observable
; observer’ı ayarlar ve değerlerini almak istediğimiz şeye
bağlar. Bu şey
üretici(producer
) olarak adlandırılır. Bu şey
bazen; DOM’deki bir tıklama veya textbox’a yazma işlemi, bir değer kaynağıdır. Hatta HTTP üzerinden iletişim gibi daha karmaşık bir şey olabilir.
Observable için aşağıdaki örneği bakalım:
fromEvent
operatörü ile sayfa üzerindeki tıklama olayından observable
oluşturuyoruz. Sayfa üzerinde her hangi bir yere tıkladığınızda bir işlem gerçekleşmiyor. Bu aslında stream
den gelecek değerler için bir tanımlama veya bir taslak. Bir observable
; abonelik yapıldıktan sonra değer yaymaya başlar. Peki nedir bu abonelik?
Subscription(Abonelik)
Subscription
; her şeyi harekete geçiren işlemdir. Bir dokunuşla (subscribe
) akmaya başlayan içinde bira bulunduran, musluk gibi düşünebilirsiniz. Birinin sadece musluğu çevirmesi gerekiyor. Musluktan bira akışının gözlenebilir(observable
) yapılması rolü aboneye(subscriber
) aittir.
Bir subscription
yaratmak için subscribe()
metodunu çağırmak gerekir. observer
olarak da bilinen, bir fonksiyon (veya nesne) sağlayan subscribe()
metodunun çağrılması gerekir. Reactive Programlamada; her olaya nasıl tepki vereceğine karar verebileceğiniz yer burasıdır. Yukarıda yazdığımız kodda bir adım daha ilerleyelim. tiklama$
observableni subscribe yaparak; sayfa üzerinde yapılan tüm akışları görebiliyoruz artık.
Yukarıdaki örnekte tiklama$.subscribe()
:
- Her bir mouse tıklaması için bir
event listener
yaratacak - Her mouse tıklama işleminden sonra
subscribe
metoduna (observer) tıklama olayını geçirecek. - Temizleme mantığı içeren bir abonelikten çıkma(
unsubscribe
) ile bir subscription nesnesi döndürür.
Subscriptionda next
, error
, complate
kullanımı ile ilgili örnek:
Önemli not: Her bir subscription işlemi yeni bir tane execution context
yaratır. Bunun anlamı; subscribe
metodunu cağrılmasından çok kısa bir zaman sonra yeni bir event listener
yaratılır. Bizim örneğimizde; sayfaya yapılan her tıklamada yeni bir execution context
yaratılır.
subscription
varsayılan olarak, observable
ile observer
arasında bire bir, tek taraflı bir konuşma oluşturur. Bu durumu: Takım liderinizin (observable
), yazdığınız kodda hata olması durumunda size (observer
) bağırması (emitting
) gibi düşünebiliriz. Bu aynı zamanda tek yönlü yayın olarak da bilinir(Televizyon veya Radyo yayını). Bir konferans konuşma senaryosunu tercih ederseniz(bir observable
, birçok observer
arasında olan). Subjects
ile çok noktaya yayın(açık veya açık olmayan) içeren farklı bir yaklaşım tercih edebilirsiniz. Başka bir yazıda Subjects hakkında detaylı bilgi vereceğim.
Operatörler
Operatörler, bir kaynaktan gelen değerleri manipüle etmemize yardımcı olurlar, dönüştürülen değerlerin observable
değerini döndürür. JavaScript Array
metotlarına aşina iseniz, RxJS operatörlerinin çoğu size tanıdık gelecektir.
Bazı değerleri filtrelemek istiyorsanız, filter
operatörünü kullanın:
Uygulama geliştirirken çözmeniz gereken bir çok sorun için, RxJS’te sorunuzun çözümü için mutlaka bir operatör vardır. İlk başlarda operatörlerle çalışırken zorlanabilirsiniz ama kullandıkça sevecek ve yavaş yavaş bu konuda uzmanlaşacaksınız. RxJS’te bulunan operatörler konusunda ilerde detaylı bir yazı yazmayı planlıyorum. Beni takip ederseniz bu güzellikleri kaçırmazsınız.
Pipe
Pipe
fonksiyonu, observable
veri kaynağınızdaki operatörler ile montaj hattıdır. Tıpkı bir arabanın bitmiş halinin fabrikadan çıkmadan önce uğradığı bir dizi üretim bandı gibi düşünebilirsiniz. Kaynaktan gelen veriler, ihtiyaca göre filtreleme, dönüştürülme gibi süreçlerden geçebilir. Pipe
fonksiyonunda, observable
zinciri içinde 3 (veya daha fazla) fonksiyon kullanmak olağan dışı bir durum değildir. Örneğin observable
ile oluşturulmuş bir arama
işleminde yapılan işlemleri optimize etmek için birden çok operatör kullanılabilir. Aşağıdaki örneğe bakalım:
Peki hangi operatörün kullanım senaryonuza uygun olduğunu nereden bileceksiniz?
Operatörler Ortak Kategoride gruplanabilir
Hangi operatörü kullanacağınızı belirlemek için ilk yapmanız gereken iş, ilgili kategoriyi belirlemektir. Bir kaynaktan gelen veriyi filtrelemek mi istiyorsunuz? O zaman filtreleme
operatörlerini kullanın.
Filtreleme Operatörleri:
audit
,auditTime
,debounce
,debounceTime
,distinct
,distinctKey
,distinctUntilChanged
,distinctUntilKeyChanged
,elementAt
,filter
,first
,ignoreElements
,last
,sample
,sampleTime
,single
,skip
,skipLast
,skipUntil
,skipWhile
,take
,takeLast
,takeUntil
,takeWhile
,throttle
,throttleTime
Bir hatayı izlemeye veya observable streamdeki veri akışında bulunan hatayı ayıklamaya mı çalışıyorsunuz? Bu iş için utility
operatörlerini kullanın.
Utility Operatörleri:
tap
,delay
,delayWhen
,dematerialize
,materialize
,observeOn
,subscribeOn
,timeInterval
,timestamp
,timeout
,timeoutWith
,toArray
Observable yaratma operatörleri:
Bu operatörler, herhangi bir şeyden observable
yaratmanıza imkan verir. Jenerikten, özel kullanım durumlara kadar her şeyi bir streame dönüştürmekte özgürsünüz. Örneğin, kullanıcının bir sayfada bulunan yazı da kaydırma çubuğu ile aşağıya doğru ilerlediğini düşünün. Bu aşağı kayma işlemini fromEvent
operatörü ile bir streame dönüştürebilirsiniz.
Birleştirme Operatörleri:
Birleştirme operatörleri, bir çok observable
’dan gelen bilgilerin birleştirilmesine izin verir. Yayılan değerlerin sırası, zamanı ve yapısı, bu operatörler arasındaki birincil varyasyondur. En çok kullanılan birleştirme operatörleri: combineLatest
, concat
, merge
, startWith
ve withLatestFrom
.
Örneğin; hesaplama işlemi yaparken, birden çok kaynak gelen güncel verileri birleştirebiliriz.
Hata İşleme Operatörleri:
Hata işleme operatörleri, hataları incelikle ele almaya ve yeniden denemeye olanak sağlar sağlarlar. Aşağıdaki örnekte bölme işleminde, sıfıra bölüm durumunda çıkan hatayı işleme gösterilmiştir. En yaygın kullanılan hata işleme operatörü catchError
’dür.
Filtreleme Operatörleri:
Filtreleme operatörleri, observable
bir kaynaktan gelen değerleri olduğu gibi alma, azaltma ya da bir akış içinde değerlerin birikmesine olanak sağlar. En yaygın kullanılan filtreleme operatörleri şunlardır: debounceTime
, distinctUntilChanged
, filter
,take
ve takeUntil
.
Aşağıdaki örnekte take()
operatörü kullanılarak kaynaktan gelen ilk 3 değer alınıyor.
Birden çok noktaya yayın(MultiCasting) operatörleri:
RxJS’te observable
lar varsayılan olarak, tek noktaya yayın mantığı ile çalışır. Yani abone başına bir kaynak şeklinde. Multicasting operatörleri, ortaya çıkabilecek yan etkileri birden çok abone arasında paylaştırmanıza olanak sağlar. Yaygın olarak kullanılan Multicasting operatörleri: shareReplay
ve share
.
Dönüştürme Operatörleri:
RxJS operatör zincirinden geçerken, değerleri dönüştürmek sıklıkla yapılan bir iştir. Bu operatörler, ihtiyaç duyduğunuz her kullanım durumu için dönüştürme konusunda size yardımcı olurlar. En yaygın kullanılan dönüştürme operatörleri: concatMap
, map
, mergeMap
, scan
ve switchMap
.
KAPANIŞ
RxJS ilk kod geliştirmek ilk başlarda gözünü korkutabilir o yüzden hemen pes etmeyin. Uğraştıkça seveceksiniz.
Bir sonraki RxJS yazısında görüşmek üzere.
RxJs Yazılarım: