Audience This presentation was crafted specifically for delivery at the Front End Design Conference in St. Petersburg, FL. The audience consisted of designers who use jQuery very little through developers who use jQuery regularly. The slide portion of this presentation covers the three primary topics I covered during live coding. If you have any questions after watching this presentation and looking at the code, please let me know: [email protected] (Be sure to reference this presentation when emailing!)
jQuery: What & How • show() or hide() • What: I want my element to be hidden or visible • How: Show or hide by setting adjusting the `display`. It will appear or disappear immediately when this setting is changed. • slideUp() or slideDown(); • What: I want my element to be hidden or visible via a nice animation • How: Show or hide by animating the height property. • How: I want the animation to last exactly 400ms.
jQuery: What & How • show() or hide() • What: I want my element to be hidden or visible • How: Show or hide by setting adjusting the `display`. It will appear or disappear immediately when this setting is changed. • slideUp() or slideDown(); • What: I want my element to be hidden or visible via a nice animation • How: Show or hide by animating the height property. • How: I want the animation to last exactly 400ms. NO
Why? • CSS classes can easily affect decedent elements • Adding an `is-visible` class describes the state, but allows the CSS to manage exactly how it becomes and remains visible. • Visible no longer has to mean “display: block” • Invisible can now mean low opacity instead of completely hidden • CSS animation via transitions can be used as part of the showing or hiding
Animation & jQuery • Animation was how I started using jQuery • CSS3 Transitions and animations have come a long way • Class-based CSS3 Transitions have inherent fallbacks for older browsers
Event delegation • Event bubbling allows it to work (This is patched by jQuery as necessary) • One event on a parent vs. many events on children • Filtering vs. Traversal • Responsible events – only run on user action • Can be added before the document is ready • Forces a contextual approach
BOUND vs DELEGATED • Separate handler for each element • Executes only when event is triggered on bound elements • Elements can be retrieved ahead of time • Must be bound after the DOM is ready • Single handler for all elements • Checks event on every element in its context, and executes when a match is found • Elements should be retrieved at run time • Can be setup as soon as the context element is ready
Problem with live $(
"a"
).live(
"click",
function
()
{
...
}
); • Step 1: Search all the DOM for "a" • Step 2: Throw away the result • Step 3: Create a delegated event for "click" on an "a" Live
More Callbacks $.get(
"/path/to/1",
function
(
data1
)
{
$.get(
"/path/to/2",
function
(
data2
)
{
$.get(
"/path/to/3",
function
(
data3
)
{
console.log(
"I
got
my
data!!!",
data
);
});
}); });
Problem with Callbacks • They queue up The first has to finish before the nested call can begin. • Potential for Ugly, nested code • You still need to handle caching
What is a Deferred? • An object that starts in an unresolved state • Can either be rejected or resolved with data • Once resolved or rejected, it remains forever in that state • It can do a LOT more as well. See http://api.jquery.com/jquery.deferred for more information.
$.then • jQuery’s implementation is based on Promises/A Spec, but not fully compliant • "Thenable" is the primary API for Deferreds $.get(
"/path/to"
)
.then(
passCallback,
failCallback
);
$.WHEN Creates a new deferred that resolves a set of deferreds or values are ready. For non-deferreds, truthy values trigger a resolve, falsey trigger a reject. $.when(
deferredOne(),
deferredTwo(),
true
) .then(
function
(
res1,
res2,
res3
)
{ });
$.done and $.fail Shortcut versions of one part of $.then(
pass,
fail
); //
Done
vs
Then dfd.done(
function
()
{
…
}
); dfd.then(
function
()
{
…
}
); //
Fail
vs
Then dfd.fail(
function
()
{
…
}
); dfd.then(
null,
function
()
{
…
}
);
Creating a deferred var
dfd
=
$.Deferred(); dfd.then(
function
(
data
)
{
console.log(
data
);
//
Logs
out,
It
worked }); //
Some
long
running
operation dfd.resolve(
"It
worked"
);
Promising var
createDfd
=
function
()
{
var
dfd
=
$.Deferred();
...
return
dfd.promise(); }; //
Fails,
no
method
named
"resolve" createDfd().resolve(
"Something"
);
Creating & Promising var
promise
=
$.Deferred(
function
(
d
)
{
d.resolve(
"It
worked!"
); }).promise(); • Create the deferred and return a promise in one statement. • The callback will be invoked with the new Deferred as the first parameter
Alternative • If all you need are promises, there are other options than jQuery. • One option is a State Machine library Machina plus a plugin I wrote for it: Machina.Promise (Promises/A Compliant) http://github.com/a2labs/machina.promise
Links • Front End Shop (Example Project) http://github.com/dcneiner/frontend-shop • Contextual jQuery Video (jQuery UK 2012) http://vimeo.com/40873228 • Machina Introduction Video (jQuery UK 2013) http://vimeo.com/67473899 • jQuery Build Tool http://projects.jga.me/jquery-builder
Links • Postman for Chrome http://www.getpostman.com/ • Detecting AJAX Events on the Server http://www.learningjquery.com/2010/03/detecting-ajax-events-on-the-server
dougneiner
tanakahisateru
antyadev
seike460
irof
rdmueller
ivargrimstad
smt7174
deepu105
pospome
pylapp
mot_techtalk
niftycorp
rasmusluckow
eileencodes
tanoku
erikaheidi
chrislema
philhawksworth
addyosmani
dotmariusz
eitanlees
jonyablonski
jponch
searls