Bu makalemizde ilk defa bir design pattern konusuyla alakalı klavyemi konuşturmayı düşünüyorum sonuç olarak ortaya örnek kodlar ve observer design pattern’i anlamayı kolaylaştıracak örnek görseller ile bu pattern’i nasıl typescript tarafında uygulayabileceğimizi ve ne işimize yarayacağını göreceğiz.
Typescript ile Observer Design Pattern Kullanımı
Hemen Typescript’de Observer Design Pattern‘inin typescript’de nasıl uygulanıp kullanılabileceğini görelim. Ayrıca uygulayacağımız bu pattern aslında Pub-Sub diye duyduğunuz veya birçok yerde karşınıza çıkacak Publisher-Subscriber mantığıyla çalışmaktadır ben bu pattern’e sık olarak Angular Javascript framework’ünde kullanıyorum özellikle Angular2+ sürümlerinde HttpClient nesnesini kullandığınızda post, get işlemlerinde istek karşılandıktan sonra isteğe ait sonuca ulaşmak için subscribe(abone) fonksiyonu kullanarak sonuca ulaşabiliyorsunuz.
Bu arada şunu belirtmek istiyorum observer pattern’lerini araştırdığınızda arayüz yapıları yada kullanılan fonksiyon isimleri birbirine göre farklılık gösterebilir fakat temelde yaptığı iş bir üst paragrafta belirtildiği gibi bir abonelik süreci söz konusu ve bu aboneler işlerin durumları ile alakalı olarak bilgilendirmeler almaktadırlar ayrıca abone abonelikten istediği zaman çıkabilmektedir.
Typescript tarafındaki kodlama öncesinde hemen yapacağımız örneği Observer UML şemamız üzerinden inceleyelim.
UML şemasından göreceğiniz üzere gerçek hayat örneği olan ve illaki hepimizin bir defada olsa yer aldığı iş arama sürecinden bir örnek ile olayın daha iyi pekiştirileceğini düşünüyorum. İşkur burada IObservable<TObserver, TModel> işkur’a implement ediliyor nedeni ise abone olacağımız yer burası yani publisher’ımız ve yeni iş geldiğinde kendisine IObserver’dan türemiş olan WorkerX sınıflarına bildirim göndereceğiz buradaki WorkerX sınıflarından sadece işsiz olanları Iskur’a subscribe edeceğiz bu durumda WorkerX sınıfımızda subscriber’ımız oluyor.
Peki iyi güzelde kodlaması nasıl olacak diyorsunuz değilmi? Hadi o vakit kodlamaya geçelim çok konuştuk 🙂 Tüm oluşturacağımız arayüzler ve sınıfları ayrı ayrı ele alacağız ve örneklere geçmeden önce ben örnekleri hazırlarken Generic tipte hazırladım observer design pattern’ini ama siz isterseniz generic olmadan kullanabilirsiniz ama ben generic tipli olmasının geliştirmelerime katkı sağladığını düşünürek bu şekilde hazırladım tamamen ihtiyaca yönelik oluşturulmuş bir kurgu.
Gerçek Hayattan Farklı Örnekler
- Bir hava durumu örneği üzerinden gidersek hava durumu tahmin kaynağı sunan yerler(weather.com, accuweather.com) gibi bu kaynağı observable olarak düşünebiliriz ve bu hava durumu tahmini gösterecek olan yerinde observer olduğunu düşünebiliriz sonuç olarak hava durumu tahmini yapan publisher yani yayıncı ve bu hava durumu tahminini gösteren yere ise subscriber yani abone diyebiliriz.
- Bir diğer örnek ise haber ajansları için verilebilir haber ajanları haber siteleri, kanalları yada gazetelere haber kaynağı sağlarlar bir üstteki örnekte çoğu terimi verdiğim için yüzeysel olarak geçiyor olucam bu ve sonraki örneklerde, haber ajanslarını publisher(observable) ve kaynağı olan yer(gazete, site, kanal) subscriber(observer) olarak düşünülebilir.
Şimdi ise kodsal olarak bu desen’i nasıl yazılabildiğini görelim.
Observable
1 2 3 4 5 6 7 | interface IObservable<TObserver, TModel> { observers: IObserver<TObserver, TModel>[] subscriberObserver(observer: IObserver<TObserver, TModel>) unSubscribeObserver(observer: IObserver<TObserver, TModel>) notifyObservers(model: TModel) } |
Publisher olacak nesnelerimizin.
Observer
1 2 3 | interface IObserver<TObserver, TModel> { update(observable: IObservable<TObserver, TModel>, arg: TModel) } |
Subscriber olacak nesnelerimizin kendine implement etmesi gereken arayüzdür.
İşkur
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | class Iskur implements IObservable<Worker, Job> { private observers = new Array<IObserver<Worker, Job>>() private jobs = new Array<Job>() constructor() { } addJob(job: Job){ this.jobs.push(job) this.notifyObservers(job) } subscriberObserver(observer: IObserver<Worker, Job>) { this.observers.push(observer) } unSubscribeObserver(observer: IObserver<Worker, Job>) { this.observers.splice(this.observers.indexOf(observer), 1) } notifyObservers(job: Job) { for (const observer of this.observers) observer.update(this, job) } } |
İşçilere yeni iş bildirimini yapacak sınıfımız.
WorkerX
1 2 3 4 5 6 7 8 9 | class WorkerX implements IObserver<Worker, Job> { constructor(public name: string, public surname: string) { } update(observable: IObservable<Worker, Job>, job: Job) { console.log(observable) console.log(job) } } |
Burada WorkerX gibi bir isimlendirme kullanma sebebi typescript’de kodlama yaparken Worker adında bir nesne olduğunu göreceksiniz bundan dolayı sonuna “X” eklenmiştir.
Job
1 2 3 4 5 | interface Job { name: string count: number company: string } |
Her bir iş tanımını yapabileceğimiz arayüz.
Sonuç
Observer design pattern’i aslında her programlama dilinde olan ve sıklıkla kullandığımız event yapılarına mantık olarak çok benzemektedir siz bir event’e tanımladığınız bir metod, delegate v.s. ile abone olursunuz ve event’de bir durum değişikliği yaşandığında size eğer varsa olay ile ilgili değerler ile birlikte döner. Hemen bir örnek verelim bu konudada Button nesnesi neredeyse her GUI programlama dilinde vardır ve Button’a ait en sık kullanılan event’de takibi click event’idir siz Button’a tıkladığınızda olayınıza ait metod varsa çalışır çünkü bir o click olayına abone olduk aslında ve gördüğünüz gibi mantık aynı. Ayrıca burada anlatılan tasarım deseni ile alakalı yapıyı kolaylıkla diğer teknoloji yada dillere göre uyarlayıp kullanabilirsiniz sadece ortaya farklı sözdizimleri çıkacaktır ama mantık aynı olduğundan uyarlama esnasından zorluk çekmeyeceğinizi umuyorum.
Tüm olumlu/olumsuz görüşleriniz için yorum yapmayı ihmal etmeyiniz.
