DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on

Do you still work with jQuery?

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?

Top comments (62)

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

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

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

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
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π • Edited

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

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.

Collapse
 
ironcladdev profile image
Conner Ow

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
 
natalia_asteria profile image
Natalia Asteria • Edited

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
 
dianale 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
 
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

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

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.