Tag Archives: reactive programming

RxJS Operatorler

29 Haz

RxJS API’nin önemli bir aktörü de Operatörlerdir. Operatörler, gözlemlenebilir nesneler için yardımcı işlemler olarak düşünülebilir. Her bir yardımcı işlem fonksiyonel programlama yöntemine göre fonksiyonlar halinde planlanmıştır. RxJS’de Operatörler 8 alt başlık halinde gruplandırılmıştır.

Bu başlıklar altında onlarca operatör bulunmaktadır. Buradan tüm operatörlere erişebilmek mümkündür. Bu yazıda popüler olanlardan bir kaçını aşağıdaki gibi kullanılmaktadır.

from()

Bir Observable nesne içerisine  array, promise veya iterable değerler eklemek için kullanılır.

concat()

Birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ve sırayla çalıştırır. Biri bitmeden diğerine geçmez. Bunu, biri bitmeden diğeri başlayamayan işlem sıralaması olarak düşünebiliriz.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

1, 2, 3, 4, 5, 6, 7, 8, 9

merge()

Concat işleminin benzeri olan bu operatörde, birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ancak işlemlerin sırayla yapılması beklenmez.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

 4, 5, 6, 7, 8, 9, 1, 2, 3

map()

Gözlenen verilerde değişiklik yapmak için kullanılabilir.

Bu işlemin çıktısı aşağıdaki gibi olacaktır.

 1, 4, 9

ajax()

Uzak sunucudan bir Ajax talebi yapmak için kullanılır.

Bu işlemin çıktısı sunucudan gelen JSON response olacaktır.

Sonuç

RxJS kütüphanesinde bulunan Operatorler konusu örnekler ile desteklenerek açıklanmıştır.

RxJS Subjects

28 Haz

RxJS’de Subjects gözlemlenebilir nesnenin (Observable) özel bir türüdür. Bunu, insanlarla dolu bir odadaki mikrofonla konuşan tek bir konuşmacı olarak düşünebilirsiniz. Burada:

  • Konuşmacının mesajları Subject,
  • Dinleyiciler Observer olarak düşünülebilir.

Konuşma esnasında mesajlar aynı anda birçok insana ulaşır. Bu olaya multicasting yani birden çok noktaya yayın yapmak denir. Dört farklı türde Subject vardır.

  1. Subject
  2. AsyncSubject
  3. BehaviorSubject
  4. ReplaySubject

Bu kavramları salondaki bir konuşmacının durumunu anlatan örnekler yaparak açıklayabiliriz.

Subject

Başlangıç değeri almaz ve tekrarlama davranışı göstermez.

Bu kod çalıştığında konsola iki defa, “merhaba sayın dinleyiciler.” mesajı yazılır.  Çünkü iki dinleyici bulunmaktadır. Salondaki bir konuşmacının her aklına geleni söylemesini buna örnek olarak verebiliriz.

AsyncSubject

İşlem tamamlandığında gözlemcilere en son mesaj değerini yayınlar.

Bu kod çalıştığında ekrana iki defa “merhaba arkadaşlar.” yazacaktır. Bunu salondaki bir konuşmacının aklında ilk cümlelerini düşünüp, ne söyleyeceğine karar verdiğinde konuşmasına benzetebiliriz. Yani konuşmacı, kullanıcılara en son aklında bulunan mesajı bildirmiş olur.

BehaviorSubject

Bir başlangıç değerine ihtiyaç duyar. Mevcuttaki en son değeri yeni abonelere yayınlar.

Burada salondaki konuşmacının sahneye çıkar çıkmaz selamlama yaptığı düşünülebilir. Konsola peş peşe iki defa “merhaba arkadaşlar.“, iki defa “nasılsınız“, iki defa da “konumuz küresel ısınma.” yazacaktır.

ReplaySubject

Belirtilen sayıda verilen son değeri, yeni abonelere tekrar yayınlar.

Burada salonda konuşmacı konuşurken bir dinleyici vardır. “selamlar” ve “nasılsınız” şeklinde iki mesaj yayınlanmıştır ve salondaki mevcut dinleyici tarafından bu mesajlar alınmıştır. Ancak ReplaySubject ile salona gelen sonraki dinleyicilere de önceki mesajlar tekrar gönderilir.

Sonuç

RxJS kütüphanesinde bulunan özel Observable türleri örnek uygulamalarla desteklenerek incelenmiştir.

Bir sonraki yazıda, RxJS kütüphanesindeki Operatörler incelenecektir.

RxJS ile Reaktif Programlama

26 Haz

RxJS ReactiveX API’sinin Javascript programlama diline kullanılmak üzere yazılan uygulamalardan biridir. Geliştiricilere, tepkisel olaylar (events) üzerinden güçlü ve işlevsel  bir fonksiyonel yaklaşım sunar. Bunların yanında giderek artan kütüphane ve yardımcı araçları ile geliştiricilere kullanım kolaylığı sağlamakta ve popülerliği artmaktadır.

RxJS reaktif programlamanın bir uygulaması olduğundan dolayı imperative gelenekteki bir programcı için ilk başta öğrenilmesi biraz zor gelebilir. Çünkü fonksiyonel programlama, declerative gelenekte uygulanan bir paradigmadır. Programlama dillerinin sınıflandırmasında bunu görebilmek mümkündür.

 

RxJS uygulaması yapmak için iki farklı yol izlenebilir:

Bana göre basit olan yöntem Angular projesi oluşturmaktır. Angular projesi oluşturmak için npm komutları kullanılır. Bir projeyi üç adımda oluşturmak mümkündür.

Adım-1: Angular CLI yüklenmesi

Angular projesinin yönetimini ve çalıştırılmasını sağlayan global Angular CLI yüklenme adımıdır. Bunun için gerekli olan komut:

npm install –g @angular/cli

Adım-2: Uygulamanın oluşturulması

Uygulama için gerekli dosya ve dizinlerin oluşturulması adımıdır. Bu adıma, çalışma ortamının (workspace) hazırlanması da denir. Bu işlemi bir önceki adımda yüklenen Angular CLI komutları yürütür.

ng new my–app

Artık uygulama dosyaları yüklenmiştir ve aşağıdaki gibi bir dizin oluşturulmuştur.

 

 

 

 

 

 

 

 

 

 

 

Uygulama dosyaları src/app dizininde bulunmaktadır. Dizinde bulunan diğer dosyaların ne işe yaradığı bu yazının konusu değildir.

Adım-3 Uygulamanın çalıştırılması

Angular uygulamasını çalıştırmak için Angular CLI komutları çalıştırılır.

cd my–app

ng serve —open

Bu komut ile Angular uygulaması, varsayılan tarayıcıda açılarak başlatılacaktır.

RxJS Uygulanışı

Angular projesinde rxjs kodlarını çalıştırmak için Angular projesinde bir typescript dosyası kullanılabilir. app.component.ts dosyası içerisine bir Observable tanımlamak için aşağıdaki gibi bir komut kullanılabilir.

 

 

 

 

 

 

RxJS kodlarını çalıştırmak öncelikle ‘rxjs’ modülünün yüklenmesi gerekmektedir. Bunun için gerekli komut:

import {from} from ‘rxjs’;
Ardından constructor içerisinde from operatörü ile bir observable oluşturulmaktadır.

RxJS Yardımcı Araçları

RxJS kütüphanesinde Operators ve Subjects olmak üzere iki önemli başlık bulunmaktadır. Sonraki yazılarda sırayla RxJS Subjects ve Operators konuları ele alınacaktır.

 

Reaktif Programlama (Reactive Programming)

25 Haz

Reaktif Programlama Nedir?

Reaktif programlama, asenkron veri akışlarıyla işlemler yapmayı ilke edinen bir programlama paradigmasıdır.

Asenkron Prensip

Reaktif programlamada her şey asenkron olarak, yani eş zamanlı olmadan çalışır. Yani bir işlem adımının yürütülebilmesi için başka işlemlerin sonucu beklenmek zorunda değildir. Çalışma zamanında, asenkron bir işlem yürüten kod satırı çalıştırıldıktan sonra, işlemin bitmesi beklenmeden diğer satırdaki işlemler yürütülebilir. Multithread işlemler yürütebilen sistemlerde asenkron yürütülecek olan işlemler, farklı thread’ler tarafından da yapılabilir.

Neden Asenkron çalışmalara ihtiyaç duyulur?

Programlamada asenkron çalışma ihtiyacı, uygulamaları daha duyarlı hale getirmek amacıyla kullanılır. Asenkron işlemler genellikle uzun zaman alan işlemlerdir. Bu nedenle ana uygulama bir görevi yürütürken, kilitlenme ve donma diye tabir edilen yavaşlamaları kullanıcıya yansıtmadan, sorunsuz bir kullanıcı deneyimi sunmayı sağlar. Asenkron işlemler dış kaynaktan bir veriyi almak olabileceği gibi yerelde uzun hesaplama gerektiren işlemler de olabilir.

Reaktif Programlamanın Püf Noktaları

Reaktif programlamada üç temel yapı taşından bahsedebiliriz.

1- Veri akışları (Data Streams)

Reaktif programlamada veri akışları, işin omurgasını oluşturmaktadır. Veriler bir kaynak tarafından oluşturulup başka bir kaynak tarafından tüketilir. Bütün olaylar, mesajlar, hatalar akışlar tarafından yayılma (emitting) yoluyla bildirilir.

2- Observable Pattern

Reaktif programlamada veri akışları gözlenebilir olarak tasarladığından dolayı, akıştan bir bildirim yapıldığında buna tepki verilebilmektedir. Gözlemlenebilir olan veri akışı nesneleri Observable olarak adlandırılırken, akışta gerçekleşen olaylara tepki veren nesneler Observer olarak adlandırılır.

Observable: Reaktif bir sistemde gözlenebilir olan şey veri akışıdır.
Observer: Observable tarafından yayınlanan veri akışlarını yakalar ve kullanır. Observer nesneleri bunu yapabilmek için Observable nesnesine abone (subscribe) olur.

Gözlemlenebilir bir veri akışını herhangi bir işlemden elde etmek mümkündür. Örneğin HTTP talepleri, form tıklama olayları, bildirimler, değişkenlerde meydana gelen değişiklikler, sensörlerden alınan değerler. Kısacası bir durum değişimi bildiren herhangi bir şey olabilir.

3- Fonksiyonel Programlama (Functional Programming)

Veri akışlarını yönetebilmek için uygulanan yöntem fonksiyonların kullanılmasıdır. Bir veri akışından elde edilen verilerin belli bir dönüşümden geçirilerek kullanılması için bir veya birden fazla fonksiyona ihtiyaç duyulabilir.

ReactiveX (Reactive eXtensions)

Reaktif programlama için kullanılan en popüler API ReaxtiveX ya da kısa adıyla Rx’dir. (“X” harfi Extensions için kullanılan bir kısaltmadır). Bu eklenti, reaktif programlama ilkelerinin bir uygulamasıdır. ReactiveX resmi sitesinde ReaxtiveX’in bir API’den ziyade, diğer programlama dillerine de ilham veren bir devrim, bir fikir ve programlamada bir akım olduğu belirtilmektedir.

ReaxtiveX kütüphanelerini kullanarak, aşağıdaki programlama dillerine reaktif özellikler katılabilmektedir.

Örnek RxJS Kodu

RxJS reaktif programlamanın Javascript programlama diline uyarlanmış kütüphanesidir. Javascript örnek uygulaması için öncelikle RxJS kodlarını içeren paketlerin koda dahil edilmesi gerekmektedir. Kodun en başında import sözcüğü ile başlayan satırlar gerekli paketleri yüklemektedir.

 

 

 

 

 

Daha sonra, from sözcüğü ile bir Observable sayı dizisi tanımlanmıştır. pipe() metodu, Observable nesnelere ait bir metottur ve yardımcı operatörleri akışa dahil etmek için kullanılır. Burada filter ve map adında iki operatör sisteme dahil edilmiştir. filter operatörü akıştaki 4’ten küçük sayıları seçerken, map operatörü, kalan sayıların karesini almaktadır.

Örnek kodun adımlarının incelenmesi aşağıdaki gibidir.

Kimler Kullanır?

ReactiveX’i kendi teknolojilerinde kullanan bazı şirketler aşağıda belirtilmiştir.

Sonuç

Bu yazıda reaktif programlamanın ne olduğu ve neden ihtiyaç duyulduğunu, reaktif programlamadaki önemli noktaları incelemiş olduk ve örnek uygulama ile yazımızı sonlandırmış bulunuyoruz.