Hey there Dev.to community.

I used to love jQuery and actually to be honest I learnt jQuery before JavaScript itself XD. I mean I knew jQuery was using it until getting deep down to JavaScript itself. So I feel kind of betraying jQuery while I'm writing this article.

I know there are tons of millions of articles about why we shouldn't use jQuery but this is going to be my personal experience as all of my posts.

What do I do without jQuery?

As the web grows and new technologies appear the previous ones fade out and will be a part of the history, like the programming languages that came and are gone now. In my opinion jQuery is no different and it's time to say goodbye to this beautiful library that made programming really enjoyable.

So why let jQuery go? If you have read my previous posts you might have guessed I'm a Vue.js developer and love Vue.js and if you haven't well you know it right now! Anyways Vue.js provides you lots of tools and I can say it is way more convenient than jQuery.

DOM and Events

Let's have an example of a click event which has to fire when user clicks on a specific element such as a button:
Keep that in mind I omitted setup part of both libraries/frameworks.

A Vue SFC (It's nothing scary it just stands for Single File Component):

<template>
    <button @click="handleClick">click please!</button>
</template>

<script>
    export default {
        methods: {
            handleClick() {
                alert('You clicked on the button! I know it!');
            }
        }
    }   
</script>

And the jQuery way:

<button id="myButton">Click por favor!</button>

<script>
    $('button#myButton').click({
        alert('You clicked on the button! But this time it is jQuery! ');
    });
</script>

So you might think Vue.js has more code, you are right but still wrong! How come? Vue.js doesn't have more code, actually the parts except for handleClick() { ... } are only a structure and are common between other actions. And I think Vue.js looks more clean and the code is more readable.

There still might be a question in your mind which says but you use Vue.js! What if not using it? Still you can do it using Vanilla JavaScript.

<button id="myButton">Click por favor!</button>

<script>
    document.getElementById('myButton').addEventListener('click', function() {
       alert('Say Hi to VanillaJS!'); 
    });
</script>

So literally jQuery actually translates to Vanilla JavaScript behind of our eyes and represents it like it is something special. XD

For DOM element selection you can use Vanilla JavaScript very easily:

document.getElementById('myButton'); // jQuery => $('#myButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
document.querySelectorAll('.parent .a'); // jQuery => $('.parent .a');

AJAX calls

So one of the mostly used cases for jQuery is its AJAX functionalities.
As we now jQuery provides $.ajax() which can be used as $.post() and $.get() specifically as well. These APIs will help you make AJAX calls and get the result and so on.

There are two methods in Vanilla JavaScript that you can use which happen to be XMLHttpRequest and fetch.

XMLHttpRequest is more old-school and has some differences comparing to fetch.

fetch is more cutting-edge to be said and is more used comparing to XMLHttpRequest and is promise-based.

fetch doesn't send cookies bu default and it doesn't reject if the HTTP status code returns an error code like 404 or 500 so basically the .catch() never runs but instead response.ok will turn to false.

Anyways comparing XMLHttpRequest and fetch are beyond the scope of this article.

So let's see two codes of fetch and $.ajax();

This is jQuery: (Pretty obvious LOL)

$.ajax({
  method: "POST",
  url: "http://localhost/api",
  data: { name: "Adnan", country: "Iran" }
}).done(response => console.log(response))
  .fail(() => console.log('error'));

Sample is from jQuery's official documentation.

And with fetch:

fetch(
    'http://localhost/api',
    {
        method: 'POST'
        body: { name: "Adnan", country: "Iran" }
    }
  ).then(response => console.log(response));

Both of these codes perform almost the same action but fetch isn't a part of a library like $.ajax.

Be aware that fetch can be used with async/await too like below:

async function getData() {
    let response = await fetch('http://localhost/api' {
        method: 'POST'
        body: { name: "Adnan", country: "Iran" }
    });
    return response;
}

Do I use fecth myself? Actually no since I don't trust it yet for plenty of reasons. So what I do is I use a library called 'axios' which is also promise-based and very reliable at the same time.

Exactly the code above will be like this using axios:

axios({
    method: 'POST',
    url: 'http://localhost/api',
    data: { name: "Adnan", country: "Iran" }
}).then(response => console.log(response))
  .catch(err => console.log(err));

axios can also be used with async/await like this:

async function getData() {
    let response = await axios.post('http://localhost/api' {
        name: "Adnan",
        country: "Iran"
    });
    return response;
}

Conclusion

I rather avoid using jQuery though I used to love it so much that I installed it first before anything else on my projects.

I believe jQuery is not needed anymore since other libraries/frameworks actually handle things in a much more convenient and clean way than jQuery.

Although some plugins depend on jQuery and jQuery is a must sometimes I avoided all of those plugins and used a similar Vue.js component or React.js component instead.

Let me know if I'm mistaken in any ways or if you have any questions in the comments section below.

Have fun and always challenge yourself with new things!