Mutant Web UygulamalarıAzer Koçulu

http://azer.kodfabrik.com

Sunum İçeriği• Teknik İnceleme

o Cloudo ve Firebug Lite nasıl geliştirildi?o DOM Tekniklerio Veri taşıma yöntemleri

• Python ve Cometo Comet isteği nasıl oluşturulur?o Server nasıl yanıt vermeli?o CherryPy ile Stream örneği

• Geleceğin Browser Teknolojilerio HTML5o Javascript 2o Tamari, IronPython&IronRuby ve ScreamingMonkey

Cloudo

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:

JAVASCRIPTvar 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\n" 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.

JAVASCRIPTvar 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;

JAVASCRIPTpi.comet.get('/read',function(_response){ trace(_response);})

PSEUDOCODE (Response)import PICometresponse = PIComet(parameter("PICometMethod"),parameter("PICometName"))header "Content-type: %s"%response.contentTypefor 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 cherrypyclass HelloWorld(object): # @cherrypy.expose def index(self): return "Hello World!" index.exposed = True

cherrypy.quickstart(HelloWorld())

import cherrypy,sys,timeclass 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==undefinedtrue>>> 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

• Javascript 2, 2009'da Mozilla 2'nin çıkmasıyla kullanılmaya başlanacak.

• Mozilla Javascript 2 için Tamarin VM üzerinde çalışmaya başladı.

• Mozilla'nın IronPython ve IronRubyadlı iki projesi daha var.• Python ve Ruby dilleriyle DHTML

programlama mümkün olacak.

Problem; hızlı gelişen teknolojinin karşısında Internet Explorer'ın çok

geriden gelmesi.

Çözüm!

ScreamingMonkeyhttp://wiki.mozilla.org/Tamarin:ScreamingMonkey

Mozilla, Internet Explorer'ın Javascript 2 yorumlamasını

sağlayacak.

Sorular?