SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
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
Javascript Cross-browser
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
Javascript Cross-browser
Javascript Cross-browser
Javascript Cross-browser
Javascript Cross-browser
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!
Javascript Cross-browser
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/

Mais conteúdo relacionado

Mais procurados

Criando aplicações java fx em minutos
Criando aplicações java fx em minutosCriando aplicações java fx em minutos
Criando aplicações java fx em minutosBruno Oliveira
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsDavidson Fellipe
 
JavaFX: Desktop para desenvolvedores WEB
JavaFX: Desktop para desenvolvedores WEBJavaFX: Desktop para desenvolvedores WEB
JavaFX: Desktop para desenvolvedores WEBjesuinoPower
 
Desenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFXDesenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFXjesuinoPower
 
Introdução ao JavaFX
Introdução ao JavaFXIntrodução ao JavaFX
Introdução ao JavaFXjesuinoPower
 
JavaFX: A nova biblioteca gráfica da plataforma Java
JavaFX: A nova biblioteca gráfica da plataforma JavaJavaFX: A nova biblioteca gráfica da plataforma Java
JavaFX: A nova biblioteca gráfica da plataforma JavajesuinoPower
 
O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performanceDavidson Fellipe
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SP
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SPBoas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SP
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SPjesuinoPower
 
Aula 4. bibliotecas js
Aula 4. bibliotecas jsAula 4. bibliotecas js
Aula 4. bibliotecas jsandreluizlc
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?Davidson Fellipe
 
JavaFX - Uma visão Geral
JavaFX - Uma visão GeralJavaFX - Uma visão Geral
JavaFX - Uma visão GeralEder Nogueira
 
Desafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFDesafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFRafael Ponte
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015Anyssa Ferreira
 

Mais procurados (20)

Criando aplicações java fx em minutos
Criando aplicações java fx em minutosCriando aplicações java fx em minutos
Criando aplicações java fx em minutos
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
JavaFX: Desktop para desenvolvedores WEB
JavaFX: Desktop para desenvolvedores WEBJavaFX: Desktop para desenvolvedores WEB
JavaFX: Desktop para desenvolvedores WEB
 
Desenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFXDesenvolvimento rápido de aplicações com JEE e JavaFX
Desenvolvimento rápido de aplicações com JEE e JavaFX
 
Introdução ao JavaFX
Introdução ao JavaFXIntrodução ao JavaFX
Introdução ao JavaFX
 
JavaFX: A nova biblioteca gráfica da plataforma Java
JavaFX: A nova biblioteca gráfica da plataforma JavaJavaFX: A nova biblioteca gráfica da plataforma Java
JavaFX: A nova biblioteca gráfica da plataforma Java
 
Ria e Java FX
Ria e Java FXRia e Java FX
Ria e Java FX
 
O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
 
Palestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus PartyPalestra Netbeans 6 Campus Party
Palestra Netbeans 6 Campus Party
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
 
JavaFX 2
JavaFX 2JavaFX 2
JavaFX 2
 
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SP
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SPBoas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SP
Boas práticas na criação de aplicações sérias com JavaFX - TDC 2014 SP
 
React nos Trilhos
React nos TrilhosReact nos Trilhos
React nos Trilhos
 
Aula 4. bibliotecas js
Aula 4. bibliotecas jsAula 4. bibliotecas js
Aula 4. bibliotecas js
 
Como é trabalhar na globocom?
Como é trabalhar na globocom?Como é trabalhar na globocom?
Como é trabalhar na globocom?
 
JavaFX - Uma visão Geral
JavaFX - Uma visão GeralJavaFX - Uma visão Geral
JavaFX - Uma visão Geral
 
Desafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSFDesafios de um desenvolvedor JSF
Desafios de um desenvolvedor JSF
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
Java Web Fácil com VRaptor
Java Web Fácil com VRaptorJava Web Fácil com VRaptor
Java Web Fácil com VRaptor
 
Javafx
JavafxJavafx
Javafx
 

Destaque

RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoDavidson Fellipe
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery appsDavidson Fellipe
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroDavidson Fellipe
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsDavidson Fellipe
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}Davidson Fellipe
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devsDavidson Fellipe
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineersDavidson Fellipe
 
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersWorkflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersDavidson Fellipe
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 

Destaque (11)

Esse cara é o grunt
Esse cara é o gruntEsse cara é o grunt
Esse cara é o grunt
 
RioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupoRioJS - Apresentação sobre o grupo
RioJS - Apresentação sobre o grupo
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuroFrontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
 
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webappsTurbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
 
frontend {retirante: nordestino;}
frontend {retirante: nordestino;}frontend {retirante: nordestino;}
frontend {retirante: nordestino;}
 
Practical guide for front-end development for django devs
Practical guide for front-end development for django devsPractical guide for front-end development for django devs
Practical guide for front-end development for django devs
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
Os segredos dos front end engineers
Os segredos dos front end engineersOs segredos dos front end engineers
Os segredos dos front end engineers
 
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend DevelopersWorkflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 

Semelhante a Javascript Cross-browser

Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphoneRenato Nitta
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebDiego Pessoa
 
escalando aplicações django
escalando aplicações djangoescalando aplicações django
escalando aplicações djangoAndrews Medina
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorAllyson Barros
 
Workshop Performance Rails
Workshop Performance RailsWorkshop Performance Rails
Workshop Performance RailsVitor Pellegrino
 
XIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webXIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webFilipe Giusti
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperCesar Romero
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Mozart Diniz
 
TDC2012: Apps RIA com Sencha GXT 3 e GWT
TDC2012: Apps RIA com Sencha GXT 3 e GWTTDC2012: Apps RIA com Sencha GXT 3 e GWT
TDC2012: Apps RIA com Sencha GXT 3 e GWTLoiane Groner
 

Semelhante a Javascript Cross-browser (20)

Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
escalando aplicações django
escalando aplicações djangoescalando aplicações django
escalando aplicações django
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Curso HTML 5 - Aula Inicial
Curso HTML 5 - Aula InicialCurso HTML 5 - Aula Inicial
Curso HTML 5 - Aula Inicial
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Codando com PHP e JQuery
Codando com PHP e JQueryCodando com PHP e JQuery
Codando com PHP e JQuery
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem DorPlay Framework - Desenvolvendo Aplicações Web com Java sem Dor
Play Framework - Desenvolvendo Aplicações Web com Java sem Dor
 
Workshop Performance Rails
Workshop Performance RailsWorkshop Performance Rails
Workshop Performance Rails
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
XIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento webXIV sacomp ufpel desenvolvimento web
XIV sacomp ufpel desenvolvimento web
 
Desenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack DeveloperDesenvolvendo Sistema Cloud e Web Full-stack Developer
Desenvolvendo Sistema Cloud e Web Full-stack Developer
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
 
TDC2012: Apps RIA com Sencha GXT 3 e GWT
TDC2012: Apps RIA com Sencha GXT 3 e GWTTDC2012: Apps RIA com Sencha GXT 3 e GWT
TDC2012: Apps RIA com Sencha GXT 3 e GWT
 
Desenvolvimento web produtivo
Desenvolvimento web produtivoDesenvolvimento web produtivo
Desenvolvimento web produtivo
 
Javascript nos dias de hoje
Javascript nos dias de hojeJavascript nos dias de hoje
Javascript nos dias de hoje
 

Javascript Cross-browser

  • 1. Javascript Cross-browser por Davidson Fellipe
  • 2. about me... desenvolvedor frontend na globo.com mestrando na puc-rio co-organizador do rio.js webinterativa, cesar, fitec e upe... @davidsonfellipe
  • 4. frontend + engenharia
  • 5. Progressive Enhancement vs. Graceful Degradation
  • 6. websites precisam ter exatamente o mesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 7. “ trazer fidelidade de layout é muito trabalhoso seu madruga
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. grade A • experiência completa • completamente testado • fidelidade visual • correção de bugs com alta prioridade
  • 12. grade C • browsers antigos • experiência pobre • minimo suporte • normalmente apenas HTML e CSS funcional
  • 13. grade X • não testado • pode se tornar um grade A no futuro
  • 14. definição de sua grade vs custos de produção
  • 19. estratégias cross-browser fonte: http://goo.gl/HKlxJ
  • 20. JS development livro do john resig - secrets of the javascript ninja
  • 21. browser bugs... • boa suíte de testes • feature simulation • object detection
  • 22. object detection window.addEventListener('deviceorientation', function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; } }, false);
  • 23. 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 ); };
  • 24. axioma by john resig • relembre o passado • considere o futuro • teste o presente
  • 25. 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!
  • 27. funcionalidades • focar em experiencia rica nos browsers GRADE A • versão HTML ou experiência reduzida em para os GRADE C
  • 28. regressões • por API diferentes • por bugs
  • 29. 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/
  • 30. obrigado! @davidsonfellipe www.fellipe.com www.facebook.com/fellipe www.slideshare.net/davidsonfellipe www.github.com/davidsonfellipe http://about.me/davidsonfellipe
  • 31. 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/