Why you shouldn't use jQuery and moving away from it

Good Afternoon Everyone,

I don't really leak stuff so I don't have any "resources" to share as such, but I want to share my knowledge of programming with you, I want to create a few different threads over the coming weeks, eaach on a different topic, this thread is based off this thread, where someone was recommending jQuery, there are also a few other threads, but I want to open your eyes to the world outside of jQuery, I am by no means a Javascript expert but I have quite a big of knowledge on the subject.

Today I would like to help you move away from jQuery to plain old Javascript, below I explain the reasons why and also go over some basic conversions.

What is jQuery?

jQuery was first released back in 2006, 13 years ago. jQuery came in because dealing with cross browser Javascript was tedious and quite hard. Especially with the likes of IE and other ancient browsers. We didn't have XHR in many browsers, and the Javascript library was very small, doing anything took a lot of a code, there were very few API's out there. Nowadays we have ES5/6 and have API's ranging from Streaming Video via WebRTC, Battery, GeoLocation, even WebGL allowing to build beautiful 3d games, right inside the browser, you can view alot of the API's on Mozilla' Developer Network (MDN - not to be confused with MSDN, Microsofts Developer Network)


So why move away from jQuery?

Nowadays we have ES5/6, we have transpilers such as TypeScript. We can write code much easier than before, and adding jQuery adds a lot of bloat to your web application. I would like to point out that jQuery is still shorter for a quite a few things, just not by much anymore. Websites should be fast, nimble and have the least amount of dependencies as possible especially when some of the most simple websites use 20 lines of jQuery yet feel the need to include a 30kb library - assuming you have gzipped and are distributing it correctly, of course there are scenarios such as when you are using a CDN where there may not be such an overhead.

TL;DR most websites don't need jquery and include bloat for no reason.

Show me some examples!

Ok let's take the homepage of jQuery.com and use their own examples.


So what is this doing? This selects all buttons on a page that have a class of .continue. It then replaces the inner HTML with "Next Step..." so how can we reproduce this in plain Javascript? Well it's a little more code as I explained but still simple.


So what we do is assign buttons a NodeList containing all the buttons on the page that also have the class of continue. We then look through them using a for of loop and simply replace the innerHTML. As you can see, it's not that much code to do it.

Our Next example is of event handling


So in our Javascript we need to hide or show on click, ideally you would want a css class for hiding and showing content then you would simply toggle that class



Again, slightly more code, ideally as mentioned, you would simply toggle the class of show/hide rather than applying style in Javascript.

Anyhow, I won't cover the last example as it deserves a topic on it's own as making requests can be quite complex, I also want to cover it more in depth.

I hope you liked the couple of examples given and they make sense. If you have any questions, feel free to leave them below and I will get back to you

Happy Programming ^_^

Hmmmmmm, interesting .

22-02-2019, 05:28 PM

blacklight524 Wrote: Hmmmmmm, interesting .

Great feedback thanks! :blobthink:

Hi! it's an interesting topic. I would say you can use jQuery (or any other library) if it make development easier for you. 30kb is not a problem today, so if you are creating a web site or an application for you or for one of your clients, and jQuery helps you to save some development time... then feel free to take it.

In the other hand, if you are creating a library, which will be used by other developers (an npm package for example) to solve an specific problem and it has nothing to do with jQuery capabilities, then you should take a few minutes and think if you really need to add a dependency to your library, when you could just create a few utility functions and avoid jQuery. Adding dependencies to a library (which is designed to be a dependency for other projects) creates a chain of future probable unsolvable malfunctions. As an example, right now I'm working on a project. My application depends on an npm package called "send", which additionally depends on another package called "mime". Now, mime was recently found to have a high severity security vulnerability. That means my application has a security vulnerability too, and I didn't even know I was having mime as a dependency. Now, the people developing the package "send" can't do nothing and we have to wait until mime's new release date, to be "free" of their vulnerability.
So, as I said, if you are creating a library, try to remember that any package you use is a possible future bug you will not be able to fix.

24-02-2019, 04:50 PM

lukenccc Wrote: Hi! it's an interesting topic. I would say you can use jQuery (or any other library) if it make development easier for you. 30kb is not a problem today, so if you are creating a web site or an application for you or for one of your clients, and jQuery helps you to save some development time... then feel free to take it.

In the other hand, if you are creating a library, which will be used by other developers (an npm package for example) to solve an specific problem and it has nothing to do with jQuery capabilities, then you should take a few minutes and think if you really need to add a dependency to your library, when you could just create a few utility functions and avoid jQuery. Adding dependencies to a library (which is designed to be a dependency for other projects) creates a chain of future probable unsolvable malfunctions. As an example, right now I'm working on a project. My application depends on an npm package called "send", which additionally depends on another package called "mime". Now, mime was recently found to have a high severity security vulnerability. That means my application has a security vulnerability too, and I didn't even know I was having mime as a dependency. Now, the people developing the package "send" can't do nothing and we have to wait until mime's new release date, to be "free" of their vulnerability.
So, as I said, if you are creating a library, try to remember that any package you use is a possible future bug you will not be able to fix.

So webpack recommends by default around 200kb for a built application. If including jQuery that's almost a quarter of the size. Along with this, as developers, we are responsible for not just building applications, but building fast and lightweight websites. Also the majority of people simply include jQuery because they know no different, I hope this thread sheds some light, and maybe helps push a few people into learning more about Javascript itself .

You are of course entirely correct on the dependencies, might be worth a thread later.

Interesting idea. From the syntax, maybe jquery syntax more simple than vanilla javascript.

25-02-2019, 09:58 PM

informatics Wrote: Interesting idea. From the syntax, maybe jquery syntax more simple than vanilla javascript.

This is iterated multiple times in the thread.... jQuery is shorter in most cases. But nowadays it's not saving that much.

now everyone should know about this topic without it you will never be a website disigner.

The libs and frameworks need to be chosen regards the project. And trying to Keep It Simple.

21-02-2019, 04:53 PM

null0r Wrote: Good Afternoon Everyone,

I don't really leak stuff so I don't have any "resources" to share as such, but I want to share my knowledge of programming with you, I want to create a few different threads over the coming weeks, eaach on a different topic, this thread is based off this thread, where someone was recommending jQuery, there are also a few other threads, but I want to open your eyes to the world outside of jQuery, I am by no means a Javascript expert but I have quite a big of knowledge on the subject.

Today I would like to help you move away from jQuery to plain old Javascript, below I explain the reasons why and also go over some basic conversions.

What is jQuery?

jQuery was first released back in 2006, 13 years ago. jQuery came in because dealing with cross browser Javascript was tedious and quite hard. Especially with the likes of IE and other ancient browsers. We didn't have XHR in many browsers, and the Javascript library was very small, doing anything took a lot of a code, there were very few API's out there. Nowadays we have ES5/6 and have API's ranging from Streaming Video via WebRTC, Battery, GeoLocation, even WebGL allowing to build beautiful 3d games, right inside the browser, you can view alot of the API's on Mozilla' Developer Network (MDN - not to be confused with MSDN, Microsofts Developer Network)


So why move away from jQuery?

Nowadays we have ES5/6, we have transpilers such as TypeScript. We can write code much easier than before, and adding jQuery adds a lot of bloat to your web application. I would like to point out that jQuery is still shorter for a quite a few things, just not by much anymore. Websites should be fast, nimble and have the least amount of dependencies as possible especially when some of the most simple websites use 20 lines of jQuery yet feel the need to include a 30kb library - assuming you have gzipped and are distributing it correctly, of course there are scenarios such as when you are using a CDN where there may not be such an overhead.

TL;DR most websites don't need jquery and include bloat for no reason.

Show me some examples!

Ok let's take the homepage of jQuery.com and use their own examples.

Code:

$( "button.continue" ).html( "Next Step..." )

So what is this doing? This selects all buttons on a page that have a class of .continue. It then replaces the inner HTML with "Next Step..." so how can we reproduce this in plain Javascript? Well it's a little more code as I explained but still simple.

Code:

let buttons = document.querySelectorAll("button.continue");

for(item of buttons) {
  item.innerHTML = 'test buttons';
}

So what we do is assign buttons a NodeList containing all the buttons on the page that also have the class of continue. We then look through them using a for of loop and simply replace the innerHTML. As you can see, it's not that much code to do it.

Our Next example is of event handling

Code:

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

So in our Javascript we need to hide or show on click, ideally you would want a css class for hiding and showing content then you would simply toggle that class

Code:

let hiddenBox = document.getElementById("banner-message");

document.querySelectorAll("#button-container button").addEventListener("click", function(e) {
  if(hiddenBox.style.display === 'block')
    hiddenBox.style.display = 'none';
  else
    hiddenBox.style.display = 'block';
});

Again, slightly more code, ideally as mentioned, you would simply toggle the class of show/hide rather than applying style in Javascript.

Anyhow, I won't cover the last example as it deserves a topic on it's own as making requests can be quite complex, I also want to cover it more in depth.

I hope you liked the couple of examples given and they make sense. If you have any questions, feel free to leave them below and I will get back to you

Happy Programming ^_^

i remember learning this in programming..