Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building for Legacy Browsers - jQuery UK 2013

Building for Legacy Browsers - jQuery UK 2013

Joe Pettersson

April 19, 2013
Tweet

Other Decks in Programming

Transcript

  1. Complex clientside apps and legacy
    browsers (a story of frustration) !
    @Joe8Bit  –  Friday  19th  of  Apr  2013  

    View full-size slide

  2. •  Frameworks and tools"

    View full-size slide

  3. •  Frameworks and tools"
    •  Refining User Experience"

    View full-size slide

  4. •  Frameworks and tools"
    •  Refining User Experience"
    •  The JScript JavaScript engine (and why I want to
    stab it with a fork)"

    View full-size slide

  5. •  Frameworks and tools"
    •  Refining User Experience"
    •  The JScript JavaScript engine (and why I want to
    stab it with a fork)"
    •  Testing, testing and more testing"

    View full-size slide

  6. •  Frameworks and tools"
    •  Refining User Experience"
    •  The JScript JavaScript engine (and why I want to
    stab it with a fork)"
    •  Testing, testing and more testing"
    •  The role of jQuery and other libraries"

    View full-size slide

  7. •  Frameworks and tools"
    •  Refining User Experience"
    •  The JScript JavaScript engine (and why I want to
    stab it with a fork)"
    •  Testing, testing and more testing"
    •  The role of jQuery and other libraries"

    View full-size slide

  8. •  Frameworks and tools"
    •  Refining User Experience"
    •  The JScript JavaScript engine (and why I want to
    stab it with a fork)"
    •  Testing, testing and more testing"
    •  The role of jQuery and other libraries"

    View full-size slide

  9. Part one: Testing"
    Joe  Pe:ersson  –  Friday  19th  of  Apr  2013  

    View full-size slide

  10. Part one: Testing"
    •  Local testing and development environments"
    •  Distributed unit and integration testing"

    View full-size slide

  11. Part one: Testing – Ruby, *nix et al"
    •  Ruby/Rails"
    •  *nix dev environment"

    View full-size slide

  12. Two approaches…"
    Buy or Build!

    View full-size slide

  13. Part one: Testing"
    Local testing and development environments!

    View full-size slide

  14. IE  VM’s  from  @xdissent  
    h:ps://github.com/xdissent/ievms  

    View full-size slide

  15. PROTIP  
    Put  downloaded  raw  disk  images  in  ~/.ievms/    
    on  any  device  to  prevent  having  to  download  
    them  again  on  that  machine  

    View full-size slide

  16. Part one: Testing - Local testing and development environments

    "
    Pseudo-­‐distributed  browser  tesIng  with  Selenium  and  
    Virtual  Machines  !

    View full-size slide

  17. “Selenium is a suite of tools to automate web browsers
    across many platforms.”"
    http://www.seleniumhq.org/!

    View full-size slide

  18. Starting stand alone Selenium in ‘hub’ mode:"
    $  java  -­‐jar  selenium-­‐server-­‐standalone.jar  -­‐role  hub    
    Starting stand alone Selenium in ‘hub’ mode:"
    $  java  -­‐jar  selenium-­‐server-­‐standalone.jar  -­‐role  
    webdriver  –hub  http://0.0.1.1    

    View full-size slide

  19. Part one: Testing - Local testing and development environments

    "
    Pseudo-­‐distributed  browser  tesIng  with  Selenium  and  
    Virtual  Machines  !
    Running  Tests!

    View full-size slide

  20. Not  an  official  project  logo.  But  it  should  be.  
    h:ps://github.com/jnicklas/capybara  

    View full-size slide

  21. Configuring Capybara!

    View full-size slide

  22. Integration tests take a while, especially when
    running them in multiple environments’ !
    Unfortunate truth!

    View full-size slide

  23. Local  TesEng    

    View full-size slide

  24. Selenium  Jenkins  plugin  
    h:ps://wiki.jenkins-­‐ci.org/display/JENKINS/Selenium+Plugin    

    View full-size slide

  25. So,  what  if  that  is  too  much  effort?  What  if  I  
    don’t  have  the  Eme  or  the  desire?  

    View full-size slide

  26. •  Easy, fast setup"
    •  Loads of easy integrations "
    •  Scalability and parallelisation"
    •  Great support"

    View full-size slide

  27. Integrating Saucelabs distributed testing in a Rails project !
    1.  Add jasmine-sauce to your Gemfile  
    2. bundle  install  
    3. bundle  exec  sauce  config  
    4. rails  generate  sauce:jasmine  
    5. rake  jasmine:ci:sauce  

    View full-size slide

  28. Part one: Testing"
    Joe  Pe:ersson  –  Friday  19th  of  Apr  2013  

    View full-size slide

  29. “1.3.1  should  support  IE6  (we  dropped  our  IE  test  suite  awhile  ago  
    because  it  was  difficult  to  maintain,  and  we  lost  a  bit  of  insight  into  
    whether  or  not  IE6  would  run  without  errors).  I  think  we  dropped  IE6  
    support  in  the  upcoming  2.0  branch  as  IE6  has  been  EOLed.”  
     
    h:ps://github.com/pivotal/jasmine/issues/327    

    View full-size slide

  30. Part two: The role of jQuery and other libraries"
    Joe  Pe:ersson  –  Friday  19th  of  Apr  2013  

    View full-size slide