5 ms·

"Today many web developers consider jQuery to be “legacy software.” With all due respect to this perspective, jQuery is currently used on 75% of all public webs

"Today many web developers consider jQuery to be “legacy software.” With all due respect to this perspective, jQuery is currently used on 75% of all public websites, a number that dwarfs all other JavaScript tools." This argument is that jQuery is still very popular compared to JS frameworks like React, etc. What about vanilla JS? As someone who isn't that experienced with JS, my understanding is that modern vanilla JS is "about as good as" jQuery. i.e. if you don't need much JS these days, just choose vanilla JS.

recursivedoubts 2y ago
That may or may not be the case (see https://youmightnotneedjquery.com/ https://youmightnotneedjquery.com/) but the fact remains that jQuery is used on 75% of all public websites.
- gjsman-1000 2y ago
  Notice how the “modern” is almost always more verbose than JQuery. JQuery might as well be a shorthand JS library.
  - recursivedoubts 2y ago
    it's a good API! and consistent!
  - matharmin 2y ago
    I view JQuery as similar to C in some ways: It's been around forever, it's mature, and it works. It gives a good experience to get something up and running quickly: it's lightweight and simple. But if you're working on bigger projects: It is possible, but have have to be very principled in how you use it, otherwise you're going to end up with either a massive spaghetti codebase and lots of edge cases in your app that breaks. Alternatives like React and Rust may add more complexity upfront, but the improved structure and safety it gives has big benefits in all but the smallest projects.
    - peebeebee 2y ago
      Not so sure about that. You can easily write horrible code in React: Too complex, inefficient, and/or resource-intensive. If you don’t know the tools and have good theoretical programming knowledge, all code will be spaghetti code in the long run.
      - klabb3 2y ago
        I'm no fan of React, but these aren’t equivalent. If you follow the rules, react (or any of its alternatives) will manage stateful changes like adding and removing components and event listeners. JQuery is more similar to doing manual memory management in C. It’s extremely easy to get it wrong and introduce leaks and other non-local errors.
        bdougherty 2y ago
        React is also extremely easy to get it wrong.
        klabb3 2y ago
        Can you give an example? I mean I know you can shoot yourself in the foot with any UI framework, but jQuery has no way of managing state, everything just leaks by default. Unless they’ve added something.
    - The_Colonel 2y ago
      I don't disagree, but this is not relevant for the vanilla JS vs. jQuery discussion, since vanilla JS has exactly the same problems you mention as jQuery.
  - Bengalilol 2y ago
    Have a look at jQuery 'load' : <https://github.com/jquery/jquery/blob/main/src/ajax/load.js https://github.com/jquery/jquery/blob/main/src/ajax/load.js> Then at the vanilla JS 'load' : const response = await fetch('/path/to/template.html'); const body = await response.text(); document.querySelector('#some.selector').innerHTML = body; IDK, all in all it is a proxy functions lib.
- ofrzeta 2y ago
  That might be related to Wordpress including jQuery.
- The_Colonel 2y ago
  That website is (inadverently) one of the most effective marketing campaigns for jQuery. Some of the vanilla JS examples are atrocious. What it doesn't show is that vanilla JS is not chainable (jQuery is).
  - Bengalilol 2y ago
    What do you mean ? let result = " hello jQuery " .trim() .replace("jQuery", "javascript") .toUpperCase(); console.log(result); map, filter, ... let numbers = [1, 2, 3, 4, 5]; let result = numbers .filter(num => num % 2 === 0) .map(num => num * 2) .reduce((sum, num) => sum + num, 0); console.log(result); // 12 Simple string let myStr = "This is a wonderful day."; let reversed = myStr .split("") .reverse() .join(""); console.log(reversed); // ".yad lufrednow a si sihT" DOM elements document.querySelector('#element') .classList.add('active') .classList.remove('hidden'); Using a class class Chainable { constructor(value) { this.value = value; } add(num) { this.value += num; return this; // make it chainable } multiply(num) { this.value *= num; return this; } getValue() { return this.value; } } let result = new Chainable(5) .add(3) .multiply(2) .getValue(); console.log(result); // 16
    - deniz-a 2y ago
      that classlist example won't work: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...
      - Bengalilol 2y ago
        Oops. You are right, I beg your pardon. Here's a working example. HTML <span class="a b c"></span> JS function getClassList(el) { let ele = document.querySelector(el); let list = ele.classList; return { add: function (c) { list.add(c); return this; }, toggle: function (c) { list.toggle(c); return this; }, remove: function (c) { list.remove(c); return this; }, } } getClassList('span').remove('b').add('e').toggle('a'); console.log(document.querySelector('span').classList);
- paxys 2y ago
  Those stats are pretty meaningless. How many of those websites haven't been updated in the last 7 years? Not that there's anything wrong with that, but the decisions they made a decade ago aren't necessarily still the best ones today.
  - EasyMark 2y ago
    How is that meaningless? It seems that web users of the site at least find it acceptable and aren't complaining enough to the site builders that they feel the need to change the website. AKA the website is standing the test of time. That's kind of a huge bonus when it comes to saving money and time to the website maintainers.
    - paxys 2y ago
      The point is that if you were to start building a new website from scratch today, the best tools for you aren't necessarily the most widely used ones. You have the option to start with a clean slate without any baggage. There are no upgrade costs. There are no customers who will get inconvenienced. There is no inertia. You are in a very different position than someone who has a website with millions of lines of jQuery already in use.
      - yellowapple 2y ago
        Even with a clean slate, there's immense value in choosing something that you already know to be a tried-and-true approach - i.e. in choosing "boring" technology¹ instead of trying to be at the cutting edge. Now if exploring the cutting edge is a goal of yours in and of itself, then by all means blow some of those innovation tokens on the new Reactangular.ts hotness. For a lot of projects, though, the goal is to get something out the door as painlessly as possible; jQuery and plain JS have (for better or worse) been the tried-and-true "boring" approaches, and HTMX (from what I can tell) seeks to be the similarly "boring" choice. Obviously right now HTMX ain't the boring choice (because it's still pretty new), but a decade from now it could be. Having used it in a couple pet projects recently, it already does feel pretty boring (especially since it goes hand-in-hand with other boring strategies like "just use SQL" and "just use CGI scripts" / "just use classic MVC frameworks"). ---- ¹ https://mcfunley.com/choose-boring-technology https://mcfunley.com/choose-boring-technology
Klonoar 2y ago
It’s functionally as good as jQuery. However to this day I still find jQuery to be one of the nicest APIs to ever be used on the frontend stack. It is legitimately just more pleasant to write. (Yes yes I am more than aware of how to shim a lot of it for vanilla JS)
Bengalilol 2y ago
"What about vanilla JS?" Vanilla JS, as an experienced dev, is the best thing for now. You can write your proxy functions, and globally you get the control over every little thing.

recursivedoubts 2y ago

That may or may not be the case (see https://youmightnotneedjquery.com/ https://youmightnotneedjquery.com/) but the fact remains that jQuery is used on 75% of all public websites.

gjsman-1000 2y ago
Notice how the “modern” is almost always more verbose than JQuery. JQuery might as well be a shorthand JS library.
- recursivedoubts 2y ago
  it's a good API! and consistent!
- matharmin 2y ago
  I view JQuery as similar to C in some ways: It's been around forever, it's mature, and it works. It gives a good experience to get something up and running quickly: it's lightweight and simple. But if you're working on bigger projects: It is possible, but have have to be very principled in how you use it, otherwise you're going to end up with either a massive spaghetti codebase and lots of edge cases in your app that breaks. Alternatives like React and Rust may add more complexity upfront, but the improved structure and safety it gives has big benefits in all but the smallest projects.
  - peebeebee 2y ago
    Not so sure about that. You can easily write horrible code in React: Too complex, inefficient, and/or resource-intensive. If you don’t know the tools and have good theoretical programming knowledge, all code will be spaghetti code in the long run.
    - klabb3 2y ago
      I'm no fan of React, but these aren’t equivalent. If you follow the rules, react (or any of its alternatives) will manage stateful changes like adding and removing components and event listeners. JQuery is more similar to doing manual memory management in C. It’s extremely easy to get it wrong and introduce leaks and other non-local errors.
      - bdougherty 2y ago
        React is also extremely easy to get it wrong.
        klabb3 2y ago
        Can you give an example? I mean I know you can shoot yourself in the foot with any UI framework, but jQuery has no way of managing state, everything just leaks by default. Unless they’ve added something.
  - The_Colonel 2y ago
    I don't disagree, but this is not relevant for the vanilla JS vs. jQuery discussion, since vanilla JS has exactly the same problems you mention as jQuery.
- Bengalilol 2y ago
  Have a look at jQuery 'load' : <https://github.com/jquery/jquery/blob/main/src/ajax/load.js https://github.com/jquery/jquery/blob/main/src/ajax/load.js> Then at the vanilla JS 'load' : const response = await fetch('/path/to/template.html'); const body = await response.text(); document.querySelector('#some.selector').innerHTML = body; IDK, all in all it is a proxy functions lib.
ofrzeta 2y ago
That might be related to Wordpress including jQuery.
The_Colonel 2y ago
That website is (inadverently) one of the most effective marketing campaigns for jQuery. Some of the vanilla JS examples are atrocious. What it doesn't show is that vanilla JS is not chainable (jQuery is).
- Bengalilol 2y ago
  What do you mean ? let result = " hello jQuery " .trim() .replace("jQuery", "javascript") .toUpperCase(); console.log(result); map, filter, ... let numbers = [1, 2, 3, 4, 5]; let result = numbers .filter(num => num % 2 === 0) .map(num => num * 2) .reduce((sum, num) => sum + num, 0); console.log(result); // 12 Simple string let myStr = "This is a wonderful day."; let reversed = myStr .split("") .reverse() .join(""); console.log(reversed); // ".yad lufrednow a si sihT" DOM elements document.querySelector('#element') .classList.add('active') .classList.remove('hidden'); Using a class class Chainable { constructor(value) { this.value = value; } add(num) { this.value += num; return this; // make it chainable } multiply(num) { this.value *= num; return this; } getValue() { return this.value; } } let result = new Chainable(5) .add(3) .multiply(2) .getValue(); console.log(result); // 16
  - deniz-a 2y ago
    that classlist example won't work: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...
    - Bengalilol 2y ago
      Oops. You are right, I beg your pardon. Here's a working example. HTML <span class="a b c"></span> JS function getClassList(el) { let ele = document.querySelector(el); let list = ele.classList; return { add: function (c) { list.add(c); return this; }, toggle: function (c) { list.toggle(c); return this; }, remove: function (c) { list.remove(c); return this; }, } } getClassList('span').remove('b').add('e').toggle('a'); console.log(document.querySelector('span').classList);
paxys 2y ago
Those stats are pretty meaningless. How many of those websites haven't been updated in the last 7 years? Not that there's anything wrong with that, but the decisions they made a decade ago aren't necessarily still the best ones today.
- EasyMark 2y ago
  How is that meaningless? It seems that web users of the site at least find it acceptable and aren't complaining enough to the site builders that they feel the need to change the website. AKA the website is standing the test of time. That's kind of a huge bonus when it comes to saving money and time to the website maintainers.
  - paxys 2y ago
    The point is that if you were to start building a new website from scratch today, the best tools for you aren't necessarily the most widely used ones. You have the option to start with a clean slate without any baggage. There are no upgrade costs. There are no customers who will get inconvenienced. There is no inertia. You are in a very different position than someone who has a website with millions of lines of jQuery already in use.
    - yellowapple 2y ago
      Even with a clean slate, there's immense value in choosing something that you already know to be a tried-and-true approach - i.e. in choosing "boring" technology¹ instead of trying to be at the cutting edge. Now if exploring the cutting edge is a goal of yours in and of itself, then by all means blow some of those innovation tokens on the new Reactangular.ts hotness. For a lot of projects, though, the goal is to get something out the door as painlessly as possible; jQuery and plain JS have (for better or worse) been the tried-and-true "boring" approaches, and HTMX (from what I can tell) seeks to be the similarly "boring" choice. Obviously right now HTMX ain't the boring choice (because it's still pretty new), but a decade from now it could be. Having used it in a couple pet projects recently, it already does feel pretty boring (especially since it goes hand-in-hand with other boring strategies like "just use SQL" and "just use CGI scripts" / "just use classic MVC frameworks"). ---- ¹ https://mcfunley.com/choose-boring-technology https://mcfunley.com/choose-boring-technology

Klonoar 2y ago

It’s functionally as good as jQuery. However to this day I still find jQuery to be one of the nicest APIs to ever be used on the frontend stack. It is legitimately just more pleasant to write. (Yes yes I am more than aware of how to shim a lot of it for vanilla JS)

Bengalilol 2y ago

"What about vanilla JS?" Vanilla JS, as an experienced dev, is the best thing for now. You can write your proxy functions, and globally you get the control over every little thing.