DEV Community

Dinny Paul
Dinny Paul

Posted on

You Don’t Need jQuery

#javascript #jquery #webdev

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 OR Zepto.js 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 

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();
Enter fullscreen mode Exit fullscreen mode

JavaScript POST 

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);
Enter fullscreen mode Exit fullscreen mode

JavaScript JSONP Request For Cross Domain Call 

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);
Enter fullscreen mode Exit fullscreen mode

JavaScript HIDE & SHOW 

el.style.display = 'none';//HIDE
el.style.display = '';//SHOW
Enter fullscreen mode Exit fullscreen mode

JavaScript Find 

el.querySelectorAll(selector);
Enter fullscreen mode Exit fullscreen mode

JavaScript After 

el.insertAdjacentHTML('afterend', htmlString);
Enter fullscreen mode Exit fullscreen mode

JavaScript Before 

el.insertAdjacentHTML('beforebegin', htmlString);
Enter fullscreen mode Exit fullscreen mode

JavaScript Append 

parent.appendChild(el);
Enter fullscreen mode Exit fullscreen mode

JavaScript Prepend 

parent.insertBefore(el, parent.firstChild);
Enter fullscreen mode Exit fullscreen mode

JavaScript Remove 

el.parentNode.removeChild(el);
Enter fullscreen mode Exit fullscreen mode

JavaScript Get Html 

el.innerHTML
Enter fullscreen mode Exit fullscreen mode

JavaScript Get Text 

el.textContent
Enter fullscreen mode Exit fullscreen mode

JavaScript Get Attributes 

el.getAttribute('attributeName');
Enter fullscreen mode Exit fullscreen mode

JavaScript Get Style 

window.getComputedStyle(el, null).getPropertyValue("background-color");
Enter fullscreen mode Exit fullscreen mode

JavaScript Get Outer Html 

el.outerHTML
Enter fullscreen mode Exit fullscreen mode

JavaScript Add Class 

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
Enter fullscreen mode Exit fullscreen mode

JavaScript Remove Class 

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace
(new RegExp('(^|\\b)' + className.split(' ').join('|') 
+ '(\\b|$)', 'gi'), ' ');
Enter fullscreen mode Exit fullscreen mode

JavaScript Set Html 

el.innerHTML = string;
Enter fullscreen mode Exit fullscreen mode

JavaScript Set Text 

el.textContent = string;
Enter fullscreen mode Exit fullscreen mode

JavaScript Set Attributes 

el.setAttribute('attributeName','attributeValue');
Enter fullscreen mode Exit fullscreen mode

JavaScript Set Style 

// Use a class if possible
el.style.borderWidth = '20px';
Enter fullscreen mode Exit fullscreen mode

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

Top comments (8)

Collapse
 
prahladyeri profile image
Prahlad Yeri • • Edited

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

That I think is the epitome of exaggeration! People don't seem to have any qualms about linking megabytes of bloat for "modern" things like vue, angular2, react, etc. for even announcement sites, and 30kb is suddenly a huge deal? If anything, this reflects nothing but people's prejudice towards jQuery.

Collapse
 
kdinnypaul profile image
Dinny Paul • • Edited

It's not exaggeration have you read about render blocking javascript here's a link RenderBlockingJS

The problem is your js code can run only after your jquery is loaded and that is a huge disadvantage

In this article I'm comparing jQuery and pure javascript so that is disadvantage over pure javascript code which doesn't require an external js file besides the point the main reason why jQuery is bloated is to give support to old browsers which most ppl don't use anymore that's why I also suggested jQuery alternatives in this article

Now I didn't even mention about the external css required by Jquery in this article if you are going to display dialogs and other UI related stuff which slows your page even more

BTW I learned jQuery even before pure javascript and I wasted a lot of time in replacing jQuery I just want other developers to avoid it completely because time's have changed and with attention spans reducing more than ever even a second delay can have a huge impact on user experience

Collapse
 
jjlabajo profile image
JJ Labajo •

I agree. And I feel the exaggeration, too, while reading.

Collapse
 
mervinsv profile image
Mervin • • Edited

Oh! This is great.

Currently working on a project with almost everything are jquery. But wanted to remove jquery and start using pure javascript.

But the problem is we still need to import jquery because we are using a lot of jquery libraries like Bootstrap. Any suggestions about that?

Collapse
 
kdinnypaul profile image
Dinny Paul •

You could try zepto.js but I don't know if it supports bootstrap completely, what you can do is try to remove jquery slowly or at least for DOM manipulation initially

Collapse
 
mervinsv profile image
Mervin • • Edited

Okay. Thanks.

But I got this zurb.com/blog/why-we-dropped-zepto

Collapse
 
markel profile image
Markel F. •

Super useful stuff, love it. JSON requests always made me go back to JQuery, cross-site policy is a little bit annoying 🙄.

Collapse
 
kdinnypaul profile image
Dinny Paul •

Cross-site policy is annoying but you can use the below JSONP pure javscript code though

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);

Read next

thangchung profile image

CoffeeShop App Infused with AI - Intelligent Apps Development

Thang Chung -

testifytech profile image

Retail Application Testing: What It Is & Why Your App Needs It

Steve Wortham -

carrie_luo1 profile image

SafeLine WAF Waiting Room: The Terminator of HTTP Flood DDoS Attack

Carrie -

me_bhavesh profile image

How to Verify gtag.js Implementation in GA4

Bhavesh Patel -