jQuery: deprecated?

The rise and fall of jQuery.

It’s official. Bootstrap 5 has removed jQuery as a dependency and instead has been replaced with vanilla javascript. The bootstrap team opened a pull request with the aim to remove jQuery entirely.

Once, one of the most popular libraries for web devs and js-enthusiasts alike jQuery is slowly becoming nothing more than background noise. According to a statistic, 77.8% of all websites still use jQuery. But, with the progression of time developers have proceeded to use faster and better frameworks built on top of JavaScript.

According to The State of JSfrom 2018, jQuery is currently listed under other libraries and almost ranking dead last only above haxe.[who now?]

The stack overflow developer survey of 2016, recorded jQuery as being the 7th most popular technologies. Fast track to 2018/2019, jQuery wasn’t even included in as one of the popular technologies while frameworks like React, Angular are ranked amongst the most popular and loved frameworks and libraries.

jQuery was introduced in 2006 and revolutionized the industry by being the “Write less, do more” JavaScript library. It became the go to library due to its lightweight nature, and ability to condense multiple lines of javascript code making the codebase much more readable.

Despite all this, why is jQuery dying out?

Let’s establish some facts and make some comparisons between jQuery and frameworks like react.

jQuery vs React

Virtual DOM

The biggest difference that separates jQuery and React is the use virtual-DOM. While jQuery directly interacts with the DOM to manipulate elements, react uses a specialized virtual-dom. A virtual-dom creates and snapshot of the DOM tree and keeps track of changes in elements then updates only the elements that have been changed. This efficient implementation saves a ton of time because the entire DOM tree doesn’t have to re-render in order to update one element.

More on DOM trees here: DOM and Virtual DOM

2. JSX

While JSX is a templating library introduced by the react team, it is one of the best things that we can use to write code. From the react.js docs,

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

3. Imperative vs Declarative code style

jQuery uses an imperative programming paradigm where devs have to explicitly tell the computer how to do something. While modern frameworks like react use a declarative programming paradigm where a programmer tells the computer what to do but not how to do it.

Imperative programming style: Code from codeburst

const container = document.getElementById('container');
const btn = document.createElement('button');

btn.className = 'btn red';
btn.onclick = function(event) {
 if (this.classList.contains('red')) {
   this.classList.remove('red');
   this.classList.add('blue');
 } else {
   this.classList.remove('blue');
   this.classList.add('red');
 }
};

container.appendChild(btn);

Declarative programming style

this.state = { color: 'red' }

handleChange = () => {
    const color = this.state.color === 'red' ? 'blue' : 'red';
    this.setState({ color });
  }

render() {
    return (<div>
      <button 
         className=`btn ${this.state.color}`
         onClick={this.handleChange}>
      </button>
    </div>);

Functional programming

JavaScript is one of those high-level languages that has really decent support for functional programming. But jQuery is meant to be used as an imperative language (as discussed above) where data types, the DOM are meant to be immutable which means, jQuery does not quite support functional programming methods.

Functional programming in React is really cool.

function GreetSomeone(props) 
{ 
 return (
    <div>Hello, {props.name}!</div>
  });
 ReactDOM.render(  <GreetSomeone name="Bob" />, document.getElementById('app')

More on functional programming in react: functional react.

Fetch vs .ajax()

When, jQuery came up with .ajax () it was quite amazing. Before that ajax requests were made in javascript like this:

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;

But with jQuery, Ajax calls started looking like this:

$.ajax({url: "demo_test.txt", success: function(result){
      $("#div1").html(result);
    }});

Along comes fetch.

Fetch uses JavaScript promises to deal with Ajax requests. Promises from MDN

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Fetch deals with error handling in better way than .ajax. With fetch, you can chain promises (.then()) methods to do stuff.

Fetch is inbuilt ES6 on and can be written as easily as:

fetch('https://api.github.com/users')
    .then(res => res.json())//response type
    .then(data => console.log(data)); //log the data;

More on promises and error chaining: Promise

Conclusion

Understanding differences between jQuery and other alternatives is crucial. This post wasn’t meant to diss on jQuery but a reality check in terms of the future of JavaScript. Libraries should be used only if needed be and jQuery is no exception. But my personal opinion is that, If Vanilla js cannot be used then there are many better alternatives out there that are better, faster and more light-weight than jQuery.

RIP.

jQuery: deprecated?

Despite all this, why is jQuery dying out?

jQuery vs React

Conclusion

References