Mutant Web Applications

Mutant Web Uygulamaları Azer Koçulu http://azer.kodfabrik.com

Sunum İçeriği

Teknik İnceleme

Cloudo ve Firebug Lite nasıl geliştirildi?

DOM Teknikleri

Veri taşıma yöntemleri

Python ve Comet

Comet isteği nasıl oluşturulur?

Server nasıl yanıt vermeli?

CherryPy ile Stream örneği

Geleceğin Browser Teknolojileri

HTML5

Javascript 2

Tamari, IronPython&IronRuby ve ScreamingMonkey

Cloudo

Web tabanlı DDE (Distributed Desktop Environment) uygulamasıdır.

İsveç'te yaşayan Hakan Bilgin ve Selim Çotal geliştiriyor.

Geçtiğimiz hafta ikinci Alpha sürümü yayınlandı.

Cloudo, daha verimli kod yazmayı sağlayan extend.js adlı bir javascript kütüphanesinin üzerine kuruludur.

Bu kütüphanenin temel özelliklerinden biri, browser'ın native class'ları üzerinde düzenlemeler yaparak eksikleri gidermektir.

Cloudo'nun veri transferlerini xdbc.js adlı ikinci kütüphane sağlıyor.

xdbc.js server'dan gelen XML veriyle XSL belgesinin önyüzde işlenmesini sağlar.

Bu yöntemle arayüz oluşturmak, klasik DOM ağacı oluşturma tekniğine oranla birkaç kat hızlıdır.

Firebug Lite

Firebug Lite 1.2, geçen nisan ayında çıkan pi.debugger'ın geliştirilmiş ve görsel olarak Firebug'a benzetilmiş yeni halidir.

25 Temmuzda Steve Souders'ın OSCON'da tanıtmasıyla release edildi.

Bookmarklet olarak kullanılabiliyor.

IPhone'da çalışıyor.

Konsol,Inspector,HTML/CSS/ Script/DOM Explorer ve bir XHR Monitor aracını içeriyor.

Browserlar kodun yürütüldüğü thread'e müdahale edilmesine izin verdiğinde, breakpoint, error indicator vb. araçları da içerecek.

Firebug Lite, pi.js adlı kütüphanenin üzerinde geliştirildi.

Bu kütüphanenin temel niteliği, web tabanlı yazılım geliştirmek için tasarlanmasıdır.

Şu an tamamlanmamış ta olsa, pi.kodfabrik.com adresinde dökümanları bulunuyor.

FBLite 1.2'nin Dojo kütüphanesine eklenmesi için Mike Wilcox Firebug takımına katıldı.

FBLite'ın eklendiği kütüphaneler, doğal olarak Pi kütüphanesini de içerecek.

FBLite "firebug" adında bir hash'in içinde çalışır:

var firebug = { version:[1.2,20080725] };

Arayüz pi.element ile oluşturulur:

var myButton = new pi.element("button").

attribute.addClass("MyButton").

environment.addStyle({ "color":"#000", "background":"green" }).

update("Click Me").

event.addListener("click",function(){

alert("Hello World!");

}).

insert(document.body)‏

gh

Arayüzü stilize eden CSS dosyası da pi.element ile açılır:

document.getElementsByTagName("head")[0].appendChild(

new pi.element("link").

attribute.set("rel","stylesheet").

attribute.set("href","http://foo.bar.css").

element

)

CSS ve Script bölümlerinde, dosya kaynaklarını çağırmak için pi.xhr kullanılır:

>>> trace(pi.xhr.get("firebug.js").responseText)‏

"var firebug....."

Firebug Lite'ın yeni versiyonu önümüzdeki hafta çıkacak.

Bu versiyonda CSS ve DOM property'lerinin arayüz üzerinde düzenlenmesi, pencere yüksekliğinin arayüzde veya komut satırında değiştirilmesi mümkün olacak.

Python ve Comet

Server'ın gelen isteği bekletmesi ve parça parça cevap vermesi zaman aralığı kısa periyodik veri transferleri yapmayı sağlar. Bu tekniğe Comet adı verilir.

Neredeyse tüm browserlar farklı yöntemlerle bu tekniği destekler.

Gecko/Webkit: Multipart XMLHttpRequest

Trident( MSIE,Maxthon vb ): HTMLFile&Iframe

Opera: Serverside Event Listener

SSEL ideal comet tekniğidir. event-source elementiyle stream yapılır:

JAVASCRIPT var el = document.createElement("event-source"); el.setAttribute("src","/read"); document.body.appendChild(el); el.addEventListener("NewStream",function(_eventArgs){ trace(_eventArgs.servertime); },false); PSEUDOCODE (Response)‏ header "application/x-dom-event-stream" for i from 0 to 15 write "Event: NewStream " write "servertime: %i"%server_time flush sleep 1000

XHR yönteminde klasik XMLHttpRequest isteği gönderilir.

Server isteği bekletirken readyState 3'tür, responseText değiştiğinde callback çalışır.

IFrame tekniği tüm browserlarda çalışır ama throbber hareketli görünür.

Bu problemi aşmak için IFrame, HTMLFile adlı ActiveX objesiyle açılan sanal pencereye yerleştirilir.

JAVASCRIPT var win = new ActiveX("HTMLFile"); win.open(); win.write("<html><body></body></html>"); win.close(); win.body.innerHTML="<iframe src='/read' />" function read(_serverTime){ trace(_serverTime) } PSEUDOCODE (Response)‏ header "text/html" for i from 0 to 15 write "<script>parent.parentWindow.read(%i)</script>"%server_time flush sleep 1000

Browserların bugünkü imkanlarıyla comet tekniği biraz karmaşık ve sorunlu.

Bu yüzden pek çok kütüphane ve framework türedi, dwr, Orbited, dojo.cometd gibi.

pi.comet bunlardan biri, ilk sürümü mart ayında çıkmıştı.

* http://ajaxian.com/archives/picomet-simple-comet-library

Basitçe, cross browser comet kanalı açmayı ve bu kanala veri göndermeyi sağlıyor;

JAVASCRIPT pi.comet.get('/read',function(_response){ trace(_response); })‏ PSEUDOCODE (Response)‏ import PIComet response = PIComet(parameter("PICometMethod"),parameter("PICometName"))‏ header "Content-type: %s"%response.contentType for i from 0 to 15 response.push(""%server_time)‏ flush sleep 1000

CherryPy

CherryPy Python'la yazılmış bir HTTP framework'üdür.

Basit ve güçlü uygulama sunucusu arayanlar için iyi bir seçenek.

Hello World;

import cherrypy class HelloWorld(object): # @cherrypy.expose def index(self): return "Hello World!" index.exposed = True cherrypy.quickstart(HelloWorld())

import cherrypy,sys,time class helloWorld(object): @cherrypy.expose def index: def content(): for i in range(10): yield "<h1>%i</h1>"%i sys.stdout.flush()‏ time.sleep(1)‏ return content()‏ expose._cp_config = { 'response.stream':True } cherrypy.quickstart(helloWorld())‏

"yield" operatörüyle de çıktı verilebildiği için kolayca stream yapmayı sağlar;

Multi-threaded serverlar comet için sağlıklı altyapı sağlayamıyor.

CherryPy, Orbited, Twisted, Cogen gibi asenkron IO sağlayan yazılımlarla uyumludur.

Bu sayede comet uygula artırdığı trafik yükünün altından kalkılabilinir.

Geleceğin Browser Teknolojileri

HTML5

Yeni elementler arasında canvas,video, audio gibi elementler var.

Canvas elementi browserda grafik programlama yapmayı sağlıyor.

Canvas tabanlı birkaç uygulama:

http://www.nihilogic.dk/labs/wolf/ http://www.nihilogic.dk/labs/chess/

Web uygulamalarının kullanıcının makinesinde veri saklamasını sağlayan storage ve database api'leri geliştiriliyor.

globalStorage ve sessionStorage Obje'leri kalıcı veri tutmayı sağlar.

>>> sessionStorage.foo = "hello world" >>> globalStorage[document.domain].foo = 'hello world' kapat/ac >>> sessionStorage.foo==undefined true >>> globalStorage[document.domain].foo 'hello world'

DOM Storage tekniğini Firefox ve Internet Explorer 8 destekliyor.

Internet Explorer'ın daha eski versiyonlarında kalıcı veri tutmak için pi.storage veya persist.js kullanılabilir.

Safari ve Opera'nın bugünkü sürümleri DOM storage'ı desteklemiyor ama ileride destekleyecekleri kesin.

Database api'sini henüz sadece Webkit destekliyor;

var database = openDatabase("foo"); database.transaction(function(connection){ connection.executeSql("create table ?",["foo"],callback,onerror); });

HTML5'e yeni eklenen özelliklerden biri de WebSocket.

Browserların çeşitli sunucu-istemcilerle real-time veri gönderip almasını sağlayacak.

Henüz herhangi bir browser desteklemiyor.

Javascript 2

Javascript 2 ile Ecmascript 4'e geçiş yapılacak.Bazı önemli yenilikler;

Class:

class Layer { var name, _x, _y; function get x(){ return _x; } function set x(value){ _x = value+"px"; } }; var foo = new Layer; foo.x=10; trace(foo.x) // "10px"

Tür tanımlama:

Paket yönetimi:

Namespace:

var x:int = 10, name:String = "Azer"; { "x":int, "y":string } function(x:int, y:string){ // ... }; >>> import pi.util.* >>> pi.util.Random(0,255)‏ 123 >>> import pi.util.* >>> use namespace pi.util >>> Random(0,255)‏ 213