jQuery quick tips

Download jQuery quick tips

Post on 07-Aug-2015




3 download

Embed Size (px)


<ol><li> 1. { jQuery Quick Tips From @RockingCodeSlides by @roch_br (Rochester Oliveira) Visit us: RockingCode.Com </li><li> 2. {*} So, what is this about? Its 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 youll find more content like this at RockingCode.com </li><li> 3. {1} Dont use Javascript. </li><li> 4. {1} Dont use javascript. I know its pretty strange hearing this from me (who actually does aliving 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 jQuerys possibilities can seduce us, you have to be smart, and cut that cool hover blinking &amp; shaking effect. </li><li> 5. {1} Dont use javascript.Fancy effects with CSS, HTML &amp; Images </li><li> 6. {2} If you do, do it unobtrusive. </li><li> 7. {2} If you do, do it unobtrusive. Unobtrusive javascript is an art, actually. Basic functionality has to be done with basic HTML, CSS, &amp; Server-Side scripting. Then all javascript does, is just comes brighten your work. If you disable JS and cant do basic stuff (like see links content), youve done it wrong, my friend. Also, you have to keep in mind that your code may not work or evenworse, may work in a way that you didnt expect, since we have a lotof parsing differences between real browsers and IE. </li><li> 8. {2} If you do, do it unobtrusive. Api.jQuery has live search with js enabled, but works without it well. </li><li> 9. {3} Use pure JavaScript. </li><li> 10. {3}Use pure JavaScript. I shall remind you now, little Grasshopper, that jQuery is just one wayto implement JS. It is NOT Javascript itself. And many times it isnt even the best way to do things. If you are doing simple things, like getting attributes from an element, youd better do ol JS. Before learning any jQuery, be a Master of JS art. For real. Itll be mucheasier to do better code when you have raw coding alternatives. </li><li> 11. {3}Use pure JavaScript.Google Doodles could easily be done with jQuery, but ol JS is way better. </li><li> 12. {4} Cache everything you can! </li><li> 13. {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 doesnt change it too often, itll 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 its a jQ object </li><li> 14. {4} Cache everything you can.One of your amazing 1WDs plugins code </li><li> 15. {5} Chaining is good for you. </li><li> 16. {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 $elem twice. Even if we are caching it (if you dont, Ill 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); </li><li> 17. {6} Always do readable code! </li><li> 18. {6}Always do readable code After doing a fancy code, a few days pass, and you decide to changesomething on it. Well, then you notice that your code looksmore like a new category, minified production version, nocomments, no indentation but no compressing also. When you start doing anything just comment what your basic logicis. Try to detail some obscure parts and dont forget that theTAB key is there for one reason: So, USE IT. </li><li> 19. {6} Always do readable codejQuery source (Development version). Pretty cool, huh? </li><li> 20. {7} Avoid (too many) plugins. </li><li> 21. {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 isdangerous for performance. They add an extra HTTP request and can potentially mess up things since you dont 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. </li><li> 22. {8} Dont forget about mobile devices. </li><li> 23. {8} Dont forget about mobile devices jQuery mobile is getting more and more power. You have to be readyfor more and more drag &amp; drop instead of hover and clicks. Also you have to optimize you code for smaller processing power andsmaller screens that are usually found in mobiles. Its more than just doing responsive things. Its 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. </li><li> 24. {8} Dont forget about mobile devicesWikipedia mobile is really good.Actually well do a plugin with such functionalitty soon </li><li> 25. {9} Avoid fancy selectors. </li><li> 26. {9} Avoid fancy selectors Ids are the best performers. Anything else, will just cost youprecious 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 its not changing every time or even if youre dealing with dynamically generated content). </li><li> 27. { 10 } Find() what you need. </li><li> 28. { 10 } Find() what you needSizzle (jQuery selector) does pretty much the same thing as you are used to withCSS (yeah, Sizzle too), but we have one main difference that you must tonotice: Performance.Look, since Sizzle works from right to left (yeah, opposite of what youre 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, thats really bad for performance since you can have a lot of as 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 </li><li> 29. Thats all... Thanks for reading!Slides by @roch_br (Rochester Oliveira)Visit us: RockingCode.Com</li></ol>