Javascript Cross-browser

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

estratégias cross-browser

fonte: http://goo.gl/HKlxJ

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