Javascript UI Framework İncelemesi

Giriş

Dikkat! Bu yazı taraflıdır. İstesem de, istemesem de kesinle tek geçtiğim Mootools dolayısıyla; Mocha UI diğerlerinden 1-0 öndedir.

Yaklaşık 1-1.5 yıl öncesinde Ext-Js fanıydım. Öncelikle lisanslarını değiştirdiler; pek önemsemedik. Sonra SVN'yi paraları hizmete bağladılar; üzüldük. Sonrasında ortaya çıkan yığınla bugı düzeltmek için; kodları karıştırıp, forumlarını arşın arşın arayıp kendimiz düzeltmeye çalıştık. Çünkü SVN'de buglar düzeltilse bile bir çok fix sitede / forumda yayımlanmıyor; versiyon güncellemeleri de 2-3 ayda bir oluyordu.

1-1.5 yıl sonra tekrar geri dönüş yaptım ve alternatifleri incelemeye başladım. Farklı alternatifler arasından ihtiyaç ve isteklerime göre seçim yapacağım. Bu frameworklerin hemen hepsi benzer özellikleri sunuyorlar. Hepsinde tarayıcı uyumluluğu idda ediliyor. Hepsi açık kaynak kodlu, ticari kullanıma uygun lisansları var. Hiç bir şey için ücret talep etmiyorlar. İncelemeyi yaparken jQuery, Dojo'dan iyi gibi bir cümle kurmayacağım. jQuery'nin beni ne derece tatmin ettiğini ön plana alacağım. 

Bu yazıda şu frameworkleri inceleyeceğim:

1. jQuery UI


2. Dojo Dijit 


3. Echo 2 (1)


4. Echo 3 (Beta) (1)


5. MochaUI - Mootools

(1) Echo2, ve Echo3 incelemeden uyum problemleri bulunduğu için çıkartılmıştır. Listbox ve select nesneleri demosunda bile Google Chrome üzerinde düzgün görüntülenmiyor.

(2) Kendi testlerime başlamadan önce yapılan diğer incelemeleri araştırdım. Bu incelemelere de göz atabilirsiniz

Wikipedia - Karşılaştırma
Mootools, Jquery, Prototype, Yui, Dojo Karşılaştırması
jQuery, MooTools, the Ajax Experience, Programming to the Pattern, and What Really Makes One Framework Different From Another
Debunking Dojo Toolkit Myths

En beğendiğim Javascript kütüphanesi Mootools olduğu için incelemeye Mocha UI ile başlayacağım.

Test platformu: Google Chrome 1.0, AMD 2800, 2Gb Ram, Google Chrome'da açık 30 civarı tab, iki adet Msn Live (Build 14), Photoshop CS4, Visual Studio 2008, 2 adet CHM, Editplus, Remote Desktop.  Yani testleri yaparken yavaşlık / hızlılık konusunda geçerli bir veri olacak elimizde.

Mocha UI

Mocha UI, Mootools kullanılarak hazırlanmış bir görsel kütüphane. Google Code üzerinden MIT lisansıyla dağıtılıyor.  SVN repositysi bulunuyor. Kendi hazırladıkları demoya göz atarsak; açıkcası çok şık olduğunu görebiliriz. Demo hızlıca yükleniyor ve yukarıda belirttiğim test platformunda bile bir yavaşlık söz konusu değil. Bir diğer demosu ise virtual desktop örneği. Bu da en az bir önceki kadar hoş. Hemen ilk demonun kaynak kodlarını açıyoruz.

1. Demo için tasarım HTML ile yapılmış. mocha-init.js isimli bir dosyada javascript kodları bulunuyor.

Youtube penceresine ait kod şöyle:

	MochaUI.youtubeWindow = function(){
		new MochaUI.Window({
			id: 'youtube',
			title: 'YouTube in Iframe',
			loadMethod: 'iframe',
			contentURL: 'pages/youtube.html',
			width: 340,
			height: 280,
			resizeLimit: {'x': [330, 2500], 'y': [250, 2000]},
			toolbar: true,
			toolbarURL: 'pages/youtube-tabs.html',
			contentBgColor: '#000'
		});
	}

Pencereyi açan link için ise:

	$('youtubeLinkCheck').addEvent('click', function(e){
	new Event(e).stop();
		MochaUI.youtubeWindow();
	});

Yapı olarak Mootools'un çok sevdiğim yapısına tamamen uygun, kullanışlı bir biçimi var. Corner Radius ve Shadow Blur özellikler çok hoşuma gitti. Stabil ve hızlı çalışıyor. Dokümantasyonu yeterli ve açık.  Plugin ve page mantığını da kesinlikle çok sevdim. Ancak çok önemli bir eksiği var ki, UI'yi sağlamak haricinde bize yardımcı olmuyor. Kullanılabilecek smart-tablelar, gridler, chartlar, form elementleri yok. Ayrıca theme desteği de yok. Ancak Mootools için hazırlananları kullanabiliriz ya da kendimiz hazırlayacağız. Bu da işleri biraz uzatsa da, herşeyi kendim yapmayı sevdiğim için; favorim halen Mocha UI.

JQuery UI

JQuery, Javascript kütüphanelerinin yükselen yıldızı. Microsoft ve Nokia'nın da resmi olarak destekleyeceğini belirmesiyle çok büyük prim yaptı. Sitesinin şıklığı çok hoşuma gitti. Detaylı bir download builder'ı var ve o da gerçekten çok şahane. Google Code üzerinden SVN repositylerine erişebiliyorsunuz. JQuery UI de MIT lisansıyla dağıtılıyor. Herşey bu kadar güzel giderken biraz kıskanıyorum, bir Mootools fanı olarak. Bir kaç bahane bulabilmek için demoları incelemeye başlıyorum. Splitpane, Google Chrome'da biraz problemli çalışıyor ama göz ardı edilebilir. Herşey çok güzel görünüyor ama gözlerim web uygulamasında kullanabileceğim window,  grid ve form elementlerini arıyor.  Herşey gerçekten çok güzel çalışıyor, çok hızlı ve şık. Ancak; pluginleri incelediğimde HTML kodu kullanımı gerekmesi,  dahili bir window, layout sisteminin bulunmaması benim için çok büyük eksiler. 

Tam vazgeçmek üzereydim ki; jQuery UI.Layout Plug-in'ini keşfettim. Günü kurtarabilecek bir kapasitesi olmasına rağmen işin içine bu kadar HTML sokulması beni korkutuyor. ExtJS ye benzer bir yapıda oluşturulmuş ve sorunsuz çalışıyor gibi görünüyor. Ama UI'nin otomatik halletmesi gereken şeylere manuel bazı hackler yapılması gerekiyor. Demolarında bile bu göze çarpıyor.

JQuery UI ile ilgili son fikrim şöyle; web sitelerinde kullanmak için gerçekten çok hoş. Ancak olay web uygulamaları boyutuna geldiğinde kesinlikle çok eksikliği var. Ancak web sitelerimde de kullanmayı düşünmüyorum, çünkü hazırlayacağım reusable kodları kütüphaneler arasında taşımak gibi bir niyetim yok.

Dojo Dijit

Dojo; sevilen, ancak çok eleştirilen bir kütüphane. Şahsen ben biraz soğuk bakıyorum. Bu nedenle hemen Dijit'in sitesine giriyorum ki; kolayca eleştirip, yerden yere vurabileyim. Diğer sitelerle - özellikle jQuery UI ile - karşılaştırıldığında ortalama güzellikle bir site. Düzenlenmiş bir BSD lisansı kullanılan Dojo'yu da ticari ürünlerinizde kullanabilirsiniz. Ayrıca Dojo da size SVN hizmetini ücretsiz sunuyor. Hemen demoları incelemeye başlıyorum. Öncelikle e.posta uygulamasını inceliyorum. Tam istediğim gibi görünüyor. Bir sonraki durak Feature Explorer. Gerçekten çok beğendim. Şuana kadar isteklerimin hepsini karşılıyor.

Alternatif bir isteğim de; kullandığım aracın Adobe AIR için de kolaylıklar sağlaması. Sitepen tarafından, Dojo için hazırlanmış muhteşem bir eklenti olan Dojo Extensions for AIR (DAIR) bu isteğimi fazlasıyla karşılıyor. Screencast'inden görebileceğiniz üzere güçlü bir eklenti.

Yine Sitepan tarafından hazırlanan bir diğer araç da Dojo Toolbox. Dojo Toolbox, Dojo'ya Ext-Js tarzı AIR üzerinden çalışan bir dokümantasyon sistemi sunuyor. Bu küçük canavar bizlere çok geniş bir dokümantasyonun yanı sıra; Dojo, Dijit, Dair ve benzeri Dojo ürünlerine ait bilgilere, araçlara, yazılara ulaşmamızı sağlayan bir Resource özelliği barındırıyor. Bir diğer güzel özelliği ise belirdiğimiz profile göre Dojo'yu indirip, sadece ihtiyacımız olan şeyleri birleştirip sunması. Böylece gereksiz özelliklerinden kurulabilir, kolayca yüksek optimizasyon sağlanabilir. Dojo Toolbox ile ilgili screencasti izleyerek daha iyi bir fikir sahibi olabilirsiniz.

Dojo'nun yapısı genel olarak Ext-Js'ye çok benziyor. Açıkcası çok hoşuma gitti.

Sonuç

Echo2 ve Echo3'ü baştan elemiştik. Mocha UI, Mootools torpiliyle önde başlamıştı ancak bu başarısını web siteleri haricinde gösteremiyor. İki frameworkden fazlasıyla uğraşmanın, öğrenmenin; mantıklı ve faydalı olduğunu düşünmüyorum. Bu nedenle benim görüşüm uygulamalarda Dojo; web sitelerinde Mootools; kompleks olmayan web uygulamalarında ise Mocha UI kullanmak yönünde. 

Yazıyla ilgili görüşlerinizi, tercihlerinizi ve düzeltmelerinizi bekliyorum.