jQuery was released with much hype and an interesting tagline “Write less, do more” in the year 2006. Almost a decade has passed since jQuery saw the light of the day and this decade that has gone by, has made it a must have tool for every web developer. This discrete JavaScript library kept evolving and improving in the last 9 years and the stable release version of jQuery was made available for user download in April, 2015. The benefits and flexibility jQuery offers to web developers are many and unique.
The tagline “Write less, do more” is self explanatory to define how it has made life easy for HTML code writers. Multiple functions can be performed with a single line code with jQuery. jQuery also adds another dimension to web designing by providing cross-platform compatibility and efficient use of plug-ins.
An experienced web designer who has been using jQuery since its birth and seen it evolve will know what jQuery is all about, but for the benefit of readers who are new to the subject, I shall define jQuery in simple English. The significance of explaining what jQuery really is also becomes important as many are under the impression that JavaScript and jQuery are similar, but they really aren’t.
jQuery is an open source JavaScript library which is designed for making client side HTML scripting easy. jQuery is by far the most popular JavaScript library in use today. jQuery is a DOM (Document Object Model) manipulation library at its core, which is like a tree structure made up with elements of a web page. Finding and changing these elements with jQuery becomes very easy. It is basically the syntax of jQuery which provides it with such flexibilities. Another potential use offered by jQuery is for designing animations, slider effects and developing Ajax applications.
If I start writing down just about the benefits and functionalities of jQuery it would take me days, but that does not imply that jQuery does not have a down side or shortcomings. The IT industry is such that old technology is replaced by new in a jiffy and before you know it you are working with a new library, plug-in or framework, which you are not well acquainted with. But since jQuery has spent a few years with us, it is much easier to point out certain flaws it has and also discuss about the possible remedies and procedures to make use of the functionality of jQuery without any side-effects.
jQuery is an Overweight boy
The most serious disadvantage of jQuery is that it is overweight kb wise. jQuery is a single JavaScript file “jquery.js” which contains all its DOM, events, effects, and Ajax components. The file over time and development has gained a substantial amount of kb. The first version to come out was 1.2 which had a file size of 77.40 kb and the latest version 2.1.3 has an uncompressed size of 241.58 kb. Another thing to be kept in mind is that the already large code is ever expanding with newer versions. Although the gzipped jQuery file is good with just over 30kb of size, but the expanding size is larger than any CSS file and at times larger than an image.
If a web designer is opting for CSS for his website then performance is not an issue, as CSS is fast but jQuery due to its heavy size causes performance issues forcing web developers to pull out their hair in frustration. If a designer uses jQuery+ along with jQuery UI, then his first web page will contain at least 300kb of js code only. Loading time of the site will increase drastically thus cutting down the performance. A developer is often faced with difficulties when he looks for accessories like widgets, buttons etc. online from other sources instead of depending in jQuery’s library, but in the end is encountered with other problems like bugs, errors and compatibility issues etc. So it is better to depend on the jQuery library even though it may be heavy in size. The bottom line still remains that the user is at the receiving end as he is compelled to download the heavy library which requires more time to open. A web designer is advised at times to write the HTML from scratch to ensure a lighter code and reduced download time.
jQuery is unstructured
Along with the burden of huge size jQuery also has a major drawback that it is an unstructured library. After jQuery was introduced a lot of new browsers were introduced over time, which stressed the need for jQuery to expand its code base. The result was that a lot of jQuery code had to be re-written in order to make it compatible with new browsers. The finest example in this case would be of Internet explorer 8 which caused a huge code base expansion of jQuery. This process of re-writing the jQuery code swelled up the “jquery.js” file big time.
The usual procedures of making the library light like caching and compressing are also no good as even they can’t reduce the considerable load time, which takes a few seconds even on a good connection. Google’s Content Distribution Network (CDN) is a tool which can be used for caching jQuery to reduce the loading time, but that means you will have to depend on two systems to function properly in sync with each other to deliver the desired results.
Problem is not, what it doesn’t have, but what it shouldn’t have
jQuery has a major problem that it is repetitive in nature and that is what forms its bulge and makes it complicated at times. The library has many ways of doing the same thing, many procedures for creating the same function. Even an experienced web designer at times tends to get confused as to what strategy to adopt for performing a task. The process of documentation and remembering each and every method or shortcut becomes difficult.
Another major problem that arises out of this situation is that since web designing projects are team based assignments and team members often write HTML codes in parts and later exchange with each other, sometimes other team members are unable to understand the code that a particular team member has written due to use of different methodology that jQuery offers.
jQuery is a difficult library to understand
Learning and understanding jQuery is difficult as the abstractions it offers end up hiding the ugly parts of JavaScript. A designer at times might be able to tackle simple projects like slideshow’s etc. but the real problem starts when the requirement of DOM manipulation comes in for complicated assignments.
The possible steps you must take to ensure efficient use of jQuery and avoiding its side-effects
- Make sure that you are using the latest version of jQuery
Every new version of jQuery or any other library for that matter comes in with its set of new updates and bug fixes. It is always advisable for a web developer to go for the latest version of jQuery he can get his hands on. Yeah, sure it is not possible to update your old websites whenever a newer version of jQuery is released as the client might not be paying you for it, but when designing new one’s this should be a clear tactic. - Check jQuery plug-ins before you use them
A major benefit that jQuery offers to web developers is the use of plug-ins for enhancing the features and improving the functionality of the website. But plug-ins could back fire if not checked properly by the web designer. You might be well versed with jQuery but that does not imply that you are an expert when it comes to flawless coding. Trial and error methods must be employed by developers to check the integrity of a plug-in. The possible ways of testing are by cross browser and on a mobile device. - Employ caching techniques in your code
While writing a code you might require calling an element twice, for that you can cache the element by saving the jQuery selector into a variable. This will ensure that jQuery will not have to search the entire DOM tree again for your element. This is a procedure for reducing the loading time considerably. - Avoid jQuery if you can
Many web developers on reading this may stand up from their chair awestruck in disbelief, but you have read me correctly. Always remember that no tool is ever as big as the industry or the web designing concept. Web designing existed even before jQuery was born and will remain even after jQuery is replaced with a better tool. I can think of a quote I once heard on the same lines “people die, organizations don’t”. It would be most apt to compare jQuery with people and web designing with an organization. The good old CSS can be a perfect replacement for jQuery, for in my opinion jQuery is still no match for CSS.
In conclusion, jQuery might be dear to every web developer today, but it would be wrong to say that it cannot be replaced or avoided for creating a website. It sure makes web designing easy by providing short cuts for writing cumbersome codes, but it does come with its own set of riders.