What is jQuery?
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.
- 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.
- 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.
- 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.
- 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.
- 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.
Revisiting our initial question: Should your website 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 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.