Mutant Web Applications

2,653 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,653
On SlideShare
0
From Embeds
0
Number of Embeds
263
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mutant Web Applications

  1. 1. Mutant Web Uygulamaları Azer Koçulu http://azer.kodfabrik.com
  2. 2. Sunum İçeriği <ul><ul><li>Teknik İnceleme </li></ul></ul><ul><ul><ul><li>Cloudo ve Firebug Lite nasıl geliştirildi? </li></ul></ul></ul><ul><ul><ul><li>DOM Teknikleri </li></ul></ul></ul><ul><ul><ul><li>Veri taşıma yöntemleri </li></ul></ul></ul>
  3. 3. <ul><ul><li>Python ve Comet </li></ul></ul><ul><ul><ul><li>Comet isteği nasıl oluşturulur? </li></ul></ul></ul><ul><ul><ul><li>Server nasıl yanıt vermeli? </li></ul></ul></ul><ul><ul><ul><li>CherryPy ile Stream örneği </li></ul></ul></ul>
  4. 4. <ul><ul><li>Geleceğin Browser Teknolojileri </li></ul></ul><ul><ul><ul><li>HTML5 </li></ul></ul></ul><ul><ul><ul><li>Javascript 2 </li></ul></ul></ul><ul><ul><ul><li>Tamari, IronPython&IronRuby ve ScreamingMonkey </li></ul></ul></ul>
  5. 5. Cloudo
  6. 6. Cloudo <ul><ul><li>Web tabanlı DDE (Distributed Desktop Environment) uygulamasıdır. </li></ul></ul><ul><ul><li>İsveç'te yaşayan Hakan Bilgin ve Selim Çotal geliştiriyor. </li></ul></ul><ul><ul><li>Geçtiğimiz hafta ikinci Alpha sürümü yayınlandı. </li></ul></ul>
  7. 7. <ul><ul><li>Cloudo, daha verimli kod yazmayı sağlayan extend.js adlı bir javascript kütüphanesinin üzerine kuruludur. </li></ul></ul><ul><ul><li>Bu kütüphanenin temel özelliklerinden biri, browser'ın native class'ları üzerinde düzenlemeler yaparak eksikleri gidermektir. </li></ul></ul>
  8. 8. <ul><ul><li>Cloudo'nun veri transferlerini xdbc.js adlı ikinci kütüphane sağlıyor. </li></ul></ul><ul><ul><li>xdbc.js server'dan gelen XML veriyle XSL belgesinin önyüzde işlenmesini sağlar. </li></ul></ul><ul><ul><li>Bu yöntemle arayüz oluşturmak, klasik DOM ağacı oluşturma tekniğine oranla birkaç kat hızlıdır. </li></ul></ul>
  9. 9. Firebug Lite
  10. 10. <ul><ul><li>Firebug Lite 1.2, geçen nisan ayında çıkan pi.debugger'ın geliştirilmiş ve görsel olarak Firebug'a benzetilmiş yeni halidir. </li></ul></ul><ul><ul><li>25 Temmuzda Steve Souders'ın OSCON'da tanıtmasıyla release edildi. </li></ul></ul><ul><ul><li>Bookmarklet olarak kullanılabiliyor. </li></ul></ul>
  11. 11. <ul><ul><li>IPhone'da çalışıyor. </li></ul></ul><ul><ul><li>Konsol,Inspector,HTML/CSS/ Script/DOM Explorer ve bir XHR Monitor aracını içeriyor. </li></ul></ul><ul><ul><li>Browserlar kodun yürütüldüğü thread'e müdahale edilmesine izin verdiğinde, breakpoint, error indicator vb. araçları da içerecek. </li></ul></ul>
  12. 12. <ul><ul><li>Firebug Lite, pi.js adlı kütüphanenin üzerinde geliştirildi. </li></ul></ul><ul><ul><li>Bu kütüphanenin temel niteliği, web tabanlı yazılım geliştirmek için tasarlanmasıdır. </li></ul></ul><ul><ul><li>Şu an tamamlanmamış ta olsa, pi.kodfabrik.com adresinde dökümanları bulunuyor. </li></ul></ul>
  13. 13. <ul><ul><li>FBLite 1.2'nin Dojo kütüphanesine eklenmesi için Mike Wilcox Firebug takımına katıldı. </li></ul></ul><ul><ul><li>FBLite'ın eklendiği kütüphaneler, doğal olarak Pi kütüphanesini de içerecek. </li></ul></ul>
  14. 14. <ul><ul><li>FBLite &quot;firebug&quot; adında bir hash'in içinde çalışır: </li></ul></ul><ul><li>       var firebug = { version:[1.2,20080725] }; </li></ul><ul><ul><li>Arayüz pi.element ile oluşturulur: </li></ul></ul><ul><li>       var myButton = new pi.element(&quot;button&quot;). </li></ul><ul><li>       attribute.addClass(&quot;MyButton&quot;). </li></ul><ul><li>       environment.addStyle({ &quot;color&quot;:&quot;#000&quot;, &quot;background&quot;:&quot;green&quot; }). </li></ul><ul><li>       update(&quot;Click Me&quot;). </li></ul><ul><li>       event.addListener(&quot;click&quot;,function(){ </li></ul><ul><li>          alert(&quot;Hello World!&quot;); </li></ul><ul><li>       }). </li></ul><ul><li>       insert(document.body)‏ </li></ul><ul><li>gh </li></ul>
  15. 15. <ul><ul><li>Arayüzü stilize eden CSS dosyası da pi.element ile açılır: </li></ul></ul><ul><li>      document.getElementsByTagName(&quot;head&quot;)[0].appendChild( </li></ul><ul><li>          new pi.element(&quot;link&quot;). </li></ul><ul><li>          attribute.set(&quot;rel&quot;,&quot;stylesheet&quot;). </li></ul><ul><li>          attribute.set(&quot;href&quot;,&quot;http://foo.bar.css&quot;). </li></ul><ul><li>          element </li></ul><ul><li>      )     </li></ul><ul><ul><li>CSS ve Script bölümlerinde, dosya kaynaklarını çağırmak için pi.xhr kullanılır: </li></ul></ul><ul><li>    >>> trace(pi.xhr.get(&quot;firebug.js&quot;).responseText)‏ </li></ul><ul><li>    &quot;var firebug.....&quot; </li></ul>
  16. 16. <ul><ul><li>Firebug Lite'ın yeni versiyonu önümüzdeki hafta çıkacak. </li></ul></ul><ul><ul><li>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. </li></ul></ul>
  17. 17. Python ve Comet
  18. 18. <ul><ul><li>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. </li></ul></ul><ul><ul><li>Neredeyse tüm browserlar farklı yöntemlerle bu tekniği destekler. </li></ul></ul><ul><li>       Gecko/Webkit: Multipart XMLHttpRequest </li></ul><ul><li>       Trident( MSIE,Maxthon vb ): HTMLFile&Iframe </li></ul><ul><li>       Opera: Serverside Event Listener </li></ul>
  19. 19. <ul><ul><li>SSEL ideal comet tekniğidir. event-source elementiyle stream yapılır: </li></ul></ul>JAVASCRIPT var el = document.createElement(&quot;event-source&quot;); el.setAttribute(&quot;src&quot;,&quot;/read&quot;); document.body.appendChild(el); el.addEventListener(&quot;NewStream&quot;,function(_eventArgs){     trace(_eventArgs.servertime); },false); PSEUDOCODE (Response)‏ header &quot;application/x-dom-event-stream&quot; for i from 0 to 15     write &quot;Event: NewStream &quot;     write &quot;servertime: %i&quot;%server_time     flush     sleep 1000
  20. 20. <ul><ul><li>XHR yönteminde klasik XMLHttpRequest isteği gönderilir. </li></ul></ul><ul><ul><li>Server isteği bekletirken readyState 3'tür, responseText değiştiğinde callback çalışır. </li></ul></ul><ul><ul><li>IFrame tekniği tüm browserlarda çalışır ama throbber hareketli görünür. </li></ul></ul>
  21. 21. <ul><ul><li>Bu problemi aşmak için IFrame, HTMLFile adlı ActiveX objesiyle açılan sanal pencereye yerleştirilir. </li></ul></ul>JAVASCRIPT var win = new ActiveX(&quot;HTMLFile&quot;); win.open(); win.write(&quot;<html><body></body></html>&quot;); win.close(); win.body.innerHTML=&quot;<iframe src='/read' />&quot; function read(_serverTime){ trace(_serverTime) }    PSEUDOCODE (Response)‏    header &quot;text/html&quot;    for i from 0 to 15       write &quot;<script>parent.parentWindow.read(%i)</script>&quot;%server_time       flush       sleep 1000
  22. 22. <ul><ul><li>Browserların bugünkü imkanlarıyla comet tekniği biraz karmaşık ve sorunlu. </li></ul></ul><ul><ul><li>Bu yüzden pek çok kütüphane ve framework türedi, dwr, Orbited, dojo.cometd gibi. </li></ul></ul><ul><ul><li>pi.comet bunlardan biri, ilk sürümü mart ayında çıkmıştı. </li></ul></ul><ul><li>          * http://ajaxian.com/archives/picomet-simple-comet-library </li></ul>
  23. 23. <ul><ul><li>Basitçe, cross browser comet kanalı açmayı ve bu kanala veri göndermeyi sağlıyor; </li></ul></ul>JAVASCRIPT pi.comet.get('/read',function(_response){    trace(_response); })‏ PSEUDOCODE (Response)‏ import PIComet response = PIComet(parameter(&quot;PICometMethod&quot;),parameter(&quot;PICometName&quot;))‏ header &quot;Content-type: %s&quot;%response.contentType for i from 0 to 15     response.push(&quot;&quot;%server_time)‏     flush     sleep 1000
  24. 24. CherryPy <ul><ul><li>CherryPy Python'la yazılmış bir HTTP framework'üdür. </li></ul></ul><ul><ul><li>Basit ve güçlü uygulama sunucusu arayanlar için iyi bir seçenek. </li></ul></ul><ul><ul><li>Hello World; </li></ul></ul>import cherrypy class HelloWorld(object):     # @cherrypy.expose     def index(self):         return &quot;Hello World!&quot;     index.exposed = True cherrypy.quickstart(HelloWorld())
  25. 25. import cherrypy,sys,time class helloWorld(object):     @cherrypy.expose     def index:         def content():             for i in range(10):                 yield &quot;<h1>%i</h1>&quot;%i                 sys.stdout.flush()‏                 time.sleep(1)‏         return content()‏ expose._cp_config = {         'response.stream':True     } cherrypy.quickstart(helloWorld())‏ <ul><ul><li>&quot;yield&quot; operatörüyle de çıktı verilebildiği için kolayca stream yapmayı sağlar; </li></ul></ul>
  26. 26. <ul><ul><li>Multi-threaded serverlar comet için sağlıklı altyapı sağlayamıyor. </li></ul></ul><ul><ul><li>CherryPy, Orbited, Twisted, Cogen gibi asenkron IO sağlayan yazılımlarla uyumludur. </li></ul></ul><ul><ul><li>Bu sayede comet uygula artırdığı trafik yükünün altından kalkılabilinir. </li></ul></ul>
  27. 27. Geleceğin Browser Teknolojileri
  28. 28. HTML5 <ul><ul><li>Yeni elementler arasında canvas,video, audio gibi elementler var. </li></ul></ul><ul><ul><li>Canvas elementi browserda grafik programlama yapmayı sağlıyor. </li></ul></ul><ul><ul><li>Canvas tabanlı birkaç uygulama: </li></ul></ul>http://www.nihilogic.dk/labs/wolf/ http://www.nihilogic.dk/labs/chess/
  29. 29. <ul><ul><li>Web uygulamalarının kullanıcının makinesinde veri saklamasını sağlayan storage ve database api'leri geliştiriliyor. </li></ul></ul><ul><ul><li>globalStorage ve sessionStorage Obje'leri kalıcı veri tutmayı sağlar. </li></ul></ul>>>> sessionStorage.foo = &quot;hello world&quot; >>> globalStorage[document.domain].foo = 'hello world' kapat/ac >>> sessionStorage.foo==undefined true >>> globalStorage[document.domain].foo 'hello world'
  30. 30. <ul><ul><li>DOM Storage tekniğini Firefox ve Internet Explorer 8 destekliyor. </li></ul></ul><ul><ul><li>Internet Explorer'ın daha eski versiyonlarında kalıcı veri tutmak için pi.storage veya persist.js kullanılabilir. </li></ul></ul>
  31. 31. <ul><ul><li>Safari ve Opera'nın bugünkü sürümleri DOM storage'ı desteklemiyor ama ileride destekleyecekleri kesin. </li></ul></ul><ul><ul><li>Database api'sini henüz sadece Webkit destekliyor; </li></ul></ul>var database = openDatabase(&quot;foo&quot;); database.transaction(function(connection){ connection.executeSql(&quot;create table ?&quot;,[&quot;foo&quot;],callback,onerror); });
  32. 32. <ul><ul><li>HTML5'e yeni eklenen özelliklerden biri de WebSocket. </li></ul></ul><ul><ul><li>Browserların çeşitli sunucu-istemcilerle real-time veri gönderip almasını sağlayacak. </li></ul></ul><ul><ul><li>Henüz herhangi bir browser desteklemiyor. </li></ul></ul>
  33. 33. Javascript 2 <ul><ul><li>Javascript 2 ile Ecmascript 4'e geçiş yapılacak.Bazı önemli yenilikler; </li></ul></ul><ul><ul><li>Class: </li></ul></ul>class Layer {     var name, _x, _y;     function get x(){         return _x;     }     function set x(value){         _x = value+&quot;px&quot;;     } }; var foo = new Layer; foo.x=10; trace(foo.x) // &quot;10px&quot;
  34. 34. <ul><ul><li>Tür tanımlama: </li></ul></ul><ul><ul><li>Paket yönetimi: </li></ul></ul><ul><ul><li>Namespace: </li></ul></ul>var x:int = 10, name:String = &quot;Azer&quot;; { &quot;x&quot;:int, &quot;y&quot;: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
  35. 35. <ul><ul><li>Javascript 2, 2009'da Mozilla 2'nin çıkmasıyla kullanılmaya başlanacak. </li></ul></ul><ul><ul><li>Mozilla Javascript 2 için Tamarin VM üzerinde çalışmaya başladı. </li></ul></ul><ul><ul><li>Mozilla'nın IronPython ve IronRuby </li></ul></ul><ul><li>adlı iki projesi daha var. </li></ul><ul><ul><li>Python ve Ruby dilleriyle DHTML programlama mümkün olacak. </li></ul></ul>
  36. 36.     Problem; hızlı gelişen teknolojinin karşısında Internet Explorer'ın çok geriden gelmesi.
  37. 37. Çözüm!
  38. 38. ScreamingMonkey http://wiki.mozilla.org/Tamarin:ScreamingMonkey
  39. 39. Mozilla, Internet Explorer'ın Javascript 2 yorumlamasını sağlayacak.
  40. 40. Sorular?

×