Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Replacing jQuery (110kb) With UmbrellaJS (8kb)

bennadel.com

Post reply on HN
Print view View original

41–50 of 55 posts

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#41

Post by kijin »

kabes wrote: post #19
agumonkey wrote: post #17

I wonder if w3c or whatwg guys considered extending dom spec to support the query / navigation / css helpers.

They have to an extent. `querySelector` / `querySelectorAll` is the clearest example, but many API's presented here came after jQuery and were inspired by it: https://youmightnotneedjquery.com/

Yeah, most of the missing features that jQuery used to provide are no longer missing. But the vanilla JS alternatives are so verbose, they look like they were designed by a committee of German philosophers.

Luckily, we now have frameworks that help us avoid most of the DOM manipulation stuff.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#43

Post by whatshisface »

tiffanyh wrote: post #40

Regardless if jQuery or Umbrella is used - you'd most likely get a better Lighthouse score if you simply inlined the JS into your HTML file vs having the JS as another downloadable asset (especially on mobile).

Is that a fair test? Most people have jquery in cache already, or at least that's the idea.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#44

Post by idoubtit »

The post states that going from "34kb compressed" to "about 3kb compressed" is a big change:

> That's a massive savings on size. Of course, there are some sacrifices taken in that reduction.

My experience is that, even with a slow connection and a slow smartphone, removing 30kB of JS would have very little impact. The exact gain is smaller: the size difference of the gzipped-6 stable releases is 27kB.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#45

Post by mrtweetyhack »

franciscop wrote: post #12

I find it funny that I shared this article because I was proud that someone talked about my little library Umbrella JS, and so far 5 out of the 5 top-level comments are people recommending their/other libraries or ways of avoiding jQuery (and not 2 agree with the best way of avoiding jQuery!).

No post body was provided.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#46

Post by ___q »

earthboundkid wrote: post #28
franciscop wrote: post #13

Earlier quoted context omitted.

That's what I did! I saw a lot of people recommending doing basically: const $ = sel => [...document.querySelectorAll(sel)]; But then you get to it and are adding a lot of classes, so you might add a couple of helper methods: const addClass = (col, cls) => col.forEach(el => el.classList.add(cls)); const removeClass = (col, cls) => col.forEach(el => el.classList.remove(cls)); addClass($('ul li'), 'list-item'); Oh and…

Behold my jQuery replacement: export function each(qs, cb) { if (typeof qs === "string") { qs = document.querySelectorAll(qs); } if (!qs) { return; } if (qs.length === undefined) { qs = [qs]; } for (var i = 0; i { el.addEventListener(ev, cb); cancelFns.push(() => { el.removeEventListener(ev, cb); }); }); return () => { cancelFns.forEach((fn) => { fn(); }); }; }

That's much worse than jQuery's implementation, there's no event delegation or namespacing

https://api.jquery.com/on/#event-names

https://api.jquery.com/on/#direct-and-delegated-events

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#48

Post by franciscop »

pbalau wrote: post #34
franciscop wrote: post #12

I find it funny that I shared this article because I was proud that someone talked about my little library Umbrella JS, and so far 5 out of the 5 top-level comments are people recommending their/other libraries or ways of avoiding jQuery (and not 2 agree with the best way of avoiding jQuery!).

Take a look at most "show hn" posts, exactly the same issue. Looks like there is a group of people here that feel the need to self promote at any possible opportunity, from look at me I wrote this to look at me I also know about this. Quite sad.

While I agree that this happens often (I did it very early on!), just posting "try instead X" is fairly pointless and possibly against HN guidelines:

> Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#49

Post by feupan »

fabiospampinato wrote: post #38
nomdep wrote: post #22

Earlier quoted context omitted.

You use this library: https://www.npmjs.com/package/delegated-events

It doesn't support event namespacing.

I haven’t used namespacing in years. The point people are trying to make is that if you do need “advanced jQuery features” maybe you shouldn’t use jQuery. And the basics are also covered by native API, so the same conclusion applies.

I would not start a new project with jQuery nowadays just for that stuff.

The fact that $(s).remove() never throws for example wouldn’t be ok for me anymore, so I’m looking at more cons than pros.

Re: Replacing jQuery (110kb) With UmbrellaJS (8kb)

#50

Post by claviska »

Alex3917 wrote: post #6

So my project for this week has been removing jQuery from my app. I have to say it's been surprisingly easy. The only thing that's been annoying is that jQuery ignores the difference between querySelector and querySelectorAll, and just treats any operation done on a jQuery selection as if it were mapping a function to each item in a list. Which makes it super easy to write, but makes it much more difficult to know wh…

> The only thing that's been annoying is that jQuery ignores the difference between querySelector and querySelectorAll, and just treats any operation done on a jQuery selection as if it were mapping a function to each item in a list. Which makes it super easy to write, but makes it much more difficult to know what's actually happening

Does it though? Even years after moving on from jQuery it’s always very clear when reading old code that all selectors will be matched. There’s less cognitive load knowing you’re querying all matching items by default than mentally parsing the difference between querySelector and querySelectorAll, and also having to spread the result because NodeList doesn’t support array functions.

Post reply on HN