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

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