Why do we need jQuery?

Hello ladies and gentlemen! For nearly ten years have passed since the first release of the jQuery library, and we decided to shake off the dust of centuries from the classics. We are thinking about the release of the third edition of the hussar ballad about this library:


To explain what it attracts us to the era of Node and ES6 (in our assortment and this good in bulk ) offer to meet with Article Cody Lindley, published shortly after the aforementioned third edition

Since a long time did not cease talking about jQuery uselessness, I just can not get rid of the thought that we forgot the core value of jQuery. Time to remind her.

In this article I would like to tell everyone again what jQuery is, since today it is no less relevant than at the time of its appearance. The question of its importance must be correlated with the original purpose of the whole solution (that is, the jQuery API itself), and not with browser bugs or missing features. If we proceed from something else, then we risk taking a position from which any abstraction is rejected, which may not be absolutely necessary , but, nevertheless, powerful and useful.

Before I start ardently defending the honor of jQuery, let's go back to its origins, so that everyone understands what jQuery is and why it is needed.

What is jQuery?

jQuery is a JavaScript library (i.e., it is written in JavaScript) designed to abstract, align, fix and simplify scripting when working with HTML element nodes in a browser or for working in a browser without a graphical interface .

So:

• The document object model interface (aka the DOM API) is abstracted .
• All differences between DOM implementations that exist between browsers are aligned.
• Known browser- related bugs related to CSS and DOM are fixed .

All this turns into a simpler and less clumsy API than the native DOM API - here you have the jQuery library.

Now let me explain what I mean by “scripting HTML elements”. Using jQuery, tasks like “visually hide the second element h2in a .html document are completely trivial . The jQuery code for such a task would look like this:

jQuery('h2:eq(1)').hide();

Let's take a look at this line with jQuery code. First, a function is called jQuery(), we pass it a special CSS selector of the jQuery library, which selects the second element h2in the HTML document. Then the jQuery method is called .hide(), hiding the element h2. Here's how simple and semantically expressive jQuery code is.

Now compare it with the native DOM code that you would need to write if we had not worked with jQuery.

document.querySelectorAll('h2')[1].style.setProperty('display','none');

Which option would be more convenient to write? A read and debug? Also note that the above native DOM code assumes that all browsers support the DOM methods used here. However, it turns out that some older browsers do not support querySelectorAll()or setProperty(). Therefore, the above jQuery code would work fine in IE8, and native DOM code would throw a JavaScript error. But still, even if both lines of code worked everywhere, which one would be easier to read and write?

When dealing with jQuery, you don’t have to worry about which browser supports what, or which DOM API in which browser may crash. Working with jQuery, you can work faster to solve problems with simpler code, and do not worry, since jQuery abstracts many problems for you.

jQuery = JavaScript?

Since jQuery is ubiquitous, you probably have no idea where JavaScript ends and jQuery begins. For many web designers and novice HTML / CSS developers, the jQuery library is the first contact with the JavaScript programming language. Therefore, jQuery is sometimes confused with JavaScript.

First of all, let's make a reservation that JavaScript is not jQuery or even the DOM API itself. jQuery is a third-party free library written in JavaScript and supported by a whole community of developers. In addition, jQuery is not among the standards of those organizations (e.g. W3C) that write HTML, CSS, or DOM specifications.

Remember that jQuery serves primarily as sugar and is used on top of the DOM API. This sugar helps to work with the DOM interface, which is notorious for its complexity and an abundance of bugs.

jQuery is just a useful library that you can use when writing scripts for HTML elements. In practice, most developers resort to it in DOM scripting, since its API allows you to solve more problems with less code.

The jQuery library and its plugins are used by developers so widely that such code is often praised as the most popular scripts throughout the Web.

Two cornerstones of jQuery

The two basic concepts that jQuery is based on are: “find and do” and “write less, do more.”
These two concepts can be expanded and reformulated as the following statement: jQuery's primary task is to make choices (that is, find) or in creating HTML elements to solve practical problems. Without jQuery, this would require more code and more skill in handling the DOM. It is enough to recall the above example with the concealment of an element h2.

It should be noted that the range of jQuery features is not limited to this. It not only abstracts native DOM interactions, but also abstracts asynchronous HTTP requests (called AJAX ) using the XMLHttpRequest object. In addition, it also has a number of supportive JavaScript solutions and small tools . But the main benefit of jQuery is precisely the simplification of HTML-scripting and just that it is pleasant to work with it.

I also add that the benefit of jQuery is not in successfully eliminating browser bugs. The cornerstones are not at all related to these aspects of jQuery. In the long run, the greatest strength of jQuery is that its API abstracts the DOM. And this value is not going anywhere.

How jQuery blends with modern web development

The jQuery library has been around for ten years. It was created for the era of web development, which we have already definitely passed. jQuery is not an indispensable technology for working with the DOM or for performing asynchronous HTTP requests. Almost everything that can be done with jQuery can be done without it . And if you are interested in just a couple of small simple interactions with the DOM in one or two modern browsers, then it might be better to use native DOM methods, rather than jQuery .

However, for any development related to the BOM ( browser-based document model) or DOM, and not just with cosmetic interactions, use jQuery. Otherwise, you will reinvent the wheel (i.e. elements of jQuery abstractions), and then experience it on all kinds of tracks (i.e. in mobile browsers and PC browsers).

Experienced developers know what “standing on the shoulders of giants” means, and when to avoid excessive complexity. In most cases, we still can’t do without jQuery when we need to do non-trivial work related to HTML and DOM in a short time.

In addition, even if jQuery did not solve a single problem with the DOM or with varied browser implementations of the DOM specification, the importance of the API itself would not have diminished, since it is so convenient for HTML scripting.

Moreover, jQuery is being improved, and with its help programmers can work more intelligently and faster. This is the situation today, and it was at the time of the creation of the library. Saying “I don’t need jQuery” is the same as saying “I can do without lo-dash or underscore.js”. Of course, you can do without them. But their value is not judged by this.
Their value is in the API. Due to excessive complexity, development may slow down. Therefore, we like things like lo-dash and jQuery - everything is simplified with them. And since jQuery makes it easy to perform complex tasks (for example, writing scripts for HTML), it does not become obsolete.

If you still doubt whether jQuery is needed in modern web development, I suggest watching the next presentationfrom one of the developers of the library, where he justifies its necessity regardless of the bells and whistles of modern browsers .

Appendix - Important Facts About jQuery

Finally, I’ll list some important facts about jQuery.

• The jQuery library was written by John Resig, and was released on August 26, 2006. John admitted that he wrote this code to “revolutionize the interaction of JavaScript with HTML.”
• jQuery is considered the most popular and sought after modern JavaScript library.
• jQuery is free software licensed under the MIT .
• There are two versions of jQuery. Version 1.x supports Internet Explorer 6, 7, and 8, and 2.x only supports IE9 +. If you need support for IE8, you will have to work with version 1.x. But this is normal, both versions are still being actively developed .
• The minimum version of jQuery 2.x is 82kb. In the Gzip archive - about 28k .
• The minimum version of jQuery 1.x is 96kb in size. In the Gzip archive - about 32k.
• JQuery source code is available on Github.
• Based on the source code with Github, you can create your own version of jQuery.
• jQuery can be installed using the bower or npm package manager (i.e. $ bower install jquery or npm install jquery).
• JQuery has an official CDN network where you can get various versions of jQuery.
• jQuery has a simple plugin-based architecture, so anyone can add their own methods to it.
• jQuery has an extensive set of plugins. You can purchase high-quality plugins for enterprise development (e.g. Kendo UI) or use no less cool free plug-ins (e.g. Bootstrap).
• jQuery can be categorized (according to the breakdown of the API documentation).

• ajax
• attributes
• callbacks object
• core
• CSS
• data
• deferred object
• dimensions
• effects
• events
• forms
• internals
• manipulation
• miscellaneous
• offset
• properties
• selectors
• traversing
• utilities