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.

0 272

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 Observablelar 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,errorcomplate metotlarına sahip bir nesne olan bir observer alır ve iptal mantığını döndürür.

Bir observableobserver’ı 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:

Denemek için tıklayınız.

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 streamden 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.

Denemek için tıklayınız .

 

Yukarıdaki örnekte tiklama$.subscribe():

  1. Her bir mouse tıklaması için bir event listener yaratacak
  2. Her mouse tıklama işleminden sonra subscribe metoduna (observer) tıklama olayını geçirecek.
  3. Temizleme mantığı içeren bir abonelikten çıkma(unsubscribe) ile bir subscription nesnesi döndürür.

Subscriptionda nexterrorcomplate 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.

Denemek için tıklayınız

 

Bazı değerleri filtrelemek istiyorsanız, filter operatörünü kullanın:

Denemek için tıklayınız

 

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:

Denemek için tıklayınız

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.

Denemek için tıklayınız

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: combineLatestconcatmergestartWith ve withLatestFrom.

Örneğin; hesaplama işlemi yaparken, birden çok kaynak gelen güncel verileri birleştirebiliriz.

Denemek için tıklayınız

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.

Denemek için tıklayınız

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: debounceTimedistinctUntilChangedfilter,take ve takeUntil.

Aşağıdaki örnekte take() operatörü kullanılarak kaynaktan gelen ilk 3 değer alınıyor.

Denemek için tıklayınız

Birden çok noktaya yayın(MultiCasting) operatörleri:

RxJS’te observablelar 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.

Denemek için tıklayınız

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: concatMapmapmergeMapscan ve switchMap.

Denemek için tıklayınız

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.

Kaynaklar:

Yorum yaz

Email adresiniz yayınlanmayacaktır.