RxJs ile Reaktif Programlama – Giriş

Giriş

Reaktif Programlama, genel olarak olay tabanlı metodları tanımlamayı sağlar. Bu yaklaşımda bir olay gerçekleştiğinde, o olayı dinleyen metodların çağrılması beklenir. Böylece kullanıcı etkileşimi, paralel işlemler ve zamandan bağımsız devam eden süreçler gerçekleştirilebilir.

Bu programlama metodolojisi, özellikle günümüzde web geliştiricilerinin birçok sorununa çözüm sağlar. Kullanıcı etkileşiminin önemli olması nedeniyle, örneğin yeni yaygınlaşan SPA(Single Page Application) projelerinde, mobil projelerinde, oyun projelerinde ve daha akla gelebilecek birçok projede sıklıkla Reaktif Programlama kullanılmaktadır.

Temel Kavramlar:

• Event(Olay): Olaylar kullanıcının butona basması veya bir sürecin başlaması gibi etkileşimler ile tanımlanabilir.
• Observable(Gözlemlenebilir): Gözlemlenebilir, bir olaya bağlanan ve o olayın son durumunu saklayan nesnelerdir. Bu nesneler tek bir dinleyici içindir.
• Subscription(Katılım): Observable bir nesneyi dinlemeye başlamak için ona Subscribe(Katılmış) olmamız gerekir. Buna Subscription denir.
• Subject(Konu): Konu, içinde olayların tüm durumlarını saklar ve birden fazla dinleyiciyi kabul eder. Bu açıdan Gözlemlenebilir nesnelerin genişletilmiş hali denebilir.
• State(Durum): Durum, konu veya gözlemlenebilir nesnenin son halini tanımlar.
• Observer(Gözlemci): Gözlemci, bir olay tetiklendiğinde gerçekleşecek Callback metoda/metodlara verdiğimiz isimdir. Dinleyici olarak da isimlendirilebilir.

Observer Design Pattern

İlk yazımda Reactive Programlamayı, Typescript dili ile sıfırdan tamamen kendi örneklerim ile işleyeceğim. Yazdığım kodları Typescript Playground üzerinde deneyebilirsin.

Tanım:
Observer Design Pattern, olayların Subject ve Observable nesneleri üzerinden dinlendiği olay tabanlı bir tasarım desenidir. Bu tasarım deseni, abonelikler sayesinde tüm olayları yöneterek etkileşimleri karşılamak için tasarlanmıştır. Çeşitli örnekler ile bu tasarım deseninin çözdüğü problemleri anlamak mümkündür.
Örneğin; gerçek hayatta bankalarda sıra almamız ve sıramız geldikten sonra işlemlerimizi halletmemiz  veya bir restoranda yemek siparişi vermemiz ve yemeğimiz hazır olduğunda çağrılmamız bu tasarım deseninin yaklaşımını anlamak için oldukça basit örneklerdir.

Subject içerisinde Observable nesnelerini ve Observable nesneler ise içlerinde Subscriberları saklar. Daha iyi anlamak için aşağıya bir diagram çizelim.

Emitter burada Event’i tetikliyor ve Subject bunu diğer Observable objelerine bildiriyor. Observable objeler ise Event’in içerisinde yer alan mesajı Subscribe olan Observer’a ileterek akışı tamamlıyor.

Observable

Öncelikle Observable sınıfını yazarak başlayalım.

1. state$: Bu değişken Observable sınıfının son değerini saklar.
2. observer: Bu değişken son Observer(Gözlemci) metodunu saklar.
3. subscribe: Bu metod ile Observer metodumuzun Subscribe(Abone) olmasını sağlar.
4. unsubscribe: Bu metod ile mevcut aboneliği bitiriyor.
5. next: Bu metod State’i güncelleyerek Abone olan Observer’a yeni değer ile çağrı yapıyor

Sınıfımızı da yazdığımıza göre küçük bir örnek ile nasıl çalıştığını gözlemleyelim.

Aşağıya örnek kodu yazıyorum;

Burada tek bir Observer ile subscribe olduğunda doğrudan onu işleme aldı. Peki iki Observer ile subscribe olunca ne yapacak onu deneyelim.

Görüldüğü gibi bu örnekte konsola “2. Observer: 24” yazdı. Çünkü sonradan eklediğimiz Observer ilkini ezmiş oldu. Bu önemli bir nokta, ileride çok işimize yarayacak.

Subject

Şimdi Subject sınıfı ile devam edelim. Burada Observable sınıfını da referans alacağız.

1. states$: Bu liste sınıf içinde ki tüm değerleri saklamak içindir.
2. observables: Bu liste ise sınıfa bağlı Observable nesnelerini tutar.
3. subscribe: Bu metod Observable içinde ki metoddan farklıdır. Burada yeni bir Observable nesnesi oluşturup Observer’ın ona subscribe olmasını sağlıyoruz. Ayrıca Observable’a Subject sınıfının son durumunu ekliyoruz.
4. getState: Bu metod ile Subject’in son durumunu döndürür.
5. next: Bu metod states$ listesine gelen son değeri ekleyerek diğer Observable sınıflarına değerin iletilmesini sağlar.

Şimdi bir önceki örneği Subject ile deneyip iki Observer subscribe ettiğimizde nasıl bir sonuç alacağımıza bakalım.

Evet sonuca bakarsak iki Observer da tetiklendi. Böylece Subject sınıfı ile birden fazla Observer tanımlamış olduk.

Bunlar giriş örnekleriydi. Bir sonra ki yazıda bu sınıfları kullanarak çok daha detaylı örnekler tasarlayacağız.

Sevgilerimle.