// Detect dark theme
var iframe = document.getElementById('tweet-1193842947151859712-101');
if (document.body.className.includes('dark-the...
For further actions, you may consider blocking this person and/or reporting abuse
One word. "Legacy"
jQuery shines the medieval era of web development.
This is the most accurate way to describe those times.
Too many people are so eager to jump on the jQuery hate bandwagon. I'll say it - I STILL USE JQUERY.
Why?
With that said, I do use it sparingly and when I do, I make sure to indicate that a variable is pointing to a jQuery object:
At least the first point you can change with Babel :)
I still use JQuery for all of the same reasons 😅 I work at a non profit that caters to an older demographic so IE support is a necessary evil.
Yup.
Cause not all of us over-engineer things by applying React or Angular to every bespoke 4 page website.
We have clients that are restaurants, bookstores, ad agencies, and otherwise and if you build out a 10 page website for any of those and decide setting up a complex frontend build system somehow makes sense for them, boo on you.
BootStrap 4 is super popular (and v3 still actually). It includes jQuery.
WordPress powers an insane # of websites and jQuery is included by default.
I've said it here many times in comments: you better have a great reason for choosing one of those frameworks. Otherwise, you're over-engineering and making a poor choice.
There are more websites/webapps that don't need those than there are that do need them.
I would agree that if anything the point of removing JQuery is because you can do most of that stuff with just vanilla JS, not that you need to begin using a framework
As you mention, using a JS framework for every static 4 page site is overkill, but adding a 30kB library when you can make without it is still plenty overkill IMO
There's a good reason why Bootstrap 5 is ditching JQuery 5 and just using plain old JS ;)
I do agree with you on removing jQuery to replace things with vanilla js. I'll never argue against that unless you still have to support IE11 (and I happen to need to because on some sites I deal with I still get upwards of 10% of my visitors coming from IE11).
But: 30kb, what ever will we do in comparison to what gets downloaded with React/Vue/Angular and whatever monstrous sized files webpack creates?
Yet the state of front end dev right now will download 100+kb in fonts and let's not even talk about the image size people put out right now.
Or the friggin' ad network includes, trackers, analytics, etc.
There are a dozen other things to fix first in optimizing front end web page total download size than a single library. The average web page size in 2010 was 702kb compared to in 2016 which is 2232kb.
jQuery's size is hardly the problem. :)
Yeah, but jQuery and the like are very readable and consistent. Sometimes, jQuery may be too heavy, that's why I used a smaller framework for dom manipulation. But if it's there or there's no bandwidth issue, jquery it is.
I'm using it in new development right now and there's nothing you can do to stop me!
But, why?? xD
It's a traceability and logistics platform using event sourcing in Postgres to maintain manufacturing, siting, and troubleshooting histories. The database and backend API are the important parts, while the web application is only one of several points of interactivity or interoperability. And releasing a functioning piece of software was/is more important than keeping up with the client-side Joneses, so to speak: this is essentially a one-woman production, and I don't have time to get as good with newer frontend techniques as I am with the stuff I've been working with since last decade. jQuery, server-rendered templates, and REST did the job well enough then and they do the same now!
Spot on. :)
But to learn jQuery and check its documentation is much harder (in terms of time spending) than just use the Programming Language itself - JavaScript.
You don't need to learn any of modern techniques, you just need to know how to use the language without additional abstractions.
There is still the cases where doing something with JS harder than jQuery, but not so many.
I recommend to check youmightnotneedjquery.com/
Everything you've said is true! However, I do not need to learn jQuery, having learned it many years ago, and practically never need to reference its documentation since I'm not doing anything fancy with it. I am aware of
document.querySelector
and other such native functionality having become more generally available. I've used some of it in other projects where I was working with other people who knew this stuff well enough to make the call that we could do everything we needed without jQuery and ignore browsers that couldn't keep up.I am not those people. This project might not need jQuery -- I would go so far as to say there's a good chance it doesn't -- but I'd much prefer to be consistent about using jQuery than the alternative.
Hahahahaha... This one got me.
I'm learning Jquery in 2020! Hmmm..YEAH!
I use it. 🙋♂️
$("#id")
is easier to type thandocument.getElementById("id")
.While I'm still learning more and more about React, I plan on eventually figuring out the setup for a React Frontend with a WordPress backend. Frameworks like Frontity make that connection a whole lot easier.
If you really just love
$()
you can add this line to your JSor this one if you don't want to compile to es5
And remove JQuery as it's overkill to have your user download a whole library if that's all you want XD
Thats a great tip Alan! I agree that it is overkill and I haven't used it for a number of years. I think when I stopped using it I became a better developer and got a much better understanding of js.
Fun fact
If you need to access element via ID, then you can skip functions altogether.
Having element:
<div id="my-element"></div>
you can access it viawindow["my-element"]
;-)It's not always safe to use this trick to query an element. For example, if you have
<div id="alert" />
on a page, accessingwindow['alert']
will not return the element you're looking for.That is a fun little fact.
Good to know!
I think your first reason is the main cause of that eighty-something percentage of websites. There is a huge number of websites based on wordpress, and they all have jQuery.
I personally write a mix of vanilla JS and jQuery when writing javascript in wordpress. In most cases I prefer vanilla JS, but sometimes jQuery just has features ready that I need and... it's just there, you know?
The past 6 months I've been not been using it when I'm not coding in a framework. A lot of things that I thought would be easier aren't that bad in es6.
Though
$(selector)
will always be nice ... I really don't like thedocument.querySelectorAll(blah).forEach((eachselector) = { so much for something small });
blah
This is how my utility looks like for that:
I even export it as
$
because i got so used to it ;-)))I should note that it always returns an array, so no matter if it returns one element or multiple, you can still have one code to iterate matching elements. And if you need only one because you know there will be only one,
[0]
saves the day, just like in jquery unwrapping method.That's pretty nifty!
I made a slight adjustment that will save you the trouble of having to add [0] to the array if there's really only one instance of that selector.
I had it in previous version, but i value having returned array much more than this. Because i often map, i can safely map over array of one element, but it would throw if i dont have it inside the array. Im huge advocate of that.
To be honest, I have no idea if this is an good idea but...
Does save a lot of keystrokes on an daily basis and because of the double $ most people would at least think of jQuery and thus that it is some sort of selector.
I saw a talk by Wes Bos at JAMstack conf where he did exactly this. Actually he implemented
$
forquerySelector
and$$
forquerySelectorAll
I think this is a pretty neat trick, but there's a part of me that always wants to pause and analyze whether it is strictly necessary to expand on the window object needlessly. Do you have any opinions on setting this as a part of the window object vs using a separate function to do this?
You can always just make your own function called
$
:)I use it on a legacy client application. It still works and there isn't a huge benefit from trying to replace it. There are much bigger issues to address with the application before trying to replace jQuery. I try to promote using plain JavaScript on newer development in the project but some developers are more familiar with jQuery, which is okay. Even though JavaScript has caught up to jQuery, I still think jQuery's syntax and functions are more convenient to use.
Precisely my situation. There are many, many other things I would want to improve in the application I am working on before I even think about touching something that although old, still works just fine
Im glad you are taking this practical approach. I think you should always prioritise improving the product functionality for the user over refactoring the code for the sake of it. Keep up the good work
Please also add #jokes tag
When people see some set of new tools, they always forget the good part of the former, and will be blindfolded on the bad part of the later.
As for me, even though I'll ditch jQuery for vue on big projects, jQuery is still ok for some reasons.
Not regularly, but I have use jQuery. Mainly where I have a simple web app (A few pages without much logic in them, just showing some content). Going with React would be too much a hassle (You have to maintain consistency within the global state). And the few times I had to work on a Wordpress site (I guess they are why jQuery still have this usage)
I am currently working on a project that uses jQuery. And honestly, even though I thought I remembered the pain points, it is way worse than I recalled.
I guess we all have to thank jQuery for paving the way in so many ways. But at the same time: please stop using it! It hurts. It invites writing terrible code while providing nearly no more advantage over plain ECMA.
I refactored a jQuery project to vanilla a few weeks ago.
Working with e-Commerce software has you using jQuery frequently as well. The ecosystems of Magento and Shopware for example have deep roots in jQuery.
Also, there's still a reason for jQuery. Sometimes, it fits just right into a project. Especially medium sized projects that are not expected to grow a lot could benefit from a smaller bundle size compared to what babel and webpack wrap up sometimes.
Also, what even is a legacy codebase? Lots of small business pages are made well before 2015, when es6 was finalized. For most pages it's just not feasible to adapt a new codebase every 5 years, hence Bruce's "shocking" statistics. I wouldn't call jQuery based projects "legacy" for the sake of jQuery.
Uff. This would be a lengthy discussion as you can of course write nicely. The emphasis was in "invites [... writing terrible code]".
On a high level, DOM interactions are normally done by directly using the selector, usually wrapping the same elements over and over again.
Both of these common options are strange as in the first version we create a new instance while the second one takes the this object which does not inherit the jQuery prototypes and therefore needs to be wrapped into a jQuery element again. This is especially weird considering that most listeners are shorthands for .on(event, function(event){}), which would hand you the native source element.
The usual result is either assigning many variables globally or repeating selectors until the doctors come.
Bit of perspective here, but Bootstrap (still very widely used) still depends on jQuery, and there are a number of jQuery plugins that are exceedingly popular (select2 comes to mind immediately).
I'd be willing to bet that a vast majority of jQuery use is either to use stuff that depends on it like that, or are sites that don't have the practical ability to update to something newer.
I highly recommend looking for vanilla alternatives - given example (select) i have found two worth checking out: Choices, Selectr.
Agreed.
The problem is that a lot of people just stick with what they already know and don't look beyond that (and honestly, in the specific case of select2, I can kind of see why, I've yet to see a vanilla alternative that provides all the same features and doesn't bring it's own set of potentially significant complications).
Of course, really popular platforms like WordPress including jQuery isn't helping either...
I recently spent three months on a client's Java project for which I had to use jQuery.
I've to say, after a bit it was actually fun to develop and furthermore inspired me my last ideas of blog posts 😉
Some might argue that jQuery is polyfill (IMO biggest pro of jQuery is that it polyfills/unifies/abstracts ugly APIs under its umbrella), when it comes to a lot of browser differences (especially old ie).
You know what, I actually never thought about it that way but that's actually a really clever and simple way of describing jQuery nowadays.
Thank you 👍
I use React whenever I can, but at times it just makes no sense.
I tried to insist on going jQuery free/vanillaJS on a recent project but my team rebelled against me 😅
And to be honest I couldn't defend my position that much. jQuery makes writing small interactive features sooooo much faster than vanilla. Fact.
Anyway, I recently found out you can actually have multiple React roots, so next time I have to work on a regular website I'm going to go that way (as opposed to jquery-pluginify all the things).
--EDIT--
At a point I even built my own blazing-fast DOM abstraction/selector: github.com/mjsarfatti/dusk – but never really used it much.
Hot takes incoming!
A ton of sites I've worked on don't really need a larger framework, but I keep noticing that it's dangerously easy to convince myself that I need React, Vue or something similar.
If you're building Spotify, you need a framework. I get that because it's truly an app. But take Facebook or Twitter. Those feel like websites that don't need a framework. That being said, I use Twitter every day, so I'm not complaining or criticizing.
Now that my hot takes are over, I keep some rules in mind when I build a site with jQuery. Some of these I learned from using StimulusJS, which ironically enough is another framework!
data-*
attributes for thisI'm actively using it for a number of reasons. I have been selling/maintaining a SAAS application for a very niche market for the past decade. jQuery works, is actively maintained, and I know how to use it.
Occasionally when completely refactoring a section I try to write vanilla JS but most of the application is jQuery. My customers don't know the difference so trying to strip out jQuery in order to replace it with whatever happens to be the newest and most shiny really makes zero business sense.
I've been using it up until very recently (the last few months), when I've discovered Kotlin/JS to actually work well enough for my needs. Now, I use the vanilla JS APIs directly from Kotlin, and have finally kissed JQuery goodbye!
As some of you might have read, I've used quite a lot to support some of the features in my Flask application, which is being developed with pure JavaScript, and Flask HTML templates. I have never used any front-end framework apart from Angular 1, and, I have to admit, for the size and scope of my side projects, I love the convenience and power of what jQuery allows me to do, especially regarding making my app feel more sleek and interactive.
I don't work with either jquery or anything at all front-end related at my daily job, so can't comment much more.
I do. I think JS frameworks are the main source of modern bloat and still make my sites fairly hand-crafted. And modern stuff that isn't React/Vue/Angular still use it. I feel calling it "medieval" is very inaccurate.
WordPress comes with it and much of the WordPress ecosystem relies on it, so there's that. 🤷♂️
I also sometimes look for small JS plugins I can make use of quickly for a carousel (e.g. Slick) or some other interactivity on a simple HTML site/page. Usually there's a jQuery plugin for it.
I work side by side of projects that are based in jQuery and Vue. I have honestly been considering going back to using jQuery because the selector syntax is so much nicer and I am more used to using $.ajax vs axios or fetch. As a full framework it is past it's prime but it still has some nice utils I like to use.
I use it on daily basis, cause of my current job.
I work for a tiny software company (my very first dev job) and we use a ton of JQuery and Asp.NET WebForms.
JQuery helped me become comfortable with reading and writing a lot of JavaScript, but after becoming familiar with newer frameworks like Vue and React, JQuery started to feel real clunky.
Do I use it in my projects? most of the time. Do I actually use it? never. It's just there for bootstrap...
There was a time where it had its purpose. I don't think that applies anymore. It just pollutes the code when you use a frontend framework.
No joke, I use JQuery a lot - it really helps me every day. Truth told, though, I personally think the whole thing will be deprecated next year. JQuery is great, but I think it's going to go away soon as JS advances so much that the uses for JQuery lessen and lessen.
Don't get me wrong - JQuery is absolutely amazing, and I'm not surprised 85% of people use it, but JS is evolving so fast that there might be no use for it anymore.
I have lately found that for everything I do in JQuery, I could do in JS (give it take). Why load a whole library for nothing?
JQuery is legacy, but all legacies come to an end... 👋👋 JQuery 😭😭...
I would just add that MediaWiki, which is used by probably the biggest website on Internet the Wikipedia, use jQuery as main JS frameowork. And I don't think it will change. I don't see any reason why you would like to rewrite to something new just because it's invented. jQuery works just fine and it's easy to learn and use.
I originally used it to solve browser compatibility, and it also helped make the language easier to read (for me!).
Fast forward 10 years, the C# MVC project I was working on is heavily split between backend (API) and frontend (Javascript). Sticking to what I know, there is heavy use of jQuery (also to replace a commercial control library). Eventually I realise this is beyond what it was made for and I'm re-inventing wheels or looking for plugins to help.
These days I get to use Angular, which has it's faults, but I refuse to drop back to the comfortable arms of jQuery, because I'm not having the problems it was originally solving for me.
I have trememndous respect for jQuery, but my coding style and needs have moved on.
When jQuery deep inside the project, you're not going to get rid of it, you just try to write a new code without, but it's still there.
I think this numbers is the same as WordPress Internet will be there for a long time.
You shouldn't define yourself with a technology or a library or a framework. Actually, jQuery helped developers in a lot of projects.
These are great plugins for jQuery;
jQuery DataTable, FullCalendar, Carousel, tooltipsy, etc.
It still using by WordPress so we can't say it's legacy.
I have to use it.. We are in the middle of re-building our product using vue.js (nuxt) and graphql. But all our current clients still run on websites using jQuery so whenever they need support or new functions.. it's jQuery time :(
Most of the projects i migrated from jQuery to vanilla, was done exactly by having jQuery project and writing new code in vanilla. Sooner or later dependency will not be needed. ;)
I remember reading jQuery documentation in 2015 while learning Java Swing and thought 'I'll take this whole web app thing when they've agreed on a syntax'. . . years later that's now the medieval period.
I sure do, when I'm not building a 'SPA' ... in fact it's a very well designed library, simple and it just works - when you maintain a little bit of discipline in order to not make it a mess, that is.
A drawback that I don't hear mentioned often is its bundle size - it's surprisingly big considering what it does (I saw that for the next release they're planning to make it smaller). Also it's not really using ES6 as far as I know. And TBH most of what jQuery does can quite easily be done with the native DOM api (and 'fetch' for AJAX).
For my current Laravel project I am considering to replace it with StimulusJS (of Rails fame). However to then completely phase out jQuery I'd also need a solution for Bootstrap which currently has a dependency on jQuery (for Bootstrap 5 they're planning to remove jQuery as a dependency).
But, to make a long story short, yes I've used it on a bunch of projects and am not ashamed to admit it :-)
I don't see any valid reason to not use jQuery.
The point of jQuery is not ajax or cross-browsing. The point of jQuery is simplicity and concise readable code. Every method in jQuery returns a jQuery object therefore the method chaining is possible. You cannot write such a code in pure JavaScript.
Also, jQuery has 30,000 (according to Github) plugins. Some of them are super popular. For example, Select2 alone used in almost 3% of all websites. It 10 times more than Angular. Can you write such a thing in pure JavaScript? I am sure you can, but it will take you weeks if not months.
Size (27kb gzipped) can matter for about 0.00001% of projects. If it really matters don't use it but don't use React as well otherwise it doesn't make any sense.
SPA (React, Angular, Vue) are not suitable for projects that require indexing by search engines. Old style multiple page jQuery featured website is a better choice for such projects.
But jQuery with very little extra work can be used for creating SPA as well. I have written a very small (150 lines of code) SPA framework that makes routing and organizes code into logical modules, and use it for creating mobile and progressive web apps.
Actually, I don't see any reason to use any of the modern JS frameworks. They are too big, too complex, they mix html, css, js, they use impossible to debug bindings, and so on and so on.
This codebase that I was asked to make changes to uses jQuery. It wasn't so difficult to pick up, but I understand how it would be hard to replace without a total rewrite.
So, is it cool now to hate jQuery? I think I need to follow this cool-driven development
Ain't this some nonsense. Maybe the better question would be who no longer uses jQuery.
I use it mainly when maintaining current features on our app; most of the client-side behavior is jQuery. All new features I develop are using vanilla JS together with Stimulus.js.
I only use jQuery.
Only for Bootstrap, thats all 😅
What's jQuery?
Don't forget to ask who is still using vanilla js 😉
👎👎👎
last time I used it & d3.js 🤣🤣🤣
RandomFractals / droneStrikes
Data viz of US drone strikes in the Middle East
droneStrikes
Spatial Data Viz of U.S. drone strikes in the Middle East
dronehits.herokuapp.com/
Graph View
Data View
Oracle APEX uses jQuery quite heavily, so I do very often.
🙋 I like jQuery a lot and haven't learned any of the fancy new JS frameworks well enough yet
I use it for cross-browser compatibility, and because it has good documentation, which regular JS—as far as I can tell—does not.
Bootstrap won't let me shine(Just kidding).
I use it when I want to work with a Ruby application and I am implementing my FE with CoffeeScript, I add Jquery to the mix.
L*gacy code
Only in projects older than 4 years that I'm still maintaining. Otherwise, no.
I love ES2015+, ES Modules, VueJs, Angular, ect... ect...
I still use jQuery all the time ❤.
I do not!!! Huahaha
But some of my coworkers are still clinging to him. A couple have followed my example and have begun to leave it gradually. It is a total success!
I'm still using JQuery in WordPress theme and simple static site.
I still use it for SharePoint 2013 work that still needs to support IE 11.
Legacy :) the app I work on is 10 years old and there are some older parts that are pretty tightly coupled with jQuery.
Also, I just wanna add, from the coding perspective, I don't find jQuery nearly as annoying as still seeing floats & clearfixes for layout in 2019 🤦♂️
🙋♂️ Here!
Reason? Just inheriting and maintaining old projects.
me me me.......
JavaScript offers much greater control over my flow, so I don't need jQuery anymore.
Even outside of the infamous frameworks, JS and the tools for it grew so much that its a crime not to use it 😄
I use it for dealing with some specific components, but not a lot.
Most of it in my opinion comes from WordPress since it comes integrated with jQuery.
There hasn't been a single project where I work that jquery hasn't been used in. I get confused glances whenever I say "VueJS"