AJAX Tasarım Şablonları (Design Pattern) Konularını İnceliyoruz

Merhaba arkadaşlar, bu yazımızda Web 2.0 ile kullanımı yaygınlaşan Ajax (Wiki: tr) teknolojileri konusunda gerek kullanıcı deneyimini (UX – User Experiance, Wiki: en) artırmak gerekse sunucu verimliliğini yükseltmek adına kullanabileceğimiz yöntemleri inceleyeceğiz.

(Yazı halen güncelleniyor)

Ajax tasarım şablonları kullanıcı deneyimini artıracak yöntemlerin özeti veya şablonudur. Biz burada kullanıcı deneyimi kısmına çok fazla değinmemekle birlikte özetler şeklinde bilgi verip alt yapısının nasıl oluşturulacağını inceleyeceğiz. Yani kod kısmı özet kullanıcı deneyimi bilgisiyle birlikte burada olacak. Kullanıcı deneyimi kısmını ise kendisini bu işe adamış arkadaşımız Ödül KAYA tarafından anlatılacaktır.

Aşağıdaki listede bilinen Ajax Tasarım Şablonları mevcut. Bazıları kullanılmayan tasarımlar olabilir. Tüm listeyi verip en önemli olanları örneklerle sonradan inceleyeceğiz.

Ajax Tasarım Şablonları Listesi

1. Genel Şablonlar (Foundational Technology Patterns)
   1. Ajax Uygulamaları (Ajax App)
      1. Ajax App : Herhangi bir tarayıcıda çalışabilen, veri doğrulama, arama işlemleri vb. işlemleri sunucuya en az iytiyaç duyacak şekilde kullanıcı odaklı çalışan istemci tabanlı site / uygulamalar geliştirmek.
   2. Görüntü Manipülasyonu (Display Manipulation)
      1. Görüntü Güncelleme / Değiştirme (Display Morphing) : Görüntüyü (DOM) javascript ile dinamik olarak güncellemek. Online sınavda geri sayım sayacı, MS-Word programında olduğu gibi yazarken dil bilgisi denetimi vb.
      2. Sayfa Düzenleme (Page Rearrangement) : Sayfa düzenini dinamik olarak değiştirmek.
   3. Web Entegrasyonu (Web Remoting)
      1. Web Servisleri (Web Service) : Sitenizi kullanan müşteriler (B2C) yada firmalar (B2B) için sürekli erişmek istedikleri bilgileri web servisleri aracılığıyla sunabilirsiniz. Yada RESTful web servisi oluşturarak web sitenizden uygulamanıza web servisi aracılığıyla bağlanabilirsiniz.
      2. XMLHttpRequest İstekleri (XMLHttpRequest Call) : Bildiğimiz Ajax istekleri.
      3. IFrame Çağrıları (IFrame Call) : Iframe taktiği ile Ajax benzeri çağrılar.
      4. HTTP Akışı (HTTP Streaming) : Comet diye bilinen HTTP Akış tasarımı. Sunucuyua her defasında bağlantı açmak yerine bağlantıyı açık tutup periyodik dom güncellemesi ile yapılır.
      5. Talebe Bağlı Javascript (On-Demand Javascript) : Sitede ki ek kontroller yada kullanıcı talebiyle oluşturulacak ekranların kontrollerini (javascript dosyalarını) sonradan yüklemek.
   4. Dinamik Davranış (Dynamic Behaviour)
      1. Kullanıcı Eylemi (User Action) : Kullanıcı eylemlerini (tuş vuruşları yada işaretçi tıklamaları) mantıklı hale getirmek yada yardımcı ek eylemler gerçekleştirmek.
      2. Zamanlama (Scheduling) : Kullanıcıya verilecek mesajlarda yada bazı işlemlerde çok hızlı işlem yapmak bazen kullanıcı deneyimini olumsuz yönde etkiler. Basit bir örnek: Otomatik tamamlama yaparken “Asus Notebook” 13 tuş vuruşu yaparsınız. Ekranda 13 defa arka arkaya elementlerin değişmesi kafa karışıklığına sebebiyet verir (Google ‘ın denediği ancak sonradan timeout süresini biraz artırdığı tasarım).  Buna daha güzel bir örnek ise kendi deneyimim olan ışıklı tabelacıların tüm ledleri istedigi zaman yakabilmesini adeta ıspatlarcasına art arda yakıp söndürmesi eylemidir. Bu eylem bilinenin (dikkat çekmek) aksine göz yormak ve kafa karıştırmaktan başta hiçbir işe yaramamaktadır. Oysa ki daha yumuşak geçişler kullansalar etkili bir yöntem olacaktır. Diğer örnekleri detay yazılarında inceleyeceğiz.
   5. Ekstra/Genişletilmiş Teknolojiler (Extended Technologies)
      1. Richer Plugin : Bazen yetersizlik yada duruma bağlı olarak ActiveX, Applet, Flash vb uzantılara ihtiyaç duyabilirsiniz. Bu bazen hız, bazen donanım hızlandırıcılarına erişim bazende lokal diske direkt erişim ihtiyacı olabilir.
2. Programlama Şablonları (Programming Patterns)
   1. Web Services (Web Servisleri)
      1. RESTful Servis (RESTful Service): Web servislerinize GET (listeleme), PUT (güncelleme), POST (ekleme) ve DELETE (silme) metodları kullanarak erişime imkan vermek. Wiki : en
      2. RPC Servisleri (RPC Service) : RPC tabanlı web servisleri. Wiki: en
      3. Ajax Stub: Tarayıcıdan sunucu metodlarını çağırmanızı sağlayan frameworkler. Bkz: DWR, CL-AJAX, SAJAX
      4. HTML Mesaj (HTML Message): Sunucudan dönen yanıtlarda (XMLHttpRequest / Ajax istekleri için) HTML formatı kullanmak.
      5. Basit Metin Mesaj (Plain-Text Message): Sunucudan dönen yanıtlarda (XMLHttpRequest / Ajax istekleri için) basit metin kullanmak.
      6. XML Mesaj (XML Message): Sunucudan dönen yanıtlarda (XMLHttpRequest / Ajax istekleri için) XML formatı kullanmak.
      7. JSON Mesaj (JSON Message):  Sunucudan dönen yanıtlarda (XMLHttpRequest / Ajax istekleri için) JSON formatı kullanmak.
      8. UED Mesaj (UED – URL Encoded Data Message):  URL Encode yapılmış formatta veri transferi.
   2. Tarayıcı-Sunucu Bağlantısı / Konuşması (Browser-Server Dialogue)
      1. İstek Takibi (Call Tracking): Tarayıcıdan sunucuya yaptığınız istekleri bir arabirim kullanarak yönetmek, gerekirse kuyruklamak.
      2. Periyodik Yenileme (Periodic Refresh): Güncel datalar için periyodik yenileme yapmak. Bir örnek: Gmail, kullanıcı bir mail okurken mail dizisiyle alakalı yeni bir mail geldiyse uyarmasıdır.
      3. Gönderim Kısma (Submission Throttling) : Örneğin bir kayıt / sipariş formu doldurulurken daha form gönderilmeden mantıksal ve iş mantığıyla alakalı (sunucubağlantısı gerektiren) kontrolleri yaparak kullanıcıyı anında uyarmak.
      4. Explicit Submission : Gönderim Kısma ‘ya benzer bir tasarım. Verilen bir örnek: online sohbetlerde gönder tuşuna basıldığında mesajın gönderilmesi (her tuş vuruşunun gönderilmemesi).
      5. Kişiselleştirilmiş İstek (Personalization Call): Kullanıcıların arkadaşlarına gönderebileceği, bookmark uygulamalarına ekleyebilecekleri URL ler oluşturmak. Yani adres satırına kullanıcı adı ve id si gibi kişiye özel bilgiler basmamak.
      6. Dağıtılmış Olaylar (Distributed Events) : Sunucu yada istemci taraflı olayları dağıtılmış bir yapıda yada JMS (Java Message Service) benzeri bir mesaj servisi olan ve JavaScript dahil olmak üzere 10 un üzerinde dil desteği bulunan Apache ActiveMQ kullanarak yönetebilirsiniz.
      7. Cross-Domain Proxy : Gerekiyorsa web uygulamanız için Same-Origin güvenliğini ortadan kaldıran Mixendo gibi uygulamaları deneyin.
      8. Kalıcı Objeler (Object Persistence): Javascript objelerini local yada server-side kalıcı yapmak. Bkz: Dojo, Authenteo, Ajaxdo
   3. DOM Population
      1. XML Data Island (XML Veri Depolama): XML verilerinin XHTML içine gömülerek XHTML elementlerine bağlanmış şekilde çalışmasını sağlar. XML güncellendiğinde element veriside güncellendiğinden kulağa hoş gelen bir uygulamadır. IE 5 ile desteklenmeye başlanmıştır. Firefox ‘un desteklediği söylenmekte.
      2. Browser-Side XSLT (Extensible Stylesheet Language Transformations / Genişletilebilir Biçimlendirme Dili Dönüşümleri) : XSLT, 2007 yılında ilgilendiğimiz duyduğumuzda bizi heyecanlandıran bir özelliktir. Halen cross browser sorunları nedeniyle çok kullanılmamakla birlikte yakın zamanda bunun aşılması ve webde kullanım örneklerinin daha fazla yayılmasıyla birlikte hızla kullanılmaya başlayacak bir tasarım şablonudur. Çalışma mantığı XML dosyasına XSLT dosyasını verirsiniz ve çıktı günümüzde kullanılan sitelerle ayınıdır. Elinizde bir .XML dosyası birde .XSL dosyası olur. XML dosyası verileri tutar, XSL dosyası ise XHTML ile birlikte .XML dosyasından hangi verinin hangi XHTML tagına basılacağına karar verir. XSL ile if, else, for, değişken basma vb. bir çok şey kullanılabilir. Başka bir deyişle XSLT yaygınlaştığında server-side programlama dillerine çok az ihtiyaç duyulacak. Detaylandırmak istediğimiz konulardan olduğundan ayrı bir yazıda tartışacağız.
      3. Tarayıcı Tabanlı  Şablon (Browser-Side Templating): Tarayıcı üzerinde HTML dosyaları ile template mantığı kullanılması.
      4. Dual-Side Templating: Sunucu ve tarayıcı tabanlı şablonlama.
   4. Performans Optimizasyonu (Performance Optimisation)
      1. Tarayıcı Tarafında Cache (Browser-Side Cache): Tarayıcı tarafında sunucu sonuçlarını cachleyip performans kazanma yönemidir.
      2. Fat Client: Business logic ve user interface ‘in de client üzerinde (JS ile) bulunduğu şablondur.
      3. Sezgisel Tahmin (Guesstimate): Sunucuda olan biteni tahmin etme şablonudur. Gmail anasayfasında sürekli artan Gmail kotası örneği gibi.
      4. Çok Aşamalı İndirme (Multi-Stage Download) : Basit bir örneğini http://sameurl.com/ anasayfasında uygulamaya çalıştığımız bir tasarım şablonu. SameURL sitesine girdiğinizde paypal butonunun sonradan yüklendiğini göreceksiniz. Burada amaç ilk olarak kullanıcı direkt ilgilendiren elementleri yüklemek sonradan ekstra içerikleri yüklemek. Burada kısıt seo optimizasyonudur.
      5. Tahmini Getirme (Predictive Fetch) : En çok sevdiğimiz şablonlardan birisidir. Amazon.com benzer versiyonunu arama sonuçlarında kullanıyor. Burada amaç kullanıcının yapacağı eylemleri önceden tahmin edip sunucudan getirmektir. En iyi örnek kullanıcı makale okurken 10 saniye sayfada kaldıysa ikinci sayfanın okunma ihtimali yüksek olduğundan ikinci sayfayı arka planda yüklemektir.
      6. Sahte Kanallama (Pseudo-Threading): Timeout yardımıyla işlemleri geciktirerek multithreading ‘i simüle eden şablondur.
   5. Maintainability, Code Generation and Reuse
      1. Lazy Inheritance
      2. Server-Side Code Generation
      3. Cross-Browser Component
      4. Flyweight
3. Fonksiyonellik ve Kullanılabilirlik Şablonları (Functionality and Usability Patterns)
   1. Widgets
      1. Slider
      2. Progress Indicator
      3. Drilldown
      4. Data Grid
      5. Rich Text Editor
      6. Suggestion
      7. Live Search
      8. Live Command-Line
      9. Live Form
   2. Page Architecture
      1. Drag-And-Drop
      2. Sprite
      3. Popup
      4. Malleable Content
      5. Microlink
      6. Portlet
      7. Status Area
      8. Update Control
      9. Transparent Message
      10. Virtual Workspace
   3. Visual Effects
      1. One-Second Spotlight
      2. One-Second Mutation
      3. One-Second Motion
      4. Highlight
   4. Functionality
      1. Lazy Registration
      2. Direct Login
      3. Host-Proof Hosting
      4. Timeout
      5. Heartbeat
      6. Unique URLs
      7. Dynamic Favicons
4. Geliştirici Şablonları (Development Process Patterns)
   1. Diagnosis
      1. Logging
      2. Debugging
      3. DOM Inspection
      4. Traffic Sniffing
   2. Testing
      1. Simulation Service
      2. Browser-Side Test
      3. Service Test
      4. System Test

Sonuç

Yukarıda özet olarakda olsa kullanıcı deneyimi konusunda Ajax Tasarım Şablonlarını inceledik. Bunların bir çoğu başlıca bir konudur. İlerleyen zamanlarda önemli başlıklar için yazılar yazacağız. Ancak olay tabanlı çalışmak ve aktif bir blog olmak istememizden dolayı siz kullanıcılarımızın eylemlerini bekliyoruz 🙂 (Yorum, istek vb)

Kaynaklar

http://www.nngroup.com/reports/
http://www.baekdal.com/articles/xmlhttprequest-guidelines/
http://ajaxpatterns.org/