{"id":38523,"date":"2019-10-31T22:24:17","date_gmt":"2019-10-31T19:24:17","guid":{"rendered":"https:\/\/prohoster.info\/blog\/istoriya-i-nasledie-jquery\/"},"modified":"2019-10-31T22:24:17","modified_gmt":"2019-10-31T19:24:17","slug":"istoriya-i-nasledie-jquery","status":"publish","type":"post","link":"https:\/\/prohoster.info\/en\/blog\/news\/istoriya-i-nasledie-jquery","title":{"rendered":"The history and legacy of jQuery.","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"The
\njQuery \u2014 the most popular<\/a><\/noindex> 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.<\/p>\n

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.
\n<\/a><\/noindex><\/p>\n

A Brief History of jQuery<\/h2>\n

\nJohn Resig (John Resig<\/a><\/noindex>) created the first version of the library in 2005, and it was published in 2006<\/a><\/noindex>-th, at an event called BarCampNYC. On the official jQuery website,<\/a><\/noindex> the author wrote:<\/p>\n

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.<\/p><\/blockquote>\n

\njQuery 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:<\/p>\n

\/\/ Select every item within the list of people within the contacts element\n$('#contacts ul.people li');<\/code><\/pre>\n
\nOver time, the selection mechanism became a separate library called Sizzle.<\/a><\/noindex>.<\/p>\n
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. <\/p>\n
The lack of standardization meant that developers had to account for numerous differences between browsers and edge cases. Take a look at this early jQuery source code<\/a><\/noindex> and search for jQuery.browser. Here's one example:<\/p>\n
\/\/ If Mozilla is used\nif ( jQuery.browser == \"mozilla\" || jQuery.browser == \"opera\" ) {\n        \/\/ Use the handy event callback\n        jQuery.event.add( document, \"DOMContentLoaded\", jQuery.ready );\n\n\/\/ If IE is used, use the excellent hack by Matthias Miller\n\/\/ http:\/\/www.outofhanwell.com\/blog\/index.php?title=the_window_onload_problem_revisited\n} else if ( jQuery.browser == \"msie\" ) {\n\n        \/\/ Only works if you document.write() it\n        document.write(\"<scr\" + \"ipt id=__ie_init defer=true \" + \n                \"src=javascript:void(0)><\/script>\");\n\n        \/\/ Use the defer script hack\n        var script = document.getElementById(\"__ie_init\");\n        script.onreadystatechange = function() {\n                if ( this.readyState == \"complete\" )\n                        jQuery.ready();\n        };\n\n        \/\/ Clear from memory\n        script = null;\n\n\/\/ If Safari  is used\n} else if ( jQuery.browser == \"safari\" ) {\n        \/\/ Continually check to see if the document.readyState is valid\n        jQuery.safariTimer = setInterval(function(){\n                \/\/ loaded and complete are both valid states\n                if ( document.readyState == \"loaded\" || \n                        document.readyState == \"complete\" ) {\n\n                        \/\/ If either one are found, remove the timer\n                        clearInterval( jQuery.safariTimer );\n                        jQuery.safariTimer = null;\n\n                        \/\/ and execute any waiting functions\n                        jQuery.ready();\n                }\n        }, 10);\n}<\/code><\/pre>\n
\nThanks to jQuery, developers could shift the concerns of all these pitfalls onto the shoulders of the team developing the library.<\/p>\n
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 74% of websites today use jQuery.<\/a><\/noindex>.<\/p>\n
The control over jQuery's development also became more formalized. In 2011, the team created the jQuery Board.<\/a><\/noindex>In 2012, the jQuery Board transformed into the jQuery Foundation.<\/a><\/noindex>.<\/p>\n
In 2015, the jQuery Foundation merged with the Dojo Foundation, to create the JS Foundation<\/a><\/noindex>, which later combined with the Node.js Foundation in 2019<\/a><\/noindex>to form the OpenJS Foundation<\/a><\/noindex>, in which jQuery was one of the \"breakthrough projects<\/a><\/noindex>.\"<\/p>\n
Changing circumstances<\/h2>\n
\nHowever, in recent years, jQuery has lost some of its popularity<\/a><\/noindex>. GitHub removed the library from its frontend site<\/a><\/noindex>. Bootstrap v5 will eliminate jQuery<\/a><\/noindex>, because it is its \"largest client-side dependency for plain JavaScript<\/a><\/noindex>\" (currently 30 KB, minified and packed). Several trends in web development have weakened jQuery's position as a necessary tool.<\/p>\n
Browsers<\/h3>\n
\nFor 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 web standards<\/a><\/noindex> within the Web Hypertext Application Technology Working Group<\/a><\/noindex>.
\nAlthough 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 perpetual war<\/a><\/noindex> against each other. Accordingly, browser APIs have gained new capabilities. For example, Fetch API<\/a><\/noindex> can replace Ajax functions from jQuery:<\/p>\n
\/\/ jQuery\n$.getJSON('https:\/\/api.com\/songs.json')\n    .done(function (songs) {\n        console.log(songs);\n    })\n\n\/\/ native\nfetch('https:\/\/api.com\/songs.json')\n    .then(function (response) {\n        return response.json();\n    })\n    .then(function (songs) {\n        console.log(songs);\n    });<\/code><\/pre>\n
\nMethods querySelector<\/a><\/noindex> and querySelectorAll<\/a><\/noindex> duplicate the selection tools from jQuery:<\/p>\n
\/\/ jQuery\nconst fooDivs = $('.foo div');\n\n\/\/ native\nconst fooDivs = document.querySelectorAll('.foo div');<\/code><\/pre>\n
\nManipulating element classes can now be done with classList<\/a><\/noindex>:<\/p>\n
\/\/ jQuery\n$('#warning').toggleClass('visible');\n\n\/\/ native\ndocument.querySelector('#warning').classList.toggle('visible');<\/code><\/pre>\n
\nOn the website You Might Not Need jQuery<\/a><\/noindex> 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.<\/p>\n
Using native capabilities can enhance page performance. Many animation effects from jQuery<\/a><\/noindex> can now be implemented much more efficiently<\/a><\/noindex> using CSS.<\/p>\n
The second reason is that browsers are updating much faster than before. Most of them use a \"evergreen\" update strategy<\/a><\/noindex>, except for Apple Safari. They can update in the background without user involvement and are not tied to OS updates.<\/p>\n
This means that new browser features and bug fixes spread much faster, and developers do not have to wait for the share of Can I Use<\/a><\/noindex> will reach an acceptable level. They can confidently use new features and APIs without loading jQuery or polyfills.<\/p>\n
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.<\/p>\n
In 2016, Microsoft accelerated the phasing out of IE, ceasing support for<\/a><\/noindex> version 10 and earlier, limiting support to IE 11. And more often, web developers can afford the luxury of ignoring compatibility with IE.<\/p>\n
Even jQuery stopped supporting IE 8 and below starting with version 2.0<\/a><\/noindex>, 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.<\/p>\n
New frameworks<\/h3>\n
\nSince the emergence of jQuery, many frameworks have been created, including modern leaders like React<\/a><\/noindex>, Angular<\/a><\/noindex> and Vue<\/a><\/noindex>. They have two significant advantages over jQuery.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
Developers have adopted new approaches to website development, which has reduced the popularity of jQuery.<\/p>\n
When to use jQuery?<\/h2>\n
\nSo when should you you should <\/i>use jQuery?<\/p>\n
If the complexity of the project increases, it\u2019s 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\u2019t be sure which fragment affects which part of the page.<\/p>\n
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.<\/p>\n
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\u2019t default to using jQuery because you can do much more with native APIs.<\/p>\n
Even if I need something more powerful, I will look for a specialized library, such as axios<\/a><\/noindex> for Ajax or Animate.css<\/a><\/noindex> for animations. This will be easier than loading the entire jQuery for minor functionality.<\/p>\n
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.<\/p>\n
The imperative approach doesn\u2019t scale well, but it\u2019s easier to grasp than the declarative approaches of other libraries. For a site with clearly limited capabilities, it\u2019s better to use jQuery and work comfortably: the library doesn\u2019t require complex building or compilation.<\/p>\n
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.<\/p>\n
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.<\/p>\n
A look into the future.<\/h2>\n
\njQuery isn't going away anytime soon. It is actively evolving<\/a><\/noindex>, 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.<\/p>\n
If the functionality of jQuery doesn\u2019t 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.<\/p>\n
Some may not like the rapid obsolescence of web development tools, but for me, it\u2019s a testament to quick progress. jQuery allowed us to do many things better. The same is true for its successors.
\n
Source: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"
jQuery \u2014 \u044d\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0432 \u043c\u0438\u0440\u0435 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043b\u043e \u0435\u0451 \u0432 \u043a\u043e\u043d\u0446\u0435 2000-\u0445, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044e \u0431\u043e\u0433\u0430\u0442\u043e\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c jQuery. \u041d\u043e \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0435\u0451 \u0441\u0442\u0430\u0442\u0443\u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0448\u0430\u0442\u043d\u0443\u043b\u0441\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 jQuery \u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0430 \u0432\u044b\u0448\u043b\u0430 \u0438\u0437 \u043c\u043e\u0434\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":28907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-38523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47The History and Legacy of jQuery | ProHoster","description":"jQuery \u2014","canonical_url":"https:\/\/prohoster.info\/en\/blog\/news\/istoriya-i-nasledie-jquery","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"en_US","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 jQuery | ProHoster","og:description":"jQuery \u2014","og:url":"https:\/\/prohoster.info\/en\/blog\/news\/istoriya-i-nasledie-jquery","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T19:24:17+00:00","article:modified_time":"2019-10-31T19:24:17+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"38523","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-23 22:22:33","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 01:07:40","updated":"2026-01-23 22:22:33","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/posts\/38523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/comments?post=38523"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/posts\/38523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/media\/28907"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/media?parent=38523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/categories?post=38523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/tags?post=38523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}