Do you need a JavaScript library?

Over the last few years JavaScript has gone through a renaissance.

From a buggy unpredictable add-on, to a mature superfast piece of kit, JavaScript is an integral component to any website. To prove this I’d present libraries like jQuery, Modernizr and Raphaël (to name a few of my favourites).

But the question of the day is: do you actually need a JavaScript library?

Libraries like jQuery are incredible tools but they can add significant weight to the page. They are so far abstracted from the core javascript that makes them it’s very easy to grind the processor to death with the simplest of tasks. Of course, the benefit of ease-of-use and fast implementation can out-weight the negatives, but learning jQuery is not the same as learning JavaScript.

I’ve seen and development myself many websites that have one single JavaScript feature. For such a site I’ve often chose to link in jQuery and then a plugin like Nivo Slider – an extra 7kb. I’ve always felt this approach was lazy. When I was presented with the same task yesterday I wrote my own custom photo rotating code taking up about 10 lines (and jQuery). I felt significantly happier after building the site, I don’t like excess!

There is an element of “reinventing the wheel” there, but when the wheel fits a tractor and I’m on a push bike I’m happy with that.

On another site I included the Modernizr library so that I could detect the HTML5 placeholder attribute and replicate it with jQuery if it didn’t exist in older browsers. When I came to build the new version of this site (dbushell.com) I wanted to do the same thing but felt guilty bloating it out with another JavaScript library. Instead of throwing Modernizr into the mix without a care I decided to dive inside and see how it actually worked. After a few minutes I reduced my code requirements to a few lines:

var f = document.createElement(‘input’);
var placeholder = !!(‘placeholder’ in f);
if (!placeholder) {
/* jQuery to replicate placeholder attribute */
}

Modernizr is an absolutely outstanding piece of JavaScript but it’s also a perfect example of one you’ll almost always never need in its entirety. By hacking around inside you can make huge improvements to the size and speed of your website and your own knowledge of JavaScript. The majority of Modernizr can be reduced down to tiny chunks for each feature (in fact version 2.0 looks like it will be a module based JS library).

So next time you need a library or plugin think twice. With a little know how you can achieve the same thing with significantly less code and no excess waste.

 

Ironically it was Paul Irish (who co-created Modernizr) that gave me the idea of looking deeper at JavaScript libraries from his excellent blog post and video 10 Things I Learned from the jQuery Source.

4 Comments

Andy Kleeman

Fair points…. and as I type ‘look at you with your magically appearing ‘captcha’

I started learning jQuery due to the relatively easy learning curve from html/css but since then have started to learn/understand ‘real’ javascript and use a mix of that with jQuery (hand coded for purpose) on various sites.

I think libaries like jQuery (+ plugins) make for a good introduction to javascript and help us on our way but like you say once you get to know them then you can make things happen yourself without the need for plugins and their bloat.

P.S a self expanding ‘textarea’ would be very swanky… sure I saw a plugin for that somewhere…. :)

David Bushell

Haha hope you liked my hidden captcha :)

I think you’re spot on there. I’ll always use jQuery because of how easy it is to work with. Trying to do everything in “pure” JavaScript can be incredibly tedious!

Nice idea for the expanding textarea I will definitely implement that. Maybe with a plugin!

David Bushell

OK I think I’ve made the comment reCaptcha a bit nice, it’s now handled like other WordPress comment errors… I hope.

Rob Allport

Nice post, enjoyed reading that :)

It’s a pet hate of mine to see the jquery lib imported in it’s entirity to do something an simple and unecessary as selecting a div, or clearing the initial text in an input – small tasks like this really don’t require a library at all. My other hate is where people try to use a plugin for everything, to un needed.

However, you also have to weight up the fact that JQuery and similar is easy to develop in, less time consuming than vanilla JavaScript and is tested across all the major browsers – writing your own solutions using plain JavaScript can cause issues.

Of course libs like JQuery also cut down on the horrible inline JavaScript and has the ‘magic’ doc ready function too :)

Your Comment…

Comments are now closed, give me a shout on Twitter @dbushell!