JavaScript done right

  • 1,582 views
Uploaded on

Práticas de JavaScript menos conhecidas. …

Práticas de JavaScript menos conhecidas.

Unobtrusive JavaScript, progressive enhancement vs graceful degradation, HIJAX, incompatibilidades entre browsers e mais.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,582
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SAPO Sessions #2 18 Março 2009 JAVASCRIPT DONE RIGH T! creative commons André Luís attribution non-commercial http://andr3.net share-alike 3.0 aluis@co.sapo.pt
  • 2. SAPO Sessions #2 javascript, done right. Antes de começar... um disclaimer. :)
  • 3. SAPO Sessions #2 javascript, done right. Não venho pregar.
  • 4. SAPO Sessions #2 javascript, done right. Nem vender nada.
  • 5. SAPO Sessions #2 javascript, done right. Venho‐vos falar da minha  experiência.
  • 6. SAPO Sessions #2 javascript, done right. Desde brincadeiras em javascript  no site dum canal de IRC. 2000
  • 7. SAPO Sessions #2 javascript, done right. Até aplicações web inseridas  no Webmail do SAPO. 2009
  • 8. SAPO Sessions #2 javascript, done right. Índice Uso dado ao Javascript Problemas Como resolvê‐los Javascript Não Obstrutivo Hijax Scripts não bloqueantes Histórico com Javascript 2009
  • 9. SAPO Sessions #2 javascript, done right. javascript Tem sido muito maltratado ao longo do tempo
  • 10. SAPO Sessions #2 javascript, done right. 2001 ppopu s puop p pop p o u up pjavascript s popups s ps filho do diabo Em 2001, era o filho do diabo.
  • 11. SAPO Sessions #2 javascript, done right. 2005 http://whit.me/ajax Até que...
  • 12. SAPO Sessions #2 javascript, done right. 2005 st X que JA e A pR tt javascript H WebAp L M ps X everybody’s bitch lover Mashup s
  • 13. SAPO Sessions #2 javascript, done right. javascript é usado para
  • 14. SAPO Sessions #2 javascript, done right. javascript é usado para popups
  • 15. SAPO Sessions #2 javascript, done right. javascript é usado para efeitos de estilo
  • 16. SAPO Sessions #2 javascript, done right. javascript é usado para decorações natalícias
  • 17. SAPO Sessions #2 javascript, done right. javascript é usado para pré‐carregar imagens
  • 18. SAPO Sessions #2 javascript, done right. javascript é usado para mudar de página
  • 19. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento de páginas inteiras
  • 20. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento AJA X de páginas inteiras
  • 21. SAPO Sessions #2 javascript, done right. javascript é usado para tudo Am s Valid a p a bie ação M  de  nte Form fline s Of s G s pp A ráf /Sub icos Emu Pub lador es de (spec  Jogo trum tes s ui e S , etc) ffic O
  • 22. SAPO Sessions #2 javascript, done right. Será que isto é um problema?
  • 23. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Intranets corp., screen-readers, search engine crawlers, NoScript, etc. Somando as pequenas percentagens destes factores, facilmente se chega acima dos 10%. Mais: um utilizador que veja um site quebrado, muito provavelmente, não volta.
  • 24. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Não oferece, de origem, mecanismos para guardar o estado duma webapp Soa a algo familiar? Argumento muitas vezes usado por *nós* contra sites 100% Flash.
  • 25. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Permite-nos implementar mecanismos para isto, mas não fornece de origem.
  • 26. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Eventos onmousedown, onmouseover não disparam se não se usar um disp. apontador focus para além do onmouseover, onclick em vez de onmousedown
  • 27. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Usabilidade: controlar a abertura dum link Abrir numa nova tab, nova janela ou enviar link por mail. Problema: href=”#”
  • 28. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Boas notícias: tudo isto é evitável. Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Usabilidade: controlar a abertura dum link
  • 29. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement
  • 30. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Mostram‐se versões  alternativas no caso do  cliente não suportar todas  as tecnologias utilizadas. 
  • 31. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: <img src=”foto.png” alt=”Fotografia”> Mostram‐se versões  <noscript> alternativas no caso do  <noframes> cliente não suportar todas  as tecnologias utilizadas. 
  • 32. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Constrói‐se uma versão  base/usável duma  funcionalidade e melhora‐se  progressivamente.
  • 33. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: Constrói‐se uma versão  Substitução de Imagens por CSS base/usável duma  Javascript Não Obstrutivo funcionalidade e melhora‐se  progressivamente.
  • 34. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: Melhorar  Constrói‐se uma versão  Substitução de Imagens por CSS progressivamente! base/usável duma  Javascript Não Obstrutivo funcionalidade e melhora‐se  progressivamente.
  • 35. SAPO Sessions #2 javascript, done right. ?
  • 36. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • 37. SAPO Sessions #2 javascript, done right. obstrutivo: adj. que causa obstrução; que serve para obstruir. Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS obstrutivo.
  • 38. SAPO Sessions #2 javascript, done right. obstrutivo: adj. que causa obstrução; que serve para obstruir. fonte: Priberam  http://priberam.pt/dlpo/ FAIL Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS obstrutivo.
  • 39. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mas como?
  • 40. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação Conteúdo HTML Comportamento Apresentação JAVASCRIPT CSS
  • 41. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação /whatever.php Conteúdo HTML /css/style.css /js/whatever.js Comportamento Apresentação JAVASCRIPT CSS
  • 42. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação /whatever.php Não misturar  Conteúdo tecnologias. HTML /css/style.css /js/whatever.js Comportamento Apresentação JAVASCRIPT CSS Loose coupling FTW!!
  • 43. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Carregamento e Eventos HTML onDomReady / domContentLoaded CSS JAVASCRIPT MEDIA window.onLoad DOMContentLoaded no HTML5
  • 44. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Quão importante é um mero link?
  • 45. SAPO Sessions #2 javascript, done right. Vannevar Bush 1945: propôs o Memex, um computador teórico que em vez de ordenar informação alfabeticamente, usava associações entre documentos. Inspirou a criação do conceito de hipertexto. Artigo: As We May Think.
  • 46. SAPO Sessions #2 javascript, done right. Ted Nelson 1960: Fundou projecto Xanadu, definiu o conceito de Hipertexto. Apesar do seu conceito ser um pouco mais completo, xanadu falhou. (links que se quebram nem gestão de versões, na WWW do TBL)
  • 47. SAPO Sessions #2 javascript, done right. Douglas Engelbart 1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.
  • 48. SAPO Sessions #2 javascript, done right. Tim Berners‐Lee tanaka 1991: WWW, num lab do CERN.
  • 49. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”javascript:show( ‘wonderbra.png’, ... FAIL Link sem href = big no no. Motores de busca não seguem. Não há JS, não há link. Não tem de ser assim...
  • 50. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”#” onclick=”show( ‘wonderbra.png’, ... FAIL Ainda assim... Está a definir um handler por Javascript... mas não tem href. AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!
  • 51. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”#” onclick=”show( ‘wonderbra.png’, ... FAIL Ainda assim... I CAN HAZ CHEEZBURGER http://whit.me/doinitwrong Está a definir um handler por Javascript... mas não tem href. AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!
  • 52. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” onclick=”show(‘wonderbra.png’); return false;”>... menos mau Já tem href. ATENÇÃO: return false; impede o browser de seguir o href= Mas... javascript inline é má idea.
  • 53. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” onclick=”show(this.href); return false;”>... menos mau DRY - don’t repeat yourself. ;)
  • 54. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” class=”preview” >... melhor
  • 55. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções meanwhile... in a js file not far from there var prevs = document.getElementsByClassName(‘preview’); for (var i=0,len=prevs.length;i<len;i++) { prevs[i].addEventListener (‘click’, show); prevs[i].onclick = ‘return false’; }
  • 56. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções meanwhile... in a js file not far from there var prevs = document.getElementsByClassName(‘preview’); for (var i=0,len=prevs.length;i<len;i++) { prevs[i].addEventListener (‘click’, show); prevs[i].onclick = ‘return false’; } In your dreams, sucker!
  • 57. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Frameworks ajudam a lidar com as  incoerências dos browsers
  • 58. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções jQuery jQuery (document).ready ( function () { jQuery('a.jquery').click (function () { alert('jQuery!'); return false; } ); } );
  • 59. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Prototype.js document.observe ( 'dom:loaded', function () { $$('a.prototype').each (function (el) { Event.observe (el, 'click', function () { alert('Prototype!'); }); el.setAttribute( 'onclick', 'return false;'); }); });
  • 60. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Prototype.js document.observe ( 'dom:loaded', function () { $$('a.prototype').each (function (el) { Event.observe (el, 'click', function (ev) { alert('Prototype!'); }); Event.stop(ev); }); });
  • 61. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções demo
  • 62. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/ Fonte das imagens: http://brunoluis.com
  • 63. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox Links para as imagens: href=”wonderbra.jpg” 1 on dom:loaded, procurar links com rel=”lightbox” 2 Definir funções para mostrar o Loading... e carregar  3 imagem dentro da página Cancelar a acção de “click” para o browser não seguir o  4 que está no href.
  • 64. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox <a href=”wonderbra.jpg” rel=”lightbox”> 1 a[rel=lightbox] todos os links com atributo rel=lightbox 2 addEventListener (w3c) / attachEvent (IE) 3 return false; 4
  • 65. SAPO Sessions #2 javascript, done right. javascript não obstrutivo E formulários?
  • 66. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://web.mail.sapo.pt/
  • 67. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • 68. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • 69. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • 70. SAPO Sessions #2 javascript, done right. javascript não obstrutivo demo
  • 71. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mais aplicações: Ecrãs de registo, transformar link  “Termos e condições” num overlay. Reconhecer microformatos e inserir links  para as transformações.
  • 72. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX
  • 73. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX ! W PO KA
  • 74. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Construir um site que utilize links e formulários  1 tradicionais. Sem recurso a javascript. Entrar no DOM, definir eventListeners para os eventos certos e  2 substituir os carregamentos de páginas completas por pequenos  pedidos AJAX.
  • 75. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Planear para o AJAX desde as wireframes. 1 Implementá‐lo no final. 2
  • 76. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Mais info, no blog DomScripting.org http://whit.me/hijax
  • 77. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://unobtrusify.com
  • 78. SAPO Sessions #2 javascript, done right. ?
  • 79. SAPO Sessions #2 javascript, done right. Scripts não‐bloqueantes
  • 80. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <script> <script> <body>
  • 81. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <body> <script> <script>
  • 82. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <script type=”text/javascript”> (function () { <head> var scr = document.createElement(‘script’); scr.type = ‘text/javascript’; <body> scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”; var cabeca = document.getElementsByTagName(‘head’)[0]; cabeca.appendChild(scr); )( ); </script> <script> <script> Função Anónima, auto-executável e limpa. (nada no scope global)
  • 83. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <script type=”text/javascript”> (function () { <head> var scr = document.createElement(‘script’); scr.type = ‘text/javascript’; Esquecer: document.write <body> scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”; var cabeca = document.getElementsByTagName(‘head’)[0]; cabeca.appendChild(scr); )( ); </script> <script> <script>
  • 84. SAPO Sessions #2 javascript, done right. Histórico em Webapps
  • 85. SAPO Sessions #2 javascript, done right. Histórico em Webapps Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Alterar o location.href.hash 1 Verificar se o location.href.hash mudou e  2 lidar com essa mudança
  • 86. SAPO Sessions #2 javascript, done right. Histórico em Webapps Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Alterar o location.href.hash 1 Verificar se o location.href.hash mudou e  2 lidar com essa mudança Inconsistências de browsers *cof*IE*cof* 3 http://developer.yahoo.com/yui/history/
  • 87. SAPO Sessions #2 javascript, done right. ?
  • 88. SAPO Sessions #2 javascript, done right. That’s all folks! André Luís aluis@co.sapo.pt me@andr3.net http://domscripting.org creative commons http://www.alistapart.com/topics/code/scripting/ attribution http://talks.andr3.net/2009/js,doneright.pdf non-commercial http://slideshare.net/andr3 share-alike 3.0