{ jQuery Quick Tips

From @RockingCode

Slides by @roch_br (Rochester Oliveira)Visit us: RockingCode.Com

So, what is this about?

It's pretty cool on how we can do crazy things with a few lines of jQuery. But sometimes we forget that after those simple statements, several functions start. Then, my friend, we can see the difference between ordinary Padawans and Jedi Masters.

Here, we will see a couple of good practices that will help you code better and better.

Hope you like it, and you’ll find more content like this at RockingCode.com

{ * }

Don’t use Javascript.

{ 1 }

Don’t use javascript.

I know it’s pretty strange hearing this from me (who actually does a living from this stuff) but yeah, you read it right.

My point is, if you can do it via CSS with a good browser support, forget about javascript.

Because jQuery's possibilities can seduce us, you have to be smart, and cut that cool hover blinking & shaking effect.

{ 1 }

Don’t use javascript.

Fancy effects with CSS, HTML & Images

{ 1 }

If you do,do it unobtrusive.

{ 2 }

If you do, do it unobtrusive.

Unobtrusive javascript is an art, actually. Basic functionality has to be done with basic HTML, CSS, & Server-Side scripting. Then all javascript does, is just comes brighten your work.

If you disable JS and can't do basic stuff (like see link's content), you've done it wrong, my friend.

Also, you have to keep in mind that your code may not work or even worse, may work in a way that you didn’t expect, since we have a lot of parsing differences between real browsers and IE.

{ 2 }

If you do, do it unobtrusive.

Api.jQuery has live search with js enabled, but works without it well.

{ 2 }

Use pure JavaScript.

{ 3 }

Use pure JavaScript.

I shall remind you now, little Grasshopper, that jQuery is just one way to implement JS.

It is NOT Javascript itself.

And many times it isn't even the best way to do things. If you are doing simple things, like getting attributes from an element, you'd better do ol' JS.

Before learning any jQuery, be a Master of JS art. For real. It’ll be much easier to do better code when you have raw coding alternatives.

{ 3 }

Use pure JavaScript.

Google Doodles could easily be done with jQuery, but ol’ JS is way better.

{ 3 }

Cache everything you can!

{ 4 }

Cache everything you can.

Every time you call the $(element), jQuery will search DOM tree and see what the element is.

But if your document doesn't change it too often, it'll be way better if you store your results inside a simple var, so jQuery will do it only once. All you have to do is call it from that var.

var $body = $(“body”); //starting with $ so I know it’s a jQ object

{ 4 }

Cache everything you can.

One of your amazing 1WD’s plugins code

{ 4 }

Chaining is good for you.

{ 5 }

Chaining is good for you

Another good thing you can do for your performance is chaning.

Well, if you execute operations with jQuery objects in different lines [$elem.op1(); $elem.op2(); ] jQuery will call our dear friend $elemtwice. Even if we are caching it (if you don't, I'll punch you in your face!), we can group things like this with a cool method called chaining and have a ultra-better-optimized-golden-plus-plus code.

//bla bla cool stuff here$elem.addClass(“ohYeah”).fadeIn(400);

{ 5 }

Always do readable code!

{ 6 }

Always do readable code

After doing a fancy code, a few days pass, and you decide to change something on it. Well, then you notice that your code looks more like a new category, “minified production” version, no comments, no indentation but no compressing also.

When you start doing anything just comment what your basic logic is. Try to detail some obscure parts and don’t forget that the TAB key is there for one reason: So, USE IT.

{ 6 }

Always do readable code

jQuery source (Development version). Pretty cool, huh?

{ 6 }

Avoid (too many) plugins.

{ 7 }

Avoid (too many) plugins

We have A LOT of cool plugins out there, but many of them are just useless.

A plugin that does things that you can do with a few lines of code is dangerous for performance.

They add an extra HTTP request and can potentially mess up things since you don’t know exactly how things are done with it. Besides, you may not need that fancy effect that costs you 15kb and 30s in page rendering.

{ 7 }

Don’t forget about mobile devices.

{ 8 }

Don’t forget about mobile devices

jQuery mobile is getting more and more power. You have to be ready for more and more drag & drop instead of hover and clicks.

Also you have to optimize you code for smaller processing power and smaller screens that are usually found in mobiles.

It's more than just doing responsive things. It's about doing things thinking on a whole new platform, a whole new modus operandi, and you must figure out what you can do for the best user experience.

{ 8 }

Don’t forget about mobile devices

Wikipedia mobile is really good.Actually we’ll do a plugin with such functionalitty soon

{ 8 }

Avoid fancy selectors.

{ 9 }

Avoid fancy selectors

Id’s are the best performers. Anything else, will just cost you precious time.

Avoid all those non-built-in selectors, like classes, tags, pseudo-selectors, and everything else. These are bad, bad guys.

Specially if you have total control over HTML (like it’s not changing every time or even if you’re dealing with dynamically generated content).

{ 9 }

Find() what you need.

{ 10 }

Find() what you need

Sizzle (jQuery selector) does pretty much the same thing as you are used to with CSS (yeah, Sizzle too), but we have one main difference that you must to notice: Performance.

Look, since Sizzle works from right to left (yeah, opposite of what you're doing right now) if you write it this way $(“h1 a”), it will search for every “a”, then check if it has a “h1” as an ancestor.

As you may notice, that’s really bad for performance since you can have a lot of a's in your page. So when you need this kind of search, use find() or even children(). First, you search for ancestor, then start a new search for your element.

$(“h1”).find(“a”); //get all “h1” and them look for “a” elements

{ 10 }

That’s all... Thanks for reading!

Slides by @roch_br (Rochester Oliveira)Visit us: RockingCode.Com