Javascript Cross-browser
por Davidson Fellipe

about me...
desenvolvedor frontend na globo.com
mestrando na puc-rio
co-organizador do rio.js
webinterativa, cesar, fitec e upe...
@davidsonfellipe

frontend
+
engenharia

Progressive Enhancement
vs.
Graceful Degradation

websites precisam ter exatamente o
mesmo visual em todos os browsers?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

“
trazer fidelidade de layout
é muito trabalhoso
seu madruga

Grade Browser
Support
• técnica criado pelo Yahoo para informar quais
browsers serão suportados
• baseado em 3 notas
• Grade A
• Grade C
• Grade X

Grade Browser
Support
• técnica criado pelo Yahoo para informar quais
browsers serão suportados
• baseado em 3 notas
• Grade A
• Grade C
• Grade X

Grade Browser
Support
• técnica criado pelo Yahoo para informar quais
browsers serão suportados
• baseado em 3 notas
• Grade A
• Grade C
• Grade X

grade A
• experiência completa
• completamente testado
• fidelidade visual
• correção de bugs com alta prioridade

grade C
• browsers antigos
• experiência pobre
• minimo suporte
• normalmente apenas HTML e CSS funcional

grade X
• não testado
• pode se tornar um grade A no futuro

definição de sua grade
vs
custos de produção

estratégias cross-browser
fonte: http://goo.gl/HKlxJ

JS development
livro do john resig - secrets of the javascript ninja

browser bugs...
• boa suíte de testes
• feature simulation
• object detection

object detection
window.addEventListener('deviceorientation',
function(event) {
var a;
if(event.alpha){
a = event.alpha;
}else{
a = event.x;
}
}, false);

feature simulation
var STYLE_NAME = (function(){
var div = document.createElement("div");
div.style.color = "red";
if ( div.getAttribute("style") )
return "style";
if ( div.getAttribute("cssText") )
return "cssText";
})();
window.onload = function(){
var style = document.
getElementById("test").
getAttribute( STYLE_NAME );
};

axioma by john resig
• relembre o passado
• considere o futuro
• teste o presente

external code e
markup
• seu código não pode afetar qualquer código externo
• evitando modificar valores de variaveis existentes
• baixo-acoplamento
• function prototypes (ou prototipos)
• qualquer área, já existente, que seu código modifica é uma potencial
area de conflito
• testes automatizados!

funcionalidades
• focar em experiencia rica nos browsers GRADE A
• versão HTML ou experiência reduzida em para os GRADE C

regressões
• por API diferentes
• por bugs

browser releases
• Internet Explorer: http://blogs.msdn.com/ie/
• Firefox: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
• WebKit (Safari): http://nightly.webkit.org/

obrigado!
@davidsonfellipe www.fellipe.com www.facebook.com/fellipe
www.slideshare.net/davidsonfellipe
www.github.com/davidsonfellipe
http://about.me/davidsonfellipe

referências
• http://mislav.uniqpath.com/
2010/05/semicolons/ • https://github.com/styleguide/
javascript
• http://dev.opera.com/articles/
view/the-seven-rules-of- • http://www.slideshare.net/
unobtrusive-javascrip/ jeresig/performance-
improvements-in-browsers
• http://www.slideshare.net/
nzakas/progressive- • http://
enhancement-20-conference- www.impressivewebs.com/
agnostic browsers-tvs/
• http:// • livro secrets of the javascript
dowebsitesneedtolookexactlyt ninja - john resig
hesameineverybrowser.com/