jquery- in the world of JavaScript library. It was created by the web development community in the late 2000s, resulting in a rich ecosystem of sites, plugins, and frameworks that use jQuery under the hood.
But in recent years, its status as the premier web development tool has faltered. Let's take a look at why jQuery became popular and why it fell out of fashion, as well as when it is still appropriate to use it to create modern sites.
A Brief History of jQuery
John Resig () created the first version of the library in 2005, and -m, at an event called BarCampNYC. On the author wrote:
jQuery is a Javascript library based on the motto: Programming in Javascript should be fun. jQuery takes frequent, repetitive tasks, strips out all unnecessary markup, and makes them short, elegant, and easy to understand.
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 class, jQuery allows you to write 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 engine has evolved into a separate library .
The second advantage of the library was that it abstracted away differences between browsers. In those years, it was difficult to write code that could work reliably in all browsers.
The lack of standardization meant that developers had to take into account numerous differences between browsers and edge cases. Take a look at and search for jQuery.browser. Here is 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);
}And thanks to jQuery, developers could shift the worries about all these pitfalls onto the shoulders of the team developing the library.
More recently, jQuery has made it easier to implement more advanced technologies such as animations and Ajax. The library has actually become a standard dependency for websites. And today it powers a huge portion of the Internet. W3Techs believes that .
jQuery development control has also become more formalized. In 2011 the team . And in 2012 jQuery Board.
In 2015, the jQuery Foundation merged with the Dojo Foundation,, which then merged with the Node.js Foundation into-m to create, within which jQuery was one of the ". "
Changing circumstances
However, in recent years jQuery . GitHub. Bootstrap v5 'cause it's his"β (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, browser differences and limitations have become less important. First, standardization has improved. Major browser vendors (Apple, Google, Microsoft, and Mozilla) are collaborating on within the framework of.
Although browsers still differ from each other in a number of important ways, at least vendors have a tool to search and create a common database instead of together. Accordingly, browser APIs have gained new features. Eg, able to 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 ΠΈ duplicate the selectors from jQuery:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Element classes can now be manipulated using :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');The site Listed are a few more situations in which jQuery code can be replaced with native code. Some developers always stick with jQuery because they just don't know about the new APIs, but when they do, they start using the library less often.
Using native features can improve page performance. Many can now be implemented with CSS.
The second reason is that browsers update much faster than they used to. Most of them use , except for Apple Safari. They can be updated in the background without user involvement and are not tied to OS updates.
This means that new browser features and bug fixes are distributed much faster, and developers don't have to wait until the share reaches an acceptable level. They can confidently use new features and APIs without downloading jQuery or polyfills.
The third reason is that Internet Explorer is approaching a state of complete obsolescence. IE has long been the scourge of web development around the world. Its characteristic bugs were widespread, and since IE dominated the 2000s and did not use an "evergreen" update strategy, old versions of it are still common today.
In 2016, Microsoft accelerated the decommissioning of IE, tenth and earlier versions, limited to support for IE 11. And increasingly, web developers have the luxury of ignoring IE compatibility.
Even jQuery stopped supporting IE 8 and below starting with , released in 2013. And although in some cases IE support is still required, for example, on older sites, however, these situations are becoming less common.
New frameworks
Since the advent of jQuery, many frameworks have been created, including modern leaders , ΠΈ . They have two important advantages over jQuery.
First, they make it easy to separate the user interface into components. Frameworks are designed to handle page rendering and page refresh. And jQuery is usually only used for updating, leaving the task of providing the initial page to the server.
On the other hand, React, Angular, and Vue components allow you to tightly couple HTML, code, and even CSS. Just as we split the codebase into many self-contained functions and classes, the ability to split the interface into reusable components makes it easier to build and maintain complex sites.
The second advantage is that more recent frameworks follow a declarative paradigm, in which the developer describes how the interface should look like, and leaves the framework to make any necessary changes to achieve the desired. This approach is contrary to the imperative approach common to jQuery code.
In jQuery, you explicitly write the steps to make any changes. And in a declarative framework, you say: "According to this data, the interface should look like this." This can make writing bug-free code a lot easier.
Developers have adopted new approaches to site development, which is why the popularity of jQuery has decreased.
When to use jQuery?
So when should use jQuery?
If the complexity of the project grows, then it is better to start with another library or framework that allows you to manage complexity in a meaningful way. For example, to divide the interface into components. Using jQuery on these sites may seem acceptable at first, but it quickly leads to spaghetti code when you're not sure which fragment affects which part of the page.
I've been in this situation, when trying to make any change, there is a feeling of a difficult task. You can't be sure that you won't break anything, because jQuery selectors depend on the HTML structure generated by the server.
At the other end of the scale are simple sites that require only a bit of interactivity or dynamic content. In those cases, I wouldn't default to jQuery either, because there's so much more you can do with native APIs.
Even if I need something more powerful, I will look for a specialized library, for example, for Ajax or for animations. This will be easier than downloading all jQuery for a little functionality.
I think the best rationale for using jQuery would be that it provides a comprehensive front-end functionality. Instead of learning all sorts of native APIs or specialized libraries, you can just read the jQuery documentation and you'll be productive right away.
The imperative approach does not scale well, but is easier to learn than the declarative approach of other libraries. For a site with clearly limited features, it is better to use jQuery and work quietly: the library does not require complex assembly or compilation.
Also, jQuery is good if you're sure the site won't get more complex over time, and if you don't care about native functionality, which will definitely require more code than jQuery.
You can also use this library if you need to support older versions of IE. Then jQuery will serve you just like when IE was the most popular browser.
Prospection
jQuery is not going away anytime soon. She , 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 on any browser. While it has been replaced in many ways by new libraries, frameworks, and paradigms, jQuery has played a huge positive role in building the modern web.
Unless jQuery's functionality changes significantly, it's likely that library usage will continue to slowly but steadily decline over the next few years. New websites tend to be built using more modern frameworks from the start, and suitable use cases for jQuery are becoming rarer.
Some people don't like the rate at which web development tools become obsolete, but to me, it's evidence of rapid progress. jQuery has allowed us to do a lot better. The same is true for her successors.
Source: habr.com