5 ms·

I don't want to be "that guy", but haven't most people moved on to something like Vue instead of manipulating the DOM directly? Every developer I've worked with

I don't want to be "that guy", but haven't most people moved on to something like Vue instead of manipulating the DOM directly? Every developer I've worked with learned the basics of Vue quickly (less than a day) and marveled at how great it was compared to manipulating the DOM through jQuery (or something similar like Umbrella JS). But sure, there are edge cases where jQuery and similar libs still serve a purpose.

simonw 8y ago
Vue and React make sense for large SPA-style applications, but I often find myself wanting to drop a few lines of JavaScript onto a page to implement something simple without pulling in a massive framework dependency that requires a webpack compile step.
- mmargerum 8y ago
  You don’t have to use webpack with vue. Only if you want single file components. You literally just include in script line and you can use vue. No harder than jquery.
- throwawaysky9 8y ago
  jQuery is 84 KB minimized, while Vue is 85 KB. Not much of a difference (although, granted, Umbrella JS is notably smaller). You don't necessarily need Webpack for Vue, you can just include Vue in a script tag and write your code.
  - wild_preference 8y ago
    But it’s also about abstraction overhead. You wouldn’t bring in Vue to add a Select All button that checks a bunch of checkboxes. You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
    - gremlinsinc 8y ago
      You might use VUE for that if you need it to work across pages/tabs and use a state/store like vuex to maintain the state of the checkboxes....or the react equivs...I mean you can use localStorage..but I prefer vuex.
- EB66 8y ago
  > Vue and React make sense for large SPA-style applications Agreed, but I want to point out that modern, large SPA-style app architecture and jQuery are not necessarily mutually exclusive. jQuery might not work with React and Vue, but it can work alongside other frameworks just fine (yep, without manual DOM manipulations). jQuery offers utility beyond ensuring your code runs the same across different browsers. For instance, I've yet to see another `replaceWith` as concise as what jQuery offers or DocumentFragment generation as expressive as this: `$("<div>hello world <span>foo bar</span></div>");` For those two examples, the alternatives listed on http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/ are either very verbose or do not mimic the full functionality offered by jQuery. Where I work we've built an in-house JS framework inspired by React and Vue but that "plays nicely" with our jQuery legacy codebase. The framework evens uses jQuery at it's core for UI state management and DocumentFragment generation. Re-factoring our jQuery legacy code is a breeze when compared with re-writing it to conform to React or Vue standards. We write modular and consistent components with `this.props`-style state management, one-way data binding, and zero manual DOM manipulations while still using jQuery. TLDR: jQuery offers utility beyond manual DOM manipulations and smoothing out browser differences. When used appropriately, it still has a place in modern JS component architecture.
- gremlinsinc 8y ago
  Vue is VERY much an easy drop in for small things..I've totally started replacing it wherever I'd otherwise have used jquery... and I can't say I'm sorry I have. But all my projects use laravel on backend, and laravel has webpack/vue baked in so there's really nothing I need to configure for it to work, too much..a little tweaking in the app.js file..that's all.
- pier25 8y ago
  Neither Vue nor React are really frameworks, and both can be used with a script tag without a compile step.
CM30 8y ago
Not all of them. There are still plenty of sites that aren't SPAs, especially those built with CMS' like WordPress, Drupal and Joomla (or various forums, wikis, etc). In those cases, you don't want to have to redo the whole frontend in React or Vue, you just wanta simple way to manipulate DOM elements for things like a dropdown menu or modal or what not. Something like this may work fine for that purpose. There are still thousands or millions of websites that don't act like an SPA/
- goatlover 8y ago
  > There are still plenty of sites that aren't SPAs, especially those built with CMS' like WordPress, Drupal and Joomla (or various forums, wikis, etc) It's as if those sites don't exist for the HN crowd, even though they make up the majority of the web.
  - Sharlin 8y ago
    Ironically, of course, HN itself is one of them.
waveforms 8y ago
According to this website [1] jQuery is still used by over 70% of websites. I have built production sites in extjs, Dojo, Angular, React etc. but nothing beats the fun of throwing up a quick website in jQuery and Bootstrap. Its even more fun with es6 now! I am looking forward to where jQuery and other DOM manipulation libraries go in the future. [1] https://w3techs.com/technologies/details/js-jquery/all/all https://w3techs.com/technologies/details/js-jquery/all/all
- Secretmapper 8y ago
  Spot on! I'm a ReactJS developer by trade, but when doing side projects, I still use jQuery from time to time, especially if the client is not that state-heavy. I know I can make do with fetch, querySelector/All and the like, but I'd rather take the convenience. Related: https://robots.thoughtbot.com/how-we-replaced-react-with-phoenix https://robots.thoughtbot.com/how-we-replaced-react-with-pho...
  - franciscop 8y ago
    Yep, exactly. I use Umbrella JS (author here!) for most side projects. I only reach for React for SPA and state-heavy projects. These cases with jQuery (or Umbrella JS) is tricky because while you can do it with template strings, you don't get the modularity, build tools and it's difficult to protect against XSS. You have to be very, very careful with .html(...) and only for that reason sometimes React is worth it, specially with SPA. But for small-to-mid sizes projects, Umbrella JS FTW!
    - krishanath 8y ago
      There are tiny alternatives to React that support JSX syntax. This library is better when you want to be "closer to the metal": https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder
  - ttty 8y ago
    It's interesting, I couldn't write jquery website anymore, even if simple, they become more complex so quickly. Add this feature... Sidenote: Anyway in my brain jquery/templates never made sense. I always wanted components, pass some arguments and get the component, self contained.
franciscop 8y ago
For the other points, the other comments are quite spot on. Load speed: Umbrella's 2.5kb loads well under the rule-of-thumb size of a single packet of 14kb [1], so you have to do a single roundtrip for that [2]. In this 3rd party test [3] it takes ~200ms to load the whole Umbrella JS. JQuery weights ~30x more kb, so there are several packets sent, which makes it load in ~2s in the same test. Not to mention parsing and running all that extra JS. Heck, I regularly bundle my whole JS in a single file and thanks to Umbrella JS tiny size the whole thing weights well under 14kb. It loads in a snap. Edit: early send [1] https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tcp-initial-window/ https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tc... [2] Excluding the TLS trip, which is common anyway. [3] https://speakerdeck.com/mattclaffey/using-umbrella-js-for-modern-applications https://speakerdeck.com/mattclaffey/using-umbrella-js-for-mo...
jedisct1 8y ago
Wordpress. Other than that, I don't see any reason to use jQuery (or something similar) in 2018.
ivanhoe 8y ago
it's definitely less used nowadays, partially because vue/react take care about a lot of work themselves, but also partially because virtual DOMs and component scopes make it complicated to work with DOM directly. I often run into little eye-candy things that jQ could take care of efficiently in a few lines of code, but because of everything else you end up building Animation components and HOCs instead that are in the end much more complex...

simonw 8y ago

Vue and React make sense for large SPA-style applications, but I often find myself wanting to drop a few lines of JavaScript onto a page to implement something simple without pulling in a massive framework dependency that requires a webpack compile step.

mmargerum 8y ago
You don’t have to use webpack with vue. Only if you want single file components. You literally just include in script line and you can use vue. No harder than jquery.
throwawaysky9 8y ago
jQuery is 84 KB minimized, while Vue is 85 KB. Not much of a difference (although, granted, Umbrella JS is notably smaller). You don't necessarily need Webpack for Vue, you can just include Vue in a script tag and write your code.
- wild_preference 8y ago
  But it’s also about abstraction overhead. You wouldn’t bring in Vue to add a Select All button that checks a bunch of checkboxes. You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
  - gremlinsinc 8y ago
    You might use VUE for that if you need it to work across pages/tabs and use a state/store like vuex to maintain the state of the checkboxes....or the react equivs...I mean you can use localStorage..but I prefer vuex.
EB66 8y ago
> Vue and React make sense for large SPA-style applications Agreed, but I want to point out that modern, large SPA-style app architecture and jQuery are not necessarily mutually exclusive. jQuery might not work with React and Vue, but it can work alongside other frameworks just fine (yep, without manual DOM manipulations). jQuery offers utility beyond ensuring your code runs the same across different browsers. For instance, I've yet to see another `replaceWith` as concise as what jQuery offers or DocumentFragment generation as expressive as this: `$("<div>hello world <span>foo bar</span></div>");` For those two examples, the alternatives listed on http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/ are either very verbose or do not mimic the full functionality offered by jQuery. Where I work we've built an in-house JS framework inspired by React and Vue but that "plays nicely" with our jQuery legacy codebase. The framework evens uses jQuery at it's core for UI state management and DocumentFragment generation. Re-factoring our jQuery legacy code is a breeze when compared with re-writing it to conform to React or Vue standards. We write modular and consistent components with `this.props`-style state management, one-way data binding, and zero manual DOM manipulations while still using jQuery. TLDR: jQuery offers utility beyond manual DOM manipulations and smoothing out browser differences. When used appropriately, it still has a place in modern JS component architecture.
gremlinsinc 8y ago
Vue is VERY much an easy drop in for small things..I've totally started replacing it wherever I'd otherwise have used jquery... and I can't say I'm sorry I have. But all my projects use laravel on backend, and laravel has webpack/vue baked in so there's really nothing I need to configure for it to work, too much..a little tweaking in the app.js file..that's all.
pier25 8y ago
Neither Vue nor React are really frameworks, and both can be used with a script tag without a compile step.

CM30 8y ago

Not all of them. There are still plenty of sites that aren't SPAs, especially those built with CMS' like WordPress, Drupal and Joomla (or various forums, wikis, etc). In those cases, you don't want to have to redo the whole frontend in React or Vue, you just wanta simple way to manipulate DOM elements for things like a dropdown menu or modal or what not. Something like this may work fine for that purpose. There are still thousands or millions of websites that don't act like an SPA/

goatlover 8y ago
> There are still plenty of sites that aren't SPAs, especially those built with CMS' like WordPress, Drupal and Joomla (or various forums, wikis, etc) It's as if those sites don't exist for the HN crowd, even though they make up the majority of the web.
- Sharlin 8y ago
  Ironically, of course, HN itself is one of them.

waveforms 8y ago

According to this website [1] jQuery is still used by over 70% of websites. I have built production sites in extjs, Dojo, Angular, React etc. but nothing beats the fun of throwing up a quick website in jQuery and Bootstrap. Its even more fun with es6 now! I am looking forward to where jQuery and other DOM manipulation libraries go in the future. [1] https://w3techs.com/technologies/details/js-jquery/all/all https://w3techs.com/technologies/details/js-jquery/all/all

Secretmapper 8y ago
Spot on! I'm a ReactJS developer by trade, but when doing side projects, I still use jQuery from time to time, especially if the client is not that state-heavy. I know I can make do with fetch, querySelector/All and the like, but I'd rather take the convenience. Related: https://robots.thoughtbot.com/how-we-replaced-react-with-phoenix https://robots.thoughtbot.com/how-we-replaced-react-with-pho...
- franciscop 8y ago
  Yep, exactly. I use Umbrella JS (author here!) for most side projects. I only reach for React for SPA and state-heavy projects. These cases with jQuery (or Umbrella JS) is tricky because while you can do it with template strings, you don't get the modularity, build tools and it's difficult to protect against XSS. You have to be very, very careful with .html(...) and only for that reason sometimes React is worth it, specially with SPA. But for small-to-mid sizes projects, Umbrella JS FTW!
  - krishanath 8y ago
    There are tiny alternatives to React that support JSX syntax. This library is better when you want to be "closer to the metal": https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder
- ttty 8y ago
  It's interesting, I couldn't write jquery website anymore, even if simple, they become more complex so quickly. Add this feature... Sidenote: Anyway in my brain jquery/templates never made sense. I always wanted components, pass some arguments and get the component, self contained.

franciscop 8y ago

For the other points, the other comments are quite spot on. Load speed: Umbrella's 2.5kb loads well under the rule-of-thumb size of a single packet of 14kb [1], so you have to do a single roundtrip for that [2]. In this 3rd party test [3] it takes ~200ms to load the whole Umbrella JS. JQuery weights ~30x more kb, so there are several packets sent, which makes it load in ~2s in the same test. Not to mention parsing and running all that extra JS. Heck, I regularly bundle my whole JS in a single file and thanks to Umbrella JS tiny size the whole thing weights well under 14kb. It loads in a snap. Edit: early send [1] https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tcp-initial-window/ https://tylercipriani.com/blog/2016/09/25/the-14kb-in-the-tc... [2] Excluding the TLS trip, which is common anyway. [3] https://speakerdeck.com/mattclaffey/using-umbrella-js-for-modern-applications https://speakerdeck.com/mattclaffey/using-umbrella-js-for-mo...

jedisct1 8y ago

Wordpress. Other than that, I don't see any reason to use jQuery (or something similar) in 2018.

ivanhoe 8y ago

it's definitely less used nowadays, partially because vue/react take care about a lot of work themselves, but also partially because virtual DOMs and component scopes make it complicated to work with DOM directly. I often run into little eye-candy things that jQ could take care of efficiently in a few lines of code, but because of everything else you end up building Animation components and HOCs instead that are in the end much more complex...