Yaygın Olarak Kullanılan Javascript MVC Çatıları

25 Eki

Yazılım dünyasında en popüler tasarım şablonlarından olan MVC(Model View Controller) tasarım şablonu, geleneksel programlama dillerinin yanında Javascript tarafında da yaygın olarak kullanılmaya başlamıştır. MVC bir uygulamada yapılması gereken işlerin üç sınıfta birbirinden ayrılmasıdır.

Model: Modellenen verinin tipi olarak düşünülebilir. Örneğin; ürün, kullanıcı, sipariş, v.s

View: Uygulamanın ön yüzü oalrak düşünülebilir. Örneğin; temalar, css, resimler.

Controller: Uygulamadaki eylemleri karşılar. Örneğin; Tıklamalar, istekler, cevaplar.

Javascript dili, kullanıcı(client) taraflı bir dil olduğundan ve internet tarayıcısı(browser) tarafından yorumlandığından bir ön yüz geliştirme aracıdır. MVC tasarım şablonunun ön yüzde yani View tarafında uygulanması biraz ilginç gelebilir. Fakat her ne kadar View tarafında olsak da ortada bir programlama aracı vardır ve bu programlama aracı ile yani javascript ile ön yüzde MVC şablonunu uygulamak mümkündür. Model ve Controller olarak javascript nesnelerini, View olarak ise HTML elemntlerini düşünebiliriz. Bu sayede MVC şablonunu ön yüz geliştirme ortamına uygulayabiliriz.

Neden MVC çatıları kullanılır?

Javascript MVC çatısı altında DOM etkileşimleri yanı sıra Sunucu ve Kullanıcı arası iletişimleri sağlamak mümkündür. Bu iletişim sırasında alınan ve gönderilen veriler üzerinde bazı mantıksal işlemleri uygulamak gerekebilir. MVC çatılarını kullanarak bu mantıksal işlemleri View tarafından ayırabiliriz.

Bir uygulama çatısı geliştirmek çok külfetli ve maliyetli olduğundan sıfırdan kütüphaneler yazmak yerine güven kazanmış açık kaynak kütüphaneleri kullanabiliriz.

Seçerken Dikkat

Bir MVC çatısını seçerken dikkat edilmesi gereken bazı hususlar vardır. Bunlar:

  • İhtiyacımızı gerçekten karşılayacak yapıda olması.
  • Destek alabilecek bir topluluğun olması.
  • Dökümantasyonunun iyi yapılmış olması.
  • Küçük uygulamalarla kullanım kolaylığının test edilmiş olması.

Javascript MVC Çatıları

MVC tasarım şablonunun javascript tarafında rahatça kullanılabilmesi için birçok çatı(framework) geliştirilmiştir.

Benim tecrübe ettiğim javascript MVC araçları Knockout, AngularJS, giriş seviyesinde de Backbone olmuştur. Fakat yaygın olarak kullanılarn Javascript MVC araçlarını şu şekilde listeleyebiliriz:

  • AngularJS
  • BackboneJS
  • KnockoutJS
  • EmberJS
  • AgilityJS
  • CanJS


Bir sonraki yazıda görüşmek dileğiyle.

Javascript ile sunucuya dosya yükleme işlemi

13 Eki

Javascript dili son yıllarda yaygın bir ön yüz(front end) geliştirme aracı haline gelmiştir. Farklı problemlere çözüm üreten kütüphanelerin sayısı gün geçtikçe artmakta ve “front end” geliştiricilerin işi de epeyce kolaylaşmaktadır.  Bazı durumlarda hazır kütüphanelerin dışına çıkıp kontrolü elimize almak istediğimizde Javascript kodları ile birebir haşır neşir olmak durumunda kalırız.

Javascript ile ağırlıklı olarak DOM (Document Object Model) işlemeleri yapılmaktadır. DOM Türkçe olarak “Belge Nesnesi Modeli” şeklinde çevirilebilir. Sunucu tarafından oluşturulup(render) bize gönderilen internet sayfasını bir belge olarak düşünebiliriz. Bu internet sayfasında gördüğümüz yazı, resim, video, form gibi elemanları birer nesne olarak düşünebiliriz. Javascript dili ile bu nesneler üzerinde işlemler yapabilmekteyiz. Bunun yanı sıra Javascript dili bize sunucu ile iletişim kurmamızı da sağlamaktadır. Sunucudaki bir URL üzerinden veri istemek veya sunucuya veri göndermek mümkündür.

Javascript bize, sunucuya düz metin (plain text) verisi göndermenin yanı sıra bir de dosya gönderme imkanı sunmaktadır. Bu yazının konusu da dosyaların sunucuya gönderimi sırasında işlemleri takip etmektir.

Javascript ile arka plandan sunucu ile bilgi alışverişi yapmak istediğimizde XMLHttpRequest nesnesini kullanırız. XMLHttpRequest nesnesi ile;

  • Sayfa yenilemeden bilgi alışverişi yapmak mümkündür.
  • Veri alışverişi arka planda gerçekleşir.
  • Veri alışverişi asenkron veya senkron olarak belirlenebilir.

Sunucuya bir istek göndermek için XMLHttpRequest nesnesinin Open() ve Send() metodları kullanılır.

  • open() Metodu: Gönderilen isteğin(request) türünü(GET, POST), URL adresini ve isteğin asenkron olup olmadığını belirler.
  • send() Metodu: İsteği sunucuya gönderir.

XMLHttpRequest nesnesinin çalışma prensibini incelemek için bir kaç örnek vermeden geçmek olmaz.

Örnek: Senkron çalışan yöntem

Senkron Yöntem
Senkron Yöntem

Senkron yöntemlerde open() metodunun son parametresi false olarak belirlenir ve send() metodu ile istek sunucuya gönderilir. İşlem asenkron olmadığından istek gönderildikten sonra cevap gelene kadar beklenir. Yani send() metodundan sonra gelen kodlar çalışmaz.

Örnek: Asenkron çalışan yöntem

Asenkron Yöntem
Asenkron Yöntem

Asnekron isteklerde open() medodunun son parametresi true olarak belirlenir ve request nesnesinin readystatechange olayına(event) bir metod bağlanır. Sunucudan cevap geldiğinde bu metod tetiklenir. İsteği göndermek için send() metodu çalıştırılır.  İşlem asenkron olduğundan send() metodu çalıştırıldıktan sonra başka kod satırları varsa onlar da çalıştırılır.

Bu örneklerde sunucudan GET metodu ile düz metin sonucu almak için uygulamalar yaptık.

Asıl konumuz, bir dosyanın bir isteğe(request) eklenerek sunucuya gönderilmesi işlemidir. Dosyalar büyük veriler olabildiği için, uzak sunucuya gönderilmeleri sırasında takip grektiren bir durum durum ortaya çıkmaktadır. İsteğin sunucuya ulaşıp ulaşmadığı, dosyanın bir T anında yüzde kaçının yüklendiği ve işlemin tamamlanıp tamamlanmadığı gibi durumların kullanıcıya bildirilerek belirsizliğin ortadan kaldırılması gerekmektedir.

Dosya gönderim işlemleri sırasında XMLHttpRequest nesnesinin upload özelliğinden faydalanırız. upload özelliği üzerindeki olaylar(events) sayesinde yükleme işlemlerini takip edebiliriz.

Upload Javascript Kodu
Upload Javascript Kodu

upload özelliğinin;

  • loadstart olayı: yükleme işlemi başladığında tetiklenir.
  • progress olayı: yükleme işlemi sırasında her giden byte grubu sunucuya aktarıldığında tetiklenir.
  • load olayı: yükleme işlemi başarıyla tamamlandığında tetiklenir.

request.open() metodu çalıştırıldıktan sonra setRequestHeader metodu ile gönderilecek olan isteğe(request) dosya bilgileri eklenir. Dosya bilgileri, file tipindeki input elementinden alınır. send() metodu ile istek POST tipinde sunucuya gönderilir. Burada send netodunun parametre alan çeşidi kullanılmış ve parametre olarak POST edilecek bilgi send metoduna eklenmiştir.

Dosya Upload İşlemi
Dosya Upload İşlemi

Dosya yükleme sırasında işlem takibini konsola yazarak gerçekleştirdim. Siz isterseniz HTML elementlerine yazarak gerçekleştirebilirsiniz. Hatta daha önceki yazılarımdan birinde css aracılığı ile durum çubuğu yapmayı işlemiştim. Dosya upload işlemini bu yöntemle bir durum çubuğuna bağlamak mümkündür.

Bir sonraki yazıda görüşmek üzere.