AngularJS ve BackboneJS
AngularJS, Google tarafından desteklenen, MIT lisansıyla özgür olarak dağıtılan bir JavaScript kütüphanesidir. MVC yapısının bir türevi olan MVVM uygun olarak kısa sürede ve kod tekrarından kaçınarak “tek sayfa web uygulamaları” geliştirmenize olanak sağlar. Bu günlük yazısında AngularJS’in temel kavramlarından ve onu diğer kütüphanelerden ayıran özelliklerden bahsetmeyi planlıyorum.
Yönergeler (Directives) ve İfadeler (Expressions)
JQuery ya da benzeri bir kütüphane ile çalıştıysanız bazen kod okumak zor bir iş haline gelebilir. Sayfa kaynağına baktığınızda HTML nesneleri ve onların ne iş yaptıklarıyla ilgili çok az fikriniz olur, yazılımcı açısından bakarsak da aynı nesnelerle iletişim kurmak için önce onları id veya başka bir parametreye göre bulmak ve kodumuza bağlamak gerekir. AngularJS bu sorunu HTML’i genişleterek ve yeni özellikler ekleyerek çözmüş.
Bu örnekte yönergelerin bizi bir koşul ifadesi ve bir döngü yazmaktan kurtardığını görüyoruz. Üstelik “Controller” içerisinde bu arayüz nesnelerinin adının geçmesine gerek dahi kalmadan. Bu kısımda {{ }} şeklinde kullanılan kısım İfade (Expression) olarak adlandırılıyor ve ekrana çıktı vermek için kullanılıyor. İfadelerle beraber kullanabileceğimiz çeşitli filtreler de mevcut. Örneğin {{ user.name | uppercase }} deseydik çıktımız filtrelenecek ve büyük harflerle gösterilecekti. Bu filtrelerin kullanımı sadece şekil olarak değil işlev olarak da Unix’deki Pipe’larla benzerlik gösteriyor {{ değişken | filtre1 | filtre2 }} şeklinde sıralayarak birden fazla filtre uygulayabiliyoruz. Ayrıca ihtiyaçlarımıza göre kendimiz yeni filtreler veya yönergeler yazabiliyoruz.
İki yönlü veri bağlama
Yönergeler bir şablon motorundan farklı olarak bize hem veri okuyup görüntülemeye, hem de yeni veri ekleyip varolan veriyi düzenlememize olanak sağlayan yani veriyi iki yönlü bağlamamıza olanak sağlayan bir yapı. Bu konuda verilebilecek en basit örnek ise şöyle:
Burada “ng-model” yönergesi ile girdi kutumuzu veri girişi yapacak şekilde “name” değişkenine bağladık. “ng-show” ise içerisindeki koşul “true” ise nesnenin görüntülenmesini değil ise, görüntülenmemesini sağlıyor. Bu kutuya herhangi bir veri girişi olduğunda “name” değişkeninin ve buna paralel olarak “{{ name }}” ifadesinin değiştiğini görüyoruz. Tabii gerçek bir proje bu özellik arayüzden alınan verinin arayüze bağlanmasından çok “Controller” içerisinde kullanılması olarak karşımıza çıkacak. Fakat bu kolaylığın getirdiği en büyük dezavantaj ise AngularJS’in bağlanan verilerin değişip değişmediğini arayüzü her yenilemesi gerektiğinde teker teker önceki değerlerle kıyaslayarak bulması, bunun büyük ölçekli uygulamalarda performansı düşüreceğini öngörmek çok da zor değil.
Bağımlılık Enjeksiyonu (Dependency Injection) ve Testler
Bağımlılık enjeksiyonu aslında modüler proje geliştirmenin basit ama önemli bir prensibi. Bir arayüz sınıfını (Interface) implemente eden çeşitli sınıflar oluşturduğumuzda bunları kodumuz içerisinde direk tanımlamak yerine parametre olarak alma ilkesine dayanıyor. Yani “A” ve “B” sınıfları aynı arayüzü implemente ettiği için ikisini birbirinin yerine kullanabiliriz fakat yine de onları “A” ve “B” olarak tanımlamak zorundayız, fakat bu sınıfların değişmesi neden bizim modülümüzün sorunu olsun ki? bu sınıfları modülümüzün içinde tanımlamak yerine implemente ettikleri arayüz sınıfı tipinde bir nesneyi parametre olarak alıp kullanırsak artık projenin ihtiyaçlarına göre değişecek “A” veya “B” kullanımı bizim modülümüzün derdi olmaktan çıkar. İşimizi görecek herhangi bir nesne modülümüze kolaylıkla enjekte edilebilir.
AngularJS her kademede bağımlılık enjeksiyonu prensibini kullanıyor, örneğin bize JSON döndüren bir servisimiz var ve artık XML kullanmak istiyoruz, öyleyse kodumuza verdiğimiz parametreyi değiştirmemiz yeterli. En işe yarar kısmı ise testleri kolaylaştırması, örneğin normal bir senaryoda DOM üzerinde değişiklik yapan bir kodu test etmek istiyorsak, bir sayfa görüntülemek ve testleri SeleniumHQ gibi bir araç kullanarak gerçekleştirmek zorundayız, SeleniumHQ her ne kadar pratik ve çok kullanışlı bir araç olsa da her seferinde bir sayfa oluşturulacağından bu testler o kadar da hızlı olmayabiliyor. Fakat AngularJS ile yapmamız gereken değişiklik yapan fonksiyona DOM yerine test için kullanacağımız başka sanal bir sınıf enjekte edip yapacağı değişiklikleri kontrol etmekten çok da fazlası değil. Artık bir sayfa görüntülemek zorunda değiliz, testlerimizi herhangi bir araçtan kısa sürede sorunsuzca çalıştırabiliriz.
AngularJS’in gözüme çarpan olumsuz yanları ise şöyle, öncelikle mantığını ve API’sini öğrenmek diğer kütüphanelere göre daha çok zahmet gerektiriyor. Henüz kendisiyle geliştirilmiş köklü bir servis veya uygulama bulmak da pek mümkün değil. Kendim gözlemlemesem de hakkında IE7 üzerinde gerçekten çok yavaş çalıştığı konusunda yazılmış günlük yazıları var. Son olarak AngularJS diğer bazı kütüphanelerle (Jquery, requireJS vb.) çalışırken sorun çıkarabiliyor, eğer ne yaptığınızdan tam olarak emin değilseniz, genellikle yapamıyorsunuz, bu yüzden hareketli sayfalar yerine daha sabit sayfalar oluşturmak zorunda kalıyorsunuz.
AngularJS öğrenmek için bazı kaynaklar:
https://github.com/jmcunningham/AngularJS-Learning
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
http://docs.angularjs.org/tutorial/
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
Python veya benzeri dinamik bir dil ile geliştirme yapıyorsanız bazı fonksiyonlar sizin için önceden düşünülmüş ve yazılmıştır, Maalesef bu fonksiyonların bazıları JavaScript içerisinde bulunmuyor. Underscore.js bu tip işlevsel fonksiyonları barındıran bir kit. Sadece fonksiyonel programlamaya yönelik değil JavaScript içerisindeki bazı eksik noktaları da tamamlama amacına hizmet ediyor. Aslında bu fonksiyonlar yazamayacağımız karmaşıklıkta algoritmalar içeren fonksiyonlar değiller, fakat yeni baştan yazmak yerine Underscore.js kullanarak zaman kaybından kurtulabilirsiniz.
Bu fonksiyonlardan map, reduce, min, max, range gibi onlarca fonksiyon zaten isimlerinden kendi kendini açıklıyor, fakat aldıkları ve döndürdükleri değerlerle ilgili şüpheye düşerseniz Underscore.js dökümantasyonu oldukta tatmin edici. Bunlar haricinde kalan fonksiyonlardan bazı örnekler:
_.bind(fonksiyon, nesne): JavaScript’te “this” anahtar kelimesinin kullanımı diğer dillerden biraz farklı, çünkü her zaman istediğimiz nesnenin sahibi beklediğimiz nesne olmayabiliyor. Bu fonksiyon ile istediğimiz bir fonksiyonu istediğimiz bir nesneye bağlayabiliyoruz. Böylece o fonksiyonu nerede ve nasıl kullanırsak kullanalım “this” her zaman bağladığımız objeyi gösteriyor.
_.thorttle(fonksiyon, süre): Kendisine verilen fonksiyonun belirtilen süreyle kısıtlıyor ve daha sık yapılan çağrılarda fonksiyonun çalıştırılmamasını sağlıyor.
_.union(*diziler): Kendisine verilen dizilerden tek bir dizi oluşturuyor, bunu yaparken birden fazla bulunan elemanlardan sadece bir tanesini alıyor.
_.difference(dizi, *diğer dizi(ler)): Verdiğimiz dizi ile diğer dizilerin farkını gösteriyor.
_.memorize(fonksiyon): Kendisine verilen fonksiyona bellekleme özelliği ekleyerek geri döndürüyor, Örneğin hesaplama yapan bir fonksiyonunuz var ve aynı argümanlar için aynı değeri döndürecek, bu durumda tekrardan hesaplamak yerine bellekten bir önceki çağrınızda hesaplanmış değeri döndürmek çok daha pratik. Bu tipte fonksiyonlarınız için “memorize” kullanmanın kodunuzu hızlandıracağından emin olabilirsiniz.
Daha fazlası için Underscore.js dokümantasyonuna bakmanızı tavsiye ederim.
Backbone.js, Underscore.js ile aynı geliştirici tarafından geliştirilmiş bir MVC türevi (MV*) kütüphanedir, aktif şekilde Underscore.js fonksiyonlarını kullanır. Diğer kütüphanelere göre daha hafiftir ve bu sebeple arayüz ve diğer işlemler için fazladan kod yazmayı gerektirir, aynı zamanda bu bize inanılmaz bir esneklik sağlar. AngularJS gibi kapsamlı bir alternatifiyle kıyaslarsak en büyük eksisi Underscore.JS’e ve Zepto’ya katı bağımlılık içermesi, yani kendisi 10 küsür kb gibi az bir yer kaplamasına rağmen Zepto ve Underscore’u ekleyince AngularJS gibi kapsamlı bir kütüphane ile boyut olarak kafa kafaya gelmektedir tabi AngularJS ile yazacağınız bir uygulamada da Jquery ya da Underscore kullanabileceğinizden bu kıyaslama kriteri olmaktan çıkartabiliriz. Bu konuda bir diğer eksiği de Angular’da bulunan “bağımlılık enjeksiyonu”, “iki yönlü veri bağlama” gibi güzel özellikleri barındırmaması. Yine de sahip olduğu topluluk ve yazılmış çok fazla eklenti sayesinde “tek sayfa uygulama” geliştiricilerinin sıklıkla kullandığı bir kütüphanedir internetin hangi köşesine giderseniz gidin BackboneJS kullanan bir site ile karşılaşırsınız.
TodoMVC diğer bahsettiklerimin aksine bir JavaScript kütüphanesi değil, basit bi To do (Yapılacak işler listesi) uygulamasının onlarca farklı MVC kütüphanesiyle tekrardan yazılmasını amaçlayan bir proje. Yazılmış uygulamalara bakıp hangi kütüphanenin bize daha uygun olduğunu kolaylıkla keşfetmemizi ve birbirleriyle kıyaslamamızı sağlıyor. Bu yazıyı yazarken kendisinden oldukça faydalandığım için yer vermek istedim. Eğer siz de incelemek isterseniz örneklere Github sayfasından ulaşabilirsiniz.