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-time employee, so it’s gonna be a bit hard to fire me, but I still decided to write some jQuery code, and everyone was happy with it.
So, let’s rewind a bit
I started using jQuery ~15 years ago (around the time it was released). It was the “go-to” for everything you needed to do, and I think it’s safe to assume that almost every website back in the day included the <script src="jquery.js"></script> line in it. It was even before the days of cdnjs (where the standard for using jquery became <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> and all javascript content was served directly from the websites you built without using any cdn).
jQuery was used originally to make it easy for developers to write code that just works. Unlike today, back in the day browsers had different standards and in order for your code to run smoothly (or just work?) on different browsers - there were many things you needed to learn and remember how to do, and some of the standard things that we have today (document.querySelector) weren’t available (or didn’t work as expected). Using jQuery provided a very easy and standard way to access elements (DOM manipulation), work with events and know that everything will work, regardless of the browser your users used to access your website.
jQuery UI
Following the wide usage of jQuery - another lib was released, called jQuery-UI. According to the website:
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
Some of the features that jQuery-UI provides are easy to use APIs for draggable elements, which are super easy and can save us a lot of time if we need to handle everything that is related to drag&drop.
Back To Last Week
So last week I needed to create the following interface:
- A simple page that shows a container (a rectangle with some background image).
- Inside the container we need to display circles (we have a list of the x/y position of each circle).
- Each circle can be dragged, but only on the Y-axis.
- The dragging/dropping can be only inside the container.
- When finished - we need to save (console.log, for now) the new positions of the circles.
Since it was a POC I decided it’s best to do “quick-n-dirty” work with jQuery, which eventually took ~3 hours. The jQuery-UI lib with the draggable API saved me a lot of time, and since it was a POC I didn’t really care if it would be written using some up-to-date framework (react/vue).
One of the nice things about the draggable API of jQuery-UI is that the axis (which gave me a quick solution for the Y-axis only dragging) and the containment (which provides a way to hold the dragged circles inside the container):
$("#container span").draggable({
axis: "y",
containment: "parent",
...
})
The final version also contains an option to upload the image/the dataset (the positions of the circles) and a few more things, but for this post I included this version of the code.
Summary
Working with jQuery might not be the first choice of most people (and probably also not my first choice for most projects), but it really depends on which project you are currently working on. Yes, sometimes it’s better to just write vanilla javascript, and in case you need something that is a bit more than ~20-30-40 lines of code and is more complex - it’s probably better to use one of the standard and up-to-date frameworks, but you shouldn’t be afraid to use everything that you have in your disposable to provide fast solutions.
Thinking about what someone will do with your code is not something you should ignore, but if you work on something that is only a POC and you just need to understand if there is a future for that code and someone will actually use it - before over engineer and start a project that will take a week - it’s ok to do something that is “quick and dirty” just to get a feeling and understand how and what to do from here.
Cover photo by Markus Winkler @ pixabay
Latest comments (51)
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.
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.
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.
I don't find them difficult to use. I find them what they are: mediocre, bloated frameworks.
Who cares about the size? It's just a POC...
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').
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.
This doesn't work on touch screens. (mobile)
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.
People who think jQuery is bad, often are with no experience/knowledge
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.
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.
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).
Some comments may only be visible to logged-in visitors. Sign in to view all comments.