You might not need jQuery (2014)

Post by fatnoah » Thu, Jan 14, 2021, 3:49 PM UTC

bichiliad wrote: post #10

jamiesonbecker wrote: post #2

It's ironic that there's probably no bigger sales pitch for jQuery than this site. In every single example, the jQuery version is basically one or two lines of code, versus 10-15 lines for the alternative. (and the jQ version seems significantly easier on the eyes as well.) Also, jQuery supports promises and has for quite a while. This page hasn't aged well. I've come full circle and am now using jQuery again.

I think a lot of the initial appeal around jQuery was that it made querying and manipulating the DOM simple. Much of its features have been replaced by broadly-available APIs like Document.querySelector and Element.classList. Loading the entirety of jQuery just to access some of the remaining features just means you're loading JavaScript that you aren't going to use. I miss relying on jQuery because it's familiar and…

Post by hajile » Thu, Jan 14, 2021, 3:55 PM UTC

hu3 wrote: post #199

hajile wrote: post #197

Earlier quoted context omitted.

Sites looking to use jQuery most likely aren't doing much more than a few event handlers and an interactive component here or there. In those cases, I'd argue pReact is superior. It's almost 10x smaller (29kb vs 3.5kb gzipped). It's faster and more structured leading to less maintenance cost and more code reuse. If you use hyperscript, there's also no JSX compilation required.

I'd like to learn about usage of preact with hyperlink or similar. Do you know of a repo I can take a look?

Post by jamiesonbecker » Thu, Jan 14, 2021, 4:07 PM UTC

franciscop wrote: post #78

skynet-9000 wrote: post #74

Earlier quoted context omitted.

Very nice, and great site design too. (BTW, the baggage of supporting old versions of IE was removed when jQuery 2 was launched in 2013. There's now also a "slim" jQuery that removes a few features for a smaller file size.)

Thanks! But jQuery has not really moved over, compare "addClass" in jQuery vs UmbrellaJS: - Umbrella 6 lines (max col 55): https://github.com/franciscop/umbrella/blob/master/src/plugi... - jQuery 35 lines (max col 83): https://github.com/jquery/jquery/blob/master/src/attributes/... Yes I reuse methods there to make my life easier like `.eacharg()`, but jQuery as well with `getClass()`. The difference is that Umbrella…

Post by jamiesonbecker » Thu, Jan 14, 2021, 4:12 PM UTC

ratww wrote: post #151

ryanbrunner wrote: post #143

Earlier quoted context omitted.

Maybe a nit, but these aren't equivalent. The jQuery version will apply it to all elements that match your selector, where the ES6 version will only apply to the first matching element. Equivalent code in ES6 would be (maybe there's a terser way but this is what I'd do at first glance): [...document.querySelectorAll('.className')].forEach(el => el.classList.add('darktheme')); Not a whole lot extra in terms of actual…

You can use forEach without the splat: document.querySelectorAll(".className").forEach(el => el.classList.add('newClass'));

    $(".classname").addClass("darktheme")

Post by unilynx » Thu, Jan 14, 2021, 4:21 PM UTC

Wintamute wrote: post #172

inbx0 wrote: post #118

Earlier quoted context omitted.

Your fetch examples don't reject the promise if the server responds with error status code, like 404, which is probably not what you'd want. You'd need to handle that separately with something like const resp = await fetch('/my-url') if (!resp.ok) throw new Error(await resp.text()) const data = await resp.json() From MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ): > The Promise returned from fetch…

I know this pattern and have used it myself. The problem is though, that generally you should only throw an error when you reach an exception - it's like saying "I don't know what to do next", and you defer that decision up the stack. Is a request that technically succeeds (the response has come back), but has a status code where the server has indicated something didn't work always an _exception_ in your client code…