Advantages of using pure JavaScript over JQuery

First off – it’s impossible to use jQuery only, all jQuery does is add a $ object to your global scope, with a bunch of methods in it. Even more manipulative libraries like prototype aren’t an alternative to javascript, they’re a toolbelt to solve common problems.

The main advantages to adding jQuery to your toolbelt would be:

  • browser compatibility – doing something like .attr() is much easier than the native alternatives, and won’t break across browsers.
  • simplification of usually complicated operations – if you’d like to see a well written cross browser compatible version of an XHR method, take a look at the source for $.ajax – for this method alone it’s almost worth the overhead of jQ.
  • DOM selection – simple things like binding events & selecting DOM elements can be complicated and differ per-browser. Without a lot of knowledge, they can also be easily written poorly and slow down your page.
  • Access to future features – things like .indexOf and .bind are native javascript, but not yet supported by many browsers. However, using the jQuery versions of these methods will allow you to support them cross browser.

Javascript is no longer just a client side language, and because jQuery is so DOM dependent, it is a terrible candidate to move to the server. I highly recommend putting some time into understanding why you are using jQuery (asking this question is a great first step!), and evaluating when it is necessary. jQuery can be dangerous, a few of the main dangers are:

  • code quality – jQuery has a huge community and a low learning curve. This is a perfect storm for lots of poorly written open source plugins.
  • inefficiency – jQuery is easy to write inefficiently. For instance, using jQuery’s each instead of for loops is unnecessary and could have a performance impact in some cases. Lots of good info about this stuff at JSPerf
  • bloat – jQuery is a huge library. Much of the time, you’ll use a small subset of it’s features, and grab the whole library. There are some great alternatives that will give you subsets of the features, like zepto.js, and underscore.js – depending on your situation, you can save some bytes by choosing the right library for your needs.

Ultimately, jQuery is an incredibly useful and helpful library, when used properly. However, it is not an alternative to javascript. It is a library, just like zepto.js, YUI, Dojo, MooTools, and Prototype – one of which may be a much better choice for your current project.

Javascript is a misunderstood language, and is only recently being regarded as something more than a scripting language by most people. I really recommend reading up on it more, here’s a few good places to start:

  • Ben Alman’s blog – lots of good best practices here. I don’t agree with all of the, but I learn new things from his blog all the time.
  • Code Academy – basic javascript training. No jQuery here. Sometimes going back to basics helps.
  • Javascript Garden – a post regarding the more tricky or misunderstood features of javascript. Please read this from time to time, until everything makes sense.
  • Bocoup – these are training classes. If you’re near one, go to it. Many of the best JS speakers and teachers teach these.
  • Paul Irish’s blog – not strictly JS, but plenty of best practices are written about here. Him and Ben’s twitter feeds are both great to follow.

I’m sure there’s lots more great resources I’m not thinking of or don’t know about, other answerers should feel free to add to that list.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s