Frontend Development
Why you shouldn't use jQuery and moving away from it
Submitted by null0r, 21-02-2019, 04:53 PM, Thread ID: 122150
Thread Closed
21-02-2019, 04:53 PM
#1 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 ^_^
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 ^_^
,,`,,,,`, Software Engineer ,,`,,,,`,
Users browsing this thread: 2 Guest(s)