Javascript Cross-browser

Transcript

1. #pernambucojs
2. Javascript Cross-browser por Davidson Fellipe
3. @davidsonfellipe desenvolvedor frontend na globo.com mestrando na puc-rio co-organizador do rio.js webinterativa, cesar, fitec e upe... about me...
4. página de atleta
5. página de atleta
7. frontend + engenharia a medida que a nossa profissão foi evoluindo, a adição de conceitos de engenharia foi fundamental para aumentar o indice de profissionalismo, melhorando a fundamentação do que fazemos e especificando niveis de garantia de funcionamento e tolerancia a falhas.
8. Progressive Enhancement vs. Graceful Degradation The concepts of graceful degradation and progressive enhancement are often applied to describe browser support strategies. Indeed, they are closely related approaches to the engineering of "fault tolerance". These two concepts influence decision-making about browser support. Because they reflect different priorities, they frame the support discussion differently. Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support. http://www.alistapart.com/articles/
9. tvs vs browsers
10. websites precisam ter exatamente o mesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
11. trazer fidelidade de layout é muito trabalhoso seu madruga “
12. • 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
13. • 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
14. • 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
15. • experiência completa • completamente testado • fidelidade visual • correção de bugs com alta prioridade grade A
16. • browsers antigos • experiência pobre • minimo suporte • normalmente apenas HTML e CSS funcional grade C
17. • não testado • pode se tornar um grade A no futuro grade X
18. definição de sua grade vs custos de produção
23. estratégias cross-browser fonte: http://goo.gl/HKlxJ
24. JS development livro do john resig - secrets of the javascript ninja
25. • boa suíte de testes • feature simulation • object detection browser bugs...
26. object detection window.addEventListener('deviceorientation', function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; } }, false);
27. 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 ); };
28. • relembre o passado • considere o futuro • teste o presente axioma by john resig
29. • 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
33. • focar em experiencia rica nos browsers GRADE A • versão HTML ou experiência reduzida em para os GRADE C funcionalidades
34. • por API diferentes • por bugs regressões
35. • 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
36. @davidsonfellipe www.fellipe.com www.facebook.com/fellipe www.slideshare.net/davidsonfellipe www.github.com/davidsonfellipe http://about.me/davidsonfellipe obrigado!
37. • 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:// dowebsitesneedtolookexactlyt hesameineverybrowser.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