Lib.SAPO.JS - Codebits2007

2,541 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,541
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lib.SAPO.JS - Codebits2007

  1. 1. Lib.SAPO.JS <ul><ul><li>Codebits 2007 – 14/11/2007 </li></ul></ul><ul><ul><li>9 da manhã??!! -_- </li></ul></ul><ul><ul><li>Cláudio Gamboa <gamboa@co.sapo.pt> </li></ul></ul>
  2. 2. Lib.SAPO.JS <ul><li>JavaScript </li></ul><ul><ul><ul><li>AJAX </li></ul></ul></ul><ul><ul><ul><li>JSON </li></ul></ul></ul><ul><ul><ul><li>Script tag hack </li></ul></ul></ul><ul><li>Lib.SAPO.JS </li></ul><ul><ul><ul><li>O que é </li></ul></ul></ul><ul><ul><ul><li>Vantagens </li></ul></ul></ul><ul><ul><ul><li>Estrutura </li></ul></ul></ul><ul><li>Exemplos </li></ul>
  3. 3. <ul><ul><li>JavaScript </li></ul></ul><ul><li>” The World's Most Misunderstood Programming Language ” </li></ul><ul><li>By... </li></ul>
  4. 4. <ul><ul><li>JavaScript The World's Most Misunderstood Programming Language </li></ul></ul><ul><li>By: </li></ul><ul><li>Douglas Crockford </li></ul><ul><li>http://www.crockford.com/ </li></ul>
  5. 5. <ul><ul><li>JavaScript The World's Most Misunderstood Programming Language </li></ul></ul><ul><li>Não é um ”brinquedo” </li></ul><ul><li>para a web... </li></ul>
  6. 6. <ul><ul><li>JavaScript The World's Most Misunderstood Programming Language </li></ul></ul><ul><li>Não é um ”brinquedo” </li></ul><ul><li>para a web... </li></ul><ul><li>É uma linguagem de programação </li></ul><ul><li>Pequena mas sofisticada </li></ul><ul><li>Não tem ”class-oriented inheritance”, mas tem ” prototype-oriented inheritance ” </li></ul><ul><li>Objects as self containers </li></ul><ul><li>Não se chama AJAX. </li></ul>
  7. 7. <ul><ul><li>JavaScript The World's Most Misunderstood Programming Language </li></ul></ul><ul><li>Permite criar aplicações completas </li></ul>
  8. 8. <ul><ul><li>JavaScript The World's Most Misunderstood Programming Language </li></ul></ul><ul><li>Um bom manual de JavaScript </li></ul>
  9. 9. JavaScript.AJAX <ul><li>AJAX </li></ul>
  10. 10. JavaScript.AJAX <ul><li>Não é esconder e mostrar divs com JavaScript </li></ul>
  11. 11. JavaScript.AJAX <ul><li>A synchronous J avaScript a nd X ML </li></ul><ul><li>Criar aplicações web sem ser necessário fazer reload ao browser </li></ul><ul><li>É assíncrono </li></ul><ul><li>Usa o objecto XMLHttpRequest </li></ul><ul><li>Recebe o conteúdo formatado em XML* </li></ul><ul><li>É host restricted </li></ul>
  12. 12. JavaScript.AJAX <ul><li>Exemplo dum AJAX request </li></ul>
  13. 13. JavaScript.AJAX <ul><li>Exemplo dum AJAX request </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;> </li></ul><ul><li>< html > < head > < title >AJAX Request< /title > < script type=&quot;text/javascript&quot; src=&quot;http://js.sapo.pt/Prototype/&quot;></ script > < script type=&quot;text/javascript&quot;> function myRequest() { var url = document .getElementById(' url ').value; new Ajax.Request(url, { method:' get ', onSuccess: function (req){ var xml = req.responseXML; var aItems = xml.retElementsByTagName(' item '); var totalItems = aItems.length; document .getElementById(' output ').innerHTML = totalItems; }, onException: function (r, e){ throw e; } }); } </ script > </ head > < body > < input type=&quot; text &quot; id=&quot; url &quot; size=&quot; 40 &quot; value=&quot;&quot; /> < input type=&quot; button &quot; name=&quot; b &quot; value=&quot; Request It &quot; onclick=&quot;myRequest();&quot; /> < hr /> < div >< span id=&quot; output &quot;></ span > items no XML</ div > </ body > </ html > </li></ul>
  14. 14. JavaScript.AJAX <ul><li>AJAX request – host restriction </li></ul>
  15. 15. JavaScript.AJAX <ul><li>AJAX request – host restriction </li></ul>
  16. 16. JavaScript.AJAX <ul><li>AJAX request – host restriction </li></ul><ul><li>SOLUÇÕES </li></ul><ul><li>Apache Proxy </li></ul><ul><li>RewriteEngine On </li></ul><ul><li>RewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P] </li></ul><ul><li>Request -> http://localhost/req.xml </li></ul>
  17. 17. JavaScript.AJAX <ul><li>AJAX request – host restriction </li></ul><ul><li>SOLUÇÕES </li></ul><ul><li>PHP Proxy </li></ul><ul><li>cat req.php </li></ul><ul><li><?php </li></ul><ul><li>$content = file_get_contents('http://videos.sapo.pt/gamboa/rss'); </li></ul><ul><li>header(”Content-type: text/xml”); </li></ul><ul><li>echo $content; </li></ul><ul><li>?> </li></ul><ul><li>Request -> http://localhost/req.php </li></ul>
  18. 18. JavaScript.JSON <ul><li>JSON </li></ul>
  19. 19. JavaScript.JSON <ul><li>J ava S cript O bject N otation </li></ul><ul><li>( ”jeison/jotason/jota esse on/...” ) </li></ul><ul><li>Formato duma estrutura de dados/ array associativo (JS Object) </li></ul><ul><li>É text-based </li></ul><ul><li>RFC 4627 </li></ul><ul><li>Content type: application/json </li></ul><ul><li>Pode encapsular funções (Class) </li></ul>
  20. 20. JavaScript.JSON <ul><li>String </li></ul><ul><li>Number </li></ul><ul><li>Boolean </li></ul><ul><li>Object </li></ul><ul><li>Array </li></ul><ul><li>null </li></ul><ul><li>{ </li></ul><ul><li>&quot;nome&quot;: &quot;Claudio Gamboa&quot;, </li></ul><ul><li>&quot;idade&quot;: 26, </li></ul><ul><li>&quot;solteiro&quot;: true, </li></ul><ul><li>&quot;gosta&quot;: { </li></ul><ul><li>&quot;musica&quot;: [&quot;Emperor&quot;, &quot;Moonspell&quot;, &quot;Borknagar&quot;], </li></ul><ul><li>&quot;cinema&quot;: [&quot;LOTR&quot;, &quot;Matrix&quot;, &quot;Se7en&quot;, &quot;Snatch&quot;], </li></ul><ul><li>&quot;series&quot;: [&quot;House MD&quot;, &quot;Seinfeld&quot;], </li></ul><ul><li>&quot;livros&quot;: [&quot;Perfume&quot;, ”Aparição”] </li></ul><ul><li>}, </li></ul><ul><li>&quot;filhos&quot;: null </li></ul><ul><li>} </li></ul>
  21. 21. JavaScript.JSON <ul><li>JSON como resposta dum AJAX Request </li></ul><ul><li>function callBack(obj) </li></ul><ul><li>{ </li></ul><ul><li>var req = obj.responseText; </li></ul><ul><li>var myObj = eval('(' + req + ')'); </li></ul><ul><li>alert(myObj.nome); </li></ul><ul><li>} </li></ul>
  22. 22. JavaScript.JSON <ul><li>JSON como Classe </li></ul>
  23. 23. JavaScript['Script'].Tag(Hack) <ul><li>SCRIPT TAG HACK </li></ul>
  24. 24. JavaScript['Script'].Tag(Hack) <ul><li>O que é: </li></ul><ul><li>Adicionar dinamicamente uma SCRIPT tag na página (ficheiro js/json ) </li></ul><ul><li>Esperar que seja carregado </li></ul><ul><li>Usar/Executar o conteúdo. </li></ul>
  25. 25. JavaScript['Script'].Tag(Hack) <ul><li>O que é: </li></ul><ul><li><script type=”text/javascript” src=”http://services.sapo.pt/Photos/JSON/gamboa?jsonTag=foo”></script>”> </li></ul><ul><li>// RSS em formato JSON </li></ul><ul><li>var foo = {”rss”:{”channel”: ....}} </li></ul><ul><li>alert(foo.rss.channel.item[0].title); </li></ul>
  26. 26. Vamos mudar de assunto <ul><li>... </li></ul>
  27. 27. <ul><ul><li>Lib.SAPO.JS </li></ul></ul><ul><li>O que é </li></ul><ul><li>Vantagens </li></ul><ul><li>Estrutura </li></ul>
  28. 28. <ul><ul><li>Lib.SAPO.JS('O que é?') </li></ul></ul><ul><li>Repositório central de libs de JavaScript e widgets do SAPO </li></ul><ul><li>É Open Source </li></ul><ul><li>Tem classes utilitárias para simplificar o JavaScript e a vida dos programadores (SAPO.Utility.*) </li></ul>
  29. 29. <ul><ul><li>Lib.SAPO.JS('Vantagens') </li></ul></ul><ul><li>Ter classes de JavaScript centralizadas (http://js.sapo.pt) </li></ul><ul><li>Ter Widgets baseados nas classes </li></ul><ul><li>Ter controlo de versões </li></ul><ul><li>Ter o código organizado/separado </li></ul><ul><li>Reutilizar código </li></ul><ul><ul><ul><li>Não ter de reinventar a roda cada vez que se quer validar um endereço de email </li></ul></ul></ul><ul><li>Farm estática e conteúdo ” jslinted ”, ” jsmined ” e ” gziped ” </li></ul>
  30. 30. <ul><ul><li>Lib.SAPO.JS('Vantagens') </li></ul></ul><ul><li>Criar ”packages” estáticos (Bundles) de vários ficheiros JavaScript e servir apenas um ficheiro para a aplicação. </li></ul><ul><ul><ul><li>Torna o load da aplicação mais rapido </li></ul></ul></ul><ul><ul><ul><li>Não corre o risco de ”partir” por um ficheiro não ter sido carregado </li></ul></ul></ul><ul><ul><ul><li>Garante que todo o código necessário existe </li></ul></ul></ul><ul><li>http://js.sapo.pt/Bundles/WebmessengerCliente.js </li></ul><ul><li>645 Kb -> 322 Kb -> 75 Kb </li></ul>
  31. 31. <ul><ul><li>Lib.SAPO.JS('Vantagens') </li></ul></ul><ul><li>Criar ”scripts” (Snippets) em que as opções são passadas na query string. </li></ul><ul><ul><ul><li>Disponibilizar apenas um ficheiro para ser reutilizado incluindo apenas uma script tag. </li></ul></ul></ul><ul><ul><ul><li>Dar a possibilidade de o utilizador alterar as opções alterando apenas os parametros da query string. </li></ul></ul></ul>Lisbon Weather http://js.sapo.pt/Snippets/Meteo.js?c=LPLG
  32. 32. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>/SAPO/ </li></ul><ul><li>/Prototype/ </li></ul><ul><li>/YUI/ </li></ul><ul><li>/Bundles/ </li></ul><ul><li>/Snippets/ </li></ul><ul><li>http://js.sapo.pt/(.*) </li></ul>
  33. 33. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>Prototype ( Versão 1.8 ) </li></ul><ul><ul><li>Dragdrop </li></ul></ul><ul><ul><li>Effects </li></ul></ul><ul><ul><li>Builder </li></ul></ul><ul><ul><li>Controls </li></ul></ul><ul><ul><li>Slider </li></ul></ul><ul><li>http://js.sapo.pt/Prototype/ </li></ul><ul><li>http://js.sapo.pt/Prototype/Dragdrop/ </li></ul><ul><li>http://js.sapo.pt/Prototype/..../ </li></ul>
  34. 34. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>YUI ( Versão 2.2 ) </li></ul><ul><ul><li>Dom </li></ul></ul><ul><ul><li>Event </li></ul></ul><ul><ul><li>Connection </li></ul></ul><ul><ul><li>Dragdrop </li></ul></ul><ul><ul><li>Calendar </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>http://js.sapo.pt/YUI/ </li></ul><ul><li>http://js.sapo.pt/YUI/Dom/ </li></ul><ul><li>http://js.sapo.pt/YUI/.../ </li></ul>
  35. 35. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>SAPO </li></ul><ul><ul><li>Utility </li></ul></ul><ul><ul><li>Communication </li></ul></ul><ul><ul><li>Widget </li></ul></ul><ul><ul><li>Geo </li></ul></ul><ul><ul><li>Exception </li></ul></ul>
  36. 36. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>SAPO.Utility </li></ul><ul><ul><ul><li>Array ( inArray, keyValue ) </li></ul></ul></ul><ul><ul><ul><li>Cookie ( set, remove, get ) </li></ul></ul></ul><ul><ul><ul><li>Crypto ( md5, sha1, sha256 ) </li></ul></ul></ul><ul><ul><ul><li>Dumper ( alertDump, returnDump, windowDump ) </li></ul></ul></ul><ul><ul><ul><li>CSS ( set ) </li></ul></ul></ul><ul><ul><ul><li>String ( trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code ... ) </li></ul></ul></ul><ul><ul><ul><li>Url ( getURl, getQueryString, base64(En|De)code ... ) </li></ul></ul></ul><ul><ul><ul><li>Validator ( mail, isPortuguesePhone ) </li></ul></ul></ul><ul><ul><ul><li>Variable ( isArray, isObject, isString, isNumber ) </li></ul></ul></ul><ul><li>http://js.sapo.pt/SAPO/Utility/(.*) </li></ul>
  37. 37. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>SAPO.Communication </li></ul><ul><ul><li>Syndication ( push, run, runAll ) </li></ul></ul><ul><li>(Class para a ”Script Tag Hack”) </li></ul><ul><li>http://js.sapo.pt/SAPO/Communication/Syndication/ </li></ul><ul><li>http://js.sapo.pt/SAPO/Communication/Syndication/sample/ </li></ul>
  38. 38. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>SAPO.Widget </li></ul><ul><ul><ul><li>Contextmenu </li></ul></ul></ul><ul><ul><ul><li>Dialog </li></ul></ul></ul><ul><ul><ul><li>Tooltip </li></ul></ul></ul><ul><ul><ul><li>Rating </li></ul></ul></ul><ul><ul><ul><li>Maps </li></ul></ul></ul><ul><ul><ul><li>Thumbs </li></ul></ul></ul><ul><ul><ul><li>(Blogthis, Meteo, Photos, Search, Tags...) </li></ul></ul></ul><ul><li>http://js.sapo.pt/SAPO/Widget/(.*) </li></ul><ul><li>http://js.sapo.pt/SAPO/Widget/([^/]+)/sample/ </li></ul>
  39. 39. <ul><ul><li>Lib.SAPO.JS('Estrutura') </li></ul></ul><ul><li>SAPO.Geo </li></ul><ul><ul><ul><li>Map </li></ul></ul></ul><ul><ul><ul><li>Ver apresentação de Joaquim Muchaxo e António Cruz no PP às 11:45 </li></ul></ul></ul><ul><ul><ul><li>” SAPO Mapas & GIS” </li></ul></ul></ul><ul><li>http://js.sapo.pt/SAPO/Geo/Map/ </li></ul>
  40. 40. <ul><ul><li>Exemplos </li></ul></ul><ul><li>SAPO.Utility.Dumper </li></ul><ul><li>SAPO.Utility.String </li></ul><ul><li>SAPO.Utility.Url </li></ul><ul><li>SAPO.Widget.Contextmenu </li></ul><ul><li>SAPO.Widget.Tooltip </li></ul><ul><li>SAPO.Communication.Syndication </li></ul><ul><li>Prototype </li></ul><ul><li>Ajax.Request </li></ul>
  41. 41. <ul><ul><li>Perguntas?? </li></ul></ul><ul><li>... </li></ul>
  42. 42. <ul><ul><li>Mais informação </li></ul></ul><ul><li>http://js.sapo.pt/ </li></ul><ul><li>http://developer.sapo.pt/ </li></ul><ul><li>http://prototypejs.org </li></ul><ul><li>http://developer.yahoo.com/yui/ </li></ul><ul><li>SAPO: http://www.sapo.pt/ </li></ul><ul><li>Download: http://pdvel.com/ </li></ul><ul><li>Meu blog: http://blog.pdvel.com/ (sucks) </li></ul>

×