You Don’t Need jQuery
Tags: javascript, jquery, webdev
Published: 2019-06-28 11:07:20

Ever wondered Why jQuery? is the most used Javascript library in the world and the most criticized one at the same time.

Well, jQuery has many advantages like it’s easy to use, it can manipulate web pages with few lines of code and its cross browser compatible, so why shouldn’t we use it?, the only problem is that it impacts web performance a lot.

Even a second delay can impact your website heavily, research shows that a one-second delay in site loading time will lead to a 7 percent loss in conversion, for Amazon, a one-second delay will result in a loss of $1.6 billion annually.

##Why is jQuery Slow?

First and foremost in order to use jQuery you need to add an external javascript file like jquery.min.js which is of 30 kb size gzipped which will result in a 7 millisecond delay which doesn’t seem much but it adds up because you have to add it before your javascript code and most people add it into header so even that 7 millisecond delay is a lot, if you are on a mobile connection or slow internet then that delay increases drastically.

Now of course if you have added google’s jQuery url like https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js then its probably cached by the browser because a lot of websites use the same url and will load faster but its still an external call that too to a domain other than your own website which will add a small delay.

Apart from the delay caused by the external file, jQuery is much slower than pure javscript for example when appending a node to the DOM requires just a single call for Vanilla javscript, which interact directly with the DOM API, whereas jQuery runs a lot of operations for manipulating the DOM
which let me tell you matters a lot, nobody likes a website that is slow to use, I mean users could at one point accept the initial delay but they will not tolerate delay while they are interacting with the website.

##Conclusion

So what should we do ?, Should we remove jQuery from every project?, well its not that easy to replace jQuery with pure javascript.

We could avoid using it though or replace it with some lightweight jQuery alternative like [Cash](https://github.com/kenwheeler/cash) OR [Zepto.js](https://github.com/madrobby/zepto) or completely replace jQuery with pure javascript as they are supported by all modern browsers (IE9+), and are faster than jQuery.

if you want to replace jQuery with pure javascript below are some important code alternative to jQuery in pure javascript.

##JavaScript GET Request
```javascript
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error
  }
};
request.onerror = function() {
  // There was a connection error of some sort
};
request.send();
```

##JavaScript POST

```javascript
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
```
##JavaScript JSONP Request For Cross Domain Call
```javascript
function onFetchComplete(data) {console.log(data);}

var script = document.createElement('script');

script.src = 'https://en.wikipedia.org/w/api.php?action=query&generator=random'+
'&grnnamespace=0&prop=extracts'+
'&exchars=500&format=json&callback=onFetchComplete';

document.body.appendChild(script);
```

##JavaScript HIDE & SHOW
```javascript
el.style.display = 'none';//HIDE
el.style.display = '';//SHOW
```

##JavaScript Find
```javascript
el.querySelectorAll(selector);
```

##JavaScript After
```javascript
el.insertAdjacentHTML('afterend', htmlString);
```

##JavaScript Before
```javascript
el.insertAdjacentHTML('beforebegin', htmlString);
```

##JavaScript Append
```javascript
parent.appendChild(el);
```

##JavaScript Prepend
```javascript
parent.insertBefore(el, parent.firstChild);
```

##JavaScript Remove
```javascript
el.parentNode.removeChild(el);
```

##JavaScript Get Html
```javascript
el.innerHTML
```

##JavaScript Get Text
```javascript
el.textContent
```
##JavaScript Get Attributes
```javascript
el.getAttribute('attributeName');
```
##JavaScript Get Style
```javascript
window.getComputedStyle(el, null).getPropertyValue("background-color");
```
##JavaScript Get Outer Html
```javascript
el.outerHTML
```
##JavaScript Add Class
```javascript
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
```
##JavaScript Remove Class
```javascript
if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace
(new RegExp('(^|\\b)' + className.split(' ').join('|') 
+ '(\\b|$)', 'gi'), ' ');
```
##JavaScript Set Html
```javascript
el.innerHTML = string;
```
##JavaScript Set Text
```javascript
el.textContent = string;
```
##JavaScript Set Attributes
```javascript
el.setAttribute('attributeName','attributeValue');
```
##JavaScript Set Style
```javascript
// Use a class if possible
el.style.borderWidth = '20px';
```

##References
http://youmightnotneedjquery.com/
https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3