DEV Community

Discussion on: Last Week I Wrote Some jQuery (and no one fired me 🤓)

Collapse
thumbone profile image
Bernd Wechner • Edited on

For the record, I have no problem with you or anyone using JQuery. It's hellishly popular and the kind of IT snobbishness that looks down on people using stable, mature and widespread technologies rather than the best of the rest if you will, does no-one any service and damages IMHO the reputation of the snobs more than anything ;-).

Frankly the list of alternatives is huge and time consuming to research and there is a large body of developers and always will be who are looking not at the cutting edge but what the popularity of the given tools they choose to use in the wild world out there, inferring from that likely longevity and portability etc.

Collapse
link2twenty profile image
Andrew Bone

Generally if you can do it in jQuery you can do it without any libraries these days. JQuery was great when it pulled the industry forward but vanilla caught up making jQuery slow in comparison. I would never say don't use jQuery you can use React but I would say use vanilla js.

But that's just me

Collapse
thumbone profile image
Bernd Wechner

I agree. And it would be nice to lose JQuery. But for better or for worse, its syntax for finding elements remains terser and nicer that vanilla, and well, its embedded in a lot of contexts. That is, migrating away from it involves refactoring and to be honest is generally on the todo list for the very reason you say, that vanilla JS can do most all of what it offered anyhow. But some of that refactoring requires research and reading too as JQuery did do a few things a little differently to the way ES6 for example panned out.

Thread Thread
link2twenty profile image
Andrew Bone

Aren't $(selector) and document.querySelector(selector) pretty much equivalent?

Thread Thread
thumbone profile image
Bernd Wechner

Yes, albeit a tad more verbose. ;-)

Thread Thread
dekel profile image
Dekel Author

@link2twenty not exactly. Some of the selectors that jQuery support are not standard CSS3 selectors (api.jquery.com/has-selector/ for example).

Thread Thread
paulsmithkc profile image
Paul Smith

querySelector() only finds the first result.

querySelectorAll() finds all results as an array which does not support chaining. Requiring you to introduce nested loops in many cases.

$(selector) finds all results and supports chaining. Which means you can often compress 5-20 lines of vanilla JS, into one line with jQuery.

Thread Thread
link2twenty profile image
Andrew Bone

compress 5-20 lines of vanilla JS, into one line with jQuery.

Though not really because it's calling a whole bunch of other functions just the Dev doesn't see it but the end user feels it.

Thread Thread
paulsmithkc profile image
Paul Smith

Readibility and Performance are tradeoffs. And generally readability is actually more important.

That being said, most of the time the performance differences are under 16ms making them invisible to the user.

Thread Thread
ashleyjsheridan profile image
Ashley Sheridan

Yeah, I agree. While it is fewer lines of JS written by the developer, there's actually a whole lot more being pulled in by the users browser. This has several side effects:

  • Their browser is downloading more data, often considerable more for the average website and use-case (e.g. where it's only used as a DOM selector). This is very noticeable for those on slower or metered connections, which a large portion of the world is on (including many parts of the USA).
  • The browser ends up doing more work to parse that Javascript, which is a blocking call if not set up correctly. This can have a negative impact on the time to first paint depending on what's being done.
  • Because the browser is doing more work parsing and executing the library, it actually uses more battery on devices that have one. This is most noticeable on older devices. There was an interesting study done by Stanford University of which this was a part (mobisocial.stanford.edu/papers/bon... ) which saw a 60% increase in battery consumption on some sites using Jquery.