HN Explorer

Ask HN: Any Modern Alternative to JQuery?

12 points by mkinom ↗ HN
I'm an experienced Django developer and I am trying build a modern looking website.

I was trying to complete a React course on Udemy but realised that React (Webpack, Redux, Next, Hooks, etc.) may be an overkill and lead to lot of wasted dev time for my usecase. I have used jQuery previously and the application eventually devolved into spaghetti.

Is there anything better than jQuery but not as complex as react and that integrates well with a backend like Django?

25 comments

[ 1.7 ms ] story [ 68.7 ms ] thread
cocktailpeanuts
You don't need jQuery. Every problem jQuery solved has been standardized into native javascript so you can just use Javascript to build web apps.

For example instead of $(".button"), you can do document.querySelector(".button"), and so on.

That said, if you must use a framework and looking for something less complicated than react, look into Vue or Svelte.

meesterdude
> Every problem jQuery solved has been standardized into native javascript

Some problems, sure. Every problem? I think that's a stretch. Jquery still has it's applicability and can in some cases lead to simpler code.

cocktailpeanuts
Like what? The main purpose of jQuery was to have a unified API for dealing with the issue of every browser having their own quirky implementation of the web standard. All of those are gone today and we now have a pretty much standardized Javascript that you can write once and run in any browser.
jraph
I never used jQuery, but it seems that two other problems that is solved and that current browsers largely cover now are:

- easier AJAX requests (fetch does this)

- selecting nodes using CSS-like selectors (querySelector / querySelectorAll)

Hiding elements too: HTML now has the hidden attribute. Maybe manipulating HTML/CSS classes? (classList has everything)

1123581321
That does not solve the problem because jQuery spaghetti comes from developing features. Equivalent native commands must accumulate the same increasing complexity.
sathomasga
A “modern looking” web site doesn’t really need any JavaScript framework or library. What are you looking for that vanilla JavaScript cannot provide?

There are, of course, alternatives to React. Angular, Svelte, and Vue are among the most popular. There are even light weight versions such as Alpine. But it’s hard to make any recommendations without understanding your requirements.

goingtosleep
The main thing that makes me use jQuery is its syntax, saves me a lot of time writing equivalent vanilla js code. The templating is handled by Django so there's little interest in React or Vue.
raghavkukreti
Unless there is code which explicitly needs jQuery, most bindings/helpers are available here: http://youmightnotneedjquery.com/

Since you're building such a website, a common option for you may be to use a lightweight framework like Svelte/Sapper as your client. I've been using this for most projects with a Django backend.

jraph
Svelte is nice, and pages can be rendered server side for the initial rendering, which is nice for progressive enhancement. They have a nice tutorial : https://svelte.dev/tutorial/

I'd consider vanilla JS anyway and switch to a framework if things get too complicated.

edit: one can go a very long way with just HTML/CSS now, and this allows very fast and accessible websites.

mixmastamyk
I want to try this soon:

https://htmx.org/

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~9k min.gz'd), dependency-free, extendable & IE11 compatible

torstenvl
Playing with it now, one annoyance is that it operates on names, not ids. E.g., if you have a

    <div id="statusbox"></div>
You can't set statusbox as the hx-target and expect it to work.
sv0
I'm not sure what kind of issues you've faced with. According to documentation, you can set "#statusbox" as the hx-target and it works.

https://htmx.org/docs/#targets

joshxyz
Imho you just need to get rid of Redux, it's unnecessary complexity for most React apps where hooks + props are already enough to do most of the work.

Also, TailwindCSS is complementary imo.

I think one pro React has is its performance advantage over jquery and handled edge cases. There are some others like Vue or Svelte which could be more performant on other cases but I have bias on React because of its ecosystem, e.g. if I want cute icons I know FontAwesome has its own dedicated react component. Cute charts? Airbnb has visx charting components.

speedgoose
Vanilla JavaScript is what you need today. You can use document.querySelector, Array.prototype.map, fetch, and all browsers have the same behaviour so no need for any library like jQuery anymore.
mekster
Feature parity isn't exactly the reason to drop it....

$ is easier to type than document.querySelector and it absorbs browser differences.

nicbou
You don't download an entire library to save you some keystrokes. Just create your own $ alias if you must.
mekster
It's not just $...

And why not just install jQuery? What's the big deal?

Where can I find the short aliased library? (If it's not there, I guess it's not a popular idea.)

nicbou
jQuery does not really add value in 2020, since browsers (even the ones that are widely phased out) have standardised all of its main features.

In the last 5+ years, I have never found myself missing something from jQuery. Is there something that jQuery does marginally better than vanilla JS in 2020?

> What's the big deal?

Sending unnecessary dependencies over the wire without any justification

ev1
$ is mapped to querySelector and $$ to querySelectorAll in just about every browser, isn't it?

$("#something").innerHTML = "Hi"; is vanilla JS.

ognjenk
If you are not looking forward to mastering a new front end framework, maybe you could try django-unicorn: https://github.com/adamghill/django-unicorn

I haven’t tested it but it looks interesting and might be going in the direction you are looking for.

throwaway189262
You can create a react site in a couple minutes using create-react-app. React has JSX which allows you to do basically everything JQuery could without hacks.

Fetch or one of the wrapper libraries has HTTP covered.

Typescript is great if you want everything to work seamlessly on older browsers while using modern JS.

Yeah it's a lot to learn but once you know it, it's just as efficient as the old "JQuery forests + HTML" and way more maintainable.

I did ASP.NET MVC for years and once I learned React + Angular I never looked back. They work just like the desktop UI libraries of old, which is a good thing.

Django and related "server side" frameworks are functionally obsolete unless you have a very static website that needs perfect SEO (ex blog, news site)

xupybd
Have you thought about using plain typescript? It's a huge win to code organisation.
cmer
I’m against using jQuery as much as the next guy in 2020, but I had to use it recently because I needed JSONP and couldn’t find an easy way to do this without JQ. Did I miss something? (CORS not an option)