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

Life after jQuery

Life after jQuery

How Yell removed jQuery from its mobile site, and how it changed how we develop our JS. First presented at Oxford Geek Night 40

Steve Workman

May 13, 2015
Tweet

More Decks by Steve Workman

Other Decks in Programming

Transcript

  1. Life after jQuery

    View Slide

  2. Steve Workman
    • London Web Standards
    Organiser
    • Lead UI Engineer @ Yell
    @steveworkman
    @webstandards

    View Slide

  3. You May Remember us from…

    View Slide

  4. @leonardogrecoLG
    #Vintage or what?
    This @yell #BOOK
    was delivered
    @7.30am! Haven’t
    seen one in ages.
    Goes well with the
    period phone!

    View Slide

  5. Smartphone != Xbox
    Flagship mobile phones aren’t
    up to 1/3 of the power of last-
    gen consoles
    Kraken 1.1 (lower is better)
    Samsung Galaxy S6 – 3993ms
    My laptop – 1043ms
    jQuery is significantly slower
    than native code
    http://jsperf.com/comparing-
    jquery-and-native-js/11
    https://jsperf.com/jquery-vs-
    native-element-performance

    View Slide

  6. grasp  '$(__).__'  -­‐e  -­‐o  *.js |  sed 's/.*[.]//'  |  
    uniq -­‐c.  

    View Slide

  7. Three months later

    View Slide

  8. Bounce rate on top 3 smartphone
    pages during release window

    View Slide

  9. View Slide

  10. Bugs
    • IE10 doesn’t support dataset – use
    .getattribute(data-prop)
    • Jasmine-jQuery (fixtures) – clash of
    namespace
    • Re-named $ to QSA – complete re-write
    • Lots of complex logic, .bind/$.proxy
    • It’s not simple, bugs happen

    View Slide

  11. Compromise

    View Slide

  12. Progressive Enhancement Wins

    View Slide

  13. View Slide

  14. Thank you
    Follow Me: @steveworkman
    Slides: speakerdeck.com/steveworkman
    Yell is Hiring – careers.yell.com

    View Slide