Monthly Archives: May 2012

The JQuery Trap

JQuery is the awesomesauce. I mean it’s the bomb and John Resig (the creator) is a JavaScript god.

JQuery is a very useful tool…..in the right scenario.

If you don’t know what JQuery is it’s a JavaScript library that greatly simplifies accessing the DOM in the web browser..

For example, instead of selecting all the content with “myid” in the id attribute in JavaScript:

Document.getElementBy("myid");

You can do this in JQuery:

$("#id");

Or, say you have this HTML:

hi
hi
hi
hi
hi
hi

Instead of doing this in JavaScript (which pulls in all the elements by tag, then runs a loop to check if it has a class of “imageButton” and sets the background of those to red) :

var allLinks = document.getElementsByTagName("*"), i;
for (i in allLinks)
{
if ((" " + allLinks[i].className + " ").indexOf("imageButton") > -1) {
allLinks[i].style.backgroundColor = "red";
}
}

You can do this in JQuery with one line:

$(“.imageButton”).css(“background”, “red”);​​​​​

Much simpler right? Yes, but don’t be fooled, it comes at a cost.

Currently the JavaScript version of this script clocks in at 189 bytes minimized by the default settings of the YUI Compressor (http://refresh-sf.com/yui/).

The JQuery version comes in at 42 bytes PLUS the size of the JQuery library minimized (which on my PC is 92.6 KB). So it comes in at closer to the 92.7 KB size.

This difference is stark if you convert them to bytes.

94,882.4 bytes for JQuery and 189 bytes for pure JS.

This is a pretty big difference.

And yes, I realize, networks are faster these days. The amount of time to download this isn’t that significant really.

However, let’s say this code and functionality is much more significant in regards to JavaScript it requires. Maybe it does some really cool JavaScript’ing thing that requires hundreds of lines of pure JS.

I would pose that isn’t it a waste to have to download the entire JQuery library to run simple selects throughout the application?

The rule of thumb I go by is if I need more than two or three JQuery functions, I’m using the JQuery UI, I’m using JQuery mobile, or I’m under a deadline that prohibits me from essentially rewriting the JQuery code in pure JS then I will go ahead and include the library.

However, if it’s an easy swap to pure JS I will almost always choose that route. I may write the JQuery first, but on refactoring I go back through and swap for pure JS.

Another option to make it easier to write good JavaScript (that passes JSLint) is CoffeeScript (http://coffeescript.org/) as it helps write pure JavaScript in a much easier way to the developer.

Bottom line, if you want some easy and quick functionality and the trade-offs are nominal then JQuery (or other libraries) are the way to go.

However, if you’re concerned about speed, size, and overall performance pure JS is your friend.

Share and Enjoy

GiveCamp Greeley/NoCo Wrapup

Colorado GiveCampSo last weekend we held the Northern Colorado GiveCamp.

A quick synopsis of GiveCamp:

GiveCamp is a weekend-long event where technology professionals from designers, developers and database administrators to marketers and web strategists donate their time to provide solutions for non-profit organizations.

Overall we had about 20 I.T. professionals onsite helping out 6 charities. Not bad for a sleepy little college town.

We had fun, food, and long hours of coding. In the end we successfully provided the following for charities in Colorado and the Greeley area:

Camp To Belong
An international non-profit 501 (c) (3) organization, has been actively re-uniting brothers and sisters placed in separate foster, adoptive or kinship homes through Summer Camp Programs and year round events since 1995
Built a website: http://ctbcolorado.org

SOAR Youth and Adult Choir
Gives opportunities for at-risk children to become involved in a safe community of mentoring adult performers, focusing on appreciation of the arts with an emphasis on developing skills necessary for success in life.
Built a website: http://soarchoir.org

Global Refugee Center
The Global Refugee Center, Inc. is a 501 (c) 3 non-profit in Greeley, CO that works with the refugee population to improve their quality of life and assists them in achieving self-sufficiency.
Built a website: http://grccolorado.org

Mountain View Young Marines
The Mountain View Young Marines is a unit ran by the youth, for the youth, supervised by highly capable adult volunteers. We are teaching today’s youth to be tomorrow’s leaders by providing them with a safe drug free environment which will encourage their leadership abilities.
Built a website: http://www.mvyoungmarines.com

High Plains Chautauqua
High Plains Chautuaqua is great fun for anyone between 8 and 80! You’ll learn a lot about history, enjoy the excitement of live theatre.
Built a website. (Deployment pending DNS updates) http://www.highplainschautauqua.org/

Greeley Imagination Station
Imagination Station is a non-profit, 100% volunteer based, parent/child interactive playgroup in Greeley.
Built mobile site: http://m.greeleyimaginationstation.org

I’d like to again personally thank all the sponsors (http://coloradogivecamp.org/sponsor.aspx) as well as the hard working volunteers that gave so freely with their time.

Stay tuned to the coloradogivecamp.org site for updates on the next GiveCamp (tentatively scheduled for October in Colorado Springs).

 

 

Share and Enjoy