tips for writing better javascript using jquery
TRANSCRIPT
Mistakes I made usingjQuery, and how toavoid them
Andy Peatlingapeatling.com
@apeatling
Saturday, 13 October, 12
Tips for writing betterJavascript using jQuery
Mistakes I made usingjQuery, and how toavoid them
Saturday, 13 October, 12
Hi, I’m Andy
I work for Automattic
I work on WordPress.com
Saturday, 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 + State
Saturday, 13 October, 12
Javascript !== jQueryjavascriptenlightenment.com
Saturday, 13 October, 12
jQuery + WordPress
Saturday, 13 October, 12
Use the version of jQuery bundled with WordPress core.
jQuery + WordPress: 1/3
Saturday, 13 October, 12
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
Don’t assume you can use $() without conflict.
jQuery + WordPress: 2/3
Saturday, 13 October, 12
Namespace your events!
jQuery + WordPress: 3/3
Don’t be heavy handed in your plugins (or theme).
Saturday, 13 October, 12
Namespace your events!
jQuery + WordPress: 3/3
Don’t be heavy handed in your plugins (or theme).
Saturday, 13 October, 12
Selectors
Saturday, 13 October, 12
Cache your selectors for extra speed!
Selectors: 1/4
Saturday, 13 October, 12
Cache your selectors for extra speed!
60-70% faster!
Selectors: 1/4
Saturday, 13 October, 12
Use chaining where it makes sense.
Selectors: 2/4
Saturday, 13 October, 12
Use chaining where it makes sense.
Selectors: 2/4
Saturday, 13 October, 12
Be aware of the jQuery stack
Selectors: 3/4
Saturday, 13 October, 12
Be aware of the jQuery stack
Selectors: 3/4
Ref: http://bit.ly/PW2hpu
Saturday, 13 October, 12
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
15-20% faster!
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
Even faster!
Use context in your selectors.
Selectors: 4/4
Saturday, 13 October, 12
Events
Saturday, 13 October, 12
Use .on()
Events: 1/3
Saturday, 13 October, 12
Use .on()
Events: 1/3
Saturday, 13 October, 12
Use .on()
Events: 1/3
Saturday, 13 October, 12
Use .on()
Events: 1/3
Saturday, 13 October, 12
Oh, and make sure you’re delegating.
Events: 2/3
Saturday, 13 October, 12
Oh, and make sure you’re delegating.
Events: 2/3
Event bound to one element, not potentially hundreds of
elements... faster!
Saturday, 13 October, 12
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Events: 3/3
Saturday, 13 October, 12
Custom Events are awesome!
Events: 3/3
Saturday, 13 October, 12
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Events: 3/3
Saturday, 13 October, 12
Custom Events are awesome!
Ref: http://bit.ly/PW2hpu
Saturday, 13 October, 12
AJAX + State
Saturday, 13 October, 12
Make use of HTML 5 data attributes
Saturday, 13 October, 12
Make use of HTML 5 data attributes
AJAX + State: 1/3
Saturday, 13 October, 12
Don’t get caught out by the Ain AJAX.
Saturday, 13 October, 12
Don’t get caught out by the Ain AJAX.
AJAX + State: 2/3
Saturday, 13 October, 12
Use $.Deferred() when state getsmore complex.
AJAX + State: 3/3
Saturday, 13 October, 12
What if we want the spinner to show for at least one second?
AJAX + State: 3/3
Saturday, 13 October, 12
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
We could manage our own state...
AJAX + State: 3/3
Saturday, 13 October, 12
Avoid the duplication, use $.Deferred()
AJAX + State: 3/3
Saturday, 13 October, 12
Avoid the duplication, use $.Deferred()
AJAX + State: 3/3
Saturday, 13 October, 12
http://api.jquery.com/category/deferred-object/
Saturday, 13 October, 12
Thanks!
Andy Peatlingapeatling.com
@apeatling
Saturday, 13 October, 12