Javascript Cross-browserpor Davidson Fellipe
@davidsonfellipe
desenvolvedor frontend na globo.com
mestrando na puc-rio
co-organizador do rio.js
webinterativa, cesar, fitec e upe...
about me...
frontend+
engenharia
Progressive Enhancementvs.
Graceful Degradation
websites precisam ter exatamente o mesmo visual em todos os browsers?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
trazer fidelidade de layouté muito trabalhoso
seu madruga“
• 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 Browser Support
• experiência completa
• completamente testado
• fidelidade visual
• correção de bugs com alta prioridade
grade A
• browsers antigos
• experiência pobre
• minimo suporte
• normalmente apenas HTML e CSS funcional
grade C
• não testado
• pode se tornar um grade A no futuro
grade X
definição de sua gradevs
custos de produção
JS development
livro do john resig - secrets of the javascript ninja
• boa suíte de testes
• feature simulation
• object detection
browser bugs...
object detection
window.addEventListener('deviceorientation', function(event) {var a;if(event.alpha){a = event.alpha;}else{a = event.x;}}, false);
feature simulationvar 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 );
};
• relembre o passado
• considere o futuro
• teste o presente
axioma by john resig
• 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!
external code e markup
• focar em experiencia rica nos browsers GRADE A
• versão HTML ou experiência reduzida em para os GRADE C
funcionalidades
• por API diferentes
• por bugs
regressões
• 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/
browser releases
@davidsonfellipe www.fellipe.com www.facebook.com/fellipe
www.slideshare.net/davidsonfellipe
www.github.com/davidsonfellipe
http://about.me/davidsonfellipe
obrigado!
• http://mislav.uniqpath.com/2010/05/semicolons/
• http://dev.opera.com/articles/view/the-seven-rules-of-unobtrusive-javascrip/
• http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
• http://dowebsitesneedtolookexactlythesameineverybrowser.com/
• https://github.com/styleguide/javascript
• http://www.slideshare.net/jeresig/performance-improvements-in-browsers
• http://www.impressivewebs.com/browsers-tvs/
• livro secrets of the javascript ninja - john resig
referências
Top Related