Tips for writing better Javascript using jQuery

4,988 views

Published on

Published in: Technology

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

×