Ask HN: Any Modern Alternative to JQuery?

https://news.ycombinator.com/item?id=25548802

by mkinom • 6 years ago

12 25 6 years ago

news.ycombinator.com

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?

cocktailpeanuts2• 6 years ago

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.

meesterdude2• 6 years ago

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.

cocktailpeanuts2• 6 years ago

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.

1123581321• 6 years ago

That does not solve the problem because jQuery spaghetti comes from developing features. Equivalent native commands must accumulate the same increasing complexity.

sathomasga• 6 years ago

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.

meesterdude2• 6 years ago

Jquery is great for manipulation, and https://stimulus.hotwire.dev/ is a great way of structuring javascript and helps prevent spaghetti of Jquery & JS.

goingtosleep• 6 years ago

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• 6 years ago

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.

jraph2• 6 years ago

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• 6 years ago

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• 6 years ago

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• 6 years ago

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• 6 years ago

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• 6 years ago

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.

mekster2• 6 years ago

Feature parity isn't exactly the reason to drop it....

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

nicbou2• 6 years ago

You don't download an entire library to save you some keystrokes. Just create your own $ alias if you must.

ev1• 6 years ago

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

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

ognjenk• 6 years ago

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• 6 years ago

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• 6 years ago

Have you thought about using plain typescript? It's a huge win to code organisation.

cmer• 6 years ago

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)

the__alchemist• 6 years ago

Check out the MDN web docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Bottom line: Use javascript without a library.

Ask HN: Any Modern Alternative to JQuery?

Related Stories