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

41–50 of 79 posts

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

#41

Post by wild_preference »

throwawaysky9 wrote: post #11
simonw wrote: post #7

Earlier quoted context omitted.

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.

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.

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

#42

Post by jedisct1 »

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.

Wordpress.

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

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

#43

Post by the_duke »

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

But why do you need jQuery for that? Browser APIs have gotten good enough that jQuery is not really needed anymore, imo.

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

#44

Post by ttty »

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

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.

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

#46

Post by ivanhoe »

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.

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

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

#49

Post by franciscop »

bufferoverflow wrote: post #47

There are established tiny jQuery alternatives: Zepto: https://github.com/madrobby/zepto Cash: https://github.com/kenwheeler/cash How is yours better?

Zepto is intended as a full clone; objectives are quite different from Umbrella, so I don't see an overlap here since size is not such a priority. Using plugins? Zepto. Care about size a lot? Umbrella. Flexible methods? Umbrella.

About Cash, first Umbrella is about 0.5x the size. The version 1.0 of both were released the same year (Umbrella a bit later), so back then it was not established. Then, there are these differences (opinionated ofc):

Better documentation in Umbrella. As an example, let's see the .addClass() in Cash [1] and in Umbrella [2]. Umbrella has many input examples, a lot more flexibility in the arguments (functions, comma-separated, etc), practical explained examples and related methods. This holds true for every single method.

Better testing in Umbrella. Compare Cash tests [3] with Umbrella tests [4]; Cash has 663 LOC of testing while Umbrella has 2234 LOC, a 3.3x improvement. Not only that, but Umbrella has a public testing page so you can test it in any browser you want: https://umbrellajs.com/tests

Cleaner code in Umbrella. If you want to modify any method, it will be self-contained in `src/plugins/NAME/`. In there you will find the relevant documentation displayed from the readme.md, the relevant tests and the actual code. To modify Cash's addClass you'd have to chase down the code [5], the tests [6] and the documentation [1] while in Umbrella you'd only need to go to the plugin folder [7]

More methods in Cash. This is the one I've seen that seems nicer, since it supports many more methods. Still, Umbrella's objectives is to be the minimum useful set. .insert() is enough and there's no need for .insertBefore() IMHO, but that's just different opinions. Some people prefer to have the choice, so this one is for Cash.

Extra useful methods in Umbrella. .handle() is the common pair of .on() + e.preventDefault(). .size() returns an object with the size of the element like { width: 20, height: 20, top: 10, ... }.

Better methods in Umbrella. Examples: .append(), .prepend(), etc will clone events and values (if any) from the DOM. More functions accepted as arguments.

[1] Cash docs: https://github.com/kenwheeler/cash#fnaddclass-

[2] Umbrella docs: https://umbrellajs.com/documentation#addclass

[3] Cash tests: https://github.com/kenwheeler/cash/blob/master/test/index.js

[4] Umbrella tests: https://github.com/franciscop/umbrella/blob/master/docs/test...

[5] Cash addClass code: https://github.com/kenwheeler/cash/tree/master/src/attribute...

[6] Cash addClass tests: https://github.com/kenwheeler/cash/blob/master/test/index.js...

[7] Umbrella addClass folder: https://github.com/franciscop/umbrella/tree/master/src/plugi...

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

#50

Post by franciscop »

hughes wrote: post #48

The fake scrollbar on the documentation page is infuriatingly nonfunctional.

Uh? There is definitely no purposefully fake scrollbar, could you please share a screenshot and/or the device and browser you are using please? Ideally in Github as an issue: https://github.com/franciscop/umbrella/issues/new , but here is fine as well.
Post reply on HN