mutant web applications

Download Mutant Web Applications

Post on 08-Jul-2015

2.476 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

- Cloudo & Firebug lite - Comet&Python - HTML5, Javascript 2, Tamarin

TRANSCRIPT

  • Mutant Web UygulamalarAzer Kouluhttp://azer.kodfabrik.com

  • Sunum eriiTeknik ncelemeCloudo ve Firebug Lite nasl gelitirildi?DOM TeknikleriVeri tama yntemleri

  • Python ve CometComet istei nasl oluturulur?Server nasl yant vermeli?CherryPy ile Stream rnei

  • Gelecein Browser TeknolojileriHTML5Javascript 2Tamari, IronPython&IronRuby ve ScreamingMonkey

  • Cloudo

  • CloudoWeb tabanl DDE (Distributed Desktop Environment) uygulamasdr.sve'te yaayan Hakan Bilgin ve Selim otal gelitiriyor.Getiimiz hafta ikinci Alpha srm yaynland.

  • Cloudo, daha verimli kod yazmay salayan extend.js adl bir javascript ktphanesinin zerine kuruludur.Bu ktphanenin temel zelliklerinden biri, browser'n native class'lar zerinde dzenlemeler yaparak eksikleri gidermektir.

  • Cloudo'nun veri transferlerini xdbc.js adl ikinci ktphane salyor.xdbc.js server'dan gelen XML veriyle XSL belgesinin nyzde ilenmesini salar.Bu yntemle arayz oluturmak, klasik DOM aac oluturma tekniine oranla birka kat hzldr.

  • Firebug Lite

  • Firebug Lite 1.2, geen nisan aynda kan pi.debugger'n gelitirilmi ve grsel olarak Firebug'a benzetilmi yeni halidir.25 Temmuzda Steve Souders'n OSCON'da tantmasyla release edildi.Bookmarklet olarak kullanlabiliyor.

  • IPhone'da alyor.Konsol,Inspector,HTML/CSS/ Script/DOM Explorer ve bir XHR Monitor aracn ieriyor.Browserlar kodun yrtld thread'e mdahale edilmesine izin verdiinde, breakpoint, error indicator vb. aralar da ierecek.

  • Firebug Lite, pi.js adl ktphanenin zerinde gelitirildi.Bu ktphanenin temel nitelii, web tabanl yazlm gelitirmek iin tasarlanmasdr.u an tamamlanmam ta olsa, pi.kodfabrik.com adresinde dkmanlar bulunuyor.

  • FBLite 1.2'nin Dojo ktphanesine eklenmesi iin Mike Wilcox Firebug takmna katld.FBLite'n eklendii ktphaneler, doal olarak Pi ktphanesini de ierecek.

  • FBLite "firebug" adnda bir hash'in iinde alr: var firebug = { version:[1.2,20080725] };

    Arayz pi.element ile oluturulur: 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

  • Arayz stilize eden CSS dosyas da pi.element ile alr: document.getElementsByTagName("head")[0].appendChild( new pi.element("link"). attribute.set("rel","stylesheet"). attribute.set("href","http://foo.bar.css"). element ) CSS ve Script blmlerinde, dosya kaynaklarn armak iin pi.xhr kullanlr: >>> trace(pi.xhr.get("firebug.js").responseText) "var firebug....."

  • Firebug Lite'n yeni versiyonu nmzdeki hafta kacak.Bu versiyonda CSS ve DOM property'lerinin arayz zerinde dzenlenmesi, pencere yksekliinin arayzde veya komut satrnda deitirilmesi mmkn olacak.

  • Python ve Comet

  • Server'n gelen istei bekletmesi ve para para cevap vermesi zaman aral ksa periyodik veri transferleri yapmay salar. Bu teknie Comet ad verilir.Neredeyse tm browserlar farkl yntemlerle bu teknii destekler. Gecko/Webkit: Multipart XMLHttpRequest Trident(MSIE,Maxthon vb): HTMLFile&Iframe Opera: Serverside Event Listener

  • SSEL ideal comet tekniidir. event-source elementiyle stream yaplr: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 ynteminde klasik XMLHttpRequest istei gnderilir. Server istei bekletirken readyState 3'tr, responseText deitiinde callback alr.IFrame teknii tm browserlarda alr ama throbber hareketli grnr.

  • Bu problemi amak iin IFrame, HTMLFile adl ActiveX objesiyle alan sanal pencereye yerletirilir.

    JAVASCRIPTvar win = new ActiveX("HTMLFile");win.open();win.write("");win.close();win.body.innerHTML=""function read(_serverTime){ trace(_serverTime) }

    PSEUDOCODE (Response) header "text/html" for i from 0 to 15 write "parent.parentWindow.read(%i)"%server_time flush sleep 1000

  • Browserlarn bugnk imkanlaryla comet teknii biraz karmak ve sorunlu.Bu yzden pek ok ktphane ve framework tredi, dwr, Orbited, dojo.cometd gibi.pi.comet bunlardan biri, ilk srm mart aynda kmt. * http://ajaxian.com/archives/picomet-simple-comet-library

  • Basite, cross browser comet kanal amay ve bu kanala veri gndermeyi salyor;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

  • CherryPyCherryPy Python'la yazlm bir HTTP framework'dr.Basit ve gl uygulama sunucusu arayanlar iin iyi bir seenek.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 "%i"%i sys.stdout.flush() time.sleep(1) return content() expose._cp_config = { 'response.stream':True } cherrypy.quickstart(helloWorld())"yield" operatryle de kt verilebildii iin kolayca stream yapmay salar;

  • Multi-threaded serverlar comet iin salkl altyap salayamyor.CherryPy, Orbited, Twisted, Cogen gibi asenkron IO salayan yazlmlarla uyumludur.Bu sayede comet uygula artrd trafik yknn altndan kalklabilinir.

  • Gelecein Browser Teknolojileri

  • HTML5Yeni elementler arasnda canvas,video, audio gibi elementler var.Canvas elementi browserda grafik programlama yapmay salyor.Canvas tabanl birka uygulama:http://www.nihilogic.dk/labs/wolf/http://www.nihilogic.dk/labs/chess/

  • Web uygulamalarnn kullancnn makinesinde veri saklamasn salayan storage ve database api'leri gelitiriliyor.globalStorage ve sessionStorage Obje'leri kalc veri tutmay salar.>>> sessionStorage.foo = "hello world">>> globalStorage[document.domain].foo = 'hello world'kapat/ac>>> sessionStorage.foo==undefinedtrue>>> globalStorage[document.domain].foo'hello world'

  • DOM Storage tekniini Firefox ve Internet Explorer 8 destekliyor.Internet Explorer'n daha eski versiyonlarnda kalc veri tutmak iin pi.storage veya persist.js kullanlabilir.

  • Safari ve Opera'nn bugnk srmleri DOM storage' desteklemiyor ama ileride destekleyecekleri kesin.Database api'sini henz 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.Browserlarn eitli sunucu-istemcilerle real-time veri gnderip almasn salayacak.Henz herhangi bir browser desteklemiyor.

  • Javascript 2Javascript 2 ile Ecmascript 4'e gei yaplacak.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"

  • Tr tanmlama:

    Paket ynetimi:

    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 kmasyla kullanlmaya balanacak.Mozilla Javascript 2 iin Tamarin VM zerinde almaya balad.Mozilla'nn IronPython ve IronRubyadl iki projesi daha var.Python ve Ruby dilleriyle DHTML programlama mmkn olacak.

  • Problem; hzl gelien teknolojinin karsnda Internet Explorer'n ok geriden gelmesi.

  • zm!

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

  • Mozilla, Internet Explorer'n Javascript 2 yorumlamasn salayacak.

  • Sorular?