DEV Community

loading...
Cover image for JavaScript or JQuery? Which do you use?

JavaScript or JQuery? Which do you use?

Uriel Bitton
Hi i'm an avid web and app developer in search for creativity and always going after new ideas. Developer of Reactor JS
・1 min read

Which one do you use and why?

I find jquery is a lot more convenient for DOM manipulation, however it has the script dependency.

What are the disadvantages or advantages between the two and why?

Discussion (38)

Collapse
andrewbaisden profile image
Andrew Baisden • Edited

jQuery has become spaghetti code and you can pretty much do most things these days just using pure vanilla Javascript. No bloated dependencies required :) Learning JavaScript is more beneficial it opens up doors to writing better code and understanding the documentation better. It makes you a better developer in my opinion. jQuery might be easier to use in some cases like doing animation however it’s like using a crutch. Not avoiding writing vanilla JavaScript which will give you far better job prospects down the line.

Collapse
urielbitton profile image
Uriel Bitton Author

But let me ask you something. How do you reconcile the fact that jquery is designed to write less and easier JS code, so what would be the logic of preferring JS over jquery, if react and all these frameworks didn't exist?

Collapse
andrewbaisden profile image
Andrew Baisden

jQuery has become a bloated and unnecessary library. It is no longer modern and popular amongst programmers. The codebase is antiquated and most of the aspects which made it so appealing years ago can be done using plain javascript. If you know plain javascript then you don't have the overhead of downloading jQuery on every initial load. Adding an additional library just slows down the page load.

It has become quite redundant many of the functions within the code are never used making them dead code. And you also have to constantly update the DOM to the latest version to avoid jQuery exploits. Writing plain javascript means you can use javascript frameworks the learning curve is less compared to someone who uses jQuery.

jQuery is a bit like toy code its hard for good programmers to take it seriously these days.

Thread Thread
urielbitton profile image
Uriel Bitton Author

right i think you're mostly right. However what would you say to the fact that 10 lines of code in JS can be written in 5 with jquery?

For example event handlers have much less code in jquery than in JS

Thread Thread
innprogress profile image
Arnold A.

I'm not really sure on what type of event handlers are you talking about? Because I don't think event handlers take less code lines in jquery (js - w3schools.com/js/js_htmldom_eventl..., jquery - w3schools.com/jquery/event_click.asp).

And even if they would take less code, I wouldn't like to write js with such a ugly syntax :D

Thread Thread
eaich profile image
Eddie
// pure js
document.querySelectorAll('.main-menu .item').forEach(el => {
  el.addEventListener('click', handleClick);
});

// jquery
$('.main-menu .item').on('click', handleClick);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
urielbitton profile image
Uriel Bitton Author

exactly right here. Click events take half the code with jquery.

Thread Thread
innprogress profile image
Arnold A.

Okay, I didn't think of this scenario, but I still don't think it's worth it. If you are coding landing page, e-shop or something like that, and you don't need too much javascript then it shouldn't be a problem to write a few more lines of code in order to save 90 thousands bytes for website to load jquery. But if project is a little bit more serious then you shouldn't even think of jquery as there are modern frameworks that will make development almost perfect.

Thread Thread
gwutama profile image
Galuh Utama • Edited

Well 90 KB text gzipped is probably a quarter of it. Depending on where you live, loading time caused by it is negligble.

I always find frontend devs way of thinking to optimization interesting. Shaving few KBs of JavaScript but load dozens of MBs images. Then talking about avoiding dependencies but using node packages that indirectly pull in hundreds of other dependencies. Loading scripts from dozens of HTTP connections, etc.

Thread Thread
Sloan, the sloth mascot
Comment deleted
tylerlwsmith profile image
Tyler Smith

Eddie 🤣🤣🤣

Collapse
urielbitton profile image
Uriel Bitton Author

i agree.
I think you mean *not avoiding vanilla js

Collapse
andrewbaisden profile image
Andrew Baisden

Yep fixed

Collapse
antonmelnyk profile image
Anton Melnyk • Edited

jQuery should be used only in legacy systems where you can't just scrap it.

Otherwise, it's basically a redundant library nowadays. jQuery was good when browsers had different API and it was really hard to work with DOM. Now pure JS can do mostly the same that jQuery was used for.

Yes, maybe you can get some benefits at some edge cases, I know it's still widely used in WordPress websites, where people usually just build the site from "ready-to-go" blocks like calendars, image sliders, etc and jQuery "ecosystem" has a lot of them to offer and is pretty easy and straightforward to use.

But with the same effort, you can just add some Vue/React components and have more maintainable and modern code.

Collapse
urielbitton profile image
Uriel Bitton Author

true. I use a lot f wordpress so jquery was very handy, but im starting to move away from and jquery and now towards ES6

Collapse
olton profile image
Serhii Pimenov

Is jQuery not written in vanilla JavaScript? jQuery is syntactic sugar that makes working with the DOM easier. I believe that every JavaScript programmer should write his own jQuery to better understand how the DOM works and how to manipulate it and elements.

Collapse
urielbitton profile image
Uriel Bitton Author

Yes but I mean vanilla js vs jquery

Collapse
prahladyeri profile image
Prahlad Yeri • Edited

You are right on spot!

jquery is the perfect library and you are supposed to use it to make DOM manipulation simpler. The few KBs of dependency is nothing considering that megatons of bloatware like angular/react/vue is considered normal and goes unchecked today. Add to the fact that most CDNs typically host all major versions of jquery, the "dependency" is the last thing you need to worry about.

Collapse
leastbad profile image
leastbad

I think you know that jQuery is Javascript, but I thought your title was amusing. :)

I want to urge you to check out stimulusjs.org which is created by the guy behind Prototype. Prototype was a popular library in 2004-2005 which directly inspired the creation of jQuery, which became dominant.

Stimulus is a great choice for adding functionality to modern applications without going anywhere near the cult-like insanity of React, Vue and Angular - all which come with massive complexity and guaranteed hours of bikeshedding.

It's very straightforward to adapt old sites that were using jQuery for everything to work with Stimulus, which offers connect() and disconnect() life-cycle methods. The reason this is important is that today, we no longer assume that there's a single jQuery load event moment. I wrote at length about this in a more technical post here: dev.to/leastbad/mutation-first-dev...

Please let me know if you have any questions.

Collapse
urielbitton profile image
Uriel Bitton Author

ok very interesting.

And yes i mean the js library jquery!

Ill check it out

Collapse
eaich profile image
Eddie

It's trendy to hate on jQuery these days, as you can see in the comments. I'll leave these screenshots for you, and you should decide what's best for you. RTFJ (Right Tool For the Job).

Airtable
https://dev-to-uploads.s3.amazonaws.com/i/wurubpezs15oz0ofj2oi.png

NPR
https://dev-to-uploads.s3.amazonaws.com/i/mqr2o18ctdwaxnaazt2c.png

Pocket
https://dev-to-uploads.s3.amazonaws.com/i/eevpoafadde7es5f6ft3.png

Calendly
https://dev-to-uploads.s3.amazonaws.com/i/6dg0y44hlm7xjb7tsm2d.png

Collapse
pengeszikra profile image
Peter Vivo

In the past five years i won't use jQuery. With pure js you can do anything, and don't need to use jQuery like helper. React is another question, if you have strong js knowledge, then react is your best friend. If you use hooks, that much more easier than pure js.

Collapse
urielbitton profile image
Uriel Bitton Author

Right JS helps a lot for react

Collapse
annietaylorchen profile image
Annie Taylor Chen

I choose vanilla JavaScript or svelte, the compiler if you want less code. React is easier for job hunting.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

The only when I need jQuery-like API, is Cheerio, which doesn't manipulate DOM, but instead XML, based on htmlparser2.

A problem with jQuery, is it isn't strongly-typed in VSCode (@types/jquery doesn't make it that much better); unlike vanilla JS (and you don't have to install TypeScript or @types/* at all.)

Also, at some time, I have tried cash, an alternative to jQuery and in written in TypeScript. However, DOM tree on web browser, or at least JSDOM in Node.js is required. But mostly, I would say it doesn't help much.

Collapse
davidtaylorjr profile image
David Taylor Jr.

What does JQuery continue to offer that makes it continue to be a necessity?

Collapse
urielbitton profile image
Uriel Bitton Author

its true, nothing i guess

Collapse
champernet profile image
Timur Iskakov

I think jQuery is a past.
Nowadays you can freely use Vue.js or React instead. But a pure JavaScript can also do almost everything that jQuery did.

Collapse
al5ina5 profile image
Sebastian Alsina • Edited

I stopped using jQuery more than a year ago. I use React or Next instead. If I were to build a website without React or Next, I'd guess I'd still use jQuery. jQuery is great, but it's outdated. There's newer and better stuff.

As other have said, everything possible in jQuery is possible in vanilla JavaScript with just a few lines. There's not really a problem with using jQuery, it's just not something that's needed anymore in 2020.

If you're comfortable with the jQuery syntax, go with it! If you can use React or Next, do that!

Collapse
tylerlwsmith profile image
Tyler Smith

I started with a comment, but it got so long that I ended up with a post. jQuery is still super useful.

Collapse
urielbitton profile image
Uriel Bitton Author

haha i love this!
thanks for sharing.

It does seem to be a trend of late to hate on jquery, i dont see the reason why!

Collapse
tylerlwsmith profile image
Tyler Smith

Thank you for opening up the conversation. I wish it wasn't a trend to hate on jQuery.

Sometimes I get the sense that people with strong feelings about jQuery may have never worked on projects where it would be a good solution to their day-to-day problems. These days I'm doing a lot of data-driven applications where jQuery would be a bad fit. Maybe if I had only ever worked on apps like this, I'd also struggle to see the value of jQuery.

Thread Thread
urielbitton profile image
Uriel Bitton Author

Right. I work on a lot of client-server side apps and i make tremendous use of jquery, within react. FOr example, handling complex click events and actions and generating html content in apps is super easy in jquery. The same would be much much longer and more complicated in javascript.

Collapse
ozzyogkush profile image
Derek Rosenzweig

JavaScript is a language, jQuery is a tool built in that same language. Nowadays there is very little in jQuery that's worth the extra overhead that you can't do in standard JavaScript. There are some great tools out there for various needs and various sized sites, but personally I don't find jQuery to be among them anymore.

Collapse
amlana24 profile image
amlan

I use React..

Collapse
bartosz profile image
Bartosz Wójcik

JQuery when it's feasible since it's been on the market for so long, some things are just easier in JQuery, although I'm using vanilla JS in some other situations, for example I'm using vanilla JS in my Chrome / Firefox extensions injected into web pages, because it's easier and does the job just fine. I this the hate towards JQuery is a bad thing, I've seen some benchmarks that does like 1 million iterations of simple things, but who does that on a web page? Nobody. JQuery is just a tool, and a pretty good one.

Collapse
seanolad profile image
Sean

Like any smart dev, I use both. JQuery does exactly what it says. It queries stuff, and the stuff being DOM elements. Manipulating DOM is one of the most useful things about JavaScript, but JQuery makes it easy. In my opinion there really aren't any disadvantages to JQuery, if it's used for the problem it's designed to solve then I don't see the problem(get it 😂), otherwise it's like saying that seat belts are crappy because they won't do a thing if you get t-boned by a truck.

Collapse
dmshvetsov profile image
Dmitry Shvetsov

JavaScript (+ optionally lodash).

JQuery is too heavy (big size) and often we are using 1-10% of its functionality. Which [functionality] is almost in 100% cases available in plain JavaScript.

Take a look tobiasahlin.com/blog/move-from-jqu... and youmightnotneedjquery.com/