jQuery — JavaScript library in the world. The web development community created it in the late 2000s, leading to the emergence of a rich ecosystem of websites, plugins, and frameworks that use jQuery under the hood.
However, in recent years, its status as the primary tool for web development has diminished. Let's explore why jQuery became popular and why it has fallen out of favor, as well as in what cases it is still reasonable to use it for modern website creation.
A Brief History of jQuery
John Resig () created the first version of the library in 2005, and -th, at an event called BarCampNYC. On the the author wrote:
jQuery is a JavaScript library based on the motto: Programming in JavaScript should be enjoyable. jQuery takes frequent, repetitive tasks, strips away unnecessary markup, and makes them short, elegant, and understandable.
jQuery has two main advantages. The first is a convenient API for manipulating web pages. In particular, it provides powerful methods for selecting elements. You can select not only by ID or classes; jQuery allows writing complex expressions, for example, to select elements based on their relationships with other elements:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');Over time, the selection mechanism became a separate library called .
The second advantage of the library was that it abstracted the differences between browsers. In those days, it was difficult to write code that could reliably work in all browsers.
The lack of standardization meant that developers had to account for numerous differences between browsers and edge cases. Take a look at and search for jQuery.browser. Here's one example:
// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyState is valid
jQuery.safariTimer = setInterval(function(){
// loaded and complete are both valid states
if ( document.readyState == "loaded" ||
document.readyState == "complete" ) {
// If either one are found, remove the timer
clearInterval( jQuery.safariTimer );
jQuery.safariTimer = null;
// and execute any waiting functions
jQuery.ready();
}
}, 10);
}Thanks to jQuery, developers could shift the concerns of all these pitfalls onto the shoulders of the team developing the library.
Later, jQuery made it easier to implement more complex technologies, such as animations and Ajax. The library effectively became a standard dependency for websites. Today, it powers a massive portion of the internet. W3Techs estimates that .
The control over jQuery's development also became more formalized. In 2011, the team In 2012, the jQuery Board.
In 2015, the jQuery Foundation merged with the Dojo Foundation,, which later combined with the Node.js Foundation into form the, where jQuery was one of the ".»
Changing circumstances
However, in recent years, jQuery . GitHub. Bootstrap v5 , because it is its "" (currently 30 KB, minified and packed). Several trends in web development have weakened jQuery's position as a necessary tool.
Browsers
For a number of reasons, differences and limitations of browsers have become less significant. First, standardization has improved. Major browser developers (Apple, Google, Microsoft, and Mozilla) are jointly developing within the.
Although browsers still differ from each other in several important ways, vendors at least have a means to seek and create a common base instead of a against each other. Accordingly, browser APIs have gained new capabilities. For example, can replace Ajax functions from jQuery:
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});Methods and duplicate the selection tools from jQuery:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Manipulating element classes can now be done with :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');On the website lists several other situations where jQuery code can be replaced with native code. Some developers still stick to jQuery simply because they are not aware of the new APIs, but once they find out, they start using the library less frequently.
Using native capabilities can enhance page performance. Many can now be implemented using CSS.
The second reason is that browsers are updating much faster than before. Most of them use a , except for Apple Safari. They can update in the background without user involvement and are not tied to OS updates.
This means that new browser features and bug fixes spread much faster, and developers do not have to wait for the share of will reach an acceptable level. They can confidently use new features and APIs without loading jQuery or polyfills.
The third reason is that Internet Explorer is approaching a state of complete obsolescence. IE has long been a bane of web development worldwide. Its characteristic bugs have been widely spread, and since IE dominated in the 2000s and did not employ a 'evergreen' update strategy, its old versions are still frequently encountered.
In 2016, Microsoft accelerated the phasing out of IE, version 10 and earlier, limiting support to IE 11. And more often, web developers can afford the luxury of ignoring compatibility with IE.
Even jQuery stopped supporting IE 8 and below starting with , released in 2013. And although support for IE is still required in some cases, for example, on older sites, such situations are becoming increasingly rare.
New frameworks
Since the emergence of jQuery, many frameworks have been created, including modern leaders like , and . They have two significant advantages over jQuery.
Firstly, they allow easy separation of the user interface into components. Frameworks are designed to handle rendering and updating of the page. jQuery is typically used only for updates, placing the task of providing the initial page on the server.
On the other hand, React, Angular, and Vue components allow for a close coupling of HTML, code, and even CSS. Just as we separate the codebase into many self-contained functions and classes, the ability to break down the interface into reusable components simplifies the assembly and maintenance of complex sites.
The second advantage is that newer frameworks adhere to a declarative paradigm, where the developer describes how the interface should look, and the framework takes care of making all the necessary changes to achieve the desired outcome. This approach contrasts with the imperative approach typical of jQuery code.
In jQuery, you explicitly write out the steps to make any changes. In a declarative framework, you say, 'According to this data, the interface should look like this.' This can greatly ease the process of writing bug-free code.
Developers have adopted new approaches to website development, which has reduced the popularity of jQuery.
When to use jQuery?
So when should you you should use jQuery?
If the complexity of the project increases, it’s better to start with another library or framework that allows for meaningful complexity management, such as breaking the interface into components. Using jQuery in such sites initially may seem acceptable, but it will quickly lead to spaghetti code, where you won’t be sure which fragment affects which part of the page.
I have experienced such a situation, where any attempt to make changes feels like a daunting task. You can't be sure that you won't break anything because jQuery selectors depend on the HTML structure created by the server.
On the other end of the spectrum are simple websites that only require a bit of interactivity or dynamic content. In such cases, I also wouldn’t default to using jQuery because you can do much more with native APIs.
Even if I need something more powerful, I will look for a specialized library, such as for Ajax or for animations. This will be easier than loading the entire jQuery for minor functionality.
I think the best justification for using jQuery is that it provides comprehensive functionality for front-end development. Instead of learning various native APIs or specialized libraries, you can just read the jQuery documentation and become productive right away.
The imperative approach doesn’t scale well, but it’s easier to grasp than the declarative approaches of other libraries. For a site with clearly limited capabilities, it’s better to use jQuery and work comfortably: the library doesn’t require complex building or compilation.
Moreover, jQuery is good in cases where you are confident that the site will not become more complex over time and if you don't care about native functionality, which will undoubtedly require writing more code than jQuery.
You can also use this library if you need to support older versions of IE. Then jQuery will serve you as it did in the times when IE was the most popular browser.
A look into the future.
jQuery isn't going away anytime soon. It , and many developers prefer to use its API, even when native methods are available. The library has helped a whole generation of developers create websites that work across all browsers. And while in many respects it has been replaced by new libraries, frameworks, and paradigms, jQuery has played an enormous positive role in the creation of the modern web.
If the functionality of jQuery doesn’t change significantly, it is quite likely that its usage will continue to gradually, but steadily, decline over the next few years. New websites are typically built using more modern frameworks from the get-go, and suitable use cases for jQuery are becoming increasingly rare.
Some may not like the rapid obsolescence of web development tools, but for me, it’s a testament to quick progress. jQuery allowed us to do many things better. The same is true for its successors.
Source: habr.com
