HTML5 Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 216 posts at DZone. You can read more from them at their website. View Full User Profile

Stop Using jQuery All the Time!

10.26.2012
| 9644 views |
  • submit to reddit

I apologize for the link bait. I feel bad doing it. But at least you know I'm not a slimy SEO person and there is something useful in this article. ;)

Yesterday I blogged a simple little POC (Proof of Concept) that demonstrated adding a class to a random list element. As I said in the post yesterday, this was rather trivial code, but I wanted to share it because of the use of LocalStorage.

About an hour or so after I posted it, something began to bug me. I opened up the template and looked at the Network requests in Chrome dev tools.

Just in case it isn't obvious, let me break it down for you. My HTML document was a bit over 1.5K. The jQuery library, compressed, was 33K. To be fair, my HTML was limited to what was required for the demo, but even if I increased the size of my document ten fold, it would still be less than the size of the jQuery library.

Don't get me wrong. I love jQuery. I love what it has done for my development, my career, and my skin care. (Um, ok.) That being said, you don't need jQuery as much as you think. Consider what my demo did:

  • Run a function when the DOM was loaded.
  • Find some DOM items via CSS selectors.
  • Remove a class from one thing, add it to another.

That's it. Surely I could do that without an entire library, right? First, I switched to listening for the DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", init, false);
    
function init() {

For finding DOM items, I made use of querySelector and querySelectorAll.

//get all the LIs
var menuItems = document.querySelectorAll("ul#menu li");

For adding and removing classes, I made use of the classList property.

document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");

After these changes, the size of my application was pretty much next to nothing.

Here is the complete template. Any questions?

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>

<style>
li.selected { background-color: red; }
</style>
</head>

<body>

<ul id="menu">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li class="selected">Item four</li>
<li>Item five</li>
</ul>

<script>
document.addEventListener("DOMContentLoaded", init, false);
    
function init() {
    //remove the selected class from the li that has it
    document.querySelector("li.selected").classList.remove("selected");
    
    //get all the LIs
    var menuItems = document.querySelectorAll("ul#menu li");

    //How many do we have?
    var numItems = menuItems.length;

    //Did we have a previous one?
    if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
        previous = Number(window.sessionStorage.getItem("selected"));
    } else {
        previous = -1;
    }
    
    //Pick one by random
    var selected = Math.floor(Math.random()*numItems);
    while(selected === previous && numItems > 1) {
        selected = Math.floor(Math.random()*numItems);
    }
    
    if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
    
    //And set it
    document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");
}
</script>

</body>
</html>

    
Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Dmitriy Aleshkowsky replied on Sat, 2012/10/27 - 8:06am

jQuery as a many other js-libraries was created because of they can hide cross-browser incompatibility.

As long browser war will exist as long we will need these frameworks. 

Greg Rav replied on Wed, 2012/10/31 - 6:38am

In general I agree with your. 

But your post is not so good example. Your code have cross browser issues(IE 7/8, Opera), so or you should change demo code or use jquery which solve cross browser issues for you.


Daniel Serodio replied on Wed, 2012/10/31 - 11:14am

If you include jQuery from a CDN, like you should, the browser will probably have it cached already so it won't need to download anything:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Subin Varghese replied on Wed, 2012/10/31 - 11:32am

Your example doesn't fully prove that we can do these things without a library like JQuery.  "DOMContentLoaded" event is only supported since IE9. It's better to use "JQuery.ready".  "Document.querySelectorAll" is supported since IE8, so not in IE7 which still is a target browser for many sites. "classList" is supported only from IE10.

I know that including the whole of JQuery for such a small set of functions is not a good thing but most of the websites nowadays have much more JavaScript code than your example here which uses a larger set of JQuery utilities. Moreover, since JQuery v1.8, you can have custom build in which you can choose which parts of JQuery you need for your project.

Martin Van Den Bemt replied on Thu, 2012/11/01 - 2:25pm in response to: Daniel Serodio

 Great way to make your site dependant on another site.

Daniel Serodio replied on Thu, 2012/11/01 - 4:45pm in response to: Martin Van Den Bemt

What's the problem with making your site dependent on Google? Do you think Google is not reliable? Slow?

Timothy Kanters replied on Mon, 2012/11/05 - 10:52am

I find it good policy to use the google hosted javascript libraries, especially for public websites.  It make your page load faster because of caching and it also makes sure the javascript can't be exploited.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.