Hacker News Reader

Comment by simonw | Hacker News Reader

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.

View on HN

> 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/ 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.

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.

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.

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.

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.

Neither Vue nor React are really frameworks, and both can be used with a script tag without a compile step.

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.

Reply on news.ycombinator.com