0
Mistakes I made using                  jQuery, and how to                  avoid them                           Andy Peatl...
Mistakes I made using                  jQuery, and how to                  avoid them                             Tips for...
Hi, I’m Andy            I work for Automattic            I work on WordPress.comSaturday, 13 October, 12
I used to live in Vancouver...Saturday, 13 October, 12
...now I live in Winnipeg.Saturday, 13 October, 12
Saturday, 13 October, 12
jQuery + WordPress          Selectors                      Events                              AJAX + StateSaturday, 13 Oc...
Javascript !== jQuery                           javascriptenlightenment.comSaturday, 13 October, 12
jQuery + WordPressSaturday, 13 October, 12
Use the version of jQuery      bundled with WordPress core.                            jQuery + WordPress: 1/3Saturday, 13...
Don’t assume you can use $()      without conflict.                            jQuery + WordPress: 2/3Saturday, 13 October,...
Don’t assume you can use $()      without conflict.                            jQuery + WordPress: 2/3Saturday, 13 October,...
Don’t assume you can use $()      without conflict.                            jQuery + WordPress: 2/3Saturday, 13 October,...
Namespace your events!       Don’t be heavy handed in your plugins (or theme).                                            ...
Namespace your events!       Don’t be heavy handed in your plugins (or theme).                                            ...
SelectorsSaturday, 13 October, 12
Cache your selectors for       extra speed!                                  Selectors: 1/4Saturday, 13 October, 12
Cache your selectors for       extra speed!                           60-70% faster!                                      ...
Use chaining where it makes      sense.                               Selectors: 2/4Saturday, 13 October, 12
Use chaining where it makes      sense.                               Selectors: 2/4Saturday, 13 October, 12
Be aware of the jQuery stack                                Selectors: 3/4Saturday, 13 October, 12
Be aware of the jQuery stack                           Ref: http://bit.ly/PW2hpu                                          ...
Use context in your selectors.                                  Selectors: 4/4Saturday, 13 October, 12
Use context in your selectors.                           15-20% faster!                                            Selecto...
Use context in your selectors.                           Even faster!                                          Selectors: ...
EventsSaturday, 13 October, 12
Use .on()                           Events: 1/3Saturday, 13 October, 12
Use .on()                           Events: 1/3Saturday, 13 October, 12
Use .on()                           Events: 1/3Saturday, 13 October, 12
Use .on()                           Events: 1/3Saturday, 13 October, 12
Oh, and make sure you’re      delegating.                                 Events: 2/3Saturday, 13 October, 12
Oh, and make sure you’re      delegating.                           Event bound to one element, not                       ...
Custom Events are awesome!                           Ref: http://bit.ly/PW2hpu                                      Events...
Custom Events are awesome!                             Events: 3/3Saturday, 13 October, 12
Custom Events are awesome!                           Ref: http://bit.ly/PW2hpu                                           E...
Custom Events are awesome!                           Ref: http://bit.ly/PW2hpuSaturday, 13 October, 12
AJAX + StateSaturday, 13 October, 12
Make use of HTML 5 data      attributesSaturday, 13 October, 12
Make use of HTML 5 data      attributes                                AJAX + State: 1/3Saturday, 13 October, 12
Don’t get caught out by the A     in AJAX.Saturday, 13 October, 12
Don’t get caught out by the A     in AJAX.                                     AJAX + State: 2/3Saturday, 13 October, 12
Use $.Deferred() when state gets                       more complex.                                          AJAX + State...
What if we want the spinner to show      for at least one second?                                        AJAX + State: 3/3...
We could manage our own state...                                        AJAX + State: 3/3Saturday, 13 October, 12
We could manage our own state...                                        AJAX + State: 3/3Saturday, 13 October, 12
We could manage our own state...                                        AJAX + State: 3/3Saturday, 13 October, 12
Avoid the duplication, use $.Deferred()                                         AJAX + State: 3/3Saturday, 13 October, 12
Avoid the duplication, use $.Deferred()                                         AJAX + State: 3/3Saturday, 13 October, 12
http://api.jquery.com/category/deferred-object/Saturday, 13 October, 12
Thanks!                           Andy Peatling                           apeatling.com                            @apeatl...
Upcoming SlideShare
Loading in...5
×

Tips for writing better Javascript using jQuery

4,285

Published on

Published in: Technology

Transcript of "Tips for writing better Javascript using jQuery"

  1. 1. Mistakes I made using jQuery, and how to avoid them Andy Peatling apeatling.com @apeatlingSaturday, 13 October, 12
  2. 2. Mistakes I made using jQuery, and how to avoid them Tips for writing better Javascript using jQuerySaturday, 13 October, 12
  3. 3. Hi, I’m Andy I work for Automattic I work on WordPress.comSaturday, 13 October, 12
  4. 4. I used to live in Vancouver...Saturday, 13 October, 12
  5. 5. ...now I live in Winnipeg.Saturday, 13 October, 12
  6. 6. Saturday, 13 October, 12
  7. 7. jQuery + WordPress Selectors Events AJAX + StateSaturday, 13 October, 12
  8. 8. Javascript !== jQuery javascriptenlightenment.comSaturday, 13 October, 12
  9. 9. jQuery + WordPressSaturday, 13 October, 12
  10. 10. Use the version of jQuery bundled with WordPress core. jQuery + WordPress: 1/3Saturday, 13 October, 12
  11. 11. Don’t assume you can use $() without conflict. jQuery + WordPress: 2/3Saturday, 13 October, 12
  12. 12. Don’t assume you can use $() without conflict. jQuery + WordPress: 2/3Saturday, 13 October, 12
  13. 13. Don’t assume you can use $() without conflict. jQuery + WordPress: 2/3Saturday, 13 October, 12
  14. 14. Namespace your events! Don’t be heavy handed in your plugins (or theme). jQuery + WordPress: 3/3Saturday, 13 October, 12
  15. 15. Namespace your events! Don’t be heavy handed in your plugins (or theme). jQuery + WordPress: 3/3Saturday, 13 October, 12
  16. 16. SelectorsSaturday, 13 October, 12
  17. 17. Cache your selectors for extra speed! Selectors: 1/4Saturday, 13 October, 12
  18. 18. Cache your selectors for extra speed! 60-70% faster! Selectors: 1/4Saturday, 13 October, 12
  19. 19. Use chaining where it makes sense. Selectors: 2/4Saturday, 13 October, 12
  20. 20. Use chaining where it makes sense. Selectors: 2/4Saturday, 13 October, 12
  21. 21. Be aware of the jQuery stack Selectors: 3/4Saturday, 13 October, 12
  22. 22. Be aware of the jQuery stack Ref: http://bit.ly/PW2hpu Selectors: 3/4Saturday, 13 October, 12
  23. 23. Use context in your selectors. Selectors: 4/4Saturday, 13 October, 12
  24. 24. Use context in your selectors. 15-20% faster! Selectors: 4/4Saturday, 13 October, 12
  25. 25. Use context in your selectors. Even faster! Selectors: 4/4Saturday, 13 October, 12
  26. 26. EventsSaturday, 13 October, 12
  27. 27. Use .on() Events: 1/3Saturday, 13 October, 12
  28. 28. Use .on() Events: 1/3Saturday, 13 October, 12
  29. 29. Use .on() Events: 1/3Saturday, 13 October, 12
  30. 30. Use .on() Events: 1/3Saturday, 13 October, 12
  31. 31. Oh, and make sure you’re delegating. Events: 2/3Saturday, 13 October, 12
  32. 32. Oh, and make sure you’re delegating. Event bound to one element, not potentially hundreds of elements... faster! Events: 2/3Saturday, 13 October, 12
  33. 33. Custom Events are awesome! Ref: http://bit.ly/PW2hpu Events: 3/3Saturday, 13 October, 12
  34. 34. Custom Events are awesome! Events: 3/3Saturday, 13 October, 12
  35. 35. Custom Events are awesome! Ref: http://bit.ly/PW2hpu Events: 3/3Saturday, 13 October, 12
  36. 36. Custom Events are awesome! Ref: http://bit.ly/PW2hpuSaturday, 13 October, 12
  37. 37. AJAX + StateSaturday, 13 October, 12
  38. 38. Make use of HTML 5 data attributesSaturday, 13 October, 12
  39. 39. Make use of HTML 5 data attributes AJAX + State: 1/3Saturday, 13 October, 12
  40. 40. Don’t get caught out by the A in AJAX.Saturday, 13 October, 12
  41. 41. Don’t get caught out by the A in AJAX. AJAX + State: 2/3Saturday, 13 October, 12
  42. 42. Use $.Deferred() when state gets more complex. AJAX + State: 3/3Saturday, 13 October, 12
  43. 43. What if we want the spinner to show for at least one second? AJAX + State: 3/3Saturday, 13 October, 12
  44. 44. We could manage our own state... AJAX + State: 3/3Saturday, 13 October, 12
  45. 45. We could manage our own state... AJAX + State: 3/3Saturday, 13 October, 12
  46. 46. We could manage our own state... AJAX + State: 3/3Saturday, 13 October, 12
  47. 47. Avoid the duplication, use $.Deferred() AJAX + State: 3/3Saturday, 13 October, 12
  48. 48. Avoid the duplication, use $.Deferred() AJAX + State: 3/3Saturday, 13 October, 12
  49. 49. http://api.jquery.com/category/deferred-object/Saturday, 13 October, 12
  50. 50. Thanks! Andy Peatling apeatling.com @apeatlingSaturday, 13 October, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×