DEV Community

Do you still work with jQuery?

Ben Halpern on November 17, 2021

For folks who still work with jQuery, for personal or professional projects, what is the overall context of this work? Do you expect this to be refactored at any point?

Collapse
tylerlwsmith profile image
Tyler Smith

I still use jQuery with WordPress, and I don't expect that I'll stop any time soon. Most of the time a Wordpress plugin will need to load jQuery anyway, and it's really nice for sprinkling JavaScript onto a static page. I write less code than I would with Vanilla JS, and it has animations & ajax built in. Sure, I could piece animations & ajax together another way, but I don't see the reason when jQuery has both.

I'm not a luddite: I use React when I build full-blown web applications. I've also used ES6 features to build apps with Vanilla JS before. But unless bundle size is a major constraint, I still feel perfectly happy reaching for jQuery in 2021.

I wrote about this more extensively in my article with the clickbait-y title, "Hating jQuery doesn't make you cool." Link below 😊

Collapse
matthewbdaly profile image
Matthew Daly • Edited on

Have you looked at Alpine.js at all? I quite like that as a jQuery replacement because:

  • It's tiny - it and Axios together are still only a fraction the size of jQuery
  • It provides a more declarative API, largely copied from Vue

These days I don't really like including jQuery by default on new projects because a lot of it simply isn't needed, but at the same time doing a lot of that stuff in vanilla JS can be a chore. Alpine's so far proven to be a good solution for what I used to fall back to using jQuery for.

Collapse
tylerlwsmith profile image
Tyler Smith

Alpine is absolutely amazing. It's become my favorite tool for adding interactivity on server-rendered apps that I build with frameworks like Laravel. And Alpine recently added an equivalent of jQuery's slideToggle(), which is the feature I needed most often from jQuery.

I'm not terribly concerned about the extra kilobytes I get from using jQuery. jQuery doesn't block the DOM from rendering, and it doesn't require activation bootstrapping the way that a framework would: it just needs to download and parse. It's very different than React where you can't render anything until the library is downloaded, parsed, and your app code executed. Even server-rendered React has issues with links not working until the app is fully hydrated.

Avoiding extra kilobytes is nice, but it's easy to go down a rabbit hole where we focus on reducing the kilobytes of JavaScript because it's easier to measure than other higher-impact UX like avoiding page jank, creating useful error states, avoiding responsive issues, etc. Alpine feels nicer to use in a lot of cases though!

Collapse
imthedeveloper profile image
ImTheDeveloper

In the same way I'm doing with Vue.js, drop in the script tag and swap out the JQuery. I'll check out Alpine, Vue I just seemed to "get it" quite quick.

Thread Thread
tylerlwsmith profile image
Tyler Smith

Alpine has almost everything I like about Vue without the build the steps. It's one of the best front-end tools to come out in the past few years.

Thread Thread
imthedeveloper profile image
ImTheDeveloper • Edited on

Yep with the cdn script there is no build for Vue either so fully with you on such a low impact way to improve

vuejs.org/v2/guide/installation.ht...

Collapse
philw_ profile image
Phil Wolstenholme

+1 for Alpine, I love it when working with server rendered pages.

Collapse
rashedarman profile image
Rashed Arman

Disliking jQuery doesn't make you bad either.

Collapse
ludamillion profile image
Luke Inglis

Nope but I think the main point is that hating on jQuery just because it is jQuery is cargo-culting.

Thread Thread
tylerlwsmith profile image
Tyler Smith

That's the point I was trying to make. There's nothing wrong with preferring other tools over jQuery or opting for vanilla JS.

Collapse
janmpeterka profile image
Jan Peterka

Do you prefer ajax to fetch for some particular reason? as BE dev I'm bit lost in these things, so I will be glad for more insigth into this :)

Collapse
tylerlwsmith profile image
Tyler Smith

I sure do. Fetch is too low level for my taste: I don't like having to parse the response for the HTTP code to decide how to handle errors. I almost always prefer jQuery's ajax() method or the Axios library for ajax instead of raw fetch requests. They handle a bunch of things automatically that I'd have to code myself with fetch.

Collapse
ben profile image
Ben Halpern Author

Personally it's been a couple years since I've worked with jQuery. In general I'd say it's only a good thing if you can refactor your code to vanilla use of modern native dom query helpers, fetch calls, etc.

Collapse
lukeshiru profile image
Luke Shiru • Edited on

+1. It's been years since I last used jQuery, and I don't miss it at all. Besides if you really really really need jQuery's API, you can just use alternatives like cash, so actual jQuery is still not a good option.

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π • Edited on

Yes. No plans to refactor. It makes mine and my developer's lives a lot easier.

Our projects are LAMP stack and don't use modern JS frontends.

Collapse
ben profile image
Ben Halpern Author

I wrote this post years ago about jQuery at the time...

But have since come to think that it is effectively no longer needed (I think the fetch API put me over the top). Can you elaborate on what keeps you around the most?

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π

Predominantly the readability. I find jQuery a lot easier to read than JS.

I see this site referenced a lot: youmightnotneedjquery.com/ But all it does for me is prove how much I prefer jQuery!

Take the getJson function for example:

jQuery

$.getJSON('/my/url', function(data) {

});
Enter fullscreen mode Exit fullscreen mode

Javascript

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } 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

I know which I prefer...

jQuery also comes with the added benefit of slideToggle() functions, fadeIn/Out() functions, etc.

And I can just $('.classname') to target something, rather than document.getElementsByClassName(className)... it's just such an effort to write that much.

Time is money, and jQuery helps me do what I need to do quicker ! :)

I appreciate my team and I would need to transition to Vanilla JS if we start to use more frontend frameworks, and we are looking to bring in Vue to some of our projects in the future. But our LAMP systems (Wordpress/Drupal/CodeIgnighter) are still our bread-and-butter projects, and using jQuery in them just makes our lives easier.

I'd also argue modern frontend frameworks are still mostly in their adolescent stages, where they're still trying to stabilise themselves/their role in the future of the web... Vue has been around for 7 years, React 8 years, and Angular only 5 years; whereas jQuery has evolved over 15 years and understands its place in the world.

Thread Thread
lukeshiru profile image
Luke Shiru • Edited on

Just so you know, nowadays, if you want to load a JSON, you can just use fetch which is way easier than XMLHttpRequest and it doesn't require a library to use it. It uses promises so is arguably more readable than the callback approach of jQuery. The actual "versus" looks like this:

$.getJSON("/my/url", console.log);

// vs

fetch("/my/url")
    .then(response => response.json())
    .then(console.log);

// And if you use await...

const response = await fetch("/my/url");
const data = await response.json();
console.log(data);
Enter fullscreen mode Exit fullscreen mode

You might think: "But hey! jQuery is shorter" ... and that's true, but for fetch we didn't need to load 30k of minified+gzipped jQuery code in order to start fetching our JSON. And that's not even talking about transferable knowledge (if you learn fetch, you can fetch in apps with and without jQuery, if you learn $.getJSON, you can only fetch if jQuery is present).

Cheers!

Thread Thread
anilseervi profile image
Anil Seervi

Top level awaits tho

Thread Thread
link2twenty profile image
Andrew Bone • Edited on

Helper functions can also be a thing.

const getJSON = async (url, callback) => {
  const response = await fetch(url);
  const data = await response.json();
  callback(data)
}

getJSON("/my/url", console.log);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π

I understand where you're coming from, but for modern Internet speeds 30kb is nothing. Sure, it's worth taking into account if you're launching a site for a territory which suffers from slow Internet speeds, but for most affluent countries I'd argue 30kb is not worth losing sleep over.

In the UK the average Internet speed in 2015 was 13 MBps. https://www.mindgems.com/info/file-download-time-calculator/?FileSize=30&Units=kilobytes It really takes no time at all to download such a tiny file.

Thread Thread
lukeshiru profile image
Luke Shiru

You have to consider mobile networks as well, which can be very fast, but if you're far enough of phone antennas or isolated (maybe on an old house, or a subway station or whatever), then those 30k are a lot just to achieve the same thing you'll get from using fetch. Ideally we should always avoid downloading unnecessary JS. Just take a look at the trends that Remix or Astro are imposing, where JS is loaded only if needed, if not we just use HTML+CSS and that's ok.

Collapse
ironcladdev profile image
IroncladDev

I heard a few years ago that jquery was outdated and wasn't really in use anymore. I usually use plain DOM and created a little function to help me with document.querySelector()

const $ = tag => document.querySelector(tag);

Collapse
mindplay profile image
Rasmus Schultz

Yep, I often use this:

const $ = sel => [...document.querySelectorAll(sel)];
Enter fullscreen mode Exit fullscreen mode

This gives you useful array methods like filter and map and works for empty sets, much like jQuery. πŸ™‚

Collapse
victorioberra profile image
Victorio Berra

There is tons of software out there still using it, we use jQuery DataTables and DataTables Editor since they are very polished and work great. We also have a lot of legacy code in production and sometimes a little jQuery can deliver the interactivity we need on the page without needing to use a modern frontend framework with build steps and bundling and all that.

Refactoring also takes time and there is a lot to do and a lot of things that need to be built before there is spare time to refactor things that are working just fine in production and are not overly complex to maintain. You also have to weigh the costs of bringing in complex SPA frameworks, build steps, cicd stuff, and tooling that a whole team will need to learn and that will be around for a while.

We have some web software that is in prod and that is 20 years old. Is there any framework like React, Vue, Angular that are in prod for 20 years with no updates needed?

Collapse
pffigueiredo profile image
Pedro Figueiredo

Not since about 2 years ago, but I got so used to their selector syntax, that I just use $ instead of document.querySelector in the chrome dev tools - yeah that is already implement in there by default 😎

Collapse
nefofortressia profile image
Nefo Fortressia • Edited on

No. I don't work with it anymore and don't have any requirements to work with it.

Simply being that it's unneeded for most of my works, even if I do need selectors there is Document.querySelectorAll.

Collapse
brewinstallbuzzwords profile image
Adam Davis

I work in healthcare tech and a lot of my company's products make heavy use of jQuery. There's been some push to remake some things in React and to start using React for newer projects, but I'm skeptical that it'll actually happen any time soon.

Collapse
link2twenty profile image
Andrew Bone • Edited on

Also in 15 years people will be doing posts like this saying 'do you still use React?' πŸ˜…

Collapse
dianale_dev profile image
Diana Le

Professionally we'll probably still be using jQuery for a while. We build a large number of sites every year and we have so many types of functionality that rely on jQuery plugins: custom sliders, media lightboxes, form validation, interactive data tables, etc. that it would take a bit of time to figure out compatible vanilla versions. We looked at switching to vanilla JS a few years ago but unfortunately that was before ES6 and the syntax wasn't friendly and we still had to support older versions of IE.

I would love to slowly start updating the code but unfortunately when you have entire design systems built around the existing plugins and we're efficient in terms of building sites, it's hard for us to switch and make the business case for it.

Collapse
thomasjunkos profile image
Thomas Junkツ

In my sparetime I do not use jQuery. But in my professional work day, it has to be on my toolbelt because our company is supporting applications with over 10+ years lifecycles (public sector clients). So there is no way around jQuery because back in the day what else did we have?

Do I expect this to be refactored? No, unless a customer asks us to do so and pays that job. But why should someone do that? Customers pay for working products - and the product does well with jQuery.

Collapse
sparkalow profile image
Brian M.

I work with it when I have to, but given the choice will go with vanilla js or something more modern when needed. I sometimes have to work with older systems (magento 1, old junky wordpress sites, etc.) and removing a jquery dependency is out of scope.

Collapse
igmuska profile image
igmuska

and besides the topic will just eventually descended exposition of good and bad aspects of each framework with fanboys shaking pompoms, and, of course, the numerous flip flops, backslides, then descend back to plain old vanilla JavaScript, calling folks n00bs for using frameworks hahahahaha ad infinitum or ab absurbo reduction or is it ad nauseum...lol

Collapse
rexebin profile image
Rex

To me, it’s the component mental model the frameworks like React, Angular or Blazor offer makes the difference, making the app well structured and maintainable. It’s not easy for beginners or even experienced programmers to get in to habit to write components as building blocks with tools like JQuery.

Collapse
gryp17 profile image
Plamen Ivanov

I still use it in my personal projects (often together with Vue or React) when I need to touch stuff on a lower level (modify the DOM directly, write complex selectors etc.), which doesn't happen that often, but I would rather write a fast one liner than deal with the vanilla javascript DOM manipulation methods.

Collapse
nitishdayal profile image
Nitish Dayal

Still use it professionally. Frankly I've never worked anywhere that didn't have some legacy jQuery somewhere in the application. As much as I'd love to go through and rip it all out, it's not a business priority and I have enough on my plate.

Collapse
parenttobias profile image
Toby Parent • Edited on

I work with a few clients for whom sites were built during the Browser Wars days, when jQuery was everywhere like a battlefield hospital. Fifteen years later, these folks are still using jQuery, Backbone (precursor cousin to Angular) and perl. And they actively resist updating. They want the code maintained at this point, because it works and it's intimately tied to many aspects of their business.

Do they need jQuery? Absolutely not. Would the business benefit from an overhaul? Absolutely. Can they afford an overhaul? Likely, if done with a strategic plan, in stages. But they are terrified of having this spaghetti code castle collapse if someone makes a significant change.

So until i can convince them to either replace parts in stages or to run parallel servers so we can deploy and test under load... They're sticking with what works.

Collapse
jeydotc profile image
Jeysson Guevara

I was in a project that used jQuery quite heavily. It was too old, big and complex to get it replaced, the backend and frontend coupling also made any migration idea basically impossible.

Yet, it was really fun to explore ways to insert React in the new pages, cope with React/jQuery conflicts and all that stuff.

Collapse
domonic profile image
domonic • Edited on

So when they add static typing to shitescript (chromescript) the crappy language for manipulating xml documents, are we then to assume you will bin/wrewrite all your current vomit/text files that get transexualised into... normal js?. tadaaa!. js devs are an embarasment. listen to yourself. 40% of the web is wordpress and doesn't care for your crap. were waiting for js to die. Everyone on the planet older than 10 years old know for a fact .js is wank and will be replaced soon as others can target the browser. But apple/google drag heels on purpose to get you on the apps. The webs been stuck in the 90s for a decade and is dying a slow death. Desktop experience is dead.

Collapse
eljayadobe profile image
Eljay-Adobe

No. I had extensive experience with jQuery β€” including rewriting it from scratch (long story) β€” and I am a big fan of Vanilla.js.

Although I do use π‹π„π‘½πˆπ‘¨π“π‡π€π Programming's helper, and I define it exactly that way (verbatim).

Collapse
imthedeveloper profile image
ImTheDeveloper • Edited on

Legacy stuff yes, when I'm being lazy I generally opt for dropping in Vue from a CDN link and working from that. It's re-work but tidies up a lot of the jquery spaghetti into some structure and makes things a bit more data driven with reactivity (personal preference). I actually think this is one of the major benefits to Vue which is generally overlooked.

Collapse
steelwolf180 profile image
Max Ong Zong Bao

I still use jquery, cause with bootstrap you gain a nice UI with beautiful & professional templates without alot of effort in building the front-end or I had limited resources and time to build something out.

Collapse
sheikh_ishaan profile image
Ishaan Sheikh

We work with ASP websites which has jQuery support inbuilt. My leads still suggest to write jQuery over vanilla to maintain consistency since old codebase is in jQuery. I don't think we are moving to any framework or Vanilla in next 8-10 years. Some of the clients still asks that there users are using older browsers, so jQuery is the best way to handle that case.

Collapse
kayis profile image
K (he/him)

Somehow I dodged that bullet. :D

In 2006 when jQuery was released, I was neck deep in PHP and I didn't build web apps with JavaScript until 2011. At that time I had the impression jQuery was legacy and nobody uses it anymore, so I didn't bother to look more into it.

I built my first JS project with ExtJS 4 in 2011.

Then I had a short project at university in 2014, where I used Ember.js, so I guess I used jQuery indirectly, haha.

In the next job I got in 2015, they were already using React, so I went with that, and later did some React-Native projects as a freelancer later.

But the first JavaScript book I read 2011 was "Pro JavaScript Techniques" by John Resig, so I guess, I can't deny that jQuery had some influence on my JS journey :D

Collapse
moopet profile image
Ben Sinclair

I have a couple of big projects that use jQuery. We expect to keep it until the entire sites are rebuilt, because there's no point replacing it really.

When I edit javascript files that're already using jQuery, sometimes I use it and sometimes I write modern vanilla javascript, but these sites have no build process that would convert modern script into anything suitable for obsolete browsers - and some sites still have to support vintage tech.

Collapse
bobbyiliev profile image
Bobby Iliev

Speaking of jquery, here’s a great story that I’ve recently read

devdojo.com/tnylea/its-ok-jquery-i...

Collapse
lamka02sk profile image
lamka02sk

Unfortunately, yes. But we are slowly rewriting it to vanilla.

Collapse
devfranpr profile image
DevFranPR

Stoped using it the moment I realize document.querySelector() was a thing in JS. I don't miss it at all. For legacy code will be used for a time but I hope WP and Bootstrap get rid of it in the near future builds to have less things to worry about in projects who uses this tools.

Collapse
starbist profile image
Silvestar Bistrović

I'm using it when I absolutely have to.
Even when the project uses jQuery, I still write vanilla JavaScript.

Collapse
dendihandian profile image
Dendi Handian • Edited on

Those who do freelance for admin panel apps using old tech like PHP and Bootstrap CSS probably still stick to jQuery. And maybe Wordpress developer still use it

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π

PHP is not old tech...

Collapse
dendihandian profile image
Dendi Handian

Maybe old-fashion tech

Collapse
igmuska profile image
igmuska

much of the animation on website can completed by CSS3 mostly, I write my own AJax XHR, all sticker boys are only for the back of a laptop, fanboy chummy style, like the skillset wipes off... what is wrong with simple JavaScript, it is mostly supposed to use to validate forms or for golly gee whiz, SPA using all the JavaScript framework, not including jQuery...for server bombastics, I'd rather use PHP or RoR or plain old Ruby...I just passed their Vuejs introduction, I just like the spaceship with my favorite number 3...lol lol lol

Collapse
dannyengelman profile image
Danny Engelman • Edited on

Interesting fact; if you (only) use 50 KB+ jQuery for its Selectors, IE9 was the last browser to implement .querySelector .... in 2011

Collapse
crtl profile image
crtl

It depends. Its just easier to do with jquery but nowadays u have all the sweet tools in vanilla so you dont actually need it anymore.
But it still adds much convinience like event handlers, dom traversal and method chaining.

Collapse
arvindpdmn profile image
Arvind Padmanabhan

Absolutely and I love it. Not considering JS frameworks right now.

Collapse
eboye profile image
eboye

Only when maintaining old projects that need "quick fix". But almost everything I do now is either ES or Vue

Collapse
manuthecoder profile image
Manu

Yes, I still work with jQuery for my app, but only because the libraries I use require jQuery to work.
Otherwise, I just use vanilla JS, because it is robust.

Collapse
philw_ profile image
Phil Wolstenholme

There's also Cash, which replicates much of jQuery, including its lovely chained API, but uses modern JavaScript below the hood: github.com/fabiospampinato/cash

Collapse
pcmagas profile image
Dimitrios Desyllas

yeap for a quick website it is fine. For large scale website though hmmm I do not know depending the situation.

Collapse
wolfhoundjesse profile image
Jesse M. Holmes

I skipped jQuery while I was playing the tuba. By the time I came back, Angular 2 was a baby, so I jumped back in with TypeScript.

Collapse
okyanusoz profile image
okyanusoz

These days, I use useRef in React.

Collapse
tobifroel profile image
Tobias FrΓΆlich

Yeah, we still use jQuery in some (older) projects. I personally wouldn't vote for using it in "new" projects, however, if it ain't broke, don't fix it.

Collapse
thomasbnt profile image
Thomas Bnt

Nooope leaved JQuery since Bootstrap bΓͺta v5 is here. And now, full JS vanilla homemade. JQuery isn't anymore in my ❀️

Collapse
mellen profile image
Matt Ellen

I inadvertently work with jQuery as it's part of SignalR. If we move away from SignalR then I'll almost certainly get rid of jQuery.

Collapse
nkidmano profile image
DΖ°Ζ‘ng Thanh TΓ’n • Edited on

I still use it when working with Shopify projects, usually because it's convenient to copy UI logic on codepen, a lot of amazing example up there still use jQuery.

Collapse
mdamaceno profile image
Marco Damaceno

Yes, I still use it. Jquery is just a tool. A tool never gets old.

Collapse
alohci profile image
Nicholas Stimpson • Edited on

Yes, occasionally. Legacy code can live for many years. Refactoring it would not be cost-effective. It's not like jQuery is evil.

Collapse
sukrosono profile image
Adi Prasetyo

Yes, code simplicity. No, why, Jq core not yet release major version CMIIW.