DEV Community

Cover image for Last Week I Wrote Some jQuery (and no one fired me šŸ¤“)

Last Week I Wrote Some jQuery (and no one fired me šŸ¤“)

Dekel on August 15, 2021

Short disclaimer - Yes. The title of this post is a bit of a clickbait. Not 100%, but you can definitely read it as one. Iā€™m not your standard full...
Collapse
 
thumbone profile image
Bernd Wechner • Edited

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

@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.
Collapse
 
dekel profile image
Dekel

What's your "go-to" when you need to do a quick POC? Do you always start a new project with one of the modern frameworks, or do you go back to jquery from time to time?

Collapse
 
soliloquizin profile image
Cornelia

For me, if I it's too complex to do it quickly/easily with vanilla JS, I usually try and use whatever technology it should be written in later, and if that's not decided/known yet, I'd use svelte.
I like to use the framework it should end up in to increase the chance of discovering unexpected complications that come with a certain framework choice.

It's been so long since I've used any form of jQuery that it would probably take longer using it because I would most likely end up looking everything up again in the documentation. ^^'

Collapse
 
dekel profile image
Dekel

Eventually it's a question of time. If it's a PoC and you just wanna make sure it works - use what ever language/tool/framework/lib that you can in order to finish it and make sure it works as you expect.

Collapse
 
artydev profile image
artydev

:-) There is a whole world between JQuery and Hyped Frameworks.
Look at this one DML the new JQuery :-)

Regards

Collapse
 
dekel profile image
Dekel

Thanks for your reply! I will definitely check it out šŸ˜€.

Collapse
 
bigbott profile image
bigbott

ExtJs. AKA Yahoo UI. It is as far from jQuery as it can be.

Collapse
 
codecustard profile image
Emmanuel Barroga

By POC do you mean proof of concept? Sorry, I'm terrible with acronyms, lol..... but I usually stick it in my "Test" create-react-app generated application.

Collapse
 
tkore profile image
Tal

Indeed, that's what PoC stands for :)

Collapse
 
thexdev profile image
M. Akbar Nugroho

I don't know why some people get mad when ohter people use jQuery today. For me jQuery is just JS with simplified API.

Maybe if jQuery team redesign thier website and add API to manage custom element, it could be a game changer for them :D.

Collapse
 
marzelin profile image
Marc Ziel

The one reason not to use jQuery is that nobody is learning this library anymore so you're creating an outdated code that fewer and fewer people will be able to understand. But if you're the only one that will be ever interacting with the code it's fine.

Collapse
 
dekel profile image
Dekel

Thanks for the vanilla demo! Note that you can drag the circles on any axis, and you can also drag them outside of the container. Yes, it's definitely possible to create the same using vanilla js, but to get the entire functionality you will need to work a bit harder (and jQuery-UI draggable API gives you this out of the box).

Collapse
 
xorock profile image
xorock • Edited

amp.reddit.com/r/ProgrammerHumor/c...
It reminded mi of the Putin meme.
BTW. I still think that event support (including namespaces and delegation) in jquery is one of the best in JS world.

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Lets not forget JQuery-Mobile.

Per their website:

A Touch-Optimized Web Framework

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

As mentioned above the differences between browsers was horrible back when JQuery-Moblile was first developed, and this was there attempt to address the browser/reactivity problems. I used it when it first came out and it was a god send back then, but now there are much better solutions.

I really don't see any sane person starting a new project with this, but it's out there if you so desire.

Happy Coding

Collapse
 
_hs_ profile image
HS

You get a like just for a titlešŸ˜. But honestly my reaction to a title was not a "clickbait" but rather "he probably had a simple task and didn't overengineer it"

Collapse
 
dekel profile image
Dekel

Thanks @greenroommate ! The post in general talks about using whatever tool you (as a developer) have in order to get the work done, and sometimes using a bit "old-dated" framework/language/tool - is good enough (and might be a better choice!).

Collapse
 
abhinav1217 profile image
Abhinav Kulshreshtha

For quick prototyping, Alpine.js is kind of a modern day jquery. I prototype the interactions using alpine, then once the concept is approved, I usually rewrite it using vue.js .

Collapse
 
darkwiiplayer profile image
š’ŽWii šŸ³ļøā€āš§ļø

Not that there's anything wrong with using jQuery for some quick'n'dirty prototype, but why use it at all? This seems like it could easily be achieved with plain JS without that much effort

Collapse
 
dekel profile image
Dekel

A few things that the jQuery-UI gives me out of the box helped me decide to choose that instead of vanilla. Not saying it isn't possible, but much easier and shorter code.

 
bigbott profile image
bigbott

You started with the "Angulars and Reacts are mediocre and bloated".
Don't take it personal. Or you the author of both?

I use the word "opponent" as "someone who represents the side in argument". And it is fine to have argument about tools. You think React is great, I think it is mediocre. It is fine until you make it personal.

The rest of your comment just boring. Good night.

 
bigbott profile image
bigbott

You should reconsider your behavior. First, you put labels, then you make assumptions about your opponent. I am doing software for 17 years already. JFYK.

I don't say that jQuery better for the things that React and Angular do.
I said that jQuery and Svelte are genius, but Angular-React are mediocre.

There is a problem in enterprise software development: on big projects several developers works together and each makes things his own way. jQuery is not a solution for this problem. jQuery is just a library. Small genius library that greatly simplifies writing JavaScript code.

To solve above problem you need a framework. And here you have two options: use mediocre bloated highly opionated framework like Angular or React (if you will tell me that React is a library, i will stop arguing with you) or write your own.

IMHO, writing your own framework is always better. Nobody should use any third party code untill he understands in depth how this code works. This is especially true about frontend frameworks.

About components. The problem with React components that you cannot use them without React. Same with Angular. Same with jQuery plugins, but jQuery is a small library, there are plugins that comparable in size with jQuery core. If you need complicated plugin like Datatables or Select2 you can insert jQuery core in your project just for this plugin. About 20 kb gzipped.

You can create web component (custom HTML tag) using Svelte and use it in any project. There are other libraries that do the, but Svelte the best.

jQuery and Svelte being different tools from different ages have one in common: they make things simpler and they are simple itself.

Collapse
 
lucaoskaique profile image
Lucas KaĆ­que

jQuery is awesome, the company that i work has a BANK as a client and i have to use jQuery everyday in their development environment.

Collapse
 
abbddos profile image
Abdul Rahman Sabbagh

I tried Angular and React, and I hated them both. In fact, I hate all javascript libraries except JQuery. It's understandable, simple to read, write and maintain and I still use it in all my MVC projects.

Collapse
 
dekel profile image
Dekel

Working on large projects - I think the approach of the new frameworks work a bit better. The larger your project is, the more complex it is, and getting into a large & complex jQuery code is (usually) not as easy as getting into a codebase that is written in one of the modern frameworks.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

I still think that jQuery API is superior because your code is smaller and simpler, so you have less bugs.
But if you don't want to use jQuery that is quite big for small projects you can use some smaller alternative like $('cash').

Collapse
 
vladi160 profile image
vladi160

People who think jQuery is bad, often are with no experience/knowledge

Collapse
 
dekel profile image
Dekel

Never tried Alpine. I'll give it a try šŸ˜€ thanks for recommending it!

Collapse
 
dekel profile image
Dekel

Mostly I agree. However - if jQuery saves time and makes your code shorter - my approach is to use whatever you (as a developer) have in your tool-set to help you accomplish your work.

Collapse
 
apatrid profile image
Mijo

Definitely try Alpine.js.
I replaced almost all my jQuery code with Alpine. It's so simple, lightweight, easy to learn, easy to use and in most situations you don't need anything else.

Collapse
 
redeyemedia profile image
RedEyeMediaā­•

Interesting read šŸ‘

Collapse
 
dekel profile image
Dekel

Thanks @redeyemedia !

Collapse
 
code_with_ali profile image
AlixaProDev

hhahah this was fun. thanks for the post.

Collapse
 
dekel profile image
Dekel

Thanks @hazratalibit !

Collapse
 
techmaniacc profile image
Joseph Mania

Thanks lol

Collapse
 
leob profile image
leob

jQuery, yeah why not!

 
paulsmithkc profile image
Paul Smith

Expect some of your readers and users to be on mobile.

And the fix for drag&drop is not as simple as you suggest. It would actually change quite a bit.

Collapse
 
paulsmithkc profile image
Paul Smith • Edited

This doesn't work on touch screens. (mobile)

 
hannanel100 profile image
hannanel100

Who cares about the size? It's just a POC...

 
bigbott profile image
bigbott

Seriously?
jQuery just a library. You can just use any method of it without being forced to use any.
Don't use labels, don't make yourself ridiculous.

Collapse
 
bigbott profile image
bigbott

I don't find them difficult to use. I find them what they are: mediocre, bloated frameworks.