There have been discussions on how jQuery, a popular JavaScript library, is dead/dying.
With the rise of modern libraries, frameworks, the standardization of browser APIs, and the decline of job postings that require jQuery skills there is a concern around developers continuing to learn jQuery.
In this post, I will give a run through of jQuery, its history, strengths, weaknesses, why you might still want to use it, and how to get started in 2020.
According to jQuery’s official documentation:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Basically, it is a JavaScript library that was built to make DOM manipulations possible at a time when accessing the DOM and doing certain things with JavaScript were practically impossible in older browsers. It made it easier and simpler to write JavaScript and HTML.
The library’s popularity increased when Microsoft and Nokia announced their public support for it in September 2008 and it has maintained at the top in terms of JavaScript library and framework interests within developers until recently, when it has seen many notable companies and libraries that used jQuery as a dependency (GitHub, Bootstrap 5) drop support for it. This has caused a sharp decline in usage and many questions asked on popular platforms like Reddit and StackOverflow.
You can learn more about the history and legacy of jQuery here.
It has several nice features that people find helpful.
Some of them include:
Using jQuery comes with its cost. Some of the reasons why developer interests in jQuery waned are:
According to BuiltWith, a web technology statistics aggregator, jQuery powers over 79% of the top 1 million websites in the world and it takes a huge 65% of the JavaScript library usage.
One reason it is still as popular is that many projects still depend on it (Example: Bootstrap 4.0 and below, the majority of the WordPress plugins and themes are built using jQuery) and there are also legacy code-bases that depend on jQuery.
Below are some of the suitable alternatives to popular functions of jQuery.
To select something in jQuery we would normally do something like:
// The selector name can be replaced with either an ID, a Class name or tag name
$("selectorName") // #selectorName or .selectorName
This can be achieved in using the HTML5 DOM API with either:
document.querySelector("selectorName") //gets a single item
or
document.querySelectorAll("selectorName") //gets a group of items
.append()
method to insert the content between parentheses to the end of the element(s) specified by a selector.
$("selectorName").append( "Your content goes here")
its vanilla equivalent can be done like :
let element = document.querySelector('selectorName');
let text = document.createTextNode("your content");
element.appendChild(text);
.addClass()
method to add the specified class(es) to each element in the set of elements which are specified by the selector.
$('selectorName').addClass('className');
its vanilla equivalent:
let element = document.querySelector("selectorName");
element.classList.add('className')
Listening for click
events:
$('selectorName').on('click',function(e) {
//do something
});
its vanilla equivalent:
let clickedMe = document.querySelector('button');
clickedMe.addEventListener('click', (e) => {
//do something
})
jQuery Ajax HTTP requests are made like this:
$.ajax({
url: 'http://example.com/movies.json',
type: 'GET'
success: (response) => {
console.log(response)
}
error: (errors) => {
console.log(error)
}
})
This can be replaced with using the JavaScript fetch
API that lets you make asynchronous requests. It returns data as a “Promise”.
fetch('http://example.com/movies.json',
{method: 'GET',
headers: {'Content-Type': 'application/json'},
}){
.then(response => response.json())
.catch(error => console.log(error))
}
While Fetch is better than AJAX, they are different because Fetch uses promises and the promise returned wouldn’t reject on HTTP status error. Fetch also won’t send or receive cookies from the server.
HTTP requests can also be implemented using a specialized library like axios.
Axios is a promise based open source library for making HTTP requests.
To use axios you can either install it via npm:
npm install axios --save-dev
Then you would import it in your file like this:
import axios from 'axios'
or
you can include axios using CDN.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({
method: 'get',
url: 'http://example.com/movies.json',
responseType: 'json'
})
.then(function (response) {
});
To get your app or website supported across browsers and to work on older browsers, one can use transformation tools such as Babel that convert (transpiles) ES6 code to browser-compatible code that can be understood across browsers with the help of polyfills for specific features alongside other tools such as Autoprefixer, PostCSS, etc.
Animations in jQuery are implemented via the .animate
method.
$(selectorName).animate(
{parameters},
speed,
callback
);
Animating content on your website can be achieved by using CSS animations.
An important CSS tool for animating content is @keyframes
which is used to define the styles to be applied at stages and the animation
property or its sub-properties which is bound to a selector, It specifies how to apply the keyframes styles and when to apply them.
p{
animation-name: animated;
animation-duration: ;
}
@keyframes animated{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
See the Pen OeGpNE by Anjolaoluwa (@jola_adebayor)
on CodePen.
Animations can also be achieved using libraries such as animate.css.
One of the major reasons jQuery has seen less usage is the rise of JavaScript libraries and frameworks such as React JS, Angular JS and Vue JS, in this section we will look at what sets them apart.
jQuery | React JS | Angular JS | Vue JS | |
---|---|---|---|---|
Type | Library | UI library | Full-featured framework | Scales between a library and a full-featured framework. |
Architecture | Modular | A component-based library that handles only the View of your app | Full-fledged component-based MVC framework | Component-based, focuses on the ViewModel layer of the MVVM pattern |
DOM interactions | Updates the DOM directly | Uses a virtual DOM that interfaces with the real DOM | Updates the DOM directly | Uses a virtual DOM that interfaces with the real DOM |
Data binding | Databinding methods | |||
with plugins to achieve 2-way dataflow | One way data-flow | Two-way data binding can be achieved with ngModel | Reactive data binding system |
Two-way data can be achieved with V-model
|
| State management | Can be achieved using specialized libraries | Context API, Redux | Third-party libraries such as NGRX, NGXS, etc | Vuex |
| Templating | JavaScript | JavaScript (JSX) | TypeScript and Angular directives | HTML, CSS, JavaScript and Vue directives |
| Learning curve | Low | Low but strong knowledge of JavaScript is needed | High | Low all one needs is basic knowledge of JavaScript to get started |
.animate
method.To use jQuery in your project there are a couple of methods to get started.
The latest version at the time of writing this article is version 3.4.1 download the compressed, production version or the uncompressed, development version.
You can include it in your project like this:
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
As an alternative, you can use package managers:
npm install jquery
or
yarn add jquery
and import it like this:
import * as jQuery from 'jquery';
Or use the CDN version by including either of the following in your project**:**
Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Microsoft CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"> </script>
While modern trends show a shift with developers moving from jQuery to newer libraries and frameworks, the library is still very much alive and actively used, as it has functions that are relatively easier to implement than vanilla methods.
The low skill-demand rate also suggests that one might be better off using newer libraries/framework as there are more job opportunities.
I would advise knowing jQuery and how to implement basic things in it (added knowledge wouldn’t hurt) should there be a need to use it in a project. The documentation provides an excellent resource to get started with.
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch