Javascript, Done Right

JAVASCRIPTDONE RIGHT!

SAPO Sessions #218 Março 2009

André Luíshttp://andr3.netaluis@co.sapo.pt

creative commonsattributionnon-commercialshare-alike 3.0

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.

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

Programa de Festas

. Uso dado ao Javascript

. Problemas

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

javascript

Tem sido muito maltratado ao longo do tempo

javascriptpopups

filho do diabo

popupspopupspopups

popups

Em 2001, era o filho do diabo.

http://whit.me/ajax

Até que...

javascripteverybody’s bitch

XMLHttp

Request

WebApps

Mashups

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 tudo

Mapas Validação de Forms

Emuladores de Jogos(spectrum, etc) Office S

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.

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.

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

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

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!

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 #1 @ http://workshop.andr3.net/saposessions/

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

Fonte das imagens: http://brunoluis.com

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

onSubmit

DOM LOADED!

onSubmit

DOM LOADED!

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.

KAPOW!

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>

<head>

<body>

<head>

<body>

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>

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ísaluis@co.sapo.ptme@andr3.net

Javascript, Done Right

Technology

Freelancing done right

Development Funding Done Right

Hardcore JavaScript – Write it Right

Podcasts Done Right™

Web Services Done Right Done Quickly

LatJUG. JPA2 Done Right

Data Done Right

Done Right! Presentation Long

Unit Testing Done Right

Social intranet done right

Personal Branding Done Right Branding Done Right Adult.pdfPersonal Branding Done Right Dixie State University Career Services Gina Gottfredson, Career Coach Rochelle Blatter, Career

Density Done Right

Templates Done Right

JavaScript MV* Framework - Making the Right Choice

CRM done right

JavaScript done right

Administration. Done right

COMFORT DONE RIGHT

Smith - Engagement done right

Linear Algebra Done Right