jQuery Englightenment

— Topic: javascript

jQuery Enlightenment

History

Several years ago, I landed a job as a junior designer / front-end developer, working with and learning from Hugh Griffith and Cody Lindley, respectively. The former taught me how to have an eye for "big-D" design, beyond just the visuals, and the latter pushed me to write more modular, elegant code.

While we have all since moved on to other jobs, these guys instilled in me the desire and drive to constantly be self-teaching. Or, as the saying goes: "The more you know, the more you learn how much there is you don't know."

I say all that not necessarily to be all nostalgic, but to prefix the following review of Cody's book jQuery Enlightenment with a bit of back-story. Also, let me say as a disclaimer that I was a tech editor of this book. So, while I'm obviously biased, be assured that I am also thoroughly familiar with the text. Oh, and in case you're wondering, I have no financial stake in the book's success. This book is self-published by Cody himself. No money changed hands between us.

Review

I initially jumped at the opportunity to be a tech reviewer because I thought I'd learn a thing or two. Little did I know that I my eyes would be opened, not only to new depths in jQuery, but the JavaScript language itself. Truly, an enlightening experience indeed. While I consider myself proficient at JavaScript, Cody is a luminary - deriving value from the slightest code nuances.

For instance, while I knew how to use jQuery chaining, Cody's explanations take it to a whole new level. I find myself looking for new ways to improve code execution, rather than start a new element query. Why, you ask? Well, because jQuery almost always returns this as a reference to the last-used element, you can continue from where you left off, rather than constantly grabbing at elements you already have.

Most of us are probably familiar with traversing down into the scope of an element chain, because that is how CSS works.

#id_name .tier_1 .tier_2 .tier_3 {
	/* etc. */
}

But, what's cool about jQuery is that you can traverse downward, do something with interior elements, and after that, put back the onion layers (so to speak) and work with the parent element(s) again. Here's how someone might typically write chained jQuery code - indentation indicates nested elements.

// Example 1: This is slow.

$('<div id="id_name"></div>').appendTo('body');

$('#id_name')
	.append('<div class="tier_1">Tier 1</div>')
	.append('<div class="tier_2">Tier 2</div>')
	.append('<div class="tier_3">Tier 3</div>');

Did you spot the inefficiencies? In example 1, there's no reason to get that #id_name a second time, because we had it the first time around.

In example 2, the parent div is first inserted into the body, then the child elements are populated one after another, incurring an expense each time.

// Example 2: This is slow, too.

$('body')
	.append('<div id="id_name"></div>')
	.append('<div class="tier_1">Tier 1</div>')
	.append('<div class="tier_2">Tier 2</div>')
	.append('<div class="tier_3">Tier 3</div>');

Instead, that code could be written to perform significantly faster, by causing only a single modification to the overall document.

// Example 3: Bundled together = Fast!

$('<div id="id_name"></div>')
	.append('<div class="tier_1">Tier 1</div>')
	.append('<div class="tier_2">Tier 2</div>')
	.append('<div class="tier_3">Tier 3</div>')
	.appendTo('body');

This operation can be faster still, by only ever calling .append() once.

// Example 4: Single string = Fastest!

$('body').append(
	'<div id="id_name"><div class="tier_1">Tier 1</div><div class="tier_2">Tier 2</div><div class="tier_3">Tier 3</div></div>'
);

That way, as you construct your new markup, you do so as a single fragment, and then insert it into the DOM. It's the little things like that, which can add up to create a more seamless user experience for your sites and web apps.

Verdict

Without belaboring the point with tons more code examples, let me say this book is chock-full with helpful gems of knowledge, all of which Cody has cleverly made testable live via JSBin. Chances are, if you're a web designer, you got started with jQuery because it looks and works (for the most part) like CSS. Or, maybe you're a developer wanting to delve in even further.

With the lessons from jQuery Enlightenment in your arsenal, you will be able to write code that not just gets the job done, but does it most efficiently. If you're ready to take your jQuery projects from good to great, this book will help you elevate your skill-set to that next level. You'll quickly find yourself wielding jQuery more as a familiar tool, instead of a mysterious contraption.

Me, elsewhere