Interactive elements on a website really help grab a user’s interest. Elements like a rotating theater on the home page; subtle animations that react to mouse hovers or clicks, making the user interaction smooth, even fun; and practical events like validating form inputs. These interactive elements all add to a site’s overall appeal. More often than not, they are done with JavaScript.
However, more and more people are using and recommending jQuery for these tasks, and lately there is little, if any, mention of JavaScript. When JavaScript is mentioned, it is often referred to as a completely different choice over jQuery. As software engineers, we hear the same question from existing and prospective clients, as well as from new developers, “Should we use jQuery? Or should we just write custom JavaScript?”
Because jQuery is simply a collection of JavaScript functions, you might believe there’s no difference between them. But, in fact, there is—a big difference, both when it comes making this choice for websites, as well as for coding interactive elements on other digital channels, like Facebook and mobile. I’m going to focus my discussion on websites. I’ll look at the question as it applies to other digital channels in a future post.
So, let’s first take a look at the advantages of using jQuery as opposed to JavaScript.
What is jQuery?
jQuery was created by John Resig and released in 2006, and its goal (from jquery.com) is to be a “fast, concise JavaScript library … for rapid web development. jQuery is designed to change the way you write JavaScript.” jQuery is a library of standard JavaScript functions that work together to enable the developer to produce complex functionality with a minimal amount of code and development time.
Advantages of using jQuery
- Development speed – Using jQuery is almost always going to be quicker than writing things from scratch. Unless a developer already has his or her own library of functions, he or she will need to write many of the things that jQuery provides in the library. This lets the developer focus on adding value for the website rather than the “grunt work” of writing basic code.
- Popularity – Over 60% of sites that use a JavaScript framework use jQuery (in July 2010, 45% of the top 100,000 websites on Alexa used a framework.) While popularity isn’t always a great reason to do something, in this case the popularity leads to more bug reports and more exposure to different environments, which in turn leads to more bugs being fixed, which equals greater stability and a better library.
- Cross-browser compatibility – jQuery is compatible with all of the major browsers and many of the older browsers still in use (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, and Chrome), which means the developer doesn’t have to keep track of individual browser bugs and idiosyncrasies.
- Adheres to best practices – The jQuery team and community keep up to date on JavaScript best practices and implement them into newer releases, ensuring that developers using jQuery are also using best practices without having to keep up on every minute detail and practice that’s developed.
- It’s high-quality code – With a lot of eyes on the jQuery code, it’s held to very high quality standards. Custom JavaScript can be written to high standards as well, but it can also be very poorly written.
- Robust selection of plugins – Chances are that if there’s a task that a developer wants to do, requiring more than just basic coding, someone in the jQuery community has developed a plug-in for that task. For example, Colorbox is a plugin that allows developers to have a very full-featured lightbox on their site and they have to write only a few lines of code. A caveat for using plugins, however: Although they can be beginner friendly, before using them a developer should be able to validate that the plugin is well written and performs adequately.
Disadvantages to using a JavaScript library (like jQuery)
- Lack of understanding of the JavaScript code – If a developer relies on the library functions, it can be hard to keep track of what the underlying code is actually doing.
- Takes time to learn the library – JavaScript libraries require specific syntax and knowledge of the included methods, and it takes time to learn this properly. It also requires an ongoing investment in keeping up with changes being made to the library.
- Tracking version changes – Developers need to keep track of changes to the library and test updated versions with their websites, or risk potential failures when an updated version is deployed to their website.
- Open source risks – If the project is abandoned, developers would be stuck making updates and bug fixes to the library themselves. jQuery has a thriving community at the moment, but that could change down the road.
jQuery sounds great! Why even bother with JavaScript?
Why? Well, because jQuery IS JavaScript. To use jQuery effectively, a developer needs to be able to write JavaScript, otherwise he or she would be very limited. Developers may be able to muddle through with some basic knowledge, even make some cool effects, but anything custom requires custom code. Also, without a real knowledge of JavaScript, developers are inhibited from writing good, concise, re-usable code. This could mean writing 100 lines of code, when six or seven might be sufficient. And increases in code size mean increases in page load times.
Advantages of standard, hand-written JavaScript
- No library to include – Seems basic, but the jQuery library itself is another file to download. While jQuery keeps the main file fairly small (~31KB), it is still a significant amount of code to include if it isn’t needed.
- Faster execution – Standard (well-written) JavaScript code will often execute much faster than an equivalent jQuery method (example: $.each() loop versus standard JavaScript for loop – the for loop is approx. 479% faster).
- No unused code – Whether code was written for edge cases, bugs in specific browsers, or just features that weren’t needed, there is code in jQuery that is never executed in many sites. Michael Bolin wrote a Firefox plugin, JSBloat, which determined many sites never use more than 35% of the jQuery code that is included.
- No “black-box” development – It is possible to create some complex behavior using just jQuery methods, but when something doesn’t work, someone who doesn’t know JavaScript is going to find themselves at a loss for how to fix things.
Revisiting our initial question: Should your website use jQuery?
As you may have guessed, it’s not a simple answer. jQuery can speed development of what look like complex tasks and make animations and other “flashy” features relatively simple to execute. But if a site doesn’t need those extra features, it would be extra overhead to include jQuery. If a few simple functions in JavaScript will handle your website’s needs, then there really isn’t a good rationale to use jQuery.
There are some tasks where jQuery really shines (warning: it might get a little nerdy here!)
- Animations – Probably one of the top reasons many people turn to jQuery in the first place is to enable animations on their websites. Things like rotating theaters, image galleries, accordion menus and lightboxes are all relatively easy to implement in jQuery. The site our Enlighten (now Perficient Digital) team built for John Frieda (http://www.johnfrieda.com/) uses a number of jQuery effects throughout.
- Event handling – jQuery has a rich engine for handling responses to user actions—whether it’s things like clicking an item or hovering over it with the mouse or submitting a form—and an ability to specify custom events and then respond to those events.
- DOM Manipulation – The DOM is the underlying structure of the web page, and jQuery is very good at making it easy to add, remove, or modify the web page structure. Inserting new items, removing old ones, or just changing existing items are all very easy to do with jQuery.
- AJAX functionality – AJAX refers to the ability to ask the web server for more information for the current page without doing a complete page refresh. Examples of AJAX in use can be seen on Enlighten’s What Was There site (http://www.whatwasthere.com/), as the website allows users to upload photos, retrieve photos, plot points on a map, and more, without ever refreshing the page. AJAX can be very tricky to write to; it works in all browsers, but jQuery has a very succinct way of executing AJAX calls that make it compatible cross-browser and relatively easy to use.
Ultimately, it’s up to your main stakeholders and developers to decide what’s right for the needs of your team and your site. However, in my experience as a software engineer at Enlighten (now Perficient Digital), there are tremendous benefits to using jQuery—not as a replacement for standard well-written JavaScript, but as a complement to it.
