“Loosely Coupled” KnockoutJS Component Tasarımı

Giriş

Son yıllarda web uygulamaları geliştirme teknolojilerinde ciddi değişimler yaşanmaktadır. Bu süreç
içinde bazı teknolojiler ön plana çıkarken, eskiden beri kullanılan bazı “Enterprise Framework”
çözümleri ise önemini yitirmeye başlamaktadır. İşte bu hızlı değişim sürecinde Javascript tabanlı
geliştirme ürünleri “Kurumsal Web Çözümleri” için git gide önem kazanmaktadır. Hatta, gündemin ilk
sırasında yerini almaktadır. Bu yeni çözüm yolları nedeniyle bir çok yeni yaklaşım ortaya atılmaktadır.
Bu makalenin ana konusu da arayüz geliştirme çözümlerinden biri olan Knockout Javascript
Kütüphanesi olacaktır. Yazı içinde verilmesi planlanan en önemli özellik Knockout altyapısı ile
“Component Tasarımı” olacaktır. Component geliştirme yaklaşımı yeniden kullanılabilirliği
arttırmakta, geliştirilen kodun bakım maliyetini en aza çekmektedir. Ayrıca, geliştirilen componentler
arasında gevşek bağlı yapıların oluşturulmasını sağlamaktadır.

 

RequireJS Proje Entegrasyonu

“RequireJS” script dosyalarının yüklenmesi sorumluluğunu yerine getiren Javascript ile geliştirilmiş
olan bir kütüphanedir. Bu yükleme işlemi “<script>” etiketleriyle gerçekleştirilen URL kaynaklı klasik
yaklaşımdan farklıdır. Moduler bir script yükleme yaklaşımına sahiptir.
Require JS indirmek için : http://requirejs.org/docs/download.html

Ardından, “main.js” oluşturulması önemli bir adımdır. “data-main” niteliği “RequireJS” için
önemlidir. Çünkü, “RequireJS” bu niteliği kontrol ederek script yükleme işlemine başlamaktadır.

“baseUrl” özelliği proje içindeki “js” klasörünü göstermektedir. Script yükleme işlemi bu klasör dikkate alınarak yapılacaktır. “paths” özelliğinde ise kullanacağımız Javascript kütüphanelerini belirtiyoruz. Bu makale kapsamında olmadığı için daha detaylı bilgi için resmi “RequireJS” sayfasına bakılabilir.

 

TextJS Proje Entegrasyonu

RequireJS ile çalışabilen Javascript tabanlı bir eklenti kütüphanesidir. Text tabanlı kaynakların
yüklenmesi işlemini yerine getirmektedir. Örneğin; HTML sayfalarının Javascript içinden
yüklenmesini sağlar.

 

KnockoutJS Proje Entegrasyonu

KnockoutJS arayüz tarafında zengin içerikli ekranlar hazırlayabilmeyi sağlayan Javascript tabanlı bir
kütüphanedir. Knockout özellikle “Gözlemci (Observer)” yapıları sayesinde HTML ve Javascript
tarafındaki değişiklikleri çift tarafları olarak yönetebilmektedir. Geliştiricinin kod karmaşası içinde
boğulup asıl yapması gereken işten uzaklaşmasının önüne geçmektedir. Daha az kod geliştirerek önyüz
tarafındaki iş mantığının hızlıca ve en iyi şekilde uygulanmasını sağlamaktadır.
Knockout JS indirmek için : http://knockoutjs.com/downloads/index.html

 

KnockoutJS Component Tasarımı

KnockoutJS ile component-based yaklaşımı ile yeniden kullanılabilir, enkapsüle edilmiş yazılım
parçacıkları tasarlamak mümkündür. Component tasarımı yapılırken oluşturacağımız bileşen ile ilgili
HTML ve Javascript parçalarına odaklanıyoruz. Sonrasında ilgili HTML parçasına, hazırlamış
olduğumuz Javascript tabanlı ViewModel nesnesini uyguluyoruz. Bunu yaparken
“ko.components.register” fonksiyonunu kullanacağız. Component’e tekil bir isim vereceğiz. Aynı
zamanda component register edilirken kullanılacak Javascript nesnesini ise ikinci parametre olarak
vereceğiz.

Knockout Component Yapısı :

Aşağıdaki component yapısında “viewModel” ve “template” en önemli iki özniteliktir. “viewModel”
niteliği bu component’in kullanacağı Javascript parçasını tutacaktır. ”template” niteliği ise
component’in kullanacağı HTML parçasını tutacaktır. “register” fonksiyonu içinde HTML ile
Javascript parçalarına “ko.applyBindings” fonksiyonu uygulanacaktır. Bu fonksiyon ile Knockout’un
sağlamış olduğu özellikler aktif hale getirilmektedir. Böylece, HTML ile Javascript parçaları bir bütün
halinde çalışan component’i meydana getirecektir.

Yukarıdaki component yapısında dikkat edilecek diğer bir husus ise gerekli olan “Javascript tabanlı
ViewModel” ile “HTML” parçalarının “RequireJS” yardımıyla yüklenmesidir. “RequireJS”
Javascript modullerinin yüklenmesi işine odaklanmış bir kütüphanedir. Text tabanlı bir dosyanın
yüklenmesi işini ise “TextJS” isimli başka bir kütüphane ile yapıyoruz. TextJS kütüphanesi Reqiure
JS ile uyumlu çalışabilmektedir. Bir bakıma onun eksikliğini gidermektedir. “ViewModel” ve “HTML”
parçalarının “RequireJS” ve “TextJS” ile yüklenmesi esnek bağlı bir yapı oluşturmayı sağlamaktadır.

 

Component’e ait ViewModel Javascript Parçası

 

Component HTML Parçası

Geliştirilen Knockout Component’in HTML sayfası içinde kullanımı aşağıdaki gibidir.

Böylece geliştirilmiş olan component proje içinde gerektiği yerde al kullan mantığında yukarıdaki gibi eklenebilir. Bu yöntemle kodumuzun bakım maliyeti de önemli ölçüde azaltılmış oluyor.

Github

https://github.com/batux/loosely_coupled_knockoutjs_component

Umarım yararlı bir yazı olmuştur. Bir sonraki makalemde görüşmek dileğiyle …