Download - Mutant Web Applications
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?