I don't need jQuery anymore, so don't you perhaps!
Tags: jquery, javascript
Published: 2019-11-14 12:09:01

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.

![I'm Ready](https://media1.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy.gif?cid=790b76116d8039cccd8fa6fa9a2251b02d9a9d6a6e91fe94&rid=giphy.gif)
<figcaption>This GIF has nothing to do with the post I just love GIFs. LOL</figcaption>

#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):
```vue
<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:
```html
<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.

```html
<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:
```javascript
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)
```javascript
$.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:
```javascript
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:
```javascript
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`:
```javascript
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:

```javascript
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!__