jQuery v4.0 Beta
blog.jquery.com
blog.jquery.com
Any advances to removing deprecated APIs or functions are great. jQuery will probably be around dominantly on the web for years to come.
People have been in love with the overly complex and fancy javascript frameworks for the last 15 years or so. But jQuery doing dynamic binding to dynamically generated forms for some error states and maybe an ajax calls is literally all the javascript you need in 99% of web pages and the rest is overkill.
The industry is going to move away from the complexities to React and towards more of this simplicity with htmx, phoenix live view, ruby on rails turbo, and yes just jQuery.
It was awesome 15 years ago. Now it's completely outdated. It's very hard to reason about DOM that can be manually changed by any random piece of code. That's why declarative solutions like React/Vue/Svelte are so much better.
I don't mean to be overly snarky here, but as someone who's just totally out of their depth in modern web UI - is that why people like these frameworks? Because they're very easy to reason about? I've generally found them to be mountains and mountains of boilerplate and spaghetti, but I really do not have a wide base of experience to pull from on this topic.
Prior to React (and similar libraries), DOM manipulation was generally done in a mutating, effectful way. With React (and similar), if a thing is behaving strangely, I just need to go to the component that rendered said thing, and I can almost always find the problem.
React complexity is often conflated with things like Next JS or other SPA solutions. React was originally meant to be a library for building small components that you drop into an otherwise static websites. But people usually don't talk about React unless they're talking about whole sites being in React. For that reason, I think its complexity is exaggerated.
More importantly, what the commenter is referring to is the fact that you are encouraged to write Jquery code that can break if you decide to move a div or change a class name. The workflow of CSS selectors is fine for small apps, but can lead to hard to track bugs down the road. It can be avoided if you make a lot of unique IDs. But otherwise you're screwed. There's no scoping. You technically have to read every piece of Jquery code before changing any other code, html, or css, because you could break half the site depending on what people were depending on. There's no IDE support telling you what is selecting what. Events are not colocated on the things they attach to, they could be anywhere.
I can update a React component and be sure that the only places it affects are the places its rendered. And I can get type checking on every input going into a component. That's just way better to me.
I still use JQuery at work, but I usually dread it. And people say JQuery is "smaller" but I would still prefer something like Svelte to Jquery if that's a concern.
I can take or leave Vue, I don't really notice a huge difference between it and other component frameworks.
All my jQuery components were self contained and you just initialized them with $(‘[data-date-picker]’).datePicker(). It is pretty obvious to anyone looking at the code that if you remove “data-date-picker”, it stopped being a date picker.
Personally, I do find their style of modularization abhorrent. As you said, it's full of boilerplate, it's also full of dependencies, and the worst sin in a software architecture: they don't enable you to specify a simple interface between modules. But they do solve the lack of structure you get when all the code talks to each other freely through the DOM.
Give it a shot, it's stupid-easy, and that's not downplaying anything either.
Thankfully it's pretty easy to align a team with a little time and learning what everyone wants.
I think the parents point is that many websites don't need to change all that much DOM manually, automatically, or in any fashion. And I would agree with them, that for when the only 'dynamic' part of your site is one or two simple forms, and maybe a little carousel of images, jQuery may be perfectly awesome.
edit: also its way more lightweight than React/Vue/Svelte i don't necessarily disagree you shouldn't reach for jQuery if you have a dynamic page (something like uhtml+preact signals would be good if you have fair bit of rendering logic going on) but I would say you should totally try seeing how far you can get with jQuery instead of Svelte/React/Vue on simple pages.
jQuery is also pure JS whereas Svelte is Typescript so it may be more difficult to debug/hack if your primarily JS coder.
Guess what? Spooky action at a distance continues with reducers, custom hooks, custom injected contexts, etc, etc.
I’m not saying that it’s good or bad, but maintenance may mean developers who don’t know or care for modern web don’t have to learn something new.
Reasoning about the DOM structure has almost never been an issue in my almost 20 years of professionally doing this junk. The complexity has always been elsewhere.
I spent years maintaining front-end code built by devs who believe their way of doing things was better than what's popular in the industry and I disagree about jQuery entirely.
jQuery is a low level tool and always ends up biting people as the project grows.
jQuery + the DOM are well known frameworks. ;P
Or more specifically: the idea that websites can be built with vanilla HTML, CSS, and _optional_ JS. jQuery embraces progressive enhancement and separation of concerns pattern, which is quite the opposite of how websites are built these days. Web development starts with 10+ React import statements for components, CSS, images, and whatnot. JavaScript is a must, not optional.
That site is the best ad for jQuery I've ever seen. For almost every task it describes, the jQuery code is shorter, cleaner, and more intuitive than the vanilla "modern" JS one.
And that's after almost 20 years, and I don't know how many billions of dollars invested into advancing JavaScript.
export function $(query, root=document) { ... }
jQuery acted as a role model for standard web committees. The argument for querySelector / querySelectorAll calls is literally mimicked from John Resig's groundbreaking API design.
JQUERY:
$(el).toggle();
IE8+:
function toggle(el) {
if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none';
}
}
Gotta love that "modern" triple attribute repetition.You can golf it down a bit:
el.style.display=el.style.display == 'none' ? '' : 'none'; el.style.display = el.style.display ? 'none' : ''
(after toggling we've already obliterated any possible third value for it anyway, doesn't seem significant) $(el).toggle();Edit: https://caniuse.com/?search=classlist.toggle and click Usage Relative.
The `toggle(el)` function only accepts a single element that you've already selected (e.g: via `document.getElementById("foo")`). You'd need to at least add a call to `querySelectorAll(...).foreach(toggle)`, if you wanted to preserve that piece functionality (which you admittedly don't always want).
No, the site's advice is simply more narrow and fine-grained than a blunt 'never use jquery'. From the front page:
> jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application.
> If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement.
This seems eminently reasonable to me. For a website, adding a jquery dependency costs little and you get much nicer, more maintainable code.
But for a library, every transitive dependency introduces the possibility of future version conflicts for applications that depend on it. And at the same time, library code shouldn't need to change and grow nearly as much as application code.
So library authors should strongly consider forsaking mere convenience for the sake of reducing dependency baggage. This isn't even JS-specific advice, it applies to most ecosystems.
Just like leftpad.
If you want Javascript to act as a drop-in replacement for C++ or Java or some other general programming language (which Javascript was never intended to be) don't act as if needing to write libraries to cover that missing functionality is a problem with the language. You're using the wrong tool for the wrong job.
Python has str.ljust [1] (and str.rjust [2]):
> Return the string left justified in a string of length width. Padding is done using the specified fillchar (default is an ASCII space). The original string is returned if width is less than or equal to len(s).
[1] https://docs.python.org/3/library/stdtypes.html#str.ljust
[2] https://docs.python.org/3/library/stdtypes.html#str.rjust
(I was going to joke that TRS-80 BASIC had it circa 1979, but it turns out that it would be a two-step operation: Python’s str.ljust(40) would become LEFT$(STRING$(40, " "),40) .)
For some reason, JQuery is the exception to the general rule of seeing a mature, battle-tested library as a sign of quality.
The point of the last decade and a half of standards work was to eliminate that problem, and it has at least moved it from "core web functionality" to more complicated areas like bluetooth, 3d rendering and audio, which jQuery's goals do not include handling.
Is it urgent to remove jQuery from projects? Not really. And it's good the jQuery team maintain the project for that reason. Certainly some projects have gotten performance gains out of removing it, but part of the work they've done in 3.x and now 4.x is arguably jQuery removing stuff internally and replacing them with the now reliable browser APIs.
But on the other hand, is there a great argument for including jQuery in new projects? This is also a "not really".
Another part was the abysmal API that Javascript (and mostly still today) offers to work with the DOM.
It's a very fine message and the site contents spread it quite well. But if you actually want to use jquery instead of just some function you got from a reference, by all means, use it, it's a very nice library.
yes, we use PHP for this which is much simpler to grasp than JS-SSR
If you just want a few pages, no need for background workers or database migrations, PHP is still the king. You download one of many single-executable LAMP servers, and start writing your index.php. Deploy? Just copy files to server. Zero downtime deploy? Copy files to server and use symlink to atomically switch versions. Dependencies? Composer (package manager) is a single-file script, you can place it wherever. Pain only begins when you want to break away from file-based routing, or need custom .htaccess and nginx.conf, or want to isolate components, or need Redis and cron for background jobs.
On NextJS side, I knew a few people who wanted to start their career with it and the experience wasn't smooth. You install nodejs... but your distribution only ships Node 12, so everything is failing with cryptic errors. You search how to upgrade Node, and get caught in nvm vs n vs asdf flamewars. Once you found a working solution (which probably required you to edit env variables), you run the npm command... and it wants root access? To install packages system-wide? So you google around, find a way to make it use the user home directory. Then you are up and running, you aren't sure what this "React" thing is, but you get stuff done. Time to deploy - and you are told to either learn Docker (and Kubernetes if you want zero downtime), or to use one of few hosting companies with a price markup. Well, at least there is a free tier (for now), so most people choose the latter. Was this a simple start?
Now, when it comes to big apps, I'd very much rather use Nextjs than PHP, it is production-tested, gives you a lot "for free", JS LSP is built-in to VSCode, I already know React and most of JS ecosystem. But if somebody tells me that they just finished learning HTML and vanilla JS, and they want to do something simple server-side, I'm torn on what to recommend nowadays.
Running it on a VPS is a skill on it's own, for both, if users had known to use NVM (which is explained in most top articles in Google) it would have not been a problem and if they don't know they should accept the learning pains of running productions apps (PHP, node or whatever), or otherwise use a managed service such as Vercel.
Upgrading PHP version is even more painful, I've tried to do version updates, and was alway easier just to build a new server. And also requires specific knowledge of apache, or nginx. Let alone deal with server outages, backups, restart, memory issues.
And how to install every version you want NVM, that's on the user if it didn't work. That's not something different then can happen with PHP or other tools as mysql in the LAMP setup.
Rhel 7 is still alive, supports node 8, maybe 12, but nothing higher officially.
It's fairly normal to run some version of `npm run serve` with a filesystem watcher that will hot-reload changes as they occur so that you can see changes every time you hit :w (or CMD+S or whatever saves a file on your filesystem)
That's equally true of PHP.
Moreover, it's equally true that distros aren't always shipping the latest PHP versions, and that there are similar flamewars surrounding phpenv/pvm as there are nvm/asdf. There are options, and people have opinions. The more ensconced one gets in an ecosystem, the more easy it is to know which tools offer which benefits relative to your needs. None of those decisions are easily made when new to an ecosystem -- Elixir is newish and has enough coalescence around most of the mainstream things, but as someone new to it, if I needed to choose between Cowboy and Bandit, I would have quite a bit of learning required upfront.
I upgraded PHP 7.2 to 8.3 for a business client yesterday.
It was a CentOS VM.
It took maybe 5 commands, no server restart involved either.
I could barely bill an hour and that is because I kept tail -f their logs to see if everything went smooth. And it did.
How is that painful?
And your example, codeigniter, is one of the worst examples in PHP.
Not only it is a framework that has minor usage: https://trends.google.com/trends/explore?q=codeigniter,larav...
It is infamous for being hard to upgrade. No responsible PHP developer would start a complex project in it today.
A typical PHP project in the last years use either Laravel or Symfony.
Not to mention PHP has mature tooling to perform automated code upgrade between versions: https://github.com/rectorphp/rector
The project I mentioned was 4 years old and so far no code change was required between PHP 7.2 and PHP 8.3.
And again, my parent was clearly talking about server upgrade: "was alway easier just to build a new server".
And the change I had to do was not even multiple lines, it was a single line in a Dockerfile. I found the Pull Request and it was from 7.4 to 8.3:
Saying Code Igniter is not used in a lot of places because of Google trends is wrong for a lot of reasons, but the biggest of which being your graph shows laravel and codeigniter neck and neck a decade ago. Who cares whether new projects are started in code igniter? PHP is mostly legacy apps, and there are other frameworks with similar nightmare stories.
Again, JS is bad too, but we have to completely rewrite sites due to some PHP framework upgrades because PHP let's people do really dumb ORM templating.
I have no idea what you're referring to with your distinction between tech debt and server upgrades. I'm talking about server upgrades, clearly. I'm just saying if you upgrade PHP on an old project chances are things will break. This happens with Laravel and Slim too.
PHP has nothing to do with ORM problems. Any language allows dumb stuff related to ORM. Those are the libraries rather than the language.
PHP, like any language, has good and bad libraries.
If a project uses a bad solution for ORM, the language is not to blame.
I can do dumb ORM stuff in C#, Java, Rust, C++ and Python.
If a project picked a bad framework 10 years ago and now complains about the language instead of the framework I don't know what to tell you.
The same goes for Node, which doesn't break servers just because you upgrade it. I have updated from 12 to 20 with no problems because of the dependencies.
> Again, JS is bad too, but we have to completely rewrite sites due to some PHP framework upgrades because PHP let's people do really dumb ORM templating.
I even quoted this part specifically in my reply:
> because PHP let's people do really dumb ORM templating.
You might have had a smooth experience, and happy for you. But PHP didn't have, maybe it does now, such a good version manager as NVM.
But yeah we also had once where all the way back where we didn't do it with NVM and that was a pain in the ass.
I just use Docker for both local development and remote deployments, with bind mounts of source code when I'm working the code, sometimes with appropriate remote debugging set up. I don't even care that much about what packages or versions are available on my workstation OS, as long as Docker (or another OCI runtime like Podman) works. Same for external dependencies, like Redis, RabbitMQ, MariaDB/MySQL/PostgreSQL and so on, they can just be throwaway containers, or maybe something more persistent in a cloud deployment.
I can even start with an Alpine/Debian/Ubuntu/whatever base image and install the packages myself in whatever order I want, to use as a base image for all of my apps. And on the server, I can run whatever cluster I want, since Docker Swarm or Nomad will be way easier to use for most use cases than a full distro of Kubernetes (although K3s is fine). That takes care of scheduling, health checks, restarts, resource limits and reservations, storage, networking and a lot of other concerns.
I usually have some sort of a web server as a reverse proxy in front of everything anyways (Apache/Nginx/Caddy/Traefik/...), so it's no big deal to add a bit of configuration. Even on PHP side, setting up PHP-FPM is a few commands and any configuration for either is sufficient with either environment variables, or changing a few files. Maybe a Bash script for an entrypoint that does the setup for every container launch, based on the needed configuration.
As an aside, with Apache you often don't really need to use .htaccess since disabling it and using configuration files under sites-enabled is better for lower IO, much like Nginx, since you don't need to scan every directory to look for the file: https://httpd.apache.org/docs/current/howto/htaccess.html#wh...
Node is fine. I don't even need to use nvm locally, I can just have different base images for containers with different node versions and then easily check how easy it would be to carry all of my software over to something else (by swapping out the base image), without messing around with installing stuff manually. As for installing packages "globally"? Who cares, it's all inside of the container image anyways, so suddenly that distinction doesn't matter in the slightest.
I don't need any external services or PaaS providers, it's just a container that I can run on pretty much any VPS host and horizontally and vertically scale as far as I need. Regardless of whether inside of the container there's JS, PHP, Java, .NET, Ruby, Python or anything else. This is especially nice when I can use Woodpecker CI or Drone CI, or GitLab CI or pretty much anything else and not worry about polluting workspace folders, the builds use containers.
And with modern frameworks and libraries, it's pretty hard to go wrong: Express and Next are okay, Laravel is okay, Spring Boot is okay, ASP.NET is okay, Ruby on Rails is okay, Django is okay, there's a lot of established options out there. Do they have pain points? Sure, but they hardly matter. Docker solved software development for me.
Honestly, just use whatever works for you. jQuery has its place, so does Node and PHP. I think I even have some Perl running somewhere.
Then when you switch to node, or basically any other language, you wonder where your file based logic is, and everything feels annoying and painful.
Do you really need to host your own server to run a single file? Yes, you do with PHP too, but it’s hidden in Apache and php-fpm.
Nowadays the basics are just abstracted away and talking with developers today who might even have never seen the basic version of an on old-school Webserver or a simple HTTP request executed manually via telnet runs sometimes into really weird error and root causes analysis.
So sometimes I wish the younger developers would know a bit more from the old world while the older developers now a bit more of the new world of web technologies (apache and a cgi driven bash script are not always the best solution even if you can squeeze ultimately everything into making even that work depending on your time and sadistic level :-)).
Most of the modern solutions out there have been developed to solve very specific problems for a certain group of people (see the difference between React and Angular in that regard) and not always the solution everyone seems to use is the best for your problem, team and business.
I build plenty of CSS only sites without any JS just fine. I avoid using it as much as I can and generally only need it for forms or galleries, occasionally some ajax stuff.
But it's seldom required.
It just seems like good practice. I want my sites to be as fast, minimal, compatible and as usable as possible, while still looking and feeling modern.
Have a page with some tables? A few lines of jQuery and you have search sorting etc. It can be customized but defaults are fine.
This is how abstractions and progressive enhancement should be done.
For every unicorn saas webapp $300k a year developers are writing there’s a thousand small pages. If you’re building a house you aren’t going to use a Swiss Army knife, but if you’re camping out for a couple of days you aren’t going to take a van full of power tools.
Though both do what I typically need them to do, customising datatables.net takes me a bit more time though
Do you have an example of that?
Since JavaScript never actually requires line breaks, yes.
Otherwise, absolutely not. Modern web APIs remain highly statements-based, with little affordance for pipelining / cascading.
Also, honestly, I really just don't know what's the "correct" way to do things in 2024 on frontend, and I don't know where to even look for a guide, if I don't really want to spend next 6 months entirely in the pursuit of attaining "real" frontend-dev proficiency, but ultimately just to make working stuff, even if it doesn't quite follow the v2024 web-etiquette.
Someone said of a profitable app/site I created with vanilla JS, "But this is looks like it is just a Bootstrap site"
At this point, functionality be damned, customers expect a loading spinner. The norm is something that doesn't load on the first request. Sites don't paint the screen until 10 seconds later, because they are avoiding repaints. Maybe 10-20mb of JS is included in the typical app in this niche. Many totally fail on Firefox. Ambiguous user facing errors on a black screen, "An application client side error occurred" are par for the course.
People have been building websites (even SPAs) before the 2010s and they didn't "need" these frameworks.
Given what we know today, I'll grant you that in some cases people would want to use a framework, but it's hardly a necessity unless the context provides more specific requirements.
Please excuse any typos, written on the phone
No one is arguing that complex web applications don’t benefit from React and friends. It’s completely overkill for most of the web.
any website that has any sort of meaningful functionality and communication with a server is mostly likely using some sort of framework.
"Be kind. Don't be snarky. Converse curiously; don't cross-examine. Edit out swipes."
React tries to achieve the same result, but if you don't use it perfectly right, you're in for hours and hours of headaches and non-solutions.
Honestly at the end of the day they both get the job done, but for me personally working in JSX is just so easy to pickup and use, and while it's not perfect, I do prefer it over having to learn yet another library specific templating kinda-sorta language.
That's not what vue templates are. It's three or four different templating DSLs in one.
v-for alone will show that it's not HTML with Javascript: https://news.ycombinator.com/item?id=28059397
And there's more: https://news.ycombinator.com/item?id=19199423
The pattern is very obvious?
If array: (value, index)=>void
If object: (value, key, index)=>void
If it's an array, it's the call signature for the args of the forEach method, i.e. (value, index)=>void, but can be assigned a function that's just (value)=>void if index is unneeded. If it's an object, it's an extension of the same logic with (value, key, index).
It's not 4 dsls in one, anymore than jsx is a 1000 markups in one.
It's not
> It's not 4 dsls in one, anymore than jsx
I "like" that when discussing these things everyone completely ignores everything, and focuses on one specific thing.
So, again. The claim was that Vue templates is "HTML + Javascript"
1. As v-for clearly shows it's not even close to Javascript, as there are no Javascript constructs that correspond to this
2. As everything else, not just v-for shows, it's neither HTML (so many custom attributes with extensions and shorcuts etc.) nor Javascript.
Do we need to get into underscore etc?
Dojo put the fear (respectful) and fear (scared) of big, enterprise frontend development in me.
If I ever decide to retire from latest and greatest hype cycle big tech startup world, I’ll go build Wordpress sites for honest coin and wrap up every day by 3pm.
Maybe on meeting 27 they will put the damn thing on and save themselves the headache of getting out of RBLs.
If theres one thing WP developers cant write its contact forms! :)
P.S. Wordpress is fine in general.
While I do a lot of effort to stay off jQuery these days, every time I have a library that ends up using jQuery its always intuitive to use.
We have stuff like querySelector and toggle in vanilla JS that makes it possible to change state simply, async stuff is much easier to understand than callbacks, and there are ways to split your code into components without using shadow or virtual DOM (see: raw web components, shadowdomless Lit, Svelte, etc). I've never found myself longing for something like jQuery.
The thing is for a certain time, jQuery was almost seen as inseparable from JS itself. Like the Python standard library is to Python. You can still find StackOverflow questions today asking to do something in JS and the answer is jQuery, and not just "here's how to do it in jQuery", just "here's what you asked for". That means it certainly got used in a lot of places where it wasn't really necessary.
The backlash against it, though, is just your typical pendulum swing that seems so much an unfortunate part of human nature. It's like when CSS was in and table-based layouts were out. I saw developers trying to use CSS to render tables. Nuance is hard and people can't help going to extremes. jQuery is probably still a really useful tool. I've seen some jQuery expressions that are far more elegant and beautiful then a plain JS equivalent. Whether this matters for any particular project is completely up to you. I don't like the way it encourages tons of ad hoc JS snippets all over the place, but that's a fault of developers, not jQuery.
Why still? WordPress, like jQuery, is awesome. It's an incredibly powerful and easy open source CMS. I hope it takes more of the Web.
And if you're gonna defend the decentralization of the Web (and I do), it's hard to find a better argument than “just buy a domain and install WordPress”.
We’ve built sites for a very large social media company where everything had to be audited before production including third party plugins. WP VIP has a list of plugins they’ve vetted and/or applied their own patches to secure.
Rock solid? I don't really trust the codebase at all, and generally you need at least some plugins.
[Just for example, my base component class listens for a particular custom resize event dispatched from the screen that contains it, which only dispatches to components on screens that don't scroll and need to reformat their contents. The screen class listens for window.resize but only dispatches if it's in trouble with the layout. Putting individual DOM resize listeners to window on each and every component would be insane.]
document.querySelector('#something').dispatchEvent(
new CustomEvent('myCustomEvent', {...options})
);
and document.querySelector('#something-else').addEventListener('myCustomEvent', () => {...});
You don't even need CustomEvents if you don't need to carry extra data with the event. You can just do new Event('myCustomEvent')
and dispatch it.For triggering 'click' events and such, you can create and dispatch native events, as described here [1].
More verbose than jquery, like most native DOM APIs, but works well.
If you're not dealing with a DOM element and just need to dispatch/listen from a class, try out EventTarget [2]?
Your class can inherit from EventTarget, and it gets dispatchEvent and addEventListener, just like a DOM element and you can use any of the above things with it:
class Test extends EventTarget {
...
}
let foo = new Test();
foo.dispatchEvent(...);
[1] https://developer.mozilla.org/en-US/docs/Web/Events/Creating...[2] https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
A rewrite in a modern JS framework is just not going to happen unless it becomes absolutely necessary. Much of this code is extremely client-specific stuff written over a decade ago. The argument that using a modern framework helps recruiting doesn't work - the company only pays $75-90k for frontend engineers and has very low turnover, most current engineers have been there 5+ years. And most importantly, their current stack works just fine; they have a bunch of long-time clients who are happy.
A good chunk of software engineering happens in "boring" businesses like this in cities with a much lower cost-of-living than the big tech industry hubs like the Bay Area / Seattle / etc.
Not broke? Don't fix!
if something is used, it has value. it's not deprecated.
It would be around for long is nice, but you can't make a career using it these days.
jquery, perl just some of those insanely useful tools which get the work done, but they don't pay you well these days.
For work that needs a little enhancement on top of server-side HTML, but not a full-blown JS UI framework, jQuery is a small price to pay for a stable, reliable, and cross-browser compatible dependency.
There's a large proportion of posters on HN who spend their days building web apps. They are very likely to stick to using what they know, even when building web sites.
If you spend your days working as a welder, and suddenly need to build a box for some reason, you're probably not going to be breaking out the fine wood joinery tools. You're probably going to take some sheet steel and weld up a box and move on to whatever else you have to do.
It's not a problem, it's not a fault, it just how things are.
Not the GP, but that's why, when applicable, I try to prefix my replies with a variant of "I agree, and btw..."
Users do notice the difference is large JS framework driven applications.
Yes, the vanilla selectors are more verbose, but any half decent code editor will make them just as fast to type. I don't mean to be penantic, but I don't really understand why so many people still use jQuery at all.
You'll likely be adding 6-700KB of React and its ilk anyway (I see it in every project now).
With jQuery it feels like a lot of functionality is hidden away, which can lead to unexpected situations that are harder to debug.
In my experience writing vanilla code takes less time, not more, because I have a better grip on what is happening.
And what are we saving by eschewing it and going vanilla? One little 30kb-gzipped javascript file - smaller than most jpegs. I agree for super simple tasks it might be best to skip it.
The DOM API is a sloppy and hastily-designed pile of crap from the OOP era that we're unfortunately stuck with for legacy reasons. jQuery shows what it could have been.
wat
DOM APIs have been, and still are, 90s-era OOP style with zero attempt at being functional, declarative, or composable.
Even the newly developed API are usually stuck in the same mindset (see everything developed for web components)
(Almost) none of the DOM APIs are functional. They are literally `object.methodCall()`
DOM APIs are the embodiment of 90s-era OOP. There's literally nothing functional about them. All [1] "functions" are methods defined on very specific objects. You can't even get a proper reference to them without binding them to specific object instances
What exactly is functional about this?
const newDiv = document.createElement("div");
const newContent = document.createTextNode("Hello, world");
newDiv.appendChild(newContent);
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
Okay, here's an easier question. What will happen here, and why? const function_reference = document.getElementById;
function_reference("#id");
[1] Technically speaking, not all all. The more recent `fetch` is probably the only piece of browser APIs that can be called functional for some very limited definition of functionalMost (all?) other "global" functions are defined on the instance of the window object: getComputedStyle, getSelection etc.
A series of function calls that each do something and each returns a value.
> Okay, here's an easier question. What will happen here, and why?
A function call that does something and returns a value, because in this language complex types are passed by reference.
Doesn't make it functional
> A function call that does something and returns a value,
Ah, so you don't know.
Here's what will actually happen:
TypeError: Can only call Document.getElementById on instances of Document
Because it's a method on an object. And you have to bind that method to a specific object instance before you can call it.If it was functional this would never be the case. But since this is 90s-era OOP, you have to do this:
const function_reference = document.getElementById.bind(document);
function_reference("#id");This is not what functional programming is. Functional programming is a completely different paradigm for writing code, and it _is_ declarative by definition. The Wikipedia definition is pretty decent:
Functional programming is a programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that map values to other values, rather than a sequence of imperative statements which update the running state of the program.
The "Comparison to imperative programming" section[1] offers a decent example of the paradigm, but DOM manipulation in JavaScript is pretty much as imperative as it gets. Having functions is necessary, but not sufficient, for functional programming.[1]: https://en.wikipedia.org/wiki/Functional_programming#Compari...
Functional programming uses stateless, immutable transformations to contorl data flow. The second you instantiate an object with some internal properties that change in memory, you are no longer programming functionally
Ends up eliminating 50-60% of the code, and the time for writing and reading it.
As for jquery I haven’t needed it much since stimulusjs but loved it whenever I used it.
You can modify the code to set the display property as inline-block, but now you need a different show function for every possible display value you want to restore. Or you need to build a layer of state to remember what the original value was and hey you've rewritten the jquery version.
And this is all ignoring that the jquery versions just look so much simpler to remember and are cleaner to read.
```css .hide { display: none important!; } ```
```js function hide(el) { el.classList.add('hide'); } ```
The great things about these plugins is that you can strip them down to what you need and patch them yourself (remember lib or vendor directory). NPM and build tools make this a chore.
It could be argued that avoiding unnecessary work is my main job function. It's a lot more efficient to just get something that already does what I need, without requiring patches. In my experience leaving the jQuery ecosystem made this a lot easier.
Because it has a beautifully designed API. I don't directly use jQuery usually anymore. But I use the API in a basic DOM wrapper I've written. https://gist.github.com/pseudosavant/b86eedd9960ade958d49447...
I'm convinced this site is actually satire and it designed to promote jQuery. In nearly every example, the native version is far more verbose.
These days I find vanilla far easier to read and it is a lot more clear to me what is actually happening in the code.
Depending on jQuery limits your ability to work with code that does not use it. Ie a lot of the more professional libraries.
For me dropping jQuery feels like a step up. Why don't you just try it, see what happens. It's just a day of being a little bit annoyed and then you should be fine.
jQuery might be a crutch, sure, but I'm not sure crutches are a bad thing. There's no reason to make something harder than it has to be. I just like how some things take far fewer key stroke and are less verbose, but still readable.
Readability is subjective. There are people that think Perl is fine and I think it ranks as one of the least readable languages to ever reach popular status. Meanwhile, I think Python is the most readable language to have ever been created, and somehow some people struggle with it, and tbh it kind of blows my mind.
proceeds to name selection and native functions
no need for build tools and all headache. (i know you do that with react but its not comparable features).
for a small project those efficiencies wont make a difference on my $20 godaddy hosting account.
i dont want some tool or process getting in my way. if i have a problem then i will look for a solution.
I do like SPA also, but some of the nicest projects I've worked with could be run locally by launching `python3 -m http.server 8008' on the right folder.
I'm happier when I can do something without a processing step, or the need for a package.json. Need a third-party script? Vendor it, and never have to worry about supply-chain attacks.
Yea same, I am actively trying to get rid of jQuery, but my guess would be people get used to working with a tool and there just isn't enough desire or a business case to get rid of it as it would require a rewrite.
I would say that I doubt new projects are starting with jQuery but I know there are devs out there that know the jQuery way better than the vanilla javascript way to get things done.
And if you’re forced to leave 3.x over security or something (may happen in the future) then why not just move off then?
For their customers and users, it makes no difference.
https://survey.stackoverflow.co/2023/#section-most-popular-t...
I have used straight native JS on a couple of smaller personal projects just to get some familiarity with it. However, it's just muscle memory type of getting stuff done with $.ajax() for me.
Also, maybe 20 people use any of the code I write for manipulating DOM. I'm not a UI person. I'm a back end person that has to write front end stuff because nobody else does it.
i've spent years getting away from procedural, and switching to functions, classes/methods. now, we want to get away from that and go back to procedural?
that's all fine and dandy, but you're trying to have a new trick conversation with an old dog that just doesn't care. you're bringing some sort of logic to a conversation where it's not needed. it works for me. i don't get paid to make UI apps or write heavy code nonsense with server side JS. i use a proper back end language. JS can stay in the browser and manipulate the DOM thank you very much. i get paid to make heavy processing code that sometimes is helpful to have UI dashboards.
i can whip up a JQuery front end faster for my needs than most can even figure out what NPM librar[y|ies] they need to use
the point of await/async is you break down the callback nesting into a single set of procedural code. it doesn't mean all your code is procedural. just that what used to have to be a series of indented anonymous functions or spread all over the place named functions can now be an easy to read concise few lines of code all at the same indentation in a single spot. its an obvious net-win for readability and code maintainability. you are doing yourself no favors by not understanding/embracing it.
AFAIK, we are all still programming browser UI with Javascript. It is an imperative language, about as stateful as you can get.
Now, if you managed to do your frontends with Haskell or Prolog, I'd be interested on learning how.
await $.post({
url: '/my/url',
data: data
}).then(() => {});
VANILLA: await fetch('/my/url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(() => {});
I know which one I still prefer.Of course if you load a bunch of code beforehand your code will be marginally better.
The fact is that you probably don’t need to send JSON anymore because fetch accepts the whole form as an object:
await fetch('/my/url', {
method: 'POST',
body: new FormData(form)
})That's exactly the point though. We use jQuery because it has an incredible easy and consistent interface that makes writing for the web so much more enjoyable. Selectors, events, chaining,... are all just nicer to work with than the vanilla counterparts. Same goes for all libraries and frameworks. :)
BTW: Your example is sending a "multipart/form-data". Not all API's will understand this, and will need JSON anyway.
Who’s talking about APIs? Most jQuery users I know just use jQuery to submit forms and load some JSON, both of which are covered by fetch without altering the headers manually.
What I’m saying is that it’s not fair to judge a tool for something you don’t have to do with it, namely sending JSON for everything. Fetch also supports native binary uploads, whereas most people base64 data when using $.ajax
> makes writing for the web so much more enjoyable
Writing? I agree. Actually making it work? No way. $('forn').hide() doesn’t work, but the browser will never tell you why (hint: wrong selector).
jQuery errors are often silent, and that’s good enough reason to abandon it.
$.ajax() returns a promise. If you're calling .done() / .error() on it to handle the results -- well, that's exactly how you work with promises.
.ajax({
success:function(result),
error:function(xhr),
}
vsfetch().then((e)=>function()) is even close to being the same, then we're just not even talking the same language
const response = await fetch(...)
Bam, now you have the response without needing callbacks.
response.ok; // false
response.status; // 404
Um, okay, I get it. So to get the text content of the response, I just need to do response.text, right? No, you dummy, that's a function! You need to call response.text(), duh. It's so funny how an entire generation of front-end engineers just accepted this slop as acceptable API design. You can't fix the past, but thank God for (oh the irony) Microsoft and TypeScript.Fetch returning null on a network error just seems the worst possible design, as you don't get any information about why it failed. Raising an error or rejecting the promise seems an appropriate choice for fetch. It failed to reach any server, so it cannot produce a Response object -- but it can raise an error with failure details.
Boom, same syntax if that's what you prefer.
J/K, the error status handling is not the same and the auto-deserialization isn't present. Not hard to add but it's harder to argue not to use a lib instead of copy-pasting 114 lines of niceties into each project.
You mean like response.json()?
Off the top of my head I'm thinking of complex boring stuff like WCAG-compliant carousels or whatever. The kind of libraries people tend to reach for because marketing wanted them, but are otherwise ignored.
But I also know that a lot of the "low-cost" agencies are still using it. Probably because de the devs are used to using and don't want to bother to (re)learn things.
At least in my country, a lot of website are still using it (and very old, outdated versions at that).
So, whenever reasonable, I prefer to just add jQuery. Maybe there's something better, but the differences/improvements of what I've seen doesn't seem that great and jQuery works, so that's the point? I guess the younger kids never used it, but it's easy enough to pick up if you know standard JS.
I'm also in that camp and still use jQuery.
My current SaaS is an extension that doesn't have much UI code https://www.snipcss.com, and my next SaaS will be a chatgpt powered web automation extension that has a good amount of UI. Both use jQuery.
Edit: I didn't say why I don't just use vanilla with querySelectorAll - majn reasons are I like how I can attach events (attaching to parent while targeting dynamically added subelements), chaining functions, and it's just less code than vanilla
Greenfield projects might not be using Jquery, but is anyone actually using those? ;)
* Animations, tweens, timelines use pure CSS, instead of jQuery's custom system.
* Use one element or lists transparently.
* Inline <script> Locality of Behavior. No more inventing unique "one time" names.
* Vanilla first. Zero dependencies. 1 file. Under 340 lines.
https://github.com/gnat/surrealThat said, it's fantastic to see 4.0 here, and I'll certainly be upgrading my many sites that use it!
Do you have an article/screencast on how the locality of behavior is implemented in both surreal and its companion project css-scope-inline? I'd love to understand it so I can maintain it longterm and add it to my own projects.
I'd love to talk with you about your philosophy of the web. I think we could sync up about some things!
Have you heard of Zepto? https://zeptojs.com
However, I guess I was thinking something a bit more modern -- adding more advanced functionality than what jQuery has. Like more array methods for elements (e.g. `pluck` elements based on property values), reactive data stores/templating, a mutation observer helper.
His argument was that the size of minified library(40kb) would add too much overhead to the loading time of the page.
He then, promptly spent a full week trying to code an ajax call and testing its support on different browsers and ultimately failed to make it work on Internet explorer 5.
jQuery solves many headaches back then, and yes he finally added the library to the project.
In general the DOM API offends pretty much every single of my sensibilities on how to design good APIs. I also have some gripes with the jQuery API, but it's a lot better. jQuery just reads and writes so much more fluently.
If only 20 internals are ever going to see it, jquery is as light as can be, can be loaded right from a CDN, needs no kind of transpilation and handles basically all you need.
> CDN
There’s a sysadmin just got called in for a security incident. Best to include it as a vendor library.
So I am super glad to read that jquery continues to be so relevant even now. And am glad my cofounder and CTO always continued to back this rather than looked at moving the stack.
I’m waiting for the HTMX hype train to meet reality too. Programming your app in pseudo attributes with a DSL is going to wear thin quickly.
SPA with real time updates, complex layouts to be mobile-friendly, real-time updates of many components, endless scrolling and PWA features would be a total PITA. Yes, I don't disagree.
The vast majority of web apps I have seen so far don't need to be like that.
Anybody remembers DataTables https://datatables.net or X-editable https://vitalets.github.io/x-editable/ ?
Now I mainly use AJQuery: https://github.com/coolaj86/ajquery.js/blob/main/ajquery.js
These days, we have better options for building complex web apps, including much-improved native APIs. I don't think I've started a new project using jQuery in 10 years. But for maintainin a lightweight website that just needs a little bit of interaction or pizzazz, I still think jQuery is perfectly fine.
I built a small convenience library around fetch to make it super easy to use ajax like in jQuery. Also built a small utility library around ES6 methods that recreate jQuery methods. It doesn't take much to get back the convenience of jQuery but still use all the new tools.
I love jQuery and used it for years. But there are better tools now.
https://github.com/jquery/jquery/blob/bf48c21d225c31f0f9b544...
And I encourage most projects that use a lot of jQuery to consider using jQuery's CDN version as there is like a 50%+ chance the person already has it cached on their system.
https://www.stefanjudis.com/notes/say-goodbye-to-resource-ca...
Or you can just load one on top of the other. It will be ok
However the jQuery 4 announcement page linked to this jQuery migration plugin that I was unaware of. Perhaps it can help in some old projects.
"No jQuery" is one of its main features
“A healthy disdain for jQuery”
This changes nothing.
When I see too much emotion in engineering job posts I take it as a sign that the team is more likely to be cult driven and less likely to reasonably discuss tools in terms of trade-offs.
I passed on the company
I prefer native JS but something can be well designed in jQuery.