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

Show HN: Umbrella JS, a 2.5kb jQuery alternative

umbrellajs.com

Post reply on HN
Print view View original

11–20 of 79 posts

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#11

Post by throwawaysky9 »

simonw wrote: post #7
throwawaysky9 wrote: post #6

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.

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.

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.

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#12

Post by waveforms »

throwawaysky9 wrote: post #6

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.

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

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#13

Post by Secretmapper »

waveforms wrote: post #12
throwawaysky9 wrote: post #6

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.

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

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

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#14

Post by franciscop »

brennebeck wrote: post #3
franciscop wrote: post #2

I submitted this 3 years back [1] when I was starting. But now I think it's finished and well polished, so I am resubmitting it. I am happy to say that I don't normally find bugs anymore and the bug reports have slowed down while adoption has skyrocketed [2] [3] It follows loosely a subset of jQuery methods, but it adds some others where relevant for common JS patterns (.handle() == .on() + e.preventDefault()) and th…

Looks interesting. How compatible with jquery is it? You say a subset, but is that an exact subset that would pass tests for those methods? Either way, well done!

No, no method would pass all of the tests for said method in jQuery. I believe a part of those tests in jQuery are retroactive to settle the behavior of very edge undocumented cases, which might be different in Umbrella.js.

I did in fact try to improve the size of jQuery, but the tests are too coupled to the internal behavior of the methods, even if undocumented and (potentially) unintended initially. So it was very difficult even to change the most basic things, let alone change the internal structure of the whole method.

With Umbrella JS I'm trying to get to somewhere closer to native Javascript than jQuery. See for instance the arguments of any looping function (follows similar to the native arrays), or how things like .addClass(name) [1] are thin wrappers around .classList.add(name) (but quite more permissive/flexible). So it will follow closer to classList behavior than to whatever is defined in jQuery's tests, which is a win-win IMHO (since it also makes for a much smaller size, compare to jQuery's .addClass(name) [2]).

[1] https://github.com/franciscop/umbrella/blob/master/src/plugi...

[2] https://github.com/jquery/jquery/blob/master/src/attributes/...

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#16

Post by goatlover »

CM30 wrote: post #10
throwawaysky9 wrote: post #6

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.

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 s…

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

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#17

Post by franciscop »

Secretmapper wrote: post #13
waveforms wrote: post #12

Earlier quoted context omitted.

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

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

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!

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#18

Post by anothergoogler »

paradite wrote: post #8

Slightly off topic, but I have this OCD that my brain hurts when I see people use wrong capitalization for products. > It is strongly influenced by jquery... Please use jQuery instead, thank you.

Not only that, a code comment on the homepage refers to "ajax" rather than "AJAX". And would you believe that in the page copy, "JS" isn't in an tag? The nerve of some people!

Re: Show HN: Umbrella JS, a 2.5kb jQuery alternative

#19

Post by franciscop »

throwawaysky9 wrote: post #6

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.

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

[2] Excluding the TLS trip, which is common anyway.

[3] https://speakerdeck.com/mattclaffey/using-umbrella-js-for-mo...

Post reply on HN