Javascript, Done Right

JAVASCRIPTDONE RIGHT!

SAPO Sessions #218 Março 2009

André Luíshttp://[email protected]

creative commonsattributionnon-commercialshare-alike 3.0

http://andr3.net

http://andr3.net

mailto:[email protected]


SAPO Sessions #2 javascript, done right.

Antes de começar... um disclaimer. :)


Não venho pregar.


Nem vender nada.


Venho‐vos falar da minha experiência.


Desde brincadeiras em javascript no site dum canal de IRC.

2000


Até aplicações web inseridas no Webmail do SAPO.

2009


Programa de Festas

. Uso dado ao Javascript

. Problemas

. Como resolvê‐los. Javascript Não Obstrutivo. Hijax. Scripts não bloqueantes. Histórico com Javascript

2009


javascript

Tem sido muito maltratado ao longo do tempo

javascriptpopups


filho do diabo

popupspopupspopups

2001

popups

Em 2001, era o filho do diabo.


http://whit.me/ajax

2005

Até que...

http://whit.me/ajax

http://whit.me/ajax


javascripteverybody’s bitch

lover

2005

XMLHttp

Request

WebApps

Mashups

AJAX


javascript é usado para


javascript é usado para popups


javascript é usado para efeitos de estilo


javascript é usado para decoraçõesnatalícias


javascript é usado para pré‐carregarimagens


javascript é usado para mudar de página


javascript é usado para evitar recarregamentode páginas inteiras

javascript é usado para evitar recarregamentode páginas inteiras


AJAX


javascript é usado para tudo

Mapas Validação de Forms

Emuladores de Jogos(spectrum, etc) Office S

uites

Ambientes GráficosApps Offline

Pub/Sub


Será que isto é um problema?

-------25%------


problemas com o javascriptAusência de suporte para JavascriptIntranets 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.


problemas com o javascriptAusência de suporte para Javascript

Não é bookmarkableNã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.



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.




Quebra o histórico (retroceder, avançar)

Acessibilidade: navegação por tecladoEventos onmousedown, onmouseover não disparam se não se usar um disp. apontador

focus para além do onmouseover, onclick em vez de onmousedown





Acessibilidade: navegação por teclado

Usabilidade: controlar a abertura dum linkAbrir numa nova tab, nova janela ou enviar link por mail. Problema: href=”#”





Acessibilidade: navegação por teclado

Usabilidade: controlar a abertura dum link

Boas notícias: tudo isto é evitável.


Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo


Mostram‐se versões alternativas no caso do cliente não suportar todas as tecnologias utilizadas.


Mostram‐se versões alternativas no caso do cliente não suportar todas as tecnologias utilizadas.


Exemplos:<img src=”foto.png” alt=”Fotografia”><noscript><noframes>



Constrói‐se uma versão base/usável duma

funcionalidade e melhora‐se progressivamente.





Exemplos:Substitução de Imagens por CSS

Javascript Não Obstrutivo





Exemplos:Substitução de Imagens por CSS

Javascript Não Obstrutivo


Melhorar progressivamente!


?


javascript não obstrutivo


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.


obstrutivo: adj.que causa obstrução;que serve para obstruir.

fonte: Priberam http://priberam.pt/dlpo/

FAILFunny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS obstrutivo.

http://priberam.pt/dlpo/

http://priberam.pt/dlpo/



Mas como?



Revisão da matéria dada: Camadas de Separação

ConteúdoHTML

ComportamentoJAVASCRIPT

ApresentaçãoCSS



ConteúdoHTML


ApresentaçãoCSS

/whatever.php

/css/style.css /js/whatever.js




ConteúdoHTML


ApresentaçãoCSS

/whatever.php

/css/style.css /js/whatever.js


Não misturar tecnologias.

Loose coupling FTW!!



Revisão da matéria dada: Carregamento e Eventos

HTML

JAVASCRIPTCSSonDomReady / domContentLoaded

MEDIAwindow.onLoad

DOMContentLoaded no HTML5



Quão importante é um mero link?

-------50%------


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.


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)


Douglas Engelbart

1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.


Tim Berners‐Lee

tanaka

1991: WWW, num lab do CERN.



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...

<a href=”#” onclick=”show( ‘wonderbra.png’, ...




FAILAinda assim...

Está a definir um handler por Javascript... mas não tem href.AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!

<a href=”#” onclick=”show( ‘wonderbra.png’, ...




FAILAinda assim...

I CAN HAZ CHEEZBURGERhttp://whit.me/doinitwrong

Está a definir um handler por Javascript... mas não tem href.AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!

http://b.qy.sl.pt

http://b.qy.sl.pt

http://b.qy.sl.pt

http://b.qy.sl.pt




menos mau

<a href=”wonderbra.png”onclick=”show(‘wonderbra.png’);return false;”>...

Já tem href. ATENÇÃO: return false; impede o browser de seguir o href=Mas... javascript inline é má idea.




<a href=”wonderbra.png”onclick=”show(this.href);return false;”>...

menos mau

DRY - don’t repeat yourself. ;)




melhor

<a href=”wonderbra.png”class=”preview”>...




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’;

}

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’;

}

meanwhile...in a js file not far from there

In your dreams, sucker!




Frameworks ajudam a lidar com as incoerências dos browsers




jQuery (document).ready ( function () {jQuery('a.jquery').click (function () {

alert('jQuery!');return false;

} );} );

jQuery




document.observe ( 'dom:loaded', function () {$$('a.prototype').each (function (el) {

Event.observe (el, 'click', function () {alert('Prototype!');

});el.setAttribute( 'onclick', 'return false;');

}); });

Prototype.js




document.observe ( 'dom:loaded', function () {$$('a.prototype').each (function (el) {

Event.observe (el, 'click', function (ev) {alert('Prototype!');

});Event.stop(ev);

}); });

Prototype.js




demo

Demo #1 @ http://workshop.andr3.net/saposessions/



Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/

Fonte das imagens: http://brunoluis.com

http://www.lokeshdhakar.com/projects/lightbox2/






1 Links para as imagens: href=”wonderbra.jpg”

Exemplo Lightbox

2 on dom:loaded, procurar links com rel=”lightbox”

3 Definir funções para mostrar o Loading... e carregar imagem dentro da página

4 Cancelar a acção de “click” para o browser não seguir o que está no href.



1 <a href=”wonderbra.jpg” rel=”lightbox”>

Exemplo Lightbox

2 a[rel=lightbox] todos os links com atributo rel=lightbox

3 addEventListener (w3c) / attachEvent (IE)

4 return false;



E formulários?



http://web.mail.sapo.pt/

-------75%------

http://whit.me/ajax

http://whit.me/ajax





onSubmit

DOM LOADED!



onSubmit

DOM LOADED!



demo

Demo #2 @ http://workshop.andr3.net/saposessions/



Mais aplicações:

Ecrãs de registo, transformar link “Termos e condições” num overlay.

Reconhecer microformatos e inserir links para as transformações.



AJAX

AJAX



KAPOW!



HIJAX

1 Construir um site que utilize links e formulários tradicionais. Sem recurso a javascript.

2 Entrar no DOM, definir eventListeners para os eventos certos e substituir os carregamentos de páginas completas por pequenos pedidos AJAX.

by Jeremy Keith



1 Planear para o AJAX desde as wireframes.

2 Implementá‐lo no final.

by Jeremy KeithHIJAX



Mais info, no blog DomScripting.org

http://whit.me/hijax

by Jeremy KeithHIJAX





http://unobtrusify.comJeremy Keith: Behavioral Separation





1. Começar com o conteúdo

2. Darlhe estrutura com html semântico

3. Aplicar css

4. Aplicar comportamento com JS

http://whit.me/behavsepBehavioral Separation, by Jeremy Keith

A LIST APART.




?


Scripts não‐bloqueantes


scripts não bloqueantes

<head>

<body>

<script>

<script>



<head>

<body>

<script><script>



<head>

<body>

<script><script>

<script type=”text/javascript”>(function () {

var scr = document.createElement(‘script’);scr.type = ‘text/javascript’;scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;var cabeca = document.getElementsByTagName(‘head’)[0];cabeca.appendChild(scr);

)( );</script>

Função Anónima, auto-executável e limpa. (nada no scope global)



<head>

<body>

<script><script>

<script type=”text/javascript”>(function () {

var scr = document.createElement(‘script’);scr.type = ‘text/javascript’;scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;var cabeca = document.getElementsByTagName(‘head’)[0];cabeca.appendChild(scr);

)( );</script>

Esquecer: document.write


Histórico em Webapps




1 Alterar o location.href.hash

2 Verificar se o location.href.hash mudou e lidar com essa mudança




1 Alterar o location.href.hash

2 Verificar se o location.href.hash mudou e lidar com essa mudança

http://developer.yahoo.com/yui/history/

3 Inconsistências de browsers *cof*IE*cof*

IE = usar uma iframe, ir alterando a SRC.




?


That’s all folks!

http://domscripting.orghttp://www.alistapart.com/topics/code/scripting/http://talks.andr3.net/2009/js,doneright.pdfhttp://slideshare.net/andr3

creative commonsattribution

non-commercialshare-alike 3.0

André Luí[email protected]@andr3.net

http://talks.andr3.net/ufs_at_sapo.pdf












Technology

Javascript, Done Right