Your SlideShare is downloading. ×
Tips for writing better Javascript using jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Tips for writing better Javascript using jQuery

4,161
views

Published on

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,161
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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